|
|
@@ -1,6 +1,157 @@
|
|
|
<template>
|
|
|
- <div></div>
|
|
|
+ <app-view class="supply-demand-details g-form">
|
|
|
+ <template #header>
|
|
|
+ <app-navbar title="供求详情" />
|
|
|
+ </template>
|
|
|
+ <div v-if="quote" 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>{{ quote.wrstandardname }}</h1>
|
|
|
+ </th>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span>卖价:</span>
|
|
|
+ <span>{{ quote.sellprice }}</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span>卖量:</span>
|
|
|
+ <span>{{ quote.sellqty }}</span>
|
|
|
+ </td>
|
|
|
+ <td rowspan="3" style="vertical-align:top">
|
|
|
+ <div class="goods-price">
|
|
|
+ <h4>参考价(元/{{ quote.enumdicname }})</h4>
|
|
|
+ <h2>{{ quote.spotgoodsprice }}</h2>
|
|
|
+ </div>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td>
|
|
|
+ <span>买价:</span>
|
|
|
+ <span>{{ quote.buyprice }}</span>
|
|
|
+ </td>
|
|
|
+ <td>
|
|
|
+ <span>买量:</span>
|
|
|
+ <span>{{ quote.buyqty }}</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td colspan="2">
|
|
|
+ <span>仓库:</span>
|
|
|
+ <span>{{ quote.warehousename }}</span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <div class="trade">
|
|
|
+ <div class="trade-section sell">
|
|
|
+ <Cell title="卖价" value="更多" />
|
|
|
+ <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">
|
|
|
+ <Cell title="买价" value="更多" />
|
|
|
+ <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="quote">
|
|
|
+ <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="{ quote, quoteDetail, buyorsell }"
|
|
|
+ @closed="closeComponent" v-if="componentId" />
|
|
|
+ </template>
|
|
|
+ </app-view>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
-</script>
|
|
|
+import { shallowRef, computed, defineAsyncComponent } 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 { useOrderQuoteDetail } from '@/business/goods'
|
|
|
+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 { route } = useNavigation()
|
|
|
+const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
+const item = route.params.item
|
|
|
+const quote = shallowRef<Model.OrderQuoteRsp>()
|
|
|
+const quoteDetail = shallowRef<Model.OrderQuoteDetailRsp>()
|
|
|
+const buyorsell = shallowRef(BuyOrSell.Buy) // 买卖方向
|
|
|
+
|
|
|
+if (item) {
|
|
|
+ quote.value = JSON.parse(item.toString())
|
|
|
+}
|
|
|
+
|
|
|
+const { dataList: buyList, getOrderQuoteList: getOrderBuyList } = useOrderQuoteDetail(quote.value?.wrfactortypeid)
|
|
|
+const { dataList: sellList, getOrderQuoteList: getOrderSellList } = useOrderQuoteDetail(quote.value?.wrfactortypeid)
|
|
|
+
|
|
|
+const columns: Model.TableColumn[] = [
|
|
|
+ { prop: 'username', label: '挂牌方' },
|
|
|
+ { prop: 'orderqty', label: '数量' },
|
|
|
+ { prop: 'fixedprice', label: '价格' },
|
|
|
+ { prop: 'operate', label: '操作' },
|
|
|
+]
|
|
|
+
|
|
|
+// 商品banner
|
|
|
+const topBanners = computed(() => {
|
|
|
+ const bannerpicurl = quote.value?.bannerpicurl ?? ''
|
|
|
+ return bannerpicurl?.split(',').map((path) => getImageUrl(path))
|
|
|
+})
|
|
|
+
|
|
|
+// 商品图片列表
|
|
|
+const goodsImages = computed(() => {
|
|
|
+ const pictureurls = quote.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')
|
|
|
+}
|
|
|
+
|
|
|
+getOrderBuyList(BuyOrSell.Buy)
|
|
|
+getOrderSellList(BuyOrSell.Sell)
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|