<template>
|
<div class="box-border">
|
<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">
|
{{ funds.total || '--' }}
|
<div class="text-white" style="margin-top: 5px;font-weight: normal;font-size: 14px">≈{{ funds.total ? (funds.total *
|
currency.rate).toFixed(2) : ' --' }} USD</div>
|
</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="withdrawBtn">
|
<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('/exchange/exchangePage')">
|
<div class="word-wrap">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
|
<span>{{ $t('闪兑') }}</span>
|
</div>
|
</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('/financialHistory?type=0')">
|
<div class="word-wrap">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
|
<span>{{ $t('货币理财') }}</span>
|
</div>
|
</div>
|
<div class="font-25 button" @click="goRouter('/financialHistory?type=1')">
|
<div class="word-wrap">
|
<!-- <img :src="require(`@/assets/theme/${theme}/image/assets/l_r.png`)" alt="">-->
|
<span>{{ $t('矿池理财') }}</span>
|
</div>
|
</div>
|
<div class="font-25 button" style="opacity: 0;">
|
|
</div>
|
</div>
|
<!-- <div class="divider-line"></div>-->
|
<div style="border-bottom: #f1f1f1 1px solid">
|
<!-- <div class="assets-content-title font-35 titleColor">{{ $t('投资组合') }}</div>-->
|
<div style="margin-top: 10px;border-bottom: #ddd 10px solid">
|
<van-tabs sticky :swipe-threshold="4" :ellipsis="true" swipeable >
|
<van-tab v-for="(item, index) in list" :key="index" :title="$t(item.text)">
|
<div style="border-top: #f1f1f1 1px solid">
|
<div style="padding: 20px 20px;color: #555555">
|
{{$t(item.text)}}{{ $t('总资产') }}
|
<div class="text-grey font-30 font-400 mb-0" style="margin-top: 10px">
|
<span style="color: #555;font-size: 18px;font-weight: bold">{{ funds[item.key] || '--' }}</span> USDT≈{{ funds[item.key] ?
|
(funds[item.key]
|
* currency.rate).toFixed(2) : ' --' }}{{ currency.currency_symbol }} </div>
|
</div>
|
</div>
|
</van-tab>
|
</van-tabs>
|
</div>
|
<!-- <div class="assets-list font-30 flex justify-between" v-for="(item, index) in list" :key="index">-->
|
<!-- <div class="items-center">-->
|
<!-- <img :src="require('@/assets/image/assets-center/funds/' + item.icon + '.png')" class="w-44 h-44" />-->
|
<!-- <div class="text-grey symbol-name font-30 textColor2">{{ $t(item.text) }}</div>-->
|
<!-- </div>-->
|
<!-- <div class="flex-col font-30 text-right" v-if="!eyetel">-->
|
<!-- <div class="textColor">{{ funds[item.key] || '--' }} USDT</div>-->
|
<!-- <div class="text-grey font-30 font-400 mb-0">-->
|
<!-- ≈{{ currency.currency_symbol }} {{ funds[item.key] ?-->
|
<!-- (funds[item.key]-->
|
<!-- * currency.rate).toFixed(2) : ' --' }}</div>-->
|
<!-- </div>-->
|
<!-- <div class="flex-col font-30 text-right" v-if="eyetel">-->
|
<!-- <div class="textColor">******** USDT</div>-->
|
<!-- <div class="text-grey">≈{{ currency.currency_symbol }} ********</div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
</div>
|
</div>
|
</template>
|
<script>
|
import Axios from "@/API/assets"
|
import {Dialog, Tab, Tabs} from 'vant';
|
import { mapGetters } from "vuex";
|
export default {
|
name: 'AssetsPage',
|
components: {
|
[Dialog.name]: Dialog,
|
[Tab.name]: Tab,
|
[Tabs.name]: Tabs
|
},
|
props: ['funds'],
|
data() {
|
return {
|
// total:"",
|
// status:"", //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过
|
eyetel: false,
|
active: 0,
|
}
|
},
|
computed: {
|
...mapGetters('home', ['currency', 'theme']),
|
list() {
|
return [
|
{ id: 1, text: this.$t('现货账户'), icon: 'spot', key: 'money_all_coin' },
|
{ id: 2, text: this.$t('合约账户 (U本位)'), icon: 'contract_u', key: 'money_contract' },
|
{ id: 3, text: this.$t('交割合约账户'), icon: 'contract_d', key: 'money_futures' },
|
{ id: 4, text: this.$t('理财账户'), icon: 'invest', key: 'money_finance' },
|
{ id: 5, text: this.$t('矿机资产'), icon: 'mining', key: 'money_miner' },
|
]
|
},
|
},
|
mounted() {
|
// this.getData();
|
// this.getList();
|
},
|
methods: {
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
goRouter(parmas) {
|
if (parmas === '/exchange/exchangeHistory') {
|
this.$router.push({ path: parmas, query: { type: 0 } })
|
} else {
|
this.$router.push(parmas);
|
}
|
},
|
// getData() {
|
// Axios.GetAllAssets().then((res)=>{
|
// if(res.code ==0){
|
// this.total = res.data.total;
|
// this.status = res.data.status;
|
// }
|
// });
|
// },
|
getList() {
|
Axios.GetWallet().then((res) => {
|
if (res.code == 0) {
|
this.list = res.data.extends;
|
}
|
});
|
},
|
changeEyes() {
|
this.eyetel = !this.eyetel;
|
},
|
beforeClose(action, done) {
|
if (action === 'confirm') {
|
setTimeout(done, 1000);
|
} else {
|
done();
|
}
|
},
|
//跳转提币页面
|
withdrawBtn() {
|
//身份已认证，直接跳转，未认证则提示跳身份认证页
|
// if(this.funds.status==2) {
|
// this.$router.push({
|
// path:'/withdraw/withdrawPage'
|
// });
|
// }else{
|
// Dialog.confirm({
|
// confirmButtonText:this.$t('确定'),
|
// cancelButtonText:this.$t('取消'),
|
// title: this.$t('提示'),
|
// message: this.$t('请进行身份KYC认证'),
|
// beforeClose: (action, done) => {
|
// if (action === 'confirm') {
|
// done();
|
// this.$router.push({
|
// path:'/authentication'
|
// });
|
// } else {
|
// done();
|
// }
|
// },
|
// });
|
// }
|
this.$router.push({
|
path: '/withdraw/withdrawPage'
|
});
|
},
|
|
},
|
|
}
|
</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;
|
}
|
</style>
|
