<template>
|
<div class="assets-box">
|
<div class="typebox" style="display: flex;">
|
<div :class="typeindex==index?'typebox_box':'typebox_boxa'" @click="typeclick(index)"
|
v-for="(item,index) in typelist" :key="index">{{item}}</div>
|
</div>
|
<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 style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
|
<div class="pt">{{ $t("总资产估值") }}</div>
|
<div class="flex ex-bg justify-center my-42 items-center w-100" @click="onSwitch">
|
<!-- <div class="flex ex-bg justify-center my-42 items-center w-100" > -->
|
<!-- <img src="@/assets/image/exchange/icon_3.png" alt="" class="w-25 h-25" /> -->
|
</div>
|
</div>
|
<!-- <div class="pt">{{ assetsFunds.total }}</div> -->
|
<div class="pt" v-if="typeindex==0">
|
≈ {{ currency.currency_symbol
|
}}{{
|
assetsFunds.total
|
? (assetsFunds.total * currency.rate).toFixed(2)
|
: " --"
|
}}
|
</div>
|
<div v-else class="pt">
|
≈ {{ currency.currency_symbol
|
}}{{fomtdata.totalMoney}}
|
</div>
|
</van-row>
|
<van-row gutter="20" class="but-box" v-if="typeindex == 0">
|
<van-col
|
span="8"
|
v-for="item in tabList2"
|
:key="item.id"
|
@click="routerList(item)"
|
>
|
<div class="but" >{{ item.text }}</div>
|
</van-col>
|
</van-row>
|
<van-row gutter="20" class="but-box" v-if="typeindex == 1">
|
<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" v-if="typeindex==0">
|
<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 v-if="typeindex==0">
|
<template v-if="loading">
|
<van-loading />
|
</template>
|
<template v-if="active === 1">
|
<div class="px-32 py-13 flex">
|
<div class="inputBoxbg h-60 w-full rounded-full flex items-center">
|
<input
|
style="padding-left: 10px"
|
type="text"
|
v-model="keywords"
|
:placeholder="$t('搜索币种')"
|
class="h-full flex-1 search-input border-none bg-none"
|
@input="onInput"
|
/>
|
<img
|
src="@/assets/3x/资源 22@3x.png"
|
alt="logo"
|
class="w-32 h-32 mx-16"
|
/>
|
</div>
|
</div>
|
<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" ? 2 : 2
|
) || "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" ? 2 : 2
|
) || "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" ? 2 : 2
|
) || "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>
|
<main v-else>
|
<template v-if="loading">
|
<van-loading />
|
</template>
|
<template v-if="active === 1">
|
<div class="item-box" >
|
<div class="title-main">USDT</div>
|
<van-row>
|
<van-col span="8">
|
<div class="title">{{ $t("可用") }}</div>
|
<div class="text">
|
{{fomtdata.usdtMoney}}
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
<div class="item-box" >
|
<div class="title-main">BTC</div>
|
<van-row>
|
<van-col span="8">
|
<div class="title">{{ $t("可用") }}</div>
|
<div class="text">
|
{{fomtdata.btcMoney}}
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
<div class="item-box" >
|
<div class="title-main">ETH</div>
|
<van-row>
|
<van-col span="8">
|
<div class="title">{{ $t("可用") }}</div>
|
<div class="text">
|
{{fomtdata.ethMoney}}
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
<div class="item-box" >
|
<div class="title-main">USDC</div>
|
<van-row>
|
<van-col span="8">
|
<div class="title">{{ $t("可用") }}</div>
|
<div class="text">
|
{{fomtdata.usdcMoney}}
|
</div>
|
</van-col>
|
</van-row>
|
</div>
|
</template>
|
</main>
|
</div>
|
</template>
|
|
<script>
|
import { _getAllWallet,walletGrther } 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 {
|
keywords: "",
|
loading: true,
|
typelist: [this.$t("资金")+this.$t("账户"), this.$t("交易")+this.$t("账户")],
|
active: 1,
|
typeindex:0,
|
tabList2: [
|
{
|
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,
|
},
|
},
|
{
|
id: 7,
|
text: this.$t("划转"),
|
route: "/transfer",
|
// query: {
|
// type: 1,
|
// },
|
},
|
],
|
tabList1: [
|
{
|
id: 1,
|
text: this.$t("充币"),
|
// route: "/recharge/rechargePage?symbol=usdt",
|
route: "/recharge/rechargeList",
|
},
|
{
|
id: 2,
|
text: this.$t("提币"),
|
route: "/withdraw/withdrawPage",
|
}
|
],
|
tabList: [
|
{ id: 1, text: this.$t("现货") },
|
{ id: 2, text: this.$t("期权合约") },
|
{ id: 4, text: this.$t("永续合约") },
|
{ id: 5, text: this.$t("理财") },
|
],
|
funds: [],
|
fomtdata:{},
|
fundsDatra: [],
|
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"]),
|
typeclick(e) {
|
this.typeindex = e
|
// if (e == 0) {
|
// this.initParama(this.symbol)
|
// } else {
|
// // this.symbol = 'wld'
|
// this.initParam(this.symbol)
|
// }
|
// this.$forceUpdate()
|
},
|
onInput(e) {
|
console.log(333, this.fundsDatra);
|
this.funds = this.fundsDatra.filter((item) =>
|
item.symbol.includes(e.target.value.toLocaleLowerCase())
|
);
|
// this.fundsDatra[index]["data"] = this.tabList[index]["data"].filter(
|
// (item) => item.symbol.includes(e.target.value.toLocaleLowerCase())
|
// );
|
},
|
onSwitch(){
|
if(this.typeindex == 1){
|
this.typeindex = 0
|
}else{
|
this.typeindex =1
|
}
|
},
|
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;
|
this.fundsDatra = list;
|
}
|
});
|
walletGrther().then((data) => {
|
}).catch((err)=>{
|
this.fomtdata = err
|
});
|
},
|
goRouter(parmas) {
|
if (parmas === "/exchange/exchangeHistory") {
|
this.$router.push({ path: parmas, query: { type: 1 } });
|
} else {
|
this.$router.push(parmas);
|
}
|
},
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.typebox_box {
|
width: 50%;
|
background-color: #9691fa;
|
color: #fff;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.typebox_boxa {
|
width: 50%;
|
background-color: #fff;
|
color: #9691fa;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
}
|
|
.no_touch {
|
-webkit-user-select: none;
|
user-select: none;
|
-ms-user-select: none;
|
-moz-user-select: none;
|
|
@include themify() {
|
background: themed("main_background");
|
}
|
|
min-height: 100vh;
|
}
|
|
.typebox {
|
width: 100%;
|
height: 100px;
|
|
}
|
.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;
|
}
|
|
.items-center {
|
background: #f5f5f5;
|
}
|
</style>
|
