From 358dd78ee40aea1e43fd7987c6e604960c2d0672 Mon Sep 17 00:00:00 2001
From: dcc <dcc@163.com>
Date: Sat, 29 Jun 2024 18:29:45 +0800
Subject: [PATCH] BTC排一.ETH排二，USDT排三其他随便
---
src/page/assetsCenter/index.vue | 609 ++++++++++++++++++++++++++++--------------------------
1 files changed, 316 insertions(+), 293 deletions(-)
diff --git a/src/page/assetsCenter/index.vue b/src/page/assetsCenter/index.vue
index ae3bbef..bfc9a9b 100644
--- a/src/page/assetsCenter/index.vue
+++ b/src/page/assetsCenter/index.vue
@@ -2,85 +2,104 @@
<div class="assets-box">
<header>
<van-row class="title-box">
- <van-col span="12"><span class="title">Total Assets</span></van-col>
- <van-col
- span="12"
- class="right"
- @click="goRouter('/exchange/exchangeHistory')"
- >
- <img
- :src="require('@/assets/image/assets-center/Subtract.png')"
- class="w-44 h-38"
- />
+ <van-col span="12">
+ <!-- <span class="title">{{ $t("总资产") }}</span> -->
</van-col>
- <div class="pt">Total Assets Valuation</div>
- <div class="pt">0</div>
- <div class="pt">≈ 0.00USD</div>
+ <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">
+ <van-col span="8" v-for="item in tabList1" :key="item.id" @click="routerList(item)">
<div class="but">{{ item.text }}</div>
</van-col>
- <!-- <van-col span="8"><div class="but">withdraw</div></van-col>
- <van-col span="8"><div class="but">Exchange</div></van-col>
- <van-col span="8"><div class="but">Management</div></van-col>
- <van-col span="8"><div class="but">Mining Pool</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)"
- >
+ <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>Spot Total Assets</div>
- <div class="tabs-name">0 USDT ≈ 0.00 $</div>
+ <div>{{ allName }} {{ $t("总资产") }}</div>
+ <div class="tabs-name">
+ {{ allAssets }} ≈ {{ currency.currency_symbol }}{{ allAssetsRate }}
+ </div>
</div>
</div>
-
<main>
- <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 : 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" ? 2 : 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" ? 2 : 8
- ) || "0.0"
- }}
- </div>
- </van-col>
- </van-row>
+ <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>
</div>
@@ -88,247 +107,217 @@
<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 {
+ keywords: "",
+ loading: true,
active: 1,
- active1: 1,
tabList1: [
- { id: 1, text: this.$t("充币") },
- { id: 2, text: this.$t("提币") },
- { id: 4, text: this.$t("闪兑") },
- { id: 5, text: this.$t("Management") },
- { id: 6, text: this.$t("Mining Pool") },
+ {
+ 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("Spot") },
- { id: 2, text: this.$t("Contract Delivery") },
- { id: 4, text: this.$t("Contract Account") },
- { id: 5, text: this.$t("Financial") },
+ { id: 1, text: this.$t("现货") },
+ { id: 2, text: this.$t("期权合约") },
+ { id: 4, text: this.$t("永续合约") },
+ { id: 5, text: this.$t("理财") },
],
- funds: [
- {
- volume: 0,
- symbol: "usdt",
- usable: 0,
- freeze_amount: 0,
- name: "USDT/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "knc",
- usable: 0,
- freeze_amount: 0,
- name: "KNC/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "vet",
- usable: 0,
- freeze_amount: 0,
- name: "VET/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "doge",
- usable: 0,
- freeze_amount: 0,
- name: "DOGE/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "usdc",
- usable: 0,
- freeze_amount: 0,
- name: "USDC/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "dai",
- usable: 0,
- freeze_amount: 0,
- name: "DAI/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "wld",
- usable: 0,
- freeze_amount: 0,
- name: "WLD/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "mln",
- usable: 0,
- freeze_amount: 0,
- name: "MLN/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "qtum",
- usable: 0,
- freeze_amount: 0,
- name: "QTUM/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "btc",
- usable: 0,
- freeze_amount: 0,
- name: null,
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "yfii",
- usable: 0,
- freeze_amount: 0,
- name: "YFII/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "etc",
- usable: 0,
- freeze_amount: 0,
- name: "ETC/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "wdc",
- usable: 0,
- freeze_amount: 0,
- name: "WDC/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "xrp",
- usable: 0,
- freeze_amount: 0,
- name: "XRP/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "icp",
- usable: 0,
- freeze_amount: 0,
- name: "ICP/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "eth",
- usable: 0,
- freeze_amount: 0,
- name: "ETH/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "ltc",
- usable: 0,
- freeze_amount: 0,
- name: "LTC/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "shib",
- usable: 0,
- freeze_amount: 0,
- name: "SHIB/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "yfi",
- usable: 0,
- freeze_amount: 0,
- name: "YFI/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "xtz",
- usable: 0,
- freeze_amount: 0,
- name: "XTZ/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- {
- volume: 0,
- symbol: "ada",
- usable: 0,
- freeze_amount: 0,
- name: "ADA/USDT",
- usdt: 0,
- lock_amount: 0,
- frozenAmount: 0,
- },
- ],
+ funds: [],
+ fundsDatra: [],
tabListData: {},
+ assetsFunds: {},
};
},
created() {
- // this.getAssets();
+ 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"]),
+ 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())
+ // );
+ },
+
+ 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) => {
@@ -336,9 +325,22 @@
usdt: res.usdt,
lock_money: res.lock_money,
};
+ this.loading = false;
let list = res.extends;
- this.funds = list;
- console.log(list);
+ if (this.active === 1) {
+ let btcindex = list.findIndex(item => item.symbol == 'btc')
+ if (btcindex !== -1) {
+ let movedElement = list.splice(btcindex, 1);
+ list.unshift(movedElement[0]);
+ }
+ let ethindex = list.findIndex(item => item.symbol == 'eth')
+ if (ethindex !== -1) {
+ let movedElement = list.splice(ethindex, 1);
+ list.splice(1, 0, movedElement[0]);
+ }
+ this.funds = list;
+ this.fundsDatra = list;
+ }
});
},
goRouter(parmas) {
@@ -355,20 +357,25 @@
<style lang="scss" scoped>
.assets-box {
header {
- padding: 100px 0 0px;
+ // 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;
@@ -376,6 +383,7 @@
margin-bottom: 30px;
}
}
+
.right {
text-align: right;
}
@@ -385,17 +393,20 @@
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;
+ // color: #dedbe2;
}
}
+
.tabs-box {
display: flex;
- color: #dedbe2;
+ // color: #dedbe2;
font-weight: 400;
flex: 1;
justify-content: space-between;
@@ -413,18 +424,30 @@
margin: 0 15px;
padding: 30px 30px;
margin-top: 40px;
+
.title-main {
color: #807cf7;
font-weight: 900;
margin-bottom: 20px;
}
+
.title {
- color: #dedbe2;
+ // color: #dedbe2;
margin-bottom: 10px;
}
+
.text {
font-weight: 900;
}
}
}
+
+::v-deep .van-loading {
+ text-align: center;
+ margin: 30px 0;
+}
+
+.items-center {
+ background: #f5f5f5;
+}
</style>
\ No newline at end of file
--
Gitblit v1.9.3