1

李凌

2025-09-12 0cf2a49d80c8d4ffba2df32f530f498a2c94458e

 src/views/my/assets.vue

@@ -1,6 +1,6 @@
<template>
    <div class="assets">
        <van-field v-model="value" :placeholder="$t('search')" class="assets_search" left-icon="search" />
        <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>
@@ -32,8 +32,37 @@
            </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>

        <div class="assets_title">{{ $t('总资产估值') }}</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' }}
@@ -87,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>
@@ -120,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'
@@ -145,6 +176,12 @@
    { 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' },
]

// 计价切换
@@ -197,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()
@@ -239,7 +284,7 @@
    }

    .assets_search {
        background-color: $mainbgWhiteColor;
        background-color: $input_background;
        width: 100%;
        border-radius: 2.5rem;
        padding: .5rem 2rem;
@@ -285,6 +330,34 @@
                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 {
@@ -368,6 +441,8 @@
    .assets_item {
        color: $text_color3;
        font-size: 2.1rem;
        padding: 1.5rem 0;
        border-bottom: #555 solid 1px;

        .icon {
            width: 1.8rem;