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