MTP20_WEB_GLOBAL/src/packages/digital/views/spot/detail/index.vue

<template>
    <app-view class="spot-detail g-form">
        <template #header>
            <app-navbar title="现货明细" />
        </template>
        <Grid :border="false" :column-num="quotes.length ? 3 : 2">
            <GridItem icon="pending-payment" text="充值"
                :to="{ name: 'wallet-deposit', query: { id: digitalaccountid } }" />
            <GridItem icon="paid" text="提现" :to="{ name: 'wallet-withdraw', query: { id: digitalaccountid } }" />
            <GridItem icon="chart-trending-o" text="交易" @click="navigateToSpotDetail()" v-if="quotes.length" />
        </Grid>
        <div class="g-detail-table" v-if="accountItem">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td colspan="2">
                            <span class="text-small">余额({{ accountItem.currencycode }})</span>
                            <span>
                                {{ formatDecimal(accountItem.currentbalance, accountItem.currencydecimalplace) }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="text-small">可用({{ accountItem.currencycode }})</span>
                            <span>
                                {{ formatDecimal(spotAccountStore.getAvailableBalance(accountItem), accountItem.currencydecimalplace) }}
                            </span>
                        </td>
                        <td>
                            <span class="text-small">冻结({{ accountItem.currencycode }})</span>
                            <span>
                                {{ formatDecimal(accountItem.freezemargin, accountItem.currencydecimalplace) }}
                            </span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <Tabs>
            <Tab title="充值">
                <wallet-record :params="{ digitalaccountid, transfertypes: '1' }" />
            </Tab>
            <Tab title="提现">
                <wallet-record :params="{ digitalaccountid, transfertypes: '2' }" />
            </Tab>
            <Tab title="转入">
                <wallet-record :params="{ digitalaccountid, transfertypes: '3' }" />
            </Tab>
            <Tab title="转出">
                <wallet-record :params="{ digitalaccountid, transfertypes: '4' }" />
            </Tab>
            <Tab title="委托">
                <spot-order :params="{ digitalaccountid }" showDatePicker />
            </Tab>
            <Tab title="成交">
                <spot-trade :params="{ digitalaccountid }" showDatePicker />
            </Tab>
            <Tab title="资金明细">
                <spot-statement :params="{ digitalaccountid }" />
            </Tab>
        </Tabs>
        <ActionSheet v-model:show="showSheet" title="请选择">
            <CellGroup style="min-height: 200px;">
                <template v-for="(item, index) in quotes" :key="index">
                    <Cell :title="item.goodsname" :value="item.goodscode" :border="false" is-link
                        @click="navigateToSpotDetail(item.goodsid)" />
                </template>
            </CellGroup>
        </ActionSheet>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed } from 'vue'
import { Cell, CellGroup, Tab, Tabs, Grid, GridItem, ActionSheet } from 'vant'
import { formatDecimal } from '@/filters'
import { useNavigation } from '@mobile/router/navigation'
import { useFuturesStore } from '@/stores'
import { useSpotAccountStore } from '../../wallet/components/spot/composables'
import WalletRecord from '../../wallet/components/record/index.vue'
import SpotOrder from '../components/order/index.vue'
import SpotTrade from '../components/trade/index.vue'
import SpotStatement from '../components/statement/index.vue'

const { router, getQueryStringToNumber } = useNavigation()

const futuresStore = useFuturesStore()
const spotAccountStore = useSpotAccountStore()

const currencyid = getQueryStringToNumber('id')
const showSheet = shallowRef(false)

const accountItem = computed(() => spotAccountStore.getAccountItem({ currencyid }))

const digitalaccountid = computed(() => accountItem.value?.digitalaccountid || '0')

const quotes = computed(() => futuresStore.quotationList.filter((e) => e.trademode === 80 && (e.goodscurrencyid === currencyid || e.currencyid === currencyid)))

const navigateToSpotDetail = (goodsid?: number) => {
    showSheet.value = false

    // 多个商品弹出列表选择，单个商品直接跳转
    if (quotes.value.length > 1 && !goodsid) {
        showSheet.value = true
    } else {
        router.push({
            name: 'spot-goods-detail',
            query: {
                id: goodsid ?? quotes.value[0].goodsid
            }
        })
    }
}
</script>