From 4e0d61d271cf51bcb3709986064d6bbfd84be896 Mon Sep 17 00:00:00 2001
From: 李凌 <344137771@qq.com>
Date: Thu, 18 Sep 2025 17:35:33 +0800
Subject: [PATCH] 1
---
src/views/my/assets.vue | 237 ++++++++++++++++++++++++++++++++++++++++++++++++-----------
1 files changed, 192 insertions(+), 45 deletions(-)
diff --git a/src/views/my/assets.vue b/src/views/my/assets.vue
index 7671cd7..69246a1 100644
--- a/src/views/my/assets.vue
+++ b/src/views/my/assets.vue
@@ -1,6 +1,68 @@
<template>
<div class="assets">
- <div class="assets_title">{{ $t('总资产估值') }}</div>
+ <van-field v-model="searchValue" :placeholder="$t('search')" class="assets_search" left-icon="search" />
+
+ <div class="assets_1">
+ <div class="price_box-tit">{{ $t('总资产估值') }}</div>
+
+ <div class="price_box-text assets_money font-bold mt-5 flex justify-center 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>
+ <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>
+
+ <div class="price-bot">
+ <div>
+ <div class="price-bot-tit mb-3">{{ $t('ProfitDay') }}</div>
+ <div class="price-bot-text">
+ {{ currency.currency_symbol }}{{
+ forexAssets?.money_contract_profit_today ?
+ (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
+ '--' }}
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="assets_2 flex justify-between items-center">
+ <div class="flex justify-center items-center" v-for="i in tabList1" :key="i.key" @click="toPage(i.path)">
+ <img :src="i.icon" alt="">
+ <span>{{ i.name }}</span>
+ </div>
+ </div>
+
+ <van-collapse v-model="activeNames" class="mt-10">
+ <van-collapse-item :title="$t('分布')" name="1">
+ <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>
+ <div class="assets_item flex justify-start items-center mt-14 font-bold">
+ <div class="icon" style="background-color: #8A90FE;"></div>
+ <span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
+ <span class="mr-5">{{ assetObj.capital }}</span>
+ <van-icon name="arrow" />
+ </div>
+ <div class="assets_item flex justify-start items-center mt-14 font-bold">
+ <div class="icon" style="background-color: #f7b600;"></div>
+ <span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
+ <span class="mr-5">{{ assetObj.contract }}</span>
+ <van-icon name="arrow" />
+ </div>
+ </van-collapse-item>
+ </van-collapse>
+
+ <!-- <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' }}
@@ -23,14 +85,13 @@
<div class="tabbers flex justify-between mt-20 pl-1 pr-1">
<div class="item" v-for="item in tabList" :key="item.key" @click="toPage(item.path)">
- <img :src="item.icon" alt="">
+ <img style="width: 100px;" :src="item.icon" alt="">
<div class="mt-3 text-center">{{ item.name }}</div>
</div>
</div>
<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>
@@ -55,32 +116,34 @@
<div class="assets_item flex font-bold justify-between items-center mt-14 mb-10">
<span>{{ $t('资产') }}</span>
<van-icon name="exchange" size="3rem" />
- </div>
+ </div> -->
- <div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetList"
- :key="item.id">
- <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" />
+ <div class="assets_3 mt-10">
+ <div class="assets_item flex justify-start items-center mb-10 font-bold" v-for="item in assetListCopy"
+ :key="item.id">
+ <img :src="`${HOST_URL}/symbol/${item.symbol_data}.png`" />
- <span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>
+ <span class="ml-5 flex-1">{{ item.symbol_data.toUpperCase() }}/USDT</span>
- <div class="mr-3">
- <!-- <div class="text-right">0</div>
+ <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>
- <div class="text-right" v-else-if="item.symbol == 'eth'">
- {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
- </div>
- <div class="text-right" v-else-if="item.symbol == 'usdt'">
- {{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
- </div>
- <div class="text-right" v-else>
- {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
- </div>
- <div class="assets_item_light text-right">
- ≈{{ currency.currency_symbol }}
- {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
+ <div class="text-right" v-if="item.symbol == 'btc'">
+ {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
+ </div>
+ <div class="text-right" v-else-if="item.symbol == 'eth'">
+ {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
+ </div>
+ <div class="text-right" v-else-if="item.symbol == 'usdt'">
+ {{ item.volume ? Number(item.volume).toFixed(2) : '0.0' }}
+ </div>
+ <div class="text-right" v-else>
+ {{ item.volume ? Number(item.volume).toFixed(8) : '0.0' }}
+ </div>
+ <div class="assets_item_light text-right">
+ ≈{{ currency.currency_symbol }}
+ {{ item.usdt ? Number(item.usdt).toFixed(2) : '0.0' }}
+ </div>
</div>
</div>
</div>
@@ -88,7 +151,7 @@
</template>
<script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import { _getExchangeRate } from '@/service/cryptos.api'
@@ -110,9 +173,15 @@
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: '/exchange/withdraw-usdt' },
+ { 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' },
+]
+
+const tabList1 = [
+ { key: 1, name: t('充值'), icon: new URL('@/assets/imgs/assets/cz.png', import.meta.url), path: '/cryptos/recharge/rechargeList?isForeign=true' },
+ { key: 2, name: t('提现'), icon: new URL('@/assets/imgs/assets/tx.png', import.meta.url), path: '/cryptos/Withdraw/withdrawPage' },
+ { key: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/hz.png', import.meta.url), path: '/my/transfer' },
]
// 计价切换
@@ -165,15 +234,23 @@
// 获取资产列表
const assetList = ref([])
+const assetListCopy = ref([])
const getList = () => {
_getAllWallet({
symbolType: 'cryptos'
}).then((res) => {
assetList.value = res.extends
- console.log("资产列表", assetList.value);
-
+ assetListCopy.value = res.extends
+ // console.log("资产列表", assetList.value);
});
}
+
+// 资产列表筛选
+const searchValue = ref('')
+watch(searchValue, (newVal) => {
+ assetListCopy.value = assetList.value.filter(item => item.name.toLowerCase().includes(newVal.trim().toLowerCase()))
+})
+
getList()
getassets()
@@ -181,14 +258,11 @@
getContractBySymbolType()
</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;
+ color: $text_color;
:deep(.van-cell) {
padding-left: 0;
@@ -209,12 +283,89 @@
font-weight: 600;
}
+ .assets_search {
+ background-color: $input_background;
+ width: 100%;
+ border-radius: 2.5rem;
+ padding: .5rem 2rem;
+ }
+
+ .assets_1 {
+ background: url('@/assets/image/assets-center/as_bg.png');
+ background-size: 100% 100%;
+ padding: 2rem 2rem 2.375rem;
+ margin: 2.5rem 0 5rem 0;
+ border-radius: 1.125rem;
+
+ .price_box-tit {
+ font-size: 2.2rem;
+ margin-bottom: 1.4rem;
+ display: flex;
+ justify-content: center;
+ }
+
+ .price_box-text {
+ margin-bottom: 1.4rem;
+ font-size: 3.2rem;
+ }
+
+ .price-bot {
+ display: flex;
+ justify-content: space-around;
+ background: rgba(0, 0, 0, .4);
+ border-radius: .75rem;
+ padding: .75rem;
+
+ .price-bot-tit {
+ text-align: center;
+ font-size: 2rem;
+ }
+
+ .price-bot-text {
+ font-weight: 500;
+ color: #fb7171;
+ font-size: 3.2rem;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ }
+ }
+ }
+
+ .assets_2 {
+ margin-bottom: 2.2rem;
+ // padding: 0 1rem;
+
+ &>div {
+ width: 14.625rem;
+ height: 5rem;
+ background-color: $input_background;
+ font-size: 1.6562rem;
+ border-radius: .55rem;
+
+ img {
+ width: 2.5rem;
+ height: 2.5rem;
+ margin-right: 1.375rem;
+ }
+ }
+ }
+
+ .assets_3 {
+ background-color: $input_background;
+ width: 100%;
+ background: #212121;
+ border-radius: 3rem;
+ padding: 2.7rem;
+ box-sizing: border-box;
+ }
+
.assets_title {
font-size: 2.1rem;
}
.assets_money {
- color: $text_color4;
+ color: $text_color3;
font-size: 3.4rem;
.pricing_jj {
@@ -247,11 +398,11 @@
.assets_revenue {
font-size: 2rem;
- color: #646464;
+ color: $text_color3;
font-weight: 600;
span {
- color: #6e6e6e;
+ color: $text_color3;
text-decoration: underline dotted;
font-weight: 400;
}
@@ -262,7 +413,7 @@
$item_width: 8.3rem;
width: $item_width;
font-size: 1.8rem;
- color: $text_color4;
+ color: $text_color3;
img {
height: $item_width;
@@ -270,12 +421,6 @@
}
}
}
-
- // .divider {
- // height: 1rem;
- // border-radius: 0.5rem;
- // background: $bg_yellow;
- // }
.percentage {
div {
@@ -294,8 +439,10 @@
}
.assets_item {
- color: $text_color4;
+ color: $text_color3;
font-size: 2.1rem;
+ padding: 1.5rem 0;
+ border-bottom: #555 solid 1px;
.icon {
width: 1.8rem;
@@ -311,7 +458,7 @@
}
.assets_item_light {
- color: #9b9b9b;
+ color: $text_color3;
font-weight: 300;
}
}
--
Gitblit v1.9.3