MTP20_WEB_GLOBAL/src/packages/mobile/views/pricing/detail/Index.vue

<template>
    <app-view class="goods-detail g-form">
        <template #header>
            <app-navbar :title="quote ? quote.goodscode + '/' + quote.goodsname : $t('quote.listinghall')" />
        </template>
        <component :is="Price" v-bind="{ goodsCode }" />
        <component :is="Chart" v-bind="{ goodsCode }" />
        <component :is="Forex" v-bind="{ goodsCode }" :show-more="showMore" @more-click="onMoreClick" />
        <component :is="Tik" v-bind="{ goodsCode }" />
        <template #footer>
            <div class="g-form__footer">
                <Button block type="danger" square @click="onListing(BuyOrSell.Buy)">{{ $t('quote.buy') }}</Button>
                <Button block color="#199e00" square @click="onListing(BuyOrSell.Sell)">{{ $t('quote.selll') }}</Button>
            </div>
            <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ goodsCode, buyOrSell }"
                @closed="closeComponent" v-if="componentId" />
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { useFuturesStore } from '@/stores'
import { useNavigation } from '@mobile/router/navigation'
import { shallowRef, defineAsyncComponent } from 'vue'
import { Button } from 'vant'
import { BuyOrSell } from '@/constants/order'
import { useComponent } from '@/hooks/component'

defineProps({
    showMore: {
        type: Boolean,
        default: true
    }
})

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

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

const futuresStore = useFuturesStore()
const { router, getQueryString, getQueryStringToNumber } = useNavigation()

const goodsCode = getQueryString('goodscode') ?? ''
const goodsid = getQueryStringToNumber('goodsid')
const quote = futuresStore.getGoodsQuote(goodsCode)
const buyOrSell = shallowRef<BuyOrSell>()

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

const onListing = (type: BuyOrSell) => {
    buyOrSell.value = type
    openComponent('trade')
}

const onMoreClick = (buyorsell: BuyOrSell) => {
    router.push({
        name: 'goods-trade',
        query: {
            goodsid,
            buyorsell,
        }
    })
}

</script>

<style lang="less">
@import './index.less';
</style>