update

src/packages/mobile/components/modules/quote/index.less

@@ -1,7 +1,11 @@
 .app-quote {
+    color: #666;
     background-color: #fff;
     padding: .2rem 0;
-    margin-bottom: .2rem;
+
+    &:empty {
+        display: none;
+    }
 
     &__price {
         display: flex;

src/packages/mobile/views/goods/detail/Index.vue

@@ -1,26 +1,19 @@
 <template>
     <app-view class="goods-detail">
         <template #header>
-            <app-navbar :title="item.goodscode+'/'+item.goodsname" >
+            <app-navbar :title="item.goodscode + '/' + item.goodsname">
                 <template #right>
                     <div class="button-more" @click="onListing">
                         <span>挂牌</span>
                     </div>
                 </template>
+                <template #footer>
+                    <app-quote :goodscode="item.goodscode" style="margin-bottom: .2rem;" />
+                </template>
             </app-navbar>
         </template>
-        <div class="goods-detail__quote" v-if="quote">
-            <ul class="price">
-                <li :class="quote.lastColor">{{ quote.last }}</li>
-                <li :class="quote.lastColor">{{ handleNumberValue(quote.rise.toFixed(quote.decimalplace)) }}</li>
-                <li :class="quote.lastColor">{{ parsePercent(quote.change) }}</li>
-            </ul>
-            <ul class="time">
-                <li>{{ formatDate(quote.lasttime, 'MM-DD HH:mm:ss') }}</li>
-            </ul>
-        </div>
         <app-pull-refresh ref="pullRefreshRef" v-model:loading="loading" v-model:error="error" v-model:pageIndex="pageIndex"
-        :page-count="pageCount" @refresh="onTabChange">
+            :page-count="pageCount" @refresh="onTabChange">
             <Tabs v-model:active="tabIndex" @click="onChange">
                 <Tab title="买大厅" />
                 <Tab title="卖大厅" />
@@ -28,32 +21,31 @@
             <div class="trade-section sell" v-if="dataList.length">
                 <app-list :columns="columns" :data-list="dataList">
                     <template #username="{ row }">
-                        <span >{{ row.userid }}/{{ row.username }}</span>
+                        <span>{{ row.userid }}/{{ row.username }}</span>
                     </template>
                     <template #operate="{ row }">
-                        <Button size="small" type="primary" round @click="onDelisting(row)">{{ tabIndex === 0 ? '卖出' : '买入' }}</Button>
+                        <Button size="small" type="primary" round @click="onDelisting(row)">{{ tabIndex === 0 ? '卖出' : '买入'
+                        }}</Button>
                     </template>
                 </app-list>
             </div>
         </app-pull-refresh>
-        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ selectedRow, tabIndex, item, quote }" @closed="closeComponent"
-            v-if="componentId" />
+        <component ref="componentRef" :is="componentMap.get(componentId)" v-bind="{ selectedRow, tabIndex, item, quote }"
+            @closed="closeComponent" v-if="componentId" />
     </app-view>
 </template>
 
 <script lang="ts" setup>
-import { shallowRef, onMounted, onUnmounted,defineAsyncComponent } from 'vue'
+import { shallowRef, defineAsyncComponent } from 'vue'
 import { Tab, Tabs, Button, showToast } from 'vant'
 import { useRequest } from '@/hooks/request'
 import { useNavigation } from '@/hooks/navigation'
 import { useComponent } from '@/hooks/component'
 import { queryWrTradeOrderDetail } from '@/services/api/transfer'
 import { useLoginStore, useFuturesStore } from '@/stores'
-import { parsePercent, handleNumberValue, formatDate } from '@/filters'
-
+import AppQuote from '@mobile/components/modules/quote/index.vue'
 import AppList from '@mobile/components/base/list/index.vue'
 import AppPullRefresh from '@mobile/components/base/pull-refresh/index.vue'
-import quoteSocket from '@/services/websocket/quote'
 
 const futuresStore = useFuturesStore()
 const componentMap = new Map<string, unknown>([
@@ -70,7 +62,6 @@ const tabIndex = shallowRef(0)
 const selectedRow = shallowRef<Model.WrTradeOrderDetailRsp>()
 const error = shallowRef(false)
 const dataList = shallowRef<Model.WrTradeOrderDetailRsp[]>([])
-const subscribe = quoteSocket.addSubscribe([item.goodscode])
 const quote = futuresStore.getQuoteInfo(item.goodscode)
 
 const { pageIndex, loading, run, pageCount } = useRequest(queryWrTradeOrderDetail, {
@@ -80,7 +71,6 @@ const { pageIndex, loading, run, pageCount } = useRequest(queryWrTradeOrderDetai
         buyorsell: tabIndex.value
     },
     onSuccess: (res) => {
-        console.log(pageIndex.value)
         if (pageIndex.value === 1) {
             dataList.value = []
         }
@@ -126,13 +116,4 @@ const onDelisting = (row: Model.WrTradeOrderDetailRsp) => {
 const onListing = () => {
     openComponent('listing')
 }
-
-onMounted(() => subscribe.start())
-
-onUnmounted(() => subscribe.stop())
-
-</script>
-
-<style lang="less">
-@import './index.less';
-</style>
+</script>

src/packages/mobile/views/goods/list/Index.vue

@@ -3,10 +3,7 @@
         <template #header>
             <app-navbar title="订单挂牌" />
         </template>
-        <app-list :columns="columns" :data-list="tableList">
-            <template #goodsname="{ row }">
-                <span @click="$router.push({ name: 'goods-detail', params: { item: JSON.stringify(row) } })">{{ row.goodsname }}</span>
-            </template>
+        <app-list :columns="columns" :data-list="tableList" @row-click="rowClick">
             <!-- 当前价 -->
             <template #last="{ row }">
                 <span :class="row.lastColor">{{ row.last }}</span>
@@ -41,11 +38,13 @@ import { computed } from 'vue'
 import { v4 } from 'uuid'
 import { parsePercent, handleNumberValue } from '@/filters'
 import { useRequest } from '@/hooks/request'
+import { useNavigation } from '@/hooks/navigation'
 import { queryQuoteGoodsList } from '@/services/api/swap'
 import { useFuturesStore, useUserStore } from '@/stores'
 import quoteSocket from '@/services/websocket/quote'
 import AppList from '@mobile/components/base/list/index.vue'
 
+const { router } = useNavigation()
 const futuresStore = useFuturesStore()
 const userStore = useUserStore()
 const subscribeId = v4()
@@ -57,7 +56,7 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
     },
     onSuccess: (res) => {
         const goodsCodes = res.data.map((e) => e.refgoodscode)
-        const subscribe = quoteSocket.addSubscribe(goodsCodes,  subscribeId)
+        const subscribe = quoteSocket.addSubscribe(goodsCodes, subscribeId)
         subscribe.start()
     }
 })
@@ -97,4 +96,12 @@ const columns: Model.TableColumn[] = [
     { prop: 'amplitude', label: '振幅' },
 ]
 
+const rowClick = (row: Model.QuoteGoodsListRsp) => {
+    router.push({
+        name: 'goods-detail',
+        params: {
+            item: JSON.stringify(row)
+        }
+    })
+}
 </script>

src/packages/mobile/views/market/detail/Index.vue

@@ -3,54 +3,7 @@
         <template #header>
             <app-navbar :title="quote?.goodsname ?? '商品详情'" />
         </template>
-        <div class="market-detail__quote" v-if="quote">
-            <ul class="price">
-                <li :class="quote.lastColor">{{ quote.last }}</li>
-                <li :class="quote.lastColor">{{ handleNumberValue(quote.rise.toFixed(quote.decimalplace)) }}</li>
-                <li :class="quote.lastColor">{{ parsePercent(quote.change) }}</li>
-            </ul>
-            <ul class="time">
-                <li>{{ formatDate(quote.lasttime, 'MM-DD HH:mm:ss') }}</li>
-            </ul>
-            <ul class="info">
-                <li>
-                    <span>卖价</span>
-                    <span :class="quote.askColor">{{ quote.ask }}</span>
-                </li>
-                <li>
-                    <span>开盘</span>
-                    <span>{{ quote.opened }}</span>
-                </li>
-                <li>
-                    <span>买价</span>
-                    <span :class="quote.bidColor">{{ quote.bid }}</span>
-                </li>
-                <li>
-                    <span>均价</span>
-                    <span>{{ quote.averageprice }}</span>
-                </li>
-                <li>
-                    <span>昨结</span>
-                    <span>{{ quote.presettle }}</span>
-                </li>
-                <li>
-                    <span>最高</span>
-                    <span :class="quote.highestColor">{{ quote.highest }}</span>
-                </li>
-                <li>
-                    <span>结算</span>
-                    <span>{{ quote.settle }}</span>
-                </li>
-                <li>
-                    <span>昨收</span>
-                    <span>{{ quote.preclose }}</span>
-                </li>
-                <li>
-                    <span>最低</span>
-                    <span :class="quote.lowestColor">{{ quote.lowest }}</span>
-                </li>
-            </ul>
-        </div>
+        <app-quote :goodscode="goodscode" />
         <Tabs v-model:active="active">
             <template v-for="(item, index) in getChartCycleTypeList()" :key="index">
                 <Tab :title="item.label" :name="item.value" />
@@ -71,16 +24,16 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, shallowRef, onMounted, onUnmounted, defineAsyncComponent, watch } from 'vue'
+import { ref, shallowRef, defineAsyncComponent, watch } from 'vue'
 import { Tab, Tabs } from 'vant'
-import { parsePercent, handleNumberValue, formatDate } from '@/filters'
+import { formatDate } from '@/filters'
 import { getChartCycleTypeList, ChartCycleType } from '@/constants/chart'
 import { useNavigation } from '@/hooks/navigation'
 import { useRequest } from '@/hooks/request'
 import { queryHistoryTikDatas } from '@/services/api/market'
 import { useFuturesStore } from '@/stores'
-import quoteSocket from '@/services/websocket/quote'
 import AppList from '@mobile/components/base/list/index.vue'
+import AppQuote from '@mobile/components/modules/quote/index.vue'
 
 const componentMap = new Map<string, unknown>([
     ['echartsTimeline', defineAsyncComponent(() => import('@mobile/components/modules/echarts-timeline/index.vue'))],
@@ -93,7 +46,6 @@ const goodscode = getQueryString('goodscode')
 const active = shallowRef(ChartCycleType.Time)
 
 const quote = futuresStore.getQuoteInfo(goodscode)
-const subscribe = quoteSocket.addSubscribe([goodscode])
 const dataList = ref<Model.HistoryTikDatasRsp[]>([])
 
 const { run } = useRequest(queryHistoryTikDatas, {
@@ -144,10 +96,6 @@ watch(() => quote.value?.last, () => {
         })
     }
 })
-
-onMounted(() => subscribe.start())
-
-onUnmounted(() => subscribe.stop())
 </script>
 
 <style lang="less">

src/packages/mobile/views/market/detail/index.less

@@ -6,46 +6,4 @@
             background-color: #f2f2f2;
         }
     }
-
-    &__quote {
-        padding: .2rem 0;
-
-        .price {
-            display: flex;
-            align-items: center;
-            padding: 0 .2rem;
-
-            li {
-                &:first-child {
-                    font-size: .44rem;
-                }
-
-                +li {
-                    margin-left: .2rem;
-                }
-            }
-        }
-
-        .time {
-            font-size: .24rem;
-            color: #999;
-            padding: 0 .2rem;
-            margin-top: .1rem;
-        }
-
-        .info {
-            display: flex;
-            flex-wrap: wrap;
-            margin-top: .2rem;
-
-            li {
-                display: flex;
-                justify-content: space-between;
-                gap: .2rem;
-                width: ~"calc(100% / 3)";
-                font-size: .26rem;
-                padding: .04rem .2rem;
-            }
-        }
-    }
 }

src/packages/mobile/views/swap/detail/Index.vue

@@ -8,7 +8,7 @@
                     </div>
                 </template>
                 <template #footer>
-                    <app-quote :goodscode="item.refgoodscode" />
+                    <app-quote :goodscode="item.refgoodscode" style="margin-bottom: .2rem;" />
                 </template>
             </app-navbar>
         </template>