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

<!-- 钱包 -->
<template>
    <app-view class="wallet">
        <template #header>
            <app-statusbar />
        </template>
        <Grid :border="false">
            <GridItem icon="pending-payment" :text="t('digital.wallet-deposit')" :to="{ name: 'wallet-deposit-currency' }" />
            <GridItem icon="paid" :text="t('digital.wallet-withdraw')" :to="{ name: 'wallet-withdraw-currency' }" />
            <GridItem icon="peer-pay" :text="t('digital.wallet-transfer')" :to="{ name: 'wallet-transfer' }" />
            <GridItem icon="setting-o" :text="t('digital.setting')" :to="{ name: 'setting' }" />
        </Grid>
        <Tabs v-model:active="currentTabIndex">
            <Tab :title="t('tabbar.contract')">
                <contract-account @click="navigateToContractDetail" />
            </Tab>
            <Tab :title="t('tabbar.spot')">
                <Search shape="round" :placeholder="t('digital.search')" />
                <spot-account @click="navigateToSpotDetail" />
            </Tab>
        </Tabs>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { Tab, Tabs, Grid, GridItem, Search } from 'vant'
import { useNavigation } from '@mobile/router/navigation'
import SpotAccount from './components/spot/index.vue'
import ContractAccount from './components/contract/index.vue'
import { i18n } from '@/stores'

const { router } = useNavigation()
const { global: { t } } = i18n
const currentTabIndex = shallowRef(0)

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

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