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>
 |