MTP20_WEB_GLOBAL/src/packages/digital/views/wallet/index.vue

<!-- 钱包 -->
<template>
    <app-view class="wallet">
        <div class="g-account-total" style="padding: 0 16px;">
            <div class="g-account-total__inner">
                <div class="g-account-total__header">
                    <div class="g-account-total__title">
                        <span>{{ $t('digital.total') }} (USDT)</span>
                        <img :src="`./img/icons/${isAmountVisible ? 'eye' : 'eye-hidden'}.svg`"
                            @click="isAmountVisible = !isAmountVisible" />
                    </div>
                </div>
                <div class="g-account-total__balance">
                    <span v-if="isAmountVisible">{{ totalBalance }}</span>
                    <span v-else>**********</span>
                </div>
            </div>
        </div>
        <app-grid :items="gridItems" />
        <app-switch-tab v-model="currentTabIndex" :options="tabs" />
        <contract-account @click="navigateToContractDetail" v-if="currentTabIndex === 0" />
        <spot-account @click="navigateToSpotDetail" v-if="currentTabIndex === 1" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed, watch, onActivated } from 'vue'
import { Decimal } from 'decimal.js'
import { useNavigation } from '@mobile/router/navigation'
import { useAccountStore } from '@/stores'
import { useSpotAccountStore } from './components/spot/composables'
import { i18n } from '@/stores'
import { GridItem } from '@/packages/digital/components/grid/types'
import AppGrid from '@/packages/digital/components/grid/index.vue'
import AppSwitchTab from '@/packages/digital/components/switch-tab/index.vue'
import SpotAccount from './components/spot/index.vue'
import ContractAccount from './components/contract/index.vue'

const { t } = i18n.global
const { router } = useNavigation()
const currentTabIndex = shallowRef(0)
const isAmountVisible = shallowRef(true)

const accountStore = useAccountStore()
const spotAccountStore = useSpotAccountStore()

const totalBalance = computed(() => {
    const { balance = 0, currencydecimalplace = 2 } = accountStore.getAccountItem({ currencyid: 102 }) ?? {}
    const { currentbalance = 0 } = spotAccountStore.getAccountItem({ currencyid: 102 }) ?? {}

    return Decimal(balance).plus(currentbalance).toFixed(currencydecimalplace)
})

const tabs = computed(() => ([
    { label: t('tabbar.contract') },
    { label: t('tabbar.spot') }
]))

const gridItems = computed<GridItem[]>(() => ([
    {
        text: t('digital.wallet-deposit'),
        icon: './img/icons/deposit.svg',
        to: { name: 'wallet-deposit-currency' }
    },
    {
        text: t('digital.wallet-withdraw'),
        icon: './img/icons/withdraw.svg',
        to: { name: 'wallet-withdraw-currency' }
    },
    {
        text: t('digital.wallet-transfer'),
        icon: './img/icons/transfer.svg',
        to: { name: 'wallet-transfer' }
    },
    {
        text: t('digital.setting'),
        icon: './img/icons/setting.svg',
        to: { name: 'setting' }
    }
]))

const navigateToSpotDetail = (currencyId: number) => {
    router.push({
        name: 'spot-detail',
        query: {
            id: currencyId
        }
    })
}

const navigateToContractDetail = (accountId: string) => {
    router.push({
        name: 'contract-detail',
        query: {
            id: accountId
        }
    })
}

watch(isAmountVisible, (val) => {
    localStorage.setItem('isAmountVisible', JSON.stringify(val))
})

onActivated(() => {
    const visible = localStorage.getItem('isAmountVisible') || 'true'
    isAmountVisible.value = JSON.parse(visible)
})
</script>