<template>
|
<div class="status_bar">
|
<div class="my-20 mx-17 h-172 box-border text-white pt-40 px-20 bgimglx">
|
<div class="text-17 font-medium block">{{ t('总额') }}</div>
|
<div class="text-34 font-medium block">{{ symbol }}</div>
|
<div class="flex items-center mt-20">
|
<div class="flex items-center rounded-14 bg-#3640f0 px-10" @click="goTo('/cryptos/recharge/rechargeList')">
|
<div class="text-13 font-bold">{{ t('充值') }}</div>
|
</div>
|
<div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10"
|
@click="goTo('/cryptos/withdraw/withdrawPage')">
|
<div class="text-13 font-bold">{{ t('提现') }}</div>
|
</div>
|
<div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10" @click="goTo('/cryptos/exchangePage')">
|
<div class="text-13 font-bold">{{ t('兑换') }}</div>
|
</div>
|
<div class="flex items-center rounded-14 bg-#3640f0 px-10 ml-10" @click="goTo('/cryptos/funds')">
|
<div class="text-13 font-bold">{{ t('资产') }}</div>
|
</div>
|
<div class="flex flex-1 justify-end">
|
<!-- <img src="@/assets/imgs/icon-order.png" class="w-14 h-15" draggable="false"> -->
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 货币列表部分 -->
|
<div class="pt-20 px-15">
|
<!-- DOGE 货币卡片 -->
|
<div v-for="(currency, index) in currencies" :key="index" class="p-14 mb-15"
|
style="border: 0.5px solid rgb(243, 243, 243);">
|
<div class="text-14 title pb-10" style="border-bottom: 0.5px solid rgb(243, 243, 243);">
|
{{ currency.symbol.toUpperCase() }}
|
</div>
|
<div class="text-12 pt-10">
|
<div class="flex justify-between items-center">
|
<div style="color: rgb(150, 150, 150);">{{ t('可用') }}({{ currency.symbol.toUpperCase() }})</div>
|
<div class="title text-blue-600">{{ currency.usable }}</div>
|
</div>
|
<div class="my-16 flex justify-between items-center">
|
<div style="color: rgb(150, 150, 150);">{{ t('处理中') }}({{ currency.symbol.toUpperCase() }})</div>
|
<div>{{ currency.freeze_amount }}</div>
|
</div>
|
<div class="flex justify-between items-center">
|
<div style="color: rgb(150, 150, 150);">{{ t('转换') }}(USDT)</div>
|
<div>{{ currency.usdt }}</div>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
|
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue';
|
import { _getContractBySymbolType, _contractOrder } from '@/service/etf.api';
|
import { _getAllWallet } from '@/service/fund.api';
|
import { useI18n } from "vue-i18n";
|
import { useRouter } from 'vue-router';
|
const { t } = useI18n()
|
const router = useRouter();
|
|
onMounted(() => {
|
getSymbol();
|
getOrderList();
|
});
|
// 货币数据
|
const currencies = ref([
|
// {
|
// name: 'DOGE',
|
// mark_price: 0,
|
// },
|
]);
|
|
const symbol = ref('0.00'); // 总金额
|
// 总金额
|
const getSymbol = async () => {
|
const response = await _getContractBySymbolType('cryptos');
|
symbol.value = response.money_contract || symbol.value;
|
};
|
|
const goTo = (url) => {
|
router.push(url);
|
|
}
|
|
const getOrderList = async () => {
|
const params = {
|
// type: 'orders',
|
// page_no: 1,
|
// page_size: 'all',
|
symbolType: 'cryptos'
|
};
|
|
const response = await _getAllWallet(params);
|
console.log(response, 'response')
|
// 处理订单数据
|
// 优化：仅更新变化的字段而非替换整个数组
|
if (currencies.value) {
|
response.extends.forEach((newItem, index) => {
|
const oldItem = currencies.value[index];
|
if (oldItem) {
|
// 只更新变化的属性
|
Object.keys(newItem).forEach(key => {
|
if (oldItem[key] !== newItem[key]) {
|
oldItem[key] = newItem[key];
|
}
|
});
|
} else {
|
currencies.value.push(newItem);
|
}
|
});
|
} else {
|
currencies.value = response.extends;
|
}
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
@import "@/assets/css/deepseek_css_20250625_30ff932.css";
|
|
.bgimglx {
|
background: url('@/assets/imgs/position-card.png') no-repeat;
|
background-size: 100% 100%;
|
background-repeat: no-repeat;
|
}
|
</style>
|
