MTP20_WEB_GLOBAL/src/packages/qxst/views/goods/detail/Index.vue

<template>
    <app-view class="goods-detail g-form">
        <template #header>
            <app-navbar :title="quote ? quote.goodscode + '/' + quote.goodsname : '挂牌大厅'" />
        </template>
        <component :is="Price" v-bind="{ goodsCode }" />
        <component :is="Chart" v-bind="{ goodsCode }" />
        <component :is="Forex" v-bind="{ goodsCode }" />
        <component :is="Tik" v-bind="{ goodsCode }" />
        <template #footer>
            <div class="g-form__footer">
                <Button block type="danger" square @click="onListing(EBuildType.BUILDTYPE_OPEN)">订立</Button>
                <Button block type="primary" square :disabled="isDisabledClose"
                    @click="onListing(EBuildType.BUILDTYPE_CLOSE)">转让</Button>
            </div>
            <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ goodsCode, buildType }"
                @closed="closeComponent" v-if="componentId" />
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, defineAsyncComponent, computed } from 'vue'
import { Button } from 'vant'
import { useNavigation } from '../../../router/navigation'
import { useComponent } from '@/hooks/component'
import { EBuildType } from '@/constants/client'
import { useFuturesStore } from '@/stores'
import { usePosition } from '@/business/position'

const Price = defineAsyncComponent(() => import('../../../components/modules/quote/price/index.vue'))
const Chart = defineAsyncComponent(() => import('../../../components/modules/quote/chart/index.vue'))
const Forex = defineAsyncComponent(() => import('../../../components/modules/quote/forex/index.vue'))
const Tik = defineAsyncComponent(() => import('../../../components/modules/quote/tik/index.vue'))

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

const { positionList } = usePosition(50)
const { getQueryStringToNumber } = useNavigation()
const futuresStore = useFuturesStore()
const goodsid = getQueryStringToNumber('goodsid')
const quote = futuresStore.getQuoteDayInfo(goodsid)
const buildType = shallowRef<EBuildType>() // 挂牌类型

const goodsCode = computed(() => quote.value?.goodscode ?? '')
const isDisabledClose = computed(() => !positionList.value.some((e) => e.goodsid === goodsid))

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

const onListing = (type: EBuildType) => {
    buildType.value = type
    openComponent('listing')
}
</script>