xxxxxx

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

@@ -3,24 +3,57 @@
         <template #header>
             <app-navbar title="订单挂牌" />
         </template>
+        <app-list :columns="columns" :data-list="tableList">
+            <template #goodsname="{ row }">
+                <span @click="$router.push({ name: 'swap-detail', params: { item: JSON.stringify(row) } })">{{ row.goodsname }}</span>
+            </template>
+            <!-- 当前价 -->
+            <template #last="{ row }">
+                <span :class="row.lastColor">{{ row.last }}</span>
+            </template>
+            <!-- 涨跌 -->
+            <template #rise="{ row }">
+                <span :class="row.lastColor">{{ row.rise }}</span>
+            </template>
+            <!-- 幅度 -->
+            <template #change="{ row }">
+                <span :class="row.lastColor">{{ row.change }}</span>
+            </template>
+            <!-- 今开 -->
+            <template #opened="{ row }">
+                <span :class="row.openedColor">{{ row.opened }}</span>
+            </template>
+            <!-- 最低 -->
+            <template #lowest="{ row }">
+                <span :class="row.lowestColor">{{ row.lowest }}</span>
+            </template>
+            <!-- 最高 -->
+            <template #highest="{ row }">
+                <span :class="row.highestColor">{{ row.highest }}</span>
+            </template>
+        </app-list>
     </app-view>
 </template>
 
 <script lang="ts" setup>
 
+import { computed } from 'vue'
 import { v4 } from 'uuid'
+import { parsePercent, handleNumberValue } from '@/filters'
+import { useRequest } from '@/hooks/request'
 import { queryQuoteGoodsList } from '@/services/api/swap'
 import { useFuturesStore, useUserStore } from '@/stores'
-import { useRequest } from '@/hooks/request'
 import quoteSocket from '@/services/websocket/quote'
+import AppList from '@mobile/components/base/list/index.vue'
 
+const futuresStore = useFuturesStore()
 const userStore = useUserStore()
 const subscribeId = v4()
 
 const { dataList } = useRequest(queryQuoteGoodsList, {
     params: {
         usertype: userStore.userType ?? 0,
-        marketids: userStore.getMarketId('TRADEMODE_TJMD').toString()
+        marketids: '50101'
     },
     onSuccess: (res) => {
         const goodsCodes = res.data.map((e) => e.refgoodscode)
@@ -29,4 +62,39 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
     }
 })
 
+const tableList = computed(() => {
+    return dataList.value.map((item) => {
+        const quote = futuresStore.getQuoteInfo(item.refgoodscode)
+        const { goodsname, lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened } = quote.value ?? {}
+        return {
+            ...item,
+            goodsname,
+            lastColor,
+            openedColor,
+            lowestColor,
+            highestColor,
+            last: handleNumberValue(last),
+            rise: handleNumberValue(rise?.toFixed(item.decimalplace)),
+            change: parsePercent(change),
+            opened: handleNumberValue(opened),
+            presettle: handleNumberValue(presettle),
+            lowest: handleNumberValue(lowest),
+            highest: handleNumberValue(highest),
+            amplitude: parsePercent(amplitude),
+        }
+    })
+})
+
+const columns: Model.TableColumn[] = [
+    { prop: 'goodsname', label: '商品/标的' },
+    { prop: 'last', label: '当前价' },
+    { prop: 'rise', label: '涨跌' },
+    { prop: 'change', label: '幅度' },
+    { prop: 'opened', label: '今开' },
+    { prop: 'presettle', label: '昨结' },
+    { prop: 'lowest', label: '最低' },
+    { prop: 'highest', label: '最高' },
+    { prop: 'amplitude', label: '振幅' },
+]
+
 </script>