84 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Plaintext
		
	
	
			
		
		
	
	
			84 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Plaintext
		
	
	
| <template>
 | |
|   <div class="payment-settings">
 | |
|     <el-tabs v-model="activeTab" @tab-click="clickTab">
 | |
|       <el-tab-pane label="Rates" name="Rates" style="overflow-y: auto;">
 | |
|         <rank-based-rates v-if="load.Rates" />
 | |
|         <volume-reward v-if="load.Rates" />
 | |
|       </el-tab-pane>
 | |
|       <el-tab-pane label="Reviewers Data" name="ReviewersData">
 | |
|         <reviewers-data v-if="load.ReviewersData" />
 | |
|       </el-tab-pane>
 | |
|       <el-tab-pane label="Trials Data" name="TrialsData">
 | |
|         <trials-data v-if="load.TrialsData" />
 | |
|       </el-tab-pane>
 | |
|       <el-tab-pane label="Exchange Rate" name="ExchangeRate">
 | |
|         <exchange-rate v-if="load.ExchangeRate" />
 | |
|       </el-tab-pane>
 | |
|     </el-tabs>
 | |
|   </div>
 | |
| </template>
 | |
| <script>
 | |
| import RankBasedRates from './components/RankBasedRates'
 | |
| import VolumeReward from './components/VolumeReward'
 | |
| import ReviewersData from './components/ReviewersData'
 | |
| import TrialsData from './components/TrialsData'
 | |
| import ExchangeRate from './components/ExchangeRate'
 | |
| 
 | |
| export default {
 | |
|   name: 'Payment',
 | |
|   components: { RankBasedRates, VolumeReward, ReviewersData, TrialsData, ExchangeRate },
 | |
|   data() {
 | |
|     return {
 | |
|       activeTab: 'Rates',
 | |
|       load: {
 | |
|         Rates: true,
 | |
|         ReviewersData: false,
 | |
|         TrialsData: false,
 | |
|         ExchangeRate: false
 | |
|       }
 | |
|     }
 | |
|   },
 | |
|   computed: {},
 | |
|   created() {
 | |
|     if (this.$route.query.activeIndex) {
 | |
|       this.activeTab = this.$route.query.activeIndex
 | |
|     }
 | |
|   },
 | |
| 
 | |
|   methods: {
 | |
|     clickTab(tab, event) {
 | |
|       if (this.load[tab.name] === false) {
 | |
|         this.load = {
 | |
|           Rates: false,
 | |
|           ReviewersData: false,
 | |
|           TrialsData: false,
 | |
|           ExchangeRate: false
 | |
|         }
 | |
|         this.load[tab.name] = true
 | |
|       }
 | |
|     }
 | |
|   }
 | |
| }
 | |
| </script>
 | |
| <style lang="scss">
 | |
| .payment-settings{
 | |
|   padding: 10px;
 | |
|   position: relative;
 | |
|   height: 100%;
 | |
|   .el-tabs{
 | |
|       height: 100%;
 | |
|       display: flex;
 | |
|       flex-direction: column;
 | |
|       .el-tabs__header {
 | |
|         height: 40px;
 | |
|       }
 | |
|       .el-tabs__content{
 | |
|        flex: 1;
 | |
|         .el-tab-pane{
 | |
|           height: 100%;
 | |
|         }
 | |
|       }
 | |
|     }
 | |
| }
 | |
| </style>
 |