| | |
| | | <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"> |
| | |
| | | {{ 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" ? 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> |
| | |
| | | |
| | | <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) => { |
| | |
| | | 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) { |
| | | this.funds = list; |
| | | this.fundsDatra = list; |
| | | } |
| | | }); |
| | | }, |
| | | goRouter(parmas) { |
| | |
| | | } |
| | | } |
| | | } |
| | | ::v-deep .van-loading { |
| | | text-align: center; |
| | | margin: 30px 0; |
| | | } |
| | | |
| | | .items-center { |
| | | background: #f5f5f5; |
| | | } |
| | | </style> |