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

<template>
    <app-view class="g-detail">
        <template #header>
            <app-navbar :title="$t('quote.spot.title')" />
        </template>
        <Banner :data-list="topBanners" />
        <div class="g-detail__buy" v-if="quoteItem">
            <div class="title">
                <span>{{ quoteItem.wrstandardcode }} / {{ quoteItem.wrstandardname }}</span>
            </div>
            <div class="desc">
                <span>{{ quoteItem.warehousename }}</span>
            </div>
            <div class="info">
                <ul>
                    <li>
                        <span>{{ $t('quote.ask') }}</span>
                        <span>{{ handleNumberValue(quoteItem.sellprice) }}</span>
                    </li>
                    <li>
                        <span>{{ $t('quote.askvolume') }}</span>
                        <span>{{ quoteItem.sellqty }}</span>
                    </li>
                    <li>
                        <span>{{ $t('quote.bid') }}</span>
                        <span>{{ handleNumberValue(quoteItem.buyprice) }}</span>
                    </li>
                    <li>
                        <span>{{ $t('quote.bidvolume') }}</span>
                        <span>{{ quoteItem.buyqty }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="trade">
            <div class="trade-section sell" v-if="sellList.length">
                <Cell :title="$t('quote.spot.sellisting')" />
                <app-list :columns="columns" :data-list="sellList">
                    <template #operate="{ row }">
                        <Button size="small" round @click="delistingListing(row, BuyOrSell.Buy)">{{ $t('quote.buy') }}</Button>
                    </template>
                </app-list>
            </div>
            <div class="trade-section buy" v-if="buyList.length">
                <Cell :title="$t('quote.spot.buylisting')" />
                <app-list :columns="columns" :data-list="buyList">
                    <template #operate="{ row }">
                        <Button size="small" round @click="delistingListing(row, BuyOrSell.Sell)">{{ $t('quote.sell') }}</Button>
                    </template>
                </app-list>
            </div>
        </div>
        <div class="g-detail__desc">
            <template v-for="(url, index) in goodsImages" :key="index">
                <img :src="url" alt="" />
            </template>
        </div>
        <template #footer>
            <div class="g-form__footer">
                <!-- <div class="price" v-if="quoteItem">
                    <span class="price-text">参考价：</span>
                    <span class="price-unit">￥</span>
                    <span class="price-integer">{{ quoteItem.spotgoodsprice }}</span>
                </div> -->
                <!-- <div class="submit"> -->
                <Button block type="danger" square class="submit-button danger"
                    @click="toggleListing(BuyOrSell.Buy)">{{ $t('quote.spot.wantbuy') }}</Button>
                <Button block color="#199e00" square class="submit-button warning"
                    @click="toggleListing(BuyOrSell.Sell)">{{ $t('quote.spot.wantsell') }}</Button>
                <!-- </div> -->
            </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, Button } from 'vant'
import { getFileUrl, handleNumberValue } from '@/filters'
import { useRequest } from '@/hooks/request'
import { useComponent } from '@/hooks/component'
import { useNavigation } from '@mobile/router/navigation'
import { BuyOrSell } from '@/constants/order'
import { queryOrderQuote, queryOrderQuoteDetail } from '@/services/api/goods'
import eventBus from '@/services/bus'
import AppList from '@mobile/components/base/list/index.vue'
import Banner from '@mobile/components/base/banner/index.vue'
import service from '@/services'
import { i18n } from "@/stores";

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

const { global: { t } } = i18n
const { getQueryString } = useNavigation()
const { componentRef, componentId, openComponent, closeComponent } = useComponent()
const quoteDetail = shallowRef<Model.OrderQuoteDetailRsp>() // 买卖详情
const buyorsell = shallowRef(BuyOrSell.Buy) // 买卖方向
const oem = service.getServiceConfig('oem')
const buyList = shallowRef<Model.OrderQuoteDetailRsp[]>([])
const sellList = shallowRef<Model.OrderQuoteDetailRsp[]>([])
const wrfactortypeid = getQueryString('wrfactortypeid') ?? '0'

const { data: quoteItem, run: getOrderQuote } = useRequest(queryOrderQuote, {
    manual: true,
    defaultParams: {
        wrpricetype: 1,
        wrfactortypeid
    },
    onSuccess: (res) => {
        quoteItem.value = res.data[0]
    }
})

const { runAsync: getOrderQuoteDetail } = useRequest(queryOrderQuoteDetail, {
    manual: true,
    defaultParams: {
        wrpricetype: 1,
        haswr: 1,
        wrfactortypeid,
        buyorsell: buyorsell.value
    },
})

const columns: Model.TableColumn[] = oem != 'zrwyt' ? [
    { field: 'username', label: t('quote.spot.username') },
    { field: 'orderqty', label: t('quote.spot.orderqty') },
    { field: 'fixedprice', label: t('quote.spot.orderprice') },
    { field: 'operate', label: t('quote.spot.operate') },
] : [
    { field: 'orderqty', label: t('quote.spot.orderqty') },
    { field: 'fixedprice', label: t('quote.spot.orderprice') },
    { field: 'operate', label: t('quote.spot.operate') },
]

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

// 商品图片列表
const goodsImages = computed(() => {
    const pictureurls = quoteItem.value?.pictureurls ?? ''
    return pictureurls.split(',').map((path) => getFileUrl(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 = () => {
    getOrderQuote()
    getOrderQuoteDetail({
        buyorsell: BuyOrSell.Buy
    }).then((res) => {
        buyList.value = res.data
    })
    getOrderQuoteDetail({
        buyorsell: BuyOrSell.Sell
    }).then((res) => {
        sellList.value = res.data
    })
}

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

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

refresh()
</script>

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