MTP20_WEB_GLOBAL/src/packages/gstj/views/goods/trade/index.vue

<template>
    <app-view class="g-form">
        <template #header>
            <app-navbar :title="quote ? quote.goodscode + '/' + quote.goodsname : '买卖大厅'">
                <template #footer>
                    <Tabs v-model:active="tabIndex" @click="onRefresh">
                        <Tab title="卖大厅" :name="BuyOrSell.Sell" />
                        <Tab title="买大厅" :name="BuyOrSell.Buy" />
                    </Tabs>
                </template>
            </app-navbar>
        </template>
        <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
            :page-count="pageCount" @refresh="onRefresh">
            <div class="trade-section sell" v-if="dataList.length">
                <app-list :columns="columns" :data-list="dataList">
                    <template #username="{ row }">
                        <span>{{ row.userid }}</span>
                        <span class="text-small">{{ row.username }}</span>
                    </template>
                    <template #operate="{ row }">
                        <Button size="small" type="primary" round @click="onDelisting(row)" style="width: 1rem;">
                            {{ tabIndex === BuyOrSell.Buy ? '卖出' : '买入' }}
                        </Button>
                    </template>
                </app-list>
            </div>
        </app-pull-refresh>
        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ selectedRow }" @closed="closeComponent"
            v-if="componentId" />
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent, watch } from 'vue'
import { showToast, Tabs, Tab, Button } from 'vant'
import { useNavigation } from '../../../router/navigation'
import { useComponent } from '@/hooks/component'
import { useRequest } from '@/hooks/request'
import { BuyOrSell } from '@/constants/order'
import { queryWrTradeOrderDetail } from '@/services/api/transfer'
import { useLoginStore, useFuturesStore } from '@/stores'
import AppList from '../../../components/base/list/index.vue'
import AppPullRefresh from '../../../components/base/pull-refresh/index.vue'

const componentMap = new Map<string, unknown>([
    ['delisting', defineAsyncComponent(() => import('./components/delisting/index.vue'))],
])

const { getQueryStringToNumber } = useNavigation()
const goodsid = getQueryStringToNumber('goodsid')
const buyorsell = getQueryStringToNumber('buyorsell')
const loginStore = useLoginStore()
const futuresStore = useFuturesStore()
const quote = futuresStore.getQuoteDayInfo(goodsid)

const tabIndex = shallowRef(buyorsell)
const selectedRow = shallowRef<Model.WrTradeOrderDetailRsp>()
const error = shallowRef(false)

const columns: Model.TableColumn[] = [
    { prop: 'orderprice', label: '价格' },
    { prop: 'orderqty', label: '数量' },
    { prop: 'username', label: '挂牌方' },
    { prop: 'operate', label: '摘牌' },
]

const { componentRef, componentId, openComponent, closeComponent } = useComponent(() => onRefresh())

const { dataList, pageIndex, loading, run, pageCount } = useRequest(queryWrTradeOrderDetail, {
    params: {
        goodsid,
        buyorsell: tabIndex.value
    },
    onError: () => {
        error.value = true
    }
})

const onRefresh = () => {
    run({
        buyorsell: tabIndex.value,
    })
}

const onDelisting = (row: Model.WrTradeOrderDetailRsp) => {
    selectedRow.value = row
    /// 不能与自己成交
    if (row.userid === loginStore.userId) {
        showToast('不能与自己成交')
        return
    }
    openComponent('delisting')
}

// 监听行情变动
watch(() => quote.value, () => {
    onRefresh()
})
</script>