THJ_Mobile/src/packages/mobile/views/supply-demand/detail/index.vue

<template>
    <app-view class="supply-demand-details g-form">
        <template #header>
            <app-navbar title="供求详情" />
        </template>
        <div v-if="quoteItem" class="supply-demand-details__content">
            <Swipe class="banner" :autoplay="5000" indicator-color="white" lazy-render>
                <SwipeItem v-for="(url, index) in topBanners" :key="index">
                    <img :src="url" />
                </SwipeItem>
            </Swipe>
            <div class="goods">
                <table cellspacing="0" cellpadding="0">
                    <tr>
                        <th colspan="3">
                            <h1>{{ quoteItem.wrstandardname }}</h1>
                        </th>
                    </tr>
                    <tr>
                        <td>
                            <span>卖价:</span>
                            <span>{{ quoteItem.sellprice }}</span>
                        </td>
                        <td>
                            <span>卖量:</span>
                            <span>{{ quoteItem.sellqty }}</span>
                        </td>
                        <td rowspan="3" style="vertical-align:top">
                            <div class="goods-price">
                                <h4>参考价(元/{{ quoteItem.enumdicname }})</h4>
                                <h2>{{ quoteItem.spotgoodsprice }}</h2>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <span>买价:</span>
                            <span>{{ quoteItem.buyprice }}</span>
                        </td>
                        <td>
                            <span>买量:</span>
                            <span>{{ quoteItem.buyqty }}</span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <span>仓库:</span>
                            <span>{{ quoteItem.warehousename }}</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="trade">
                <div class="trade-section sell" v-if="sellList.length">
                    <Cell title="卖价" />
                    <app-list :columns="columns" :data-list="sellList">
                        <template #operate="{ row }">
                            <Button size="small" round @click="delistingListing(row, BuyOrSell.Buy)">买入</Button>
                        </template>
                    </app-list>
                </div>
                <div class="trade-section buy" v-if="buyList.length">
                    <Cell title="买价" />
                    <app-list :columns="columns" :data-list="buyList">
                        <template #operate="{ row }">
                            <Button size="small" round @click="delistingListing(row, BuyOrSell.Sell)">卖出</Button>
                        </template>
                    </app-list>
                </div>
            </div>
            <div class="gallery">
                <Divider>商品详情</Divider>
                <template v-for="(url, index) in goodsImages" :key="index">
                    <img :src="url" alt="" />
                </template>
            </div>
        </div>
        <Empty v-else />
        <template #footer>
            <div class="g-form__footer" v-if="quoteItem">
                <Button type="warning" block round @click="toggleListing(BuyOrSell.Sell)">我要卖</Button>
                <Button type="primary" block round @click="toggleListing(BuyOrSell.Buy)">我要买</Button>
            </div>
            <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ quoteItem, quoteDetail, buyorsell }"
                @closed="closeComponent" v-if="componentId" />
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed, defineAsyncComponent, onUnmounted } from 'vue'
import { Cell, Swipe, SwipeItem, Empty, Divider, Button } from 'vant'
import { getImageUrl } from '@/filters'
import { useComponent } from '@/hooks/component'
import { useNavigation } from '@/hooks/navigation'
import { BuyOrSell } from '@/constants/order'
import { queryOrderQuote } from '@/services/api/goods'
import { useOrderQuoteDetail } from '@/business/goods'
import eventBus from '@/services/bus'
import AppList from '@mobile/components/base/list/index.vue'

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

const { getQueryString } = useNavigation()
const { componentRef, componentId, openComponent, closeComponent } = useComponent()
const quoteDetail = shallowRef<Model.OrderQuoteDetailRsp>() // 买卖详情
const buyorsell = shallowRef(BuyOrSell.Buy) // 买卖方向

const wrfactortypeid = getQueryString('wrfactortypeid')
const quoteItem = shallowRef<Model.OrderQuoteRsp>() // 供求详情

const { dataList: buyList, getOrderQuoteList: getOrderBuyList } = useOrderQuoteDetail(wrfactortypeid)
const { dataList: sellList, getOrderQuoteList: getOrderSellList } = useOrderQuoteDetail(wrfactortypeid)

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

// 商品banner
const topBanners = computed(() => {
    const bannerpicurl = quoteItem.value?.bannerpicurl ?? ''
    return bannerpicurl?.split(',').map((path) => getImageUrl(path))
})

// 商品图片列表
const goodsImages = computed(() => {
    const pictureurls = quoteItem.value?.pictureurls ?? ''
    return pictureurls.split(',').map((path) => getImageUrl(path))
})

// 挂牌下单
const toggleListing = (value: BuyOrSell) => {
    buyorsell.value = value
    openComponent('listing')
}

// 摘牌下单
const delistingListing = (row: Model.OrderQuoteDetailRsp, value: BuyOrSell) => {
    buyorsell.value = value
    quoteDetail.value = row
    openComponent('delisting')
}

// 刷新数据
const refresh = () => {
    queryOrderQuote({ wrpricetype: 1, wrfactortypeid }).then((res) => {
        quoteItem.value = res.data[0]
    })
    getOrderBuyList(BuyOrSell.Buy)
    getOrderSellList(BuyOrSell.Sell)
}

// 接收仓单贸易成交通知
const wrTradeDealedNtf = eventBus.$on('ListingOrderChangeNtf', () => refresh())

onUnmounted(() => {
    wrTradeDealedNtf.cancel()
})

refresh()
</script>

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