irc_web/.svn/pristine/70/70d4f3a3069ec3abed27ff4f78f...

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>