1

李凌

9 days ago 349c48e168b9f2580334422228acde7d1b21bede

 src/views/my/assets.vue

@@ -2,8 +2,7 @@
    <div class="assets">
        <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' }}
            {{ currency.currency_symbol }}{{ formatWithCommas(totalAssetsFiat) }}

            <div class="pricing_jj ml-5">
                {{ pricing }}
@@ -14,39 +13,42 @@
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>
        <div class="assets_revenue mt-5">
            <span>{{ $t('ProfitDay') }}</span>
            {{ currency.currency_symbol }}{{ forexAssets?.money_contract_profit_today ?
                (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
                '--' }}
        </div>
        <!-- <div class="assets_revenue mt-5">
            <span>{{ $t('当日') }}</span>
            {{ currency.currency_symbol }}
            <span
                :style="forexAssets?.money_contract_profit_today > 0 ? 'color:green' : forexAssets?.money_contract_profit_today < 0 ? 'color:red' : ''">
                {{ forexAssets?.money_contract_profit_today ?
                    (forexAssets?.money_contract_profit_today * (currency.rate ?? 0)).toFixed(2) :
                    '--' }}
            </span>
        </div> -->

        <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 style="width: 100px;" :src="item.icon" alt="">
                <img :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>
                    <div class="flex-1">
                    </div>
                <div class="distribution-bar">
                    <div class="bar-segment bar-capital" :style="{ width: capitalPercent + '%' }"></div>
                    <div class="bar-segment bar-contract" :style="{ width: contractPercent + '%' }"></div>
                </div>
                <div class="assets_item flex justify-start items-center mt-14 font-bold">
                <div class="assets_item flex justify-start items-center mt-14 font-bold" @click="toPage('/cryptos/funds?tab=1')">
                    <div class="icon" style="background-color: #8A90FE;"></div>
                    <span class="ml-5 flex-1">{{ $t('资金账户') }}</span>
                    <span class="mr-5">{{ assetObj.capital }}</span>
                    <span class="distribution-percent">{{ capitalPercentText }}</span>
                    <span class="mr-5">{{ formatAssetAmount(assetObj.capital) }}</span>
                    <van-icon name="arrow" />
                </div>
                <div class="assets_item flex justify-start items-center mt-14 font-bold">
                <div class="assets_item flex justify-start items-center mt-14 font-bold" @click="toPage('/cryptos/funds?tab=2')">
                    <div class="icon" style="background-color: #f7b600;"></div>
                    <span class="ml-5 flex-1">{{ $t('交易账户') }}</span>
                    <span class="mr-5">{{ assetObj.contract }}</span>
                    <span class="distribution-percent">{{ contractPercentText }}</span>
                    <span class="mr-5">{{ formatAssetAmount(assetObj.contract) }}</span>
                    <van-icon name="arrow" />
                </div>
            </van-collapse-item>
@@ -77,7 +79,7 @@
</template>

<script setup>
import { ref } from "vue";
import { ref, computed } from "vue";
import { useI18n } from "vue-i18n";
import { useRouter } from 'vue-router';
import { _getExchangeRate } from '@/service/cryptos.api'
@@ -101,7 +103,7 @@
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: 3, name: t('划转'), icon: new URL('@/assets/imgs/assets/huazhuan.png', import.meta.url), path: '/my/transfer' },
    { key: 5, name: t('闪兑'), icon: new URL('@/assets/imgs/assets/sd.png', import.meta.url), path: '/cryptos/exchangePage' },
    { key: 4, name: t('账单'), icon: new URL('@/assets/imgs/assets/zd.png', import.meta.url), path: '/cryptos/accountChange' },
]
@@ -155,10 +157,37 @@
        })
}
const assetObj = ref({})
const getassets = () => { // 获取资产
const getassets = () => {
    _getassets().then(res => {
        assetObj.value = res
        assetObj.value = res || {}
    })
}

const capitalAmount = computed(() => Number(assetObj.value.capital) || 0)
const contractAmount = computed(() => Number(assetObj.value.contract) || 0)
const totalAssetsUsdt = computed(() => capitalAmount.value + contractAmount.value)

const capitalPercent = computed(() => {
    if (totalAssetsUsdt.value <= 0) return 0
    return Math.round((capitalAmount.value / totalAssetsUsdt.value) * 1000) / 10
})

const contractPercent = computed(() => {
    if (totalAssetsUsdt.value <= 0) return 0
    return Math.round((contractAmount.value / totalAssetsUsdt.value) * 1000) / 10
})

const capitalPercentText = computed(() => `${capitalPercent.value.toFixed(1)}%`)
const contractPercentText = computed(() => `${contractPercent.value.toFixed(1)}%`)

const totalAssetsFiat = computed(() => {
    const rate = Number(currency.value.rate) || 0
    return (totalAssetsUsdt.value * rate).toFixed(2)
})

const formatAssetAmount = (val) => {
    const num = Number(val) || 0
    return formatWithCommas(num.toFixed(2))
}

// 获取资产列表
@@ -181,12 +210,16 @@


<style lang="scss" scoped>
@import '@/assets/theme/index.scss';

.assets {
    min-height: 100vh;
    background: $mainbgWhiteColor;
    padding: 2.8rem 2rem 10rem 2rem;
    $assets_title_color: #9a9a9a;
    color: $assets_title_color;

    @include themify() {
        color: themed("text_color2");
    }

    :deep(.van-cell) {
        padding-left: 0;
@@ -212,8 +245,11 @@
    }

    .assets_money {
        color: $text_color4;
        font-size: 3.4rem;

        @include themify() {
            color: themed("text_color");
        }

        .pricing_jj {
            font-size: 1.6rem;
@@ -245,13 +281,19 @@

    .assets_revenue {
        font-size: 2rem;
        color: #646464;
        font-weight: 600;

        @include themify() {
            color: themed("text_color1");
        }

        span {
            color: #6e6e6e;
            text-decoration: underline dotted;
            font-weight: 400;

            @include themify() {
                color: themed("text_color1");
            }
        }
    }

@@ -260,7 +302,10 @@
            $item_width: 8.3rem;
            width: $item_width;
            font-size: 1.8rem;
            color: $text_color4;

            @include themify() {
                color: themed("text_color2");
            }

            img {
                height: $item_width;
@@ -274,6 +319,39 @@
    //     border-radius: 0.5rem;
    //     background: $bg_yellow;
    // }

    .distribution-bar {
        display: flex;
        width: 100%;
        height: 1rem;
        border-radius: 0.5rem;
        overflow: hidden;
        gap: 0.2rem;
    }

    .bar-segment {
        height: 100%;
        min-width: 0;
        transition: width 0.25s ease;
    }

    .bar-capital {
        background: #8A90FE;
    }

    .bar-contract {
        background: $bg_yellow;
    }

    .distribution-percent {
        margin-right: 1.2rem;
        font-size: 1.8rem;
        font-weight: 400;

        @include themify() {
            color: themed("text_color1");
        }
    }

    .percentage {
        div {
@@ -292,8 +370,11 @@
    }

    .assets_item {
        color: $text_color4;
        font-size: 2.1rem;

        @include themify() {
            color: themed("text_color2");
        }

        .icon {
            width: 1.8rem;
@@ -309,8 +390,11 @@
        }

        .assets_item_light {
            color: #9b9b9b;
            font-weight: 300;

            @include themify() {
                color: themed("text_color2");
            }
        }
    }
}