<template>
|
<div class="pb-120 assetsCenter">
|
<div class="flex justify-between px-52 pt-31 box-border">
|
<div class="flex-1 items-center text-center textColor1" v-for="(item, index) in typeList " :key="'type' + index"
|
@click="onTabs(index)">
|
<div class="font-32 text-center lh-53">{{ item.type }}</div>
|
</div>
|
</div>
|
<div class="flex mx-52 mt-17">
|
<span class="flex-1 border-b-color " :class="{ active_color: tab === 0 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 1 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 2 }"></span>
|
<span class="flex-1 border-b-color" :class="{ active_color: tab === 3 }"></span>
|
</div>
|
<over-view v-if="tab === 0" :funds="funds" :key="tab"></over-view>
|
<as-sets v-if="tab === 1" :funds="funds" :key="tab"></as-sets>
|
<contract v-if="tab === 2" :funds="funds" :index="index" :key="tab"></contract>
|
<financial v-if="tab === 3" :funds="funds" :index="index" :key="tab"></financial>
|
|
</div>
|
</template>
|
|
<script>
|
|
import AsSets from "@/components/assetsCenter/assets"
|
import OverView from "@/components/assetsCenter/overview"
|
import Contract from "@/components/assetsCenter/contract"
|
import Financial from "@/components/assetsCenter/financial"
|
import Axios from "@/API/assets"
|
export default {
|
name: "assets-index",
|
components: {
|
AsSets,
|
OverView,
|
Contract,
|
Financial
|
},
|
data() {
|
return {
|
type: 'left', //left 从左往右 right 从有王座
|
list: [],
|
timer: null,
|
tab: 0,
|
index: 0, // 每个组件的二级tab
|
funds: {},
|
typeList: [
|
{
|
type: this.$t('总览'),
|
},
|
{
|
type: this.$t('现货账户'),
|
},
|
{
|
type: this.$t('合约'),
|
|
},
|
{
|
type: this.$t('理财'),
|
},
|
]
|
}
|
},
|
methods: {
|
onTabs(val) {
|
if (this.tab < val) {
|
this.type = 'right'
|
} else {
|
this.type = 'left'
|
}
|
console.log(val)
|
this.tab = val
|
},
|
getAssets() {
|
Axios.GetAllAssets().then((res) => {
|
const { code, data } = res
|
if (code) {
|
//console.log('总资产数据',data)
|
this.funds = data
|
}
|
})
|
},
|
},
|
created() {
|
this.getAssets()
|
this.timer = setInterval(() => {
|
this.getAssets()
|
}, 5000)
|
if (Object.hasOwnProperty.call(this.$route.query, 'tab')) {
|
this.tab = this.$route.query.tab / 1
|
this.index = this.$route.query.index ? this.$route.query.index * 1 : 0
|
}
|
},
|
activated() {
|
clearInterval(this.timer)
|
this.timer = setInterval(() => {
|
this.getAssets()
|
}, 5000)
|
this.index = 0
|
},
|
deactivated() {
|
clearInterval(this.timer)
|
this.timer = null
|
},
|
beforeDestroy() {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.assetsCenter {
|
width: 100%;
|
box-sizing: border-box;
|
}
|
|
.active_color {
|
@include themify() {
|
border-bottom: 5px solid themed("color_main") !important;
|
}
|
|
border-radius: 2.208px;
|
}
|
|
.left-enter-active,
|
.left-leave-active,
|
.right-enter-active,
|
.right-leave-active {
|
will-change: transform;
|
transition: all 500ms;
|
}
|
|
.left-leave-active,
|
.right-leave-active {
|
display: none;
|
}
|
|
.left-enter {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0);
|
}
|
|
.left-leave {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0)
|
}
|
|
.right-enter {
|
opacity: 0;
|
transform: translate3d(100%, 0, 0);
|
}
|
|
.right-leave {
|
opacity: 0;
|
transform: translate3d(-100%, 0, 0)
|
}
|
</style>
|
