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="$t('digital.wallet-transfer')"
                :to="{ name: 'wallet-transfer', query: { id: accountid } }" />
            <GridItem icon="chart-trending-o" :text="$t('digital.spot-goods-detail')"
                @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">{{
                                $t('digital.currencydecimalplace') + `(${currency(accountItem.currencyid)})` }}</span>
                            <span>{{ accountItem.balance.toFixed(accountItem.currencydecimalplace) }}</span>
                        </td>
                        <td>
                            <span class="text-small">{{ $t('account.profitLoss') }}</span>
                            <span :class="handlePriceColor(accountItem.profitLoss)">{{
                                accountItem.profitLoss.toFixed(accountItem.currencydecimalplace) }}</span>
                        </td>
                        <td>
                            <span class="text-small">{{ $t('account.riskRate') }}</span>
                            <span :class="accountItem.hazardRatioColor">
                                {{ parsePercent(accountItem.hazardRatio) }}
                            </span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span class="text-small">{{
                                $t('mine.availableFunds') + `(${currency(accountItem.currencyid)})`
                            }}</span>
                            <span>{{ accountItem.avaiableBalance.toFixed(accountItem.currencydecimalplace) }}</span>
                        </td>
                        <td>
                            <span class="text-small">{{ $t('account.usedMargin') +
                                `(${currency(accountItem.currencyid)})`
                                }}</span>
                            <span>{{ accountItem.usedmargin.toFixed(accountItem.currencydecimalplace) }}</span>
                        </td>
                        <td>
                            <span class="text-small">{{ $t('account.freeze') + `(${currency(accountItem.currencyid)})`
                            }}</span>
                            <span>{{ accountItem.freezeMargin.toFixed(accountItem.currencydecimalplace) }}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <Tabs>
            <Tab :title="t('digital.position')">
                <contract-position :params="{ accids: accountid.toString() }" />
            </Tab>
            <Tab :title="t('digital.order')">
                <contract-order v-bind="{ accountid }" />
            </Tab>
            <Tab :title="t('digital.trade')">
                <contract-trade v-bind="{ accountid }" />
            </Tab>
            <Tab :title="t('digital.funds')">
                <contract-statement v-bind="{ accountid }" />
            </Tab>
        </Tabs>
        <ActionSheet v-model:show="showSheet" :title="t('common.choice')">
            <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 clickable
                        @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 { handlePriceColor, parsePercent } from '@/filters'
import { useNavigation } from '@mobile/router/navigation'
import { i18n, useAccountStore, useFuturesStore } from '@/stores'
import ContractOrder from '../components/order/index.vue'
import ContractTrade from '../components/trade/index.vue'
import ContractPosition from '../components/position/detail/index.vue'
import ContractStatement from '../components/statement/index.vue'
import { getGoodsCurrencyItemName } from '@/constants/order'

const { router, getQueryStringToNumber } = useNavigation()

const { global: { t } } = i18n

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

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

const currency = (id: number) => {
    return getGoodsCurrencyItemName(id)
}

// 合约账户
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>