<template>
|
<div class="pb-120 assetsCenter">
|
<div class="flex justify-between px-52 pt-31 pb-31 box-border">
|
<div class="flex items-center text-center textColor1" style="flex-direction: column;width: 50%;"
|
v-for="(item, index) in typeList " :key="'type' + index" @click="onTabs(index)">
|
<div class="font-32 text-center lh-53">{{ item.type }}</div>
|
<div v-if="index == tab"
|
style="width: 20px;background-color: #1976D2;height: 4px;display: flex;justify-content: center;align-items: center;">
|
</div>
|
</div>
|
</div>
|
<div v-if="tab==0">
|
<over-view :funds="funds"></over-view>
|
<as-sets :funds="funds"></as-sets>
|
</div>
|
<div v-if="tab==1">
|
<div class="" style="background:rgb(25, 118, 210);padding: 15px">
|
<div class="flex justify-between text-white relative">
|
<div class="flex">
|
<span class="text-white font-40">{{ $t('总资产') }}</span>
|
<div @click.stop="changeEyes">
|
<img :src="require('../../assets/image/assets-center/eye-open1.png')" style="height: 26px"
|
v-show="!eyetel" />
|
<img :src="require('../../assets/image/assets-center/eye-close1.png')" style="height: 26px"
|
v-show="eyetel" />
|
</div>
|
</div>
|
<div class="right-clock" @click="goRouter('/exchange/exchangeHistory')">
|
<img :src="require('../../assets/image/assets-center/Subtract.png')" class="w-44 h-38" />
|
</div>
|
</div>
|
<div style="margin-top: 10px;color: white">
|
{{$t("总资产估值")}}
|
</div>
|
<div class="font-700 font-50 mt-18 text-white" v-if="!eyetel">
|
{{ fundsdata.totalMoney}}
|
</div>
|
|
<div class="font-70 font-66 mt-18 textColor" v-else>********</div>
|
</div>
|
<div class="pl-33 pr-33 btn-box flex justify-between"
|
style="border-bottom: #f0f0f0 1px solid;padding: 12px 10px;margin-top: 0">
|
<div class="font-25 button" @click="goRouter('/recharge/rechargeList')">
|
<div class="word-wrap">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/assets/up.png`)" alt="">-->
|
<span> {{ $t('充币') }}</span>
|
</div>
|
</div>
|
<div class="ont-25 button" @click="goRouter('/withdraw/withdrawPage')">
|
<div class="word-wrap">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/assets/down.png`)" alt="">-->
|
<span>{{ $t('提币') }}</span>
|
</div>
|
</div>
|
<div class="font-25 button" @click="goRouter('/transfer')">
|
<div class="word-wrap">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
|
<span>{{ $t('划转') }}</span>
|
</div>
|
</div>
|
</div>
|
<div
|
style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;">
|
<div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">USDT</div>
|
<div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;">
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
{{fundsdata.usdtMoney}}
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
0.00
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
0.00
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;">
|
<div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">ETH</div>
|
<div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;">
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
{{fundsdata.ethMoney}}
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
0.00
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
0.00
|
</div>
|
</div>
|
</div>
|
</div>
|
<div
|
style="display: flex;margin-bottom: 0px;flex-direction: column;border-bottom: 2px solid rgb(241, 241, 241); padding: 10px;">
|
<div style="margin: 20px;color: rgba(25, 118, 210, 0.8);font-size: 18px;font-weight: bold;">BTC</div>
|
<div style="display: flex;justify-content: space-between;margin: 0 20px 20px 20px;">
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('可用') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
{{fundsdata.btcMoney}}
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('锁仓') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
0.00
|
</div>
|
</div>
|
<div style="display: flex;justify-content: space-between;flex-direction: column;">
|
<div class="text-grey" style="font-weight: normal">{{ $t('冻结') }}</div>
|
<div class="textColor" style="font-weight: normal;font-size: 16px;color: #999999">
|
0.00
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
|
|
</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: [],
|
eyetel: false,
|
timer: null,
|
zjlist: [],
|
tab: 0,
|
index: 0, // 每个组件的二级tab
|
funds: {},
|
fundsdata: {},
|
typeList: [{
|
type: this.$t('交易')+this.$t('账户'),
|
},
|
{
|
type: this.$t('资金账户'),
|
},
|
]
|
}
|
},
|
methods: {
|
goRouter(parmas) {
|
if (parmas === '/exchange/exchangeHistory') {
|
this.$router.push({ path: parmas, query: { type: 0 } })
|
} else {
|
this.$router.push(parmas);
|
}
|
},
|
changeEyes() {
|
this.eyetel = !this.eyetel;
|
},
|
onTabs(val) {
|
console.log('111',val);
|
this.tab = val
|
},
|
getAssetszj() {
|
Axios.GetWalletzj().then((res) => {
|
this.fundsdata = res.data
|
})
|
|
},
|
getAssets() {
|
Axios.GetAllAssets().then((res) => {
|
const {
|
code,
|
data
|
} = res
|
if (code) {
|
//console.log('总资产数据',data)
|
this.funds = data
|
}
|
})
|
},
|
},
|
created() {
|
this.getAssets()
|
this.getAssetszj()
|
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>
|
.tabBackground {
|
background: white;
|
}
|
|
.button {
|
border: 1px solid rgb(25, 118, 210);
|
background: white !important;
|
border-radius: 3px;
|
height: 60px;
|
color: rgb(25, 118, 210) !important;
|
}
|
|
.right-clock {
|
position: absolute;
|
top: 0;
|
right: -3px;
|
}
|
|
.total_wrap {
|
margin-top: 44px;
|
}
|
|
.asset-title-box {
|
margin: 40px 0;
|
}
|
|
.btn-box {
|
margin-top: 44px;
|
}
|
|
.btn-box>div {
|
width: 234px;
|
padding: 20px 15px;
|
box-sizing: border-box;
|
text-align: center;
|
border-radius: 8.8px;
|
font-size: 26.5px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.word-wrap {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 40px;
|
height: 40px;
|
margin-right: 22px;
|
}
|
|
span {
|
font-size: 26.5px;
|
}
|
}
|
}
|
|
.mr60 {
|
margin-right: 60px;
|
}
|
|
.divider-line {
|
border-bottom: 1px solid #E5E7ED;
|
padding-bottom: 80px;
|
}
|
|
.assets-content-title {
|
margin-top: 60px;
|
margin-bottom: 55px;
|
}
|
|
.assets-list {
|
margin-bottom: 35px;
|
}
|
|
.assets-list>div {
|
display: flex;
|
}
|
|
.assets-list>div:nth-child(2) div:nth-child(1) {
|
margin-bottom: 16px;
|
font-size: 30px;
|
font-weight: 700;
|
}
|
|
.symbol-name {
|
margin-left: 17px;
|
//margin-top:10px;
|
}
|
|
.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>
|
