<template>
|
<div id="cryptos">
|
<assets-head :title="$t('资金账户')" :back-func="backFunc" />
|
<div class="funds-page pb-120">
|
<div class="funds-tabs-wrap">
|
<div class="funds-tabs">
|
<div
|
v-for="(item, index) in typeList"
|
:key="'type' + index"
|
class="funds-tab-item"
|
:class="{ active: tab === index }"
|
@click="onTabs(index)"
|
>
|
{{ item.type }}
|
</div>
|
</div>
|
</div>
|
<div class="funds-content">
|
<over-view v-if="tab === 0" :funds="funds" :key="'tab0'" />
|
<as-sets v-if="tab === 1" :funds="funds" :key="'tab1'" />
|
<contract v-if="tab === 2" :funds="funds" :index="index" :key="'tab2'" />
|
<financial v-if="tab === 3" :funds="funds" :index="index" :key="'tab3'" />
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import AsSets from '@/components/Transform/assetsCenter/assets.vue'
|
import OverView from '@/components/Transform/assetsCenter/overview.vue'
|
import Contract from '@/components/Transform/assetsCenter/contract.vue'
|
import Financial from '@/components/Transform/assetsCenter/financial.vue'
|
import { _getAllAssets } from '@/service/user.api.js'
|
|
export default {
|
name: 'assets-index',
|
components: {
|
AsSets,
|
OverView,
|
Contract,
|
Financial
|
},
|
data() {
|
return {
|
tab: 0,
|
index: 0,
|
funds: {},
|
typeList: [
|
{ type: this.$t('总览') },
|
{ type: this.$t('现货账户') },
|
{ type: this.$t('合约') },
|
{ type: this.$t('理财') }
|
]
|
}
|
},
|
methods: {
|
backFunc() {
|
this.$router.push({
|
path: '/quotes/index',
|
query: { tabActive: 1 }
|
})
|
},
|
onTabs(val) {
|
this.tab = val
|
},
|
getAssets() {
|
_getAllAssets().then((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
|
},
|
beforeUnmount() {
|
clearInterval(this.timer)
|
this.timer = null
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/assets/init.scss';
|
|
#cryptos {
|
.funds-page {
|
min-height: 100vh;
|
box-sizing: border-box;
|
}
|
|
.funds-tabs-wrap {
|
padding: 20px 32px 8px;
|
position: sticky;
|
top: 96px;
|
z-index: 10;
|
@include themify() {
|
background: themed('main_background');
|
}
|
}
|
|
.funds-tabs {
|
display: flex;
|
gap: 12px;
|
padding: 8px;
|
border-radius: 20px;
|
@include themify() {
|
background: themed('cont_background');
|
}
|
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
|
}
|
|
.funds-tab-item {
|
flex: 1;
|
text-align: center;
|
padding: 18px 8px;
|
border-radius: 14px;
|
font-size: 26px;
|
line-height: 1.2;
|
transition: all 0.2s ease;
|
@include themify() {
|
color: themed('text_color1');
|
}
|
|
&.active {
|
color: #fff;
|
background: linear-gradient(135deg, #1a6dff 0%, #004aee 100%);
|
font-weight: 600;
|
box-shadow: 0 6px 16px rgba(0, 74, 238, 0.28);
|
}
|
}
|
|
.funds-content {
|
padding: 0 32px;
|
}
|
}
|
</style>
|
