MTP20_WEB_GLOBAL/src/packages/pc/components/modules/goods-detail/index.vue

<!-- 商品详情 -->
<template>
    <teleport to="#appPageTeleport">
        <app-view class="g-view-detail">
            <template #header>
                <div class="g-view-detail__header">
                    <div class="iconbar">
                        <el-button type="primary" icon="ArrowLeftBold" @click="emit('closed')" link />
                    </div>
                    <ul class="breadcrumb" v-if="quote">
                        <li>
                            <span>{{ goodsdisplay(quote.goodscode) }}</span>
                        </li>
                    </ul>
                    <div class="buttonbar">
                        <template v-if="market">
                            <span style="color: #3a87f7;padding:0 10px;">
                                {{ t('quote.marketstatus') }}{{ [2, 6].includes(market.runstatus) ? getRunStatusName(market.runstatus) : t('quote.unopening') }}
                            </span>
                        </template>
                        <slot name="headerRight"></slot>
                        <template v-if="![50, 99, 10, 53, 54].includes(quote?.trademode ?? 0)">
                            <el-button type="primary" @click="active = false" v-if="active">{{ t('quote.buysellhall') }}</el-button>
                            <el-button type="primary" @click="active = true" v-else>{{ t('operation.chart') }}</el-button>
                        </template>
                    </div>
                </div>
            </template>
            <Chart class="g-view-detail__container" v-bind="{ goodsCode }" v-if="active" />
            <Order class="g-view-detail__container" v-bind="{ goodsId }" v-else />
        </app-view>
    </teleport>
</template>

<script lang="ts" setup>
import { onUnmounted, shallowRef, computed, defineAsyncComponent } from 'vue'
import { timerTask } from '@/utils/timer'
import { getRunStatusName } from '@/constants/market'
import { useRequest } from '@/hooks/request'
import { queryMarketRun } from '@/services/api/market'
import { useFuturesStore } from '@/stores'
import { i18n } from '@/stores'
const { t } = i18n.global

const Chart = defineAsyncComponent(() => import('./chart/index.vue'))
const Order = defineAsyncComponent(() => import('./order/index.vue'))

const props = defineProps({
    goodsId: {
        type: Number,
        required: true
    },
})

const emit = defineEmits(['closed'])
const futuresStore = useFuturesStore()
const { goodsdisplay } = useFuturesStore()
const quote = futuresStore.getGoodsQuote(props.goodsId)
const active = shallowRef(true)

const goodsCode = computed(() => quote.value?.goodscode ?? '')

const { data: market, run } = useRequest(queryMarketRun, {
    defaultParams: {
        marketID: quote.value?.marketid
    },
    onSuccess: (res) => {
        market.value = res.data[0]
        // 每1分钟轮询刷新
        timerTask.setTimeout(() => run(), 60 * 1000, 'getMarketRun')
    }
})

onUnmounted(() => timerTask.clearTimeout('getMarketRun'))
</script>