1

李凌

2025-10-09 c17311ba1351cd5e64654c3fc7b2fe765b1e7382

 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 {