From 349c48e168b9f2580334422228acde7d1b21bede Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Fri, 05 Jun 2026 11:19:15 +0800
Subject: [PATCH] 1
---
src/views/my/assets.vue | 97 +++++++++++++++++++++++++++++++++++++-----------
1 files changed, 75 insertions(+), 22 deletions(-)
diff --git a/src/views/my/assets.vue b/src/views/my/assets.vue
index 1c77299..a755d01 100644
--- a/src/views/my/assets.vue
+++ b/src/views/my/assets.vue
@@ -2,8 +2,7 @@
<div class="assets">
<div class="assets_title">{{ $t('总资产估值') }}</div>
<div class="assets_money font-bold mt-5 flex justify-start items-end">
- {{ currency.currency_symbol }}{{ formatWithCommas(forexAssets?.money_contract ?
- (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00') }}
+ {{ currency.currency_symbol }}{{ formatWithCommas(totalAssetsFiat) }}
<div class="pricing_jj ml-5">
{{ pricing }}
@@ -34,25 +33,24 @@
<van-collapse v-model="activeNames" class="mt-10">
<van-collapse-item :title="$t('分布')" name="1">
- <!-- <div class="divider"></div> -->
- <div class="percentage flex just-between items-center">
- <div :style="`width:${assetObj.capital / (assetObj.capital + assetObj.contract) * 100}%`">
- </div>
- <div class="flex-1">
- </div>
+ <div class="distribution-bar">
+ <div class="bar-segment bar-capital" :style="{ width: capitalPercent + '%' }"></div>
+ <div class="bar-segment bar-contract" :style="{ width: contractPercent + '%' }"></div>
</div>
- <div class="assets_item flex justify-start items-center mt-14 font-bold">
+ <div class="assets_item flex justify-start items-center mt-14 font-bold" @click="toPage('/cryptos/funds?tab=1')">
<div class="icon" style="background-color: #8A90FE;"></div>
<span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
- <span class="mr-5">{{ formatWithCommas(assetObj.capital) }}</span>
+ <span class="distribution-percent">{{ capitalPercentText }}</span>
+ <span class="mr-5">{{ formatAssetAmount(assetObj.capital) }}</span>
<van-icon name="arrow" />
</div>
- <!-- <div class="assets_item flex justify-start items-center mt-14 font-bold">
+ <div class="assets_item flex justify-start items-center mt-14 font-bold" @click="toPage('/cryptos/funds?tab=2')">
<div class="icon" style="background-color: #f7b600;"></div>
<span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
- <span class="mr-5">{{ formatWithCommas(assetObj.contract) }}</span>
+ <span class="distribution-percent">{{ contractPercentText }}</span>
+ <span class="mr-5">{{ formatAssetAmount(assetObj.contract) }}</span>
<van-icon name="arrow" />
- </div> -->
+ </div>
</van-collapse-item>
</van-collapse>
@@ -81,7 +79,7 @@
</template>
<script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import { _getExchangeRate } from '@/service/cryptos.api'
@@ -105,7 +103,7 @@
const tabList = [
{ key: 1, name: t('充值'), icon: new URL('@/assets/imgs/assets/chonbi.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
{ key: 2, name: t('提现'), icon: new URL('@/assets/imgs/assets/tibi.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
- // { key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/huazhuan.png', import.meta.url), path: '/my/transfer' },
+ { key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/huazhuan.png', import.meta.url), path: '/my/transfer' },
{ key: 5, name: t('闪兑'), icon: new URL('@/assets/imgs/assets/sd.png', import.meta.url), path: '/cryptos/exchangePage' },
{ key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
]
@@ -159,10 +157,37 @@
})
}
const assetObj = ref({})
-const getassets = () => { // 获取资产
+const getassets = () => {
_getassets().then(res => {
- assetObj.value = res
+ assetObj.value = res || {}
})
+}
+
+const capitalAmount = computed(() => Number(assetObj.value.capital) || 0)
+const contractAmount = computed(() => Number(assetObj.value.contract) || 0)
+const totalAssetsUsdt = computed(() => capitalAmount.value + contractAmount.value)
+
+const capitalPercent = computed(() => {
+ if (totalAssetsUsdt.value <= 0) return 0
+ return Math.round((capitalAmount.value / totalAssetsUsdt.value) * 1000) / 10
+})
+
+const contractPercent = computed(() => {
+ if (totalAssetsUsdt.value <= 0) return 0
+ return Math.round((contractAmount.value / totalAssetsUsdt.value) * 1000) / 10
+})
+
+const capitalPercentText = computed(() => `${capitalPercent.value.toFixed(1)}%`)
+const contractPercentText = computed(() => `${contractPercent.value.toFixed(1)}%`)
+
+const totalAssetsFiat = computed(() => {
+ const rate = Number(currency.value.rate) || 0
+ return (totalAssetsUsdt.value * rate).toFixed(2)
+})
+
+const formatAssetAmount = (val) => {
+ const num = Number(val) || 0
+ return formatWithCommas(num.toFixed(2))
}
// 获取资产列表
@@ -285,11 +310,6 @@
img {
height: $item_width;
border-radius: 50%;
- background: #fff;
-
- @include themify() {
- border: themed("main_background") 1px solid;
- }
}
}
}
@@ -300,6 +320,39 @@
// background: $bg_yellow;
// }
+ .distribution-bar {
+ display: flex;
+ width: 100%;
+ height: 1rem;
+ border-radius: 0.5rem;
+ overflow: hidden;
+ gap: 0.2rem;
+ }
+
+ .bar-segment {
+ height: 100%;
+ min-width: 0;
+ transition: width 0.25s ease;
+ }
+
+ .bar-capital {
+ background: #8A90FE;
+ }
+
+ .bar-contract {
+ background: $bg_yellow;
+ }
+
+ .distribution-percent {
+ margin-right: 1.2rem;
+ font-size: 1.8rem;
+ font-weight: 400;
+
+ @include themify() {
+ color: themed("text_color1");
+ }
+ }
+
.percentage {
div {
height: 1rem;
--
Gitblit v1.9.3