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/components/Transform/assetsCenter/assets.vue | 593 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 319 insertions(+), 274 deletions(-)
diff --git a/src/components/Transform/assetsCenter/assets.vue b/src/components/Transform/assetsCenter/assets.vue
index 7c80dfc..2bb5fc0 100644
--- a/src/components/Transform/assetsCenter/assets.vue
+++ b/src/components/Transform/assetsCenter/assets.vue
@@ -1,171 +1,113 @@
<template>
- <div class="box-border">
- <div class="pl-33 pr-33 total_wrap">
- <div class="flex justify-between text-grey relative">
- <div class="flex">
- <span class="text-grey font-30">{{ $t('总资产') }}（USDT）</span>
- <div @click.stop="changeEyes">
- <img :src="handImg('../../../assets/image/assets-center/eye-open.png')" class="w-32 h-18" v-show="!eyetel" />
- <img :src="handImg('../../../assets/image/assets-center/eye-close.png')" class="w-32 h-18" v-show="eyetel" />
+ <div class="funds-spot">
+ <!-- 总资产卡片 -->
+ <div class="balance-hero">
+ <div class="balance-hero-top">
+ <div class="balance-label">
+ <span>{{ $t('总资产') }}（USDT）</span>
+ <div class="eye-btn" @click.stop="changeEyes">
+ <img :src="handImg('../../../assets/image/assets-center/eye-open.png')" v-show="!eyetel" />
+ <img :src="handImg('../../../assets/image/assets-center/eye-close.png')" v-show="eyetel" />
</div>
</div>
- <div class="right-clock" @click="goRouter('/cryptos/exchangeHistory')">
- <img :src="handImg('../../../assets/image/assets-center/Subtract.png')" class="w-34 h-40" />
+ <div class="history-btn" @click="goRouter('/cryptos/exchangeHistory')">
+ <img :src="handImg('../../../assets/image/assets-center/Subtract.png')" />
</div>
</div>
- <div class="font-700 font-66 mt-18 textColor" v-if="!eyetel">
- {{ funds.money_all_coin || '--' }}
- <span class="font-40 text-grey">≈{{ currency.currency_symbol
- }}{{
- funds.money_all_coin
- ? Number(funds.money_all_coin * currency.rate).toFixed(2)
- : ' --'
-}}</span>
+ <div class="balance-amount" v-if="!eyetel">{{ funds.money_all_coin || '--' }}</div>
+ <div class="balance-amount" v-else>********</div>
+ <div class="balance-fiat" v-if="!eyetel">
+ ≈{{ currency.currency_symbol }}{{
+ funds.money_all_coin ? Number(funds.money_all_coin * currency.rate).toFixed(2) : ' --'
+ }}
</div>
- <div class="font-70 font-66 mt-18 textColor" v-else>********</div>
+ <div class="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
</div>
- <div class="pl-33 pr-33 btn-box flex justify-between">
- <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/recharge/rechargeList')">
- <div class="word-wrap">
+
+ <!-- 快捷操作 -->
+ <div class="quick-actions">
+ <div class="action-item" @click="goRouter('/cryptos/recharge/rechargeList')">
+ <div class="action-icon deposit">
<img :src="handImg(`../../../assets/theme/${THEME}/image/assets/up.png`)" alt="" />
- <span> {{ $t('充币') }}</span>
</div>
+ <span>{{ $t('充币') }}</span>
</div>
- <div class="text-white font-25 textColor tabBackground" @click="withdrawBtn">
- <div class="word-wrap">
+ <div class="action-item" @click="withdrawBtn">
+ <div class="action-icon withdraw">
<img :src="handImg(`../../../assets/theme/${THEME}/image/assets/down.png`)" alt="" />
- <span>{{ $t('提币') }}</span>
</div>
+ <span>{{ $t('提币') }}</span>
</div>
- <div class="text-white font-25 textColor tabBackground" @click="goRouter('/cryptos/exchangePage')">
- <div class="word-wrap">
+ <div class="action-item" @click="goRouter('/cryptos/exchangePage')">
+ <div class="action-icon swap">
<img :src="handImg(`../../../assets/theme/${THEME}/image/assets/l_r.png`)" alt="" />
- <span>{{ $t('闪兑') }}</span>
</div>
+ <span>{{ $t('闪兑') }}</span>
+ </div>
+ <div class="action-item" @click="goRouter('/my/transfer')">
+ <div class="action-icon transfer">
+ <img :src="handImg('../../../assets/imgs/assets/huazhuan.png')" alt="" />
+ </div>
+ <span>{{ $t('划转') }}</span>
</div>
</div>
- <!-- <div class="divider-line"></div>-->
- <div class="pl-30 pr-30">
- <div class="assets-content-title font-35 titleColor">
- {{ $t('投资组合') }}
- </div>
- <div class="assets-list font-30" v-for="(item, index) in list" :key="index">
- <div class="flex justify-between">
- <div class="flex items-center">
- <img :src="item.symbol
- ? `${HOST_URL}/symbol/${item.symbol_data}.png`
- : handImg('../../../assets/loading-default.png')
- " class="w-72 h-72 rounded-full" />
- <div class="text-grey symbol-name font-30 textColor2">
- {{ item.symbol.toUpperCase() }}/USDT
+
+ <!-- 币种列表 -->
+ <div class="section-header">
+ <span class="section-title">{{ $t('投资组合') }}</span>
+ <span class="section-count">{{ list.length }}</span>
+ </div>
+ <div class="coin-list">
+ <div class="coin-card" v-for="(item, index) in list" :key="index">
+ <div class="coin-card-head">
+ <div class="coin-info">
+ <img
+ :src="item.symbol ? `${HOST_URL}/symbol/${item.symbol_data}.png` : handImg('../../../assets/loading-default.png')"
+ class="coin-icon"
+ />
+ <div>
+ <div class="coin-symbol">{{ item.symbol.toUpperCase() }}</div>
+ <div class="coin-pair">/ USDT</div>
</div>
</div>
- <div class="flex-col font-30 text-right" v-if="!eyetel">
- <div class="textColor" v-if="item.symbol == 'btc'">
- {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'eth'">
- {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'usdt'">
- {{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
- </div>
- <div class="textColor" v-else>
- {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
- </div>
- <div class="text-grey font-30 font-400 mb-0">
- ≈{{ currency.currency_symbol }}
- {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
- </div>
+ <div class="coin-total" v-if="!eyetel">
+ <div class="coin-total-val">{{ formatAmount(item.symbol, item.volume) }}</div>
+ <div class="coin-total-fiat">≈{{ currency.currency_symbol }} {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.00' }}</div>
</div>
- <div class="flex-col font-30 text-right" v-else>
- <div class="textColor">******** USDT</div>
- <div class="text-grey">
- ≈{{ currency.currency_symbol }} ********
- </div>
+ <div class="coin-total" v-else>
+ <div class="coin-total-val">********</div>
+ <div class="coin-total-fiat">≈{{ currency.currency_symbol }} ********</div>
</div>
</div>
- <div class="flex justify-between mt-40 pl-94">
- <template>
- <div class="flex-col font-30" v-if="!eyetel">
- <div class="text-grey">{{ $t('可用') }}</div>
- <div class="textColor" v-if="item.symbol == 'btc'">
- {{ item.usable ? Number(item.usable).toFixed(8) : '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'eth'">
- {{ item.usable ? Number(item.usable).toFixed(8) : '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'usdt'">
- {{ item.usable ? Number(item.usable).toFixed(2) : '0.0' }}
- </div>
- <div class="textColor" v-else>
- {{ item.usable ? Number(item.usable).toFixed(8) : '0.0' }}
- </div>
- </div>
- <div class="flex-col font-30" v-else>
- <div class="text-grey">{{ $t('可用') }}</div>
- <div class="textColor">
- {{ currency.currency_symbol }} ********
- </div>
- </div>
- </template>
- <template>
- <div class="flex-col font-30" v-if="!eyetel">
- <div class="text-grey">{{ $t('锁仓') }}</div>
- <div class="textColor" v-if="item.symbol === 'btc'">
- {{ item.lock_amount ? Number(item.lock_amount).toFixed(8) : '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol === 'eth'">
- {{ item.lock_amount ? Number(item.lock_amount).toFixed(8) : '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'usdt'">
- {{ item.lock_amount ? Number(item.lock_amount).toFixed(2) : '0.0' }}
- </div>
- <div class="textColor" v-else>
- {{ item.lock_amount ? Number(item.lock_amount).toFixed(8) : '0.0' }}
- </div>
- </div>
- <div class="flex-col font-30" v-else>
- <div class="text-grey">{{ $t('锁仓') }}</div>
- <div class="textColor">
- {{ currency.currency_symbol }} ********
- </div>
- </div>
- </template>
- <template>
- <div class="flex-col font-30 text-right" v-if="!eyetel">
- <div class="text-grey">{{ $t('冻结') }}</div>
- <div class="textColor" v-if="item.symbol == 'btc'">
- {{ Number(item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'eth'">
- {{ Number(item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }}
- </div>
- <div class="textColor" v-else-if="item.symbol == 'usdt'">
- {{ Number(item.frozenAmount + item.freeze_amount).toFixed(2) || '0.0' }}
- </div>
- <div class="textColor" v-else>
- {{ Number(item.frozenAmount + item.freeze_amount).toFixed(8) || '0.0' }}
- </div>
- </div>
- <div class="flex-col font-30 text-right" v-else>
- <div class="text-grey">{{ $t('冻结') }}</div>
- <div class="textColor">
- {{ currency.currency_symbol }} ********
- </div>
- </div>
- </template>
+ <div class="coin-stats">
+ <div class="stat-item">
+ <span class="stat-label">{{ $t('可用') }}</span>
+ <span class="stat-value" v-if="!eyetel">{{ formatAmount(item.symbol, item.usable) }}</span>
+ <span class="stat-value" v-else>********</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">{{ $t('锁仓') }}</span>
+ <span class="stat-value" v-if="!eyetel">{{ formatAmount(item.symbol, item.lock_amount) }}</span>
+ <span class="stat-value" v-else>********</span>
+ </div>
+ <div class="stat-item">
+ <span class="stat-label">{{ $t('冻结') }}</span>
+ <span class="stat-value" v-if="!eyetel">{{ formatAmount(item.symbol, Number(item.frozenAmount || 0) + Number(item.freeze_amount || 0)) }}</span>
+ <span class="stat-value" v-else>********</span>
+ </div>
</div>
</div>
</div>
</div>
</template>
+
<script>
-import { _getAllWallet } from '@/service/fund.api';
-import { Dialog } from 'vant';
-import { mapGetters } from 'vuex';
-import { HOST_URL } from '@/config';
-import { THEME } from '@/config/theme';
+import { _getAllWallet } from '@/service/fund.api'
+import { Dialog } from 'vant'
+import { mapGetters } from 'vuex'
+import { HOST_URL } from '@/config'
+import { THEME } from '@/config/theme'
+
export default {
name: 'Assets',
components: {
@@ -180,178 +122,281 @@
THEME,
HOST_URL,
list: [],
- total: '',
- status: '', //身份认证状态 0已申请未审核，1审核中，2审核通过，3审核未通过
- eyetel: false,
- active: 0
- };
+ eyetel: false
+ }
},
mounted() {
- this.getList();
+ this.getList()
},
methods: {
handImg(url) {
return new URL(url, import.meta.url).href
},
- onClickLeft() {
- this.$router.go(-1);
- },
goRouter(parmas) {
if (parmas === '/cryptos/exchangeHistory') {
- this.$router.push({ path: parmas, query: { type: 1 } });
+ this.$router.push({ path: parmas, query: { type: 1 } })
} else {
- this.$router.push(parmas);
+ this.$router.push(parmas)
}
},
compare(p, type) {
- //这是比较函数
return function (m, n) {
- var a = m[p];
- var b = n[p];
- if (a == b) {
- return;
- }
- if (type == 'up') {
- return b - a; //升序
- } else if (type == 'down') {
- return a - b; //降序
- } else {
- return a - b;
- }
- };
- },
- getList() {
- _getAllWallet({
- symbolType: 'cryptos'
- }).then((res) => {
- let list = res.extends;
- this.list = [...list].sort(this.compare('usdt', 'up'));
- });
- },
- changeEyes() {
- this.eyetel = !this.eyetel;
- },
- beforeClose(action, done) {
- if (action === 'confirm') {
- setTimeout(done, 1000);
- } else {
- done();
+ var a = m[p]
+ var b = n[p]
+ if (a == b) return 0
+ if (type == 'up') return b - a
+ return a - b
}
},
- //跳转提币页面
+ getList() {
+ _getAllWallet({ symbolType: 'cryptos' }).then((res) => {
+ let list = res.extends
+ this.list = [...list].sort(this.compare('usdt', 'up'))
+ })
+ },
+ formatAmount(symbol, val) {
+ const num = Number(val) || 0
+ if (symbol === 'usdt') return num.toFixed(2)
+ if (symbol === 'btc' || symbol === 'eth') return num.toFixed(8)
+ return num.toFixed(8)
+ },
+ changeEyes() {
+ this.eyetel = !this.eyetel
+ },
withdrawBtn() {
- //身份已认证，直接跳转，未认证则提示跳身份认证页
- // if(this.funds.status==2) {
- // this.$router.push({
- // path:'/cryptos/withdraw/withdrawPage'
- // });
- // }else{
- // Dialog.confirm({
- // confirmButtonText:this.$t('确定'),
- // cancelButtonText:this.$t('取消'),
- // title: this.$t('提示'),
- // message: this.$t('请进行身份KYC认证'),
- // beforeClose: (action, done) => {
- // if (action === 'confirm') {
- // done();
- // this.$router.push({
- // path:'/authentication'
- // });
- // } else {
- // done();
- // }
- // },
- // });
- // }
- this.$router.push({
- path: '/cryptos/withdraw/withdrawPage'
- });
+ this.$router.push({ path: '/cryptos/withdraw/withdrawPage' })
}
}
-};
+}
</script>
<style lang="scss" scoped>
-@import "@/assets/init.scss";
+@import '@/assets/init.scss';
-#cryptos {
- .right-clock {
- position: absolute;
- top: 0;
- right: -3px;
+.funds-spot {
+ padding-top: 16px;
+ padding-bottom: 40px;
+}
+
+.balance-hero {
+ padding: 36px 32px;
+ border-radius: 24px;
+ background: linear-gradient(135deg, #1a6dff 0%, #004aee 55%, #0035b8 100%);
+ color: #fff;
+ box-shadow: 0 16px 40px rgba(0, 74, 238, 0.28);
+ margin-bottom: 28px;
+}
+
+.balance-hero-top {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 16px;
+}
+
+.balance-label {
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ font-size: 26px;
+ opacity: 0.9;
+}
+
+.eye-btn img {
+ width: 36px;
+ height: 22px;
+}
+
+.history-btn img {
+ width: 36px;
+ height: 42px;
+ opacity: 0.85;
+}
+
+.balance-amount {
+ font-size: 64px;
+ font-weight: 700;
+ line-height: 1.15;
+ word-break: break-all;
+}
+
+.balance-fiat {
+ margin-top: 10px;
+ font-size: 28px;
+ opacity: 0.85;
+}
+
+.quick-actions {
+ display: grid;
+ grid-template-columns: repeat(4, 1fr);
+ gap: 16px;
+ margin-bottom: 36px;
+}
+
+.action-item {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 10px;
+ padding: 20px 8px;
+ border-radius: 20px;
+ @include themify() {
+ background: themed('cont_background');
}
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
- .total_wrap {
- margin-top: 44px;
- }
-
- .asset-title-box {
- margin: 40px 0;
- }
-
- .btn-box {
- margin-top: 44px;
- }
-
- .btn-box>div {
- width: 234px;
- padding: 20px 15px;
- box-sizing: border-box;
- text-align: center;
- border-radius: 8.8px;
- font-size: 26.5px;
- display: flex;
- justify-content: center;
- align-items: center;
-
- .word-wrap {
- display: flex;
- align-items: center;
- justify-content: center;
-
- img {
- width: 40px;
- height: 40px;
- margin-right: 22px;
- }
-
- span {
- font-size: 26.5px;
- }
+ span {
+ font-size: 24px;
+ @include themify() {
+ color: themed('text_color');
}
}
+}
- .mr60 {
- margin-right: 60px;
+.action-icon {
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ img {
+ width: 40px;
+ height: 40px;
}
- .divider-line {
- border-bottom: 1px solid $border-grey;
- padding-bottom: 80px;
- }
+ &.deposit { background: rgba(26, 109, 255, 0.12); }
+ &.withdraw { background: rgba(230, 84, 97, 0.12); }
+ &.swap { background: rgba(46, 189, 133, 0.12); }
+ &.transfer { background: rgba(255, 152, 0, 0.12); }
+}
- .assets-content-title {
- margin-top: 60px;
- margin-bottom: 55px;
- }
+.section-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 20px;
+}
- .assets-list {
- margin-bottom: 70px;
+.section-title {
+ font-size: 32px;
+ font-weight: 600;
+ @include themify() {
+ color: themed('text_color');
}
+}
- .assets-list>div {
- display: flex;
+.section-count {
+ font-size: 24px;
+ @include themify() {
+ color: themed('text_color1');
}
+}
- .assets-list>div:nth-child(2) div:nth-child(1) {
- margin-bottom: 16px;
- font-size: 30px;
- font-weight: 700;
+.coin-list {
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+}
+
+.coin-card {
+ padding: 28px 24px;
+ border-radius: 20px;
+ @include themify() {
+ background: themed('cont_background');
}
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
+}
- .symbol-name {
- margin-left: 22px;
- //margin-top:10px;
+.coin-card-head {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ padding-bottom: 24px;
+ margin-bottom: 24px;
+ border-bottom: 1px solid rgba(128, 128, 128, 0.12);
+}
+
+.coin-info {
+ display: flex;
+ align-items: center;
+ gap: 20px;
+}
+
+.coin-icon {
+ width: 72px;
+ height: 72px;
+ border-radius: 50%;
+}
+
+.coin-symbol {
+ font-size: 32px;
+ font-weight: 700;
+ @include themify() {
+ color: themed('text_color');
+ }
+}
+
+.coin-pair {
+ font-size: 24px;
+ margin-top: 4px;
+ @include themify() {
+ color: themed('text_color1');
+ }
+}
+
+.coin-total {
+ text-align: right;
+}
+
+.coin-total-val {
+ font-size: 30px;
+ font-weight: 600;
+ @include themify() {
+ color: themed('text_color');
+ }
+}
+
+.coin-total-fiat {
+ margin-top: 6px;
+ font-size: 24px;
+ @include themify() {
+ color: themed('text_color1');
+ }
+}
+
+.coin-stats {
+ display: flex;
+ gap: 12px;
+}
+
+.stat-item {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ padding: 16px 12px;
+ border-radius: 12px;
+ @include themify() {
+ background: themed('main_background');
+ }
+}
+
+.stat-label {
+ font-size: 22px;
+ @include themify() {
+ color: themed('text_color1');
+ }
+}
+
+.stat-value {
+ font-size: 24px;
+ font-weight: 600;
+ word-break: break-all;
+ @include themify() {
+ color: themed('text_color');
}
}
</style>
--
Gitblit v1.9.3