|
|
@@ -3,7 +3,7 @@
|
|
|
<template #header>
|
|
|
<app-navbar title="供求详情" />
|
|
|
</template>
|
|
|
- <div v-if="quote" class="supply-demand-details__content">
|
|
|
+ <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" />
|
|
|
@@ -13,45 +13,45 @@
|
|
|
<table cellspacing="0" cellpadding="0">
|
|
|
<tr>
|
|
|
<th colspan="3">
|
|
|
- <h1>{{ quote.wrstandardname }}</h1>
|
|
|
+ <h1>{{ quoteItem.wrstandardname }}</h1>
|
|
|
</th>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<span>卖价:</span>
|
|
|
- <span>{{ quote.sellprice }}</span>
|
|
|
+ <span>{{ quoteItem.sellprice }}</span>
|
|
|
</td>
|
|
|
<td>
|
|
|
<span>卖量:</span>
|
|
|
- <span>{{ quote.sellqty }}</span>
|
|
|
+ <span>{{ quoteItem.sellqty }}</span>
|
|
|
</td>
|
|
|
<td rowspan="3" style="vertical-align:top">
|
|
|
<div class="goods-price">
|
|
|
- <h4>参考价(元/{{ quote.enumdicname }})</h4>
|
|
|
- <h2>{{ quote.spotgoodsprice }}</h2>
|
|
|
+ <h4>参考价(元/{{ quoteItem.enumdicname }})</h4>
|
|
|
+ <h2>{{ quoteItem.spotgoodsprice }}</h2>
|
|
|
</div>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td>
|
|
|
<span>买价:</span>
|
|
|
- <span>{{ quote.buyprice }}</span>
|
|
|
+ <span>{{ quoteItem.buyprice }}</span>
|
|
|
</td>
|
|
|
<td>
|
|
|
<span>买量:</span>
|
|
|
- <span>{{ quote.buyqty }}</span>
|
|
|
+ <span>{{ quoteItem.buyqty }}</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
<tr>
|
|
|
<td colspan="2">
|
|
|
<span>仓库:</span>
|
|
|
- <span>{{ quote.warehousename }}</span>
|
|
|
+ <span>{{ quoteItem.warehousename }}</span>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</table>
|
|
|
</div>
|
|
|
<div class="trade">
|
|
|
- <div class="trade-section sell">
|
|
|
+ <div class="trade-section sell" v-if="sellList.length">
|
|
|
<Cell title="卖价" />
|
|
|
<app-list :columns="columns" :data-list="sellList">
|
|
|
<template #operate="{ row }">
|
|
|
@@ -59,7 +59,7 @@
|
|
|
</template>
|
|
|
</app-list>
|
|
|
</div>
|
|
|
- <div class="trade-section buy">
|
|
|
+ <div class="trade-section buy" v-if="buyList.length">
|
|
|
<Cell title="买价" />
|
|
|
<app-list :columns="columns" :data-list="buyList">
|
|
|
<template #operate="{ row }">
|
|
|
@@ -77,24 +77,25 @@
|
|
|
</div>
|
|
|
<Empty v-else />
|
|
|
<template #footer>
|
|
|
- <div class="g-form__footer" v-if="quote">
|
|
|
+ <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="{ quote, quoteDetail, buyorsell }"
|
|
|
+ <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 } from 'vue'
|
|
|
+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 { useOrderQuoteDetail } from '@/business/goods'
|
|
|
+import { useOrderQuoteList, useOrderQuoteDetail } from '@/business/goods'
|
|
|
+import eventBus from '@/services/bus'
|
|
|
import AppList from '@mobile/components/base/list/index.vue'
|
|
|
|
|
|
const componentMap = new Map<string, unknown>([
|
|
|
@@ -102,19 +103,15 @@ const componentMap = new Map<string, unknown>([
|
|
|
['delisting', defineAsyncComponent(() => import('./components/delisting/index.vue'))], // 摘牌
|
|
|
])
|
|
|
|
|
|
-const { route } = useNavigation()
|
|
|
+const { getQueryString } = useNavigation()
|
|
|
const { componentRef, componentId, openComponent, closeComponent } = useComponent()
|
|
|
-const item = route.params.item
|
|
|
-const quote = shallowRef<Model.OrderQuoteRsp>()
|
|
|
-const quoteDetail = shallowRef<Model.OrderQuoteDetailRsp>()
|
|
|
+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 wrfactortypeid = getQueryString('wrfactortypeid')
|
|
|
+const { dataList, getOrderQuoteList } = useOrderQuoteList()
|
|
|
+const { dataList: buyList, getOrderQuoteList: getOrderBuyList } = useOrderQuoteDetail(wrfactortypeid)
|
|
|
+const { dataList: sellList, getOrderQuoteList: getOrderSellList } = useOrderQuoteDetail(wrfactortypeid)
|
|
|
|
|
|
const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'username', label: '挂牌方' },
|
|
|
@@ -123,15 +120,18 @@ const columns: Model.TableColumn[] = [
|
|
|
{ prop: 'operate', label: '操作' },
|
|
|
]
|
|
|
|
|
|
+// 供求详情
|
|
|
+const quoteItem = computed(() => dataList.value[0])
|
|
|
+
|
|
|
// 商品banner
|
|
|
const topBanners = computed(() => {
|
|
|
- const bannerpicurl = quote.value?.bannerpicurl ?? ''
|
|
|
+ const bannerpicurl = quoteItem.value?.bannerpicurl ?? ''
|
|
|
return bannerpicurl?.split(',').map((path) => getImageUrl(path))
|
|
|
})
|
|
|
|
|
|
// 商品图片列表
|
|
|
const goodsImages = computed(() => {
|
|
|
- const pictureurls = quote.value?.pictureurls ?? ''
|
|
|
+ const pictureurls = quoteItem.value?.pictureurls ?? ''
|
|
|
return pictureurls.split(',').map((path) => getImageUrl(path))
|
|
|
})
|
|
|
|
|
|
@@ -148,8 +148,21 @@ const delistingListing = (row: Model.OrderQuoteDetailRsp, value: BuyOrSell) => {
|
|
|
openComponent('delisting')
|
|
|
}
|
|
|
|
|
|
-getOrderBuyList(BuyOrSell.Buy)
|
|
|
-getOrderSellList(BuyOrSell.Sell)
|
|
|
+// 刷新数据
|
|
|
+const refresh = () => {
|
|
|
+ getOrderQuoteList({ wrfactortypeid })
|
|
|
+ getOrderBuyList(BuyOrSell.Buy)
|
|
|
+ getOrderSellList(BuyOrSell.Sell)
|
|
|
+}
|
|
|
+
|
|
|
+// 接收仓单贸易成交通知
|
|
|
+const wrTradeDealedNtf = eventBus.$on('ListingOrderChangeNtf', () => refresh())
|
|
|
+
|
|
|
+onUnmounted(() => {
|
|
|
+ wrTradeDealedNtf.cancel()
|
|
|
+})
|
|
|
+
|
|
|
+refresh()
|
|
|
</script>
|
|
|
|
|
|
<style lang="less">
|