<template>
|
<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="history-btn" @click="goRouter('/cryptos/exchangeHistory')">
|
<img :src="handImg('../../../assets/image/assets-center/Subtract.png')" />
|
</div>
|
</div>
|
<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="balance-fiat" v-else>≈{{ currency.currency_symbol }} ********</div>
|
</div>
|
|
<!-- 快捷操作 -->
|
<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="" />
|
</div>
|
<span>{{ $t('充币') }}</span>
|
</div>
|
<div class="action-item" @click="withdrawBtn">
|
<div class="action-icon withdraw">
|
<img :src="handImg(`../../../assets/theme/${THEME}/image/assets/down.png`)" alt="" />
|
</div>
|
<span>{{ $t('提币') }}</span>
|
</div>
|
<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="" />
|
</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="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="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="coin-total" v-else>
|
<div class="coin-total-val">********</div>
|
<div class="coin-total-fiat">≈{{ currency.currency_symbol }} ********</div>
|
</div>
|
</div>
|
<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'
|
|
export default {
|
name: 'Assets',
|
components: {
|
[Dialog.name]: Dialog
|
},
|
props: ['funds', 'tab'],
|
computed: {
|
...mapGetters('home', ['currency'])
|
},
|
data() {
|
return {
|
THEME,
|
HOST_URL,
|
list: [],
|
eyetel: false
|
}
|
},
|
mounted() {
|
this.getList()
|
},
|
methods: {
|
handImg(url) {
|
return new URL(url, import.meta.url).href
|
},
|
goRouter(parmas) {
|
if (parmas === '/cryptos/exchangeHistory') {
|
this.$router.push({ path: parmas, query: { type: 1 } })
|
} else {
|
this.$router.push(parmas)
|
}
|
},
|
compare(p, type) {
|
return function (m, n) {
|
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() {
|
this.$router.push({ path: '/cryptos/withdraw/withdrawPage' })
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
@import '@/assets/init.scss';
|
|
.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);
|
|
span {
|
font-size: 24px;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
}
|
|
.action-icon {
|
width: 80px;
|
height: 80px;
|
border-radius: 50%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
|
&.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); }
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20px;
|
}
|
|
.section-title {
|
font-size: 32px;
|
font-weight: 600;
|
@include themify() {
|
color: themed('text_color');
|
}
|
}
|
|
.section-count {
|
font-size: 24px;
|
@include themify() {
|
color: themed('text_color1');
|
}
|
}
|
|
.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);
|
}
|
|
.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>
|
