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

<!--  合约 - 合约明细 -->
<template>
    <app-view class="contract-detail g-form">
        <template #header>
            <app-navbar title="合约明细" />
        </template>
        <Grid :border="false" :column-num="quotes.length ? 2 : 1">
            <GridItem icon="peer-pay" text="划转" :to="{ name: 'wallet-transfer', query: { id: accountid } }" />
            <GridItem icon="chart-trending-o" text="交易" @click="navigateToContractDetail()" v-if="quotes.length" />
        </Grid>
        <div class="g-detail-table" v-if="accountItem">
            <table cellspacing="0" cellpadding="0">
                <tbody>
                    <tr>
                        <td>
                            <span class="text-small">账户权益(USDT)</span>
                            <span>{{ accountItem.balance }}</span>
                        </td>
                        <td>
                            <span class="text-small">浮动盈亏</span>
                            <span>{{ formatDecimal(accountItem.profitLoss) }}</span>
                        </td>
                        <td>
                            <span class="text-small">风险率</span>
                            <span :class="accountItem.hazardRatioColor">{{ parsePercent(accountItem.hazardRatio) }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="text-small">可用(USDT)</span>
                            <span>{{ accountItem.avaiableBalance }}</span>
                        </td>
                        <td>
                            <span class="text-small">占用(USDT)</span>
                            <span>{{ accountItem.usedmargin }}</span>
                        </td>
                        <td>
                            <span class="text-small">冻结(USDT)</span>
                            <span>{{ accountItem.freezeMargin }}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <Tabs>
            <Tab title="委托">
                <contract-order v-bind="{ accountid }" />
            </Tab>
            <Tab title="成交">
                <contract-trade v-bind="{ accountid }" />
            </Tab>
            <Tab title="持仓">
                <contract-position :params="{ accountid }" />
            </Tab>
            <Tab title="资金明细">
                <contract-statement v-bind="{ accountid }" />
            </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="navigateToContractDetail(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,parsePercent } from '@/filters'
import { useNavigation } from '@mobile/router/navigation'
import { useAccountStore, useFuturesStore } from '@/stores'
import ContractOrder from '../components/order/index.vue'
import ContractTrade from '../components/trade/index.vue'
import ContractPosition from '../components/position/list/index.vue'
import ContractStatement from '../components/statement/index.vue'

const { router, getQueryStringToNumber } = useNavigation()

const futuresStore = useFuturesStore()
const accountStore = useAccountStore()

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

// 合约账户
const accountItem = computed(() => accountStore.getAccountItem({ accountid }))

const quotes = computed(() => futuresStore.quotationList.filter((e) => e.trademode === 10 && (e.goodscurrencyid === accountItem.value?.currencyid || e.currencyid === accountItem.value?.currencyid)))

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

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