<template>
|
<div class="assets-box">
|
<header>
|
<van-row class="title-box">
|
<van-col span="12">
|
<span class="title">{{ $t("总资产") }}</span>
|
</van-col>
|
<van-col span="12" class="right">
|
<div class="w-33" style="height: 20px">{{ " " }}</div>
|
<!-- <img :src="require('@/assets/3x/names8.png')" class="w-33" /> -->
|
</van-col>
|
<div class="pt">{{ $t("总资产估值") }}</div>
|
<div class="pt">{{ assetsFunds.total }}</div>
|
<div class="pt">
|
≈ {{ currency.currency_symbol
|
}}{{
|
assetsFunds.total
|
? (assetsFunds.total * currency.rate).toFixed(2)
|
: " --"
|
}}
|
</div>
|
</van-row>
|
|
<van-row gutter="20" class="but-box">
|
<van-col
|
span="8"
|
v-for="item in tabList1"
|
:key="item.id"
|
@click="routerList(item)"
|
>
|
<div class="but">{{ item.text }}</div>
|
</van-col>
|
</van-row>
|
</header>
|
<div class="tabs">
|
<div class="tabs-box">
|
<div
|
v-for="item in tabList"
|
:key="item.id"
|
:class="`${active === item.id ? 'active-tabls' : ''}`"
|
@click="activeCheng(item)"
|
>
|
{{ item.text }}
|
</div>
|
</div>
|
|
<div class="tabs-content">
|
<div>{{ allName }} {{ $t("总资产") }}</div>
|
<div class="tabs-name">
|
{{ allAssets }} ≈ {{ currency.currency_symbol }}{{ allAssetsRate }}
|
</div>
|
</div>
|
</div>
|
|
<main>
|
<template v-if="loading">
|
<van-loading />
|
</template>
|
|
<template v-if="active === 1">
|
<div class="item-box" v-for="(item, index) in funds" :key="index">
|
<div class="title-main">{{ item.symbol.toUpperCase() }}/USDT</div>
|
<van-row>
|
<van-col span="8">
|
<div class="title">{{ $t("可用") }}</div>
|
<div class="text">
|
{{
|
item.usable.toFixed(
|
item.symbol.toUpperCase() === "USDT" ? 6 : 8
|
) || "0.0"
|
}}
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div class="title">{{ $t("锁仓") }}</div>
|
<div class="text">
|
{{
|
item.lock_amount.toFixed(
|
item.symbol.toUpperCase() === "USDT" ? 6 : 8
|
) || "0.0"
|
}}
|
</div>
|
</van-col>
|
<van-col span="8">
|
<div class="title">{{ $t("冻结") }}</div>
|
<div class="text">
|
{{
|
(item.frozenAmount + item.freeze_amount).toFixed(
|
item.symbol.toUpperCase() === "USDT" ? 6 : 8
|
) || "0.0"
|
}}
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
</template>
|
<!--永续合约持有仓位-->
|
<div class="px-30">
|
<template v-if="active === 4">
|
<PerpetualPositionList
|
:list-data="funds"
|
@sell="onRecall"
|
></PerpetualPositionList>
|
</template>
|
<!--交割合约持有仓位-->
|
<template v-if="active === 2">
|
<futrue-hold-list :list-data="funds" />
|
</template>
|
<template v-if="active === 5">
|
<financialList :list="funds" :btnShow="true" />
|
</template>
|
</div>
|
</main>
|
</div>
|
</template>
|
|
<script>
|
import { _getAllWallet } from "@/API/fund.api";
|
import Axios from "@/API/assets";
|
|
import { mapActions, mapGetters } from "vuex";
|
import { _futrueOrderList, _orderListHold } from "@/API/trade.api";
|
import PerpetualPositionList from "@/components/perpetual-position-list/index.vue";
|
import futrueHoldList from "@/page/deliveryContract/hold.vue";
|
import financialList from "@/components/assetsCenter/financialList";
|
|
import {
|
getfinacialProductsBought,
|
getMachineBought,
|
} from "@/API/financialManagement";
|
|
export default {
|
components: {
|
PerpetualPositionList,
|
futrueHoldList,
|
financialList,
|
},
|
data() {
|
return {
|
loading: true,
|
active: 1,
|
tabList1: [
|
{
|
id: 1,
|
text: this.$t("充币"),
|
// route: "/recharge/rechargePage?symbol=usdt",
|
route: "/recharge/rechargeList",
|
},
|
{
|
id: 2,
|
text: this.$t("提币"),
|
route: "/withdraw/withdrawPage",
|
},
|
// {
|
// id: 4,
|
// text: this.$t("闪兑"),
|
// route: "/exchange/exchangePage",
|
// },
|
{
|
id: 5,
|
text: this.$t("货币理财"),
|
route: "/financialHistory",
|
query: {
|
type: 0,
|
},
|
},
|
{
|
id: 6,
|
text: this.$t("矿池理财"),
|
route: "/financialHistory",
|
query: {
|
type: 1,
|
},
|
},
|
],
|
tabList: [
|
{ id: 1, text: this.$t("现货") },
|
{ id: 2, text: this.$t("交割合约") },
|
{ id: 4, text: this.$t("永续合约") },
|
{ id: 5, text: this.$t("理财") },
|
],
|
funds: [],
|
tabListData: {},
|
assetsFunds: {},
|
};
|
},
|
created() {
|
this.getAssetsFunds();
|
this.getAssets();
|
},
|
mounted() {
|
this.GET_UERS_KYC();
|
},
|
computed: {
|
...mapGetters("home", ["currency", "theme"]),
|
allAssets() {
|
if (this.assetsFunds.total) {
|
switch (this.active) {
|
case 1:
|
return this.assetsFunds.money_all_coin;
|
case 2:
|
return this.assetsFunds.money_futures;
|
case 4:
|
return this.assetsFunds.money_contract;
|
case 5:
|
return (
|
Number(this.assetsFunds.money_finance) +
|
Number(this.assetsFunds.money_miner)
|
);
|
|
default:
|
break;
|
}
|
}
|
return "--";
|
},
|
allName() {
|
// console.log(this.tabList);
|
const arr = this.tabList.filter((item) => item.id === this.active);
|
return arr[0].text;
|
},
|
allAssetsRate() {
|
if (this.assetsFunds.total) {
|
switch (this.active) {
|
case 1:
|
return (
|
this.assetsFunds.money_all_coin * this.currency.rate
|
).toFixed(2);
|
case 2:
|
return (
|
this.assetsFunds.money_futures * this.currency.rate
|
).toFixed(2);
|
case 4:
|
return (
|
this.assetsFunds.money_contract * this.currency.rate
|
).toFixed(2);
|
case 5:
|
return (
|
(Number(this.assetsFunds.money_finance) +
|
Number(this.assetsFunds.money_miner)) *
|
this.currency.rate
|
).toFixed(2);
|
|
default:
|
break;
|
}
|
}
|
return "--";
|
},
|
},
|
methods: {
|
...mapActions("user", ["GET_UERS_KYC"]),
|
|
routerList(item) {
|
this.$router.push({ path: item.route, query: item.query });
|
},
|
onTab() {
|
getfinacialProductsBought({
|
page_no: "",
|
state: "1",
|
}).then((res) => {
|
this.loading = false;
|
if (this.active === 5) {
|
this.funds = [...this.funds, ...res];
|
}
|
});
|
getMachineBought({
|
page_no: 1,
|
state: 1,
|
}).then((res) => {
|
this.loading = false;
|
if (this.active === 5) {
|
this.funds = [...this.funds, ...res];
|
}
|
});
|
},
|
onRecall() {
|
// 撤单or 平仓 evt
|
// this.clearTimer()
|
// this[this.curTab](this.symbol)
|
// this.fetchOrderListHold()
|
},
|
async fetchFutrueHoldList() {
|
// 获取交割当前持仓
|
const res = await _futrueOrderList();
|
// const { code, data } = res;
|
this.loading = false;
|
if (this.active === 2) {
|
this.funds = res;
|
}
|
},
|
// 获取永续当前持仓
|
async get_orderListHold() {
|
const res = await _orderListHold();
|
this.loading = false;
|
if (this.active === 4) {
|
this.funds = res;
|
}
|
},
|
// 获取总资产
|
async getAssetsFunds() {
|
const res = await Axios.GetAllAssets();
|
const { code, data } = res;
|
if (code) {
|
this.assetsFunds = data;
|
}
|
},
|
// 切换
|
activeCheng(item) {
|
this.active = item.id;
|
this.funds = [];
|
this.loading = true;
|
if (item.id === 4) {
|
this.get_orderListHold();
|
} else if (item.id === 2) {
|
this.fetchFutrueHoldList();
|
} else if (item.id === 1) {
|
this.getAssets();
|
} else if (item.id === 5) {
|
this.onTab();
|
}
|
},
|
getAssets() {
|
_getAllWallet().then((res) => {
|
this.tabListData = {
|
usdt: res.usdt,
|
lock_money: res.lock_money,
|
};
|
this.loading = false;
|
let list = res.extends;
|
if (this.active === 1) {
|
this.funds = list;
|
}
|
});
|
},
|
goRouter(parmas) {
|
if (parmas === "/exchange/exchangeHistory") {
|
this.$router.push({ path: parmas, query: { type: 1 } });
|
} else {
|
this.$router.push(parmas);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.assets-box {
|
header {
|
padding: 100px 0 0px;
|
color: #817cf6;
|
.title-box {
|
padding: 0 70px;
|
}
|
.but-box {
|
padding: 30px;
|
}
|
.title {
|
font-weight: bold;
|
}
|
.pt {
|
margin-top: 15px;
|
}
|
.but {
|
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
|
line-height: 80px;
|
text-align: center;
|
margin-bottom: 30px;
|
}
|
}
|
.right {
|
text-align: right;
|
}
|
}
|
|
.tabs {
|
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
|
margin: 0 15px;
|
padding: 30px 30px;
|
.tabs-content {
|
margin-top: 40px;
|
color: #363636;
|
.tabs-name {
|
margin-left: 10px;
|
color: #dedbe2;
|
}
|
}
|
.tabs-box {
|
display: flex;
|
color: #dedbe2;
|
font-weight: 400;
|
flex: 1;
|
justify-content: space-between;
|
|
.active-tabls {
|
color: #807cf7;
|
font-weight: 900;
|
}
|
}
|
}
|
|
main {
|
.item-box {
|
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
|
margin: 0 15px;
|
padding: 30px 30px;
|
margin-top: 40px;
|
.title-main {
|
color: #807cf7;
|
font-weight: 900;
|
margin-bottom: 20px;
|
}
|
.title {
|
color: #dedbe2;
|
margin-bottom: 10px;
|
}
|
.text {
|
font-weight: 900;
|
}
|
}
|
}
|
::v-deep .van-loading {
|
text-align: center;
|
margin: 30px 0;
|
}
|
</style>
|
