From 631dc512b226b346fefaebbedf1ddd79c06cab71 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Thu, 09 Oct 2025 11:06:15 +0800
Subject: [PATCH] 二三给的
---
src/views/my/assets.vue | 210 +++++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 188 insertions(+), 22 deletions(-)
diff --git a/src/views/my/assets.vue b/src/views/my/assets.vue
index 3b70fa7..6fbb714 100644
--- a/src/views/my/assets.vue
+++ b/src/views/my/assets.vue
@@ -1,6 +1,6 @@
<template>
- <div class="assets">
- <div class="assets_title">{{ $t('总资产估值') }}</div>
+ <div class="assets main_background text_color">
+ <!-- <div class="assets_title">{{ $t('总资产估值') }}</div>
<div class="assets_money font-bold mt-5 flex justify-start items-end">
{{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
(forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
@@ -30,7 +30,6 @@
<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>
@@ -64,8 +63,6 @@
<span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>
<div class="mr-3">
- <!-- <div class="text-right">0</div>
- <div class="assets_item_light text-right">0.00</div> -->
<div class="text-right" v-if="item.symbol == 'btc'">
{{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
</div>
@@ -83,6 +80,93 @@
{{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
</div>
</div>
+ </div> -->
+
+ <van-nav-bar>
+ <template #left>
+ <div class="assets_tabs flex justify-start items-center textColor1">
+ <div v-for="i in headList" :key="i" :class="i.key == activeHead ? 'textColor' : ''"
+ @click="activeHead = i.key">
+ {{ i.name }}
+ </div>
+ </div>
+ </template>
+ <template #right v-if="activeHead != 0">
+ <van-icon name="todo-list-o" class="textColor" @click="toPage('/cryptos/accountChange')" />
+ </template>
+ </van-nav-bar>
+
+ <div class="assets_content">
+ <template v-if="activeHead == 0">
+ <div class="assets_1">
+ {{ $t('总资产估值') }}
+ </div>
+ <div class="assets_money mt-5 flex justify-start items-end">
+ {{ currency.currency_symbol }}{{ forexAssets?.money_contract ?
+ (forexAssets?.money_contract * (currency.rate ?? 0)).toFixed(2) : '0.00' }}
+
+ <div class="pricing_jj ml-5">
+ {{ pricing }}
+ </div>
+ <van-dropdown-menu style="position: relative;top: .5rem;">
+ <van-dropdown-item v-model="pricing" :options="pricingList" @change="changePricing">
+ <div @click="toPage('/cryptos/exchangeRate')" class="text-center">{{ $t('更多') }}</div>
+ </van-dropdown-item>
+ </van-dropdown-menu>
+ </div>
+ </template>
+
+ <template v-else-if="activeHead == 1">
+ <div class="assets_1">
+ {{ $t('资金账户') }}
+ </div>
+ <div class="assets_money mt-5 flex justify-start items-end">
+ ${{ assetObj.capital }}
+ <span>USD</span>
+ </div>
+ <div class="assets_2 flex justify-around items-center">
+ <div v-for="i in tabList" :key="i.key" @click="toPage(i.path)">
+ <img :src="i.icon" alt="" v-if="theme == 'light'">
+ <img :src="i.icon2" alt="" v-else>
+ <div>{{ i.name }}</div>
+ </div>
+ </div>
+
+ <div class="assets_3">
+ <div class="assets_3_head flex justify-between items-center">
+ <span>{{ $t('名称') }}</span>
+ <span>{{ $t('volumn') }}</span>
+ </div>
+ <div class="assets_3_item flex justify-between items-center" v-for="i in assetList" :key="i.id">
+ <div class="flex justify-start items-center">
+ <img :src="`${HOST_URL}/symbol/${i.symbol_data}.png`" />
+ <span class="ml-5">{{ i.symbol_data.toUpperCase() }}</span>
+ </div>
+ <div>
+ <p>{{ i.volume ? Number(i.volume).toFixed(8) : '0.0' }}</p>
+ <p>≈{{ currency.currency_symbol }}
+ {{ i.usdt ? Number(i.usdt).toFixed(2) : '0.0' }}</p>
+ </div>
+ </div>
+ </div>
+ </template>
+
+ <template v-else-if="activeHead == 2">
+ <div class="assets_1">
+ {{ $t('交易账户') }}
+ </div>
+ <div class="flex justify-between items-center">
+ <div class="assets_money mt-5 flex justify-start items-end">
+ ${{ assetObj.contract }}
+ <span>USD</span>
+ </div>
+ <div class="assets_4" @click="toPage('/my/transfer')">
+ <img :src="tabList[2].icon" alt="" v-if="theme == 'light'">
+ <img :src="tabList[2].icon2" alt="" v-else>
+ <p>{{ $t('划转') }}</p>
+ </div>
+ </div>
+ </template>
</div>
</div>
</template>
@@ -107,12 +191,22 @@
const { t } = useI18n()
const activeNames = ref(['1'])
const { dispatch } = useStore();
+const theme = ref(store.state.vant.theme) // 当前主题模式,白天(light)或夜间(dark)
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: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
+ {
+ key: 1, name: t('充值'), icon: new URL(`@/assets/theme/white/image/assets/recharge.png`, import.meta.url),
+ icon2: new URL(`@/assets/theme/dark/image/assets/recharge.png`, import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true'
+ },
+ {
+ key: 2, name: t('提现'), icon: new URL(`@/assets/theme/white/image/assets/withdrawal.png`, import.meta.url),
+ icon2: new URL(`@/assets/theme/dark/image/assets/withdrawal.png`, import.meta.url), path: '/cryptos/Withdraw/withdrawPage'
+ },
+ {
+ key: 3, name: t('划转'), icon: new URL(`@/assets/theme/white/image/assets/transfer.png`, import.meta.url),
+ icon2: new URL(`@/assets/theme/dark/image/assets/transfer.png`, import.meta.url), path: '/my/transfer'
+ },
+ // { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
]
// 计价切换
@@ -142,6 +236,7 @@
const currency = ref({})
const forexAssets = ref({})
const symbolType = ref('cryptos') //默认etf
+
const getCurrency = async () => {
_getExchangeRate({
token: store.state.user.userInfo.token
@@ -179,16 +274,85 @@
getassets()
getCurrency()
getContractBySymbolType()
-</script>
+// 头部切换项
+const activeHead = ref(0)
+const headList = [
+ { name: t('总资产估值'), key: 0 },
+ { name: t('资金账户'), key: 1 },
+ { name: t('交易账户'), key: 2 },
+]
+</script>
<style lang="scss" scoped>
.assets {
min-height: 100vh;
- background: $mainbgWhiteColor;
- padding: 2.8rem 2rem 10rem 2rem;
- $assets_title_color: #9a9a9a;
- color: $assets_title_color;
+ font-size: 1.4rem;
+
+ ::v-deep .van-nav-bar {
+ border-bottom: $divi_line solid 1px;
+ }
+
+ justify-content: space-around;
+
+ .assets_tabs {
+ font-size: 2rem;
+
+ &>div {
+ margin-right: 2rem;
+ }
+ }
+
+ .assets_content {
+ padding: 16px 16px 10rem;
+ }
+
+ .assets_1 {
+ font-size: 1.5rem;
+ }
+
+ .assets_2 {
+ margin-top: 3rem;
+ font-size: 1.4rem;
+
+ &>div {
+ text-align: center;
+
+ img {
+ height: 2.4rem;
+ margin: 0 auto .4rem;
+ }
+ }
+ }
+
+ .assets_3 {
+ margin-top: 3rem;
+
+ .assets_3_item {
+ margin-bottom: 3.2rem;
+
+ p {
+ text-align: end;
+ }
+
+ img {
+ width: 3.6rem;
+ }
+ }
+
+ .assets_3_head {
+ border-bottom: $divi_line solid 1px;
+ margin-bottom: 1.7rem;
+ }
+ }
+
+ .assets_4 {
+ padding-right: 2rem;
+
+ img {
+ height: 2.4rem;
+ }
+ }
:deep(.van-cell) {
padding-left: 0;
@@ -214,12 +378,20 @@
}
.assets_money {
- color: $text_color4;
- font-size: 3.4rem;
+ font-size: 3rem;
.pricing_jj {
font-size: 1.6rem;
margin-right: -8px;
+ position: relative;
+ top: .5rem;
+ }
+
+ &>span {
+ font-size: 1.6rem;
+ margin-left: .6rem;
+ position: relative;
+ top: 0.5rem;
}
:deep(.van-dropdown-menu__bar) {
@@ -270,12 +442,6 @@
}
}
}
-
- // .divider {
- // height: 1rem;
- // border-radius: 0.5rem;
- // background: $bg_yellow;
- // }
.percentage {
div {
--
Gitblit v1.9.3