MTP20_WEB_GLOBAL/src/packages/digital/components/wallet-total/index.vue

<template>
    <div class="wallet-total">
        <div class="wallet-total__inner">
            <div class="wallet-total__header">
                <div class="wallet-total__title">
                    <span>{{ `${t('digital.total')}${currency}` }}</span>
                    <img :src="`./img/icons/${isBalanceVisible ? 'eye' : 'eye-hidden'}.svg`"
                        @click="isBalanceVisible = !isBalanceVisible" />
                </div>
            </div>
            <div class="wallet-total__balance">
                <span v-if="isBalanceVisible">{{ totalBalance }}</span>
                <span v-else>**********</span>
            </div>
            <div class="wallet-total__footer">

            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { shallowRef, computed, watch, onActivated } from 'vue'
import { i18n, useAccountStore } from '@/stores'
import { useSpotAccountStore } from '../../views/wallet/components/spot/composables'
import { Decimal } from 'decimal.js'

const props = defineProps({
    currency: {
        type: String,
        default: 'USDT'
    },
    balance: String,
})

const { global: { t } } = i18n
const accountStore = useAccountStore()
const spotAccountStore = useSpotAccountStore()
const isBalanceVisible = shallowRef(true)

const totalBalance = computed(() => {
    if (props.balance) return props.balance

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

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

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

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

<style lang="less">
@import "./index.less";
</style>