|
|
@@ -1,39 +1,53 @@
|
|
|
<template>
|
|
|
<app-view class="market">
|
|
|
<template #header>
|
|
|
- <app-navbar class="market-header" title="行情" :show-back-button="false" />
|
|
|
+ <app-navbar class="market-header" :show-back-button="false" />
|
|
|
</template>
|
|
|
- <app-list :columns="columns" :data-list="touristTradeGoodsList" @row-click="rowClick">
|
|
|
- <!-- 回购 -->
|
|
|
- <template #ask="{ row }">
|
|
|
- <span :class="row.bidColor">{{ handleNumberValue(formatDecimal(row.bid, row.decimalplace)) }}</span>
|
|
|
- </template>
|
|
|
- <!-- 销售 -->
|
|
|
- <template #bid="{ row }">
|
|
|
- <span :class="row.askColor">{{ handleNumberValue(formatDecimal(row.ask, row.decimalplace)) }}</span>
|
|
|
- </template>
|
|
|
- <!-- 高/低 -->
|
|
|
- <template #hl="{ row }">
|
|
|
- <span :class="row.highestColor">{{ handleNumberValue(formatDecimal(row.highest, row.decimalplace)) }}</span>
|
|
|
- <span :class="row.lowestColor">{{ handleNumberValue(formatDecimal(row.lowest, row.decimalplace)) }}</span>
|
|
|
- </template>
|
|
|
- </app-list>
|
|
|
- <div class="market-title" v-if="touristRefGoodsList.length">参考商品</div>
|
|
|
- <app-list :show-header="false" :columns="columns" :data-list="touristRefGoodsList">
|
|
|
- <!-- 回购 -->
|
|
|
- <template #ask="{ row }">
|
|
|
- <span :class="row.bidColor">{{ handleNumberValue(formatDecimal(row.bid, row.decimalplace)) }}</span>
|
|
|
- </template>
|
|
|
- <!-- 销售 -->
|
|
|
- <template #bid="{ row }">
|
|
|
- <span :class="row.askColor">{{ handleNumberValue(formatDecimal(row.ask, row.decimalplace)) }}</span>
|
|
|
- </template>
|
|
|
- <!-- 高/低 -->
|
|
|
- <template #hl="{ row }">
|
|
|
- <span :class="row.highestColor">{{ handleNumberValue(formatDecimal(row.highest, row.decimalplace)) }}</span>
|
|
|
- <span :class="row.lowestColor">{{ handleNumberValue(formatDecimal(row.lowest, row.decimalplace)) }}</span>
|
|
|
- </template>
|
|
|
- </app-list>
|
|
|
+ <table class="market-table" cellspacing="0" cellpadding="0">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th>商品</th>
|
|
|
+ <th>回购</th>
|
|
|
+ <th>销售</th>
|
|
|
+ <th>高/低</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) in touristTradeGoodsList" :key="index" @click="rowClick(item)">
|
|
|
+ <td>{{ item.goodsname }}</td>
|
|
|
+ <td :class="item.bidColor">{{ handleNumberValue(formatDecimal(item.bid, item.decimalplace)) }}</td>
|
|
|
+ <td :class="item.askColor">{{ handleNumberValue(formatDecimal(item.ask, item.decimalplace)) }}</td>
|
|
|
+ <td>
|
|
|
+ <span :class="item.highestColor">
|
|
|
+ {{ handleNumberValue(formatDecimal(item.highest, item.decimalplace)) }}
|
|
|
+ </span>
|
|
|
+ <span :class="item.lowestColor">
|
|
|
+ {{ handleNumberValue(formatDecimal(item.lowest, item.decimalplace)) }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th class="title" colspan="4">参考商品</th>
|
|
|
+ </tr>
|
|
|
+ </thead>
|
|
|
+ <tbody>
|
|
|
+ <tr v-for="(item, index) in touristRefGoodsList" :key="index">
|
|
|
+ <td>{{ item.goodsname }}</td>
|
|
|
+ <td :class="item.bidColor">{{ handleNumberValue(formatDecimal(item.bid, item.decimalplace)) }}</td>
|
|
|
+ <td :class="item.askColor">{{ handleNumberValue(formatDecimal(item.ask, item.decimalplace)) }}</td>
|
|
|
+ <td>
|
|
|
+ <span :class="item.highestColor">
|
|
|
+ {{ handleNumberValue(formatDecimal(item.highest, item.decimalplace)) }}
|
|
|
+ </span>
|
|
|
+ <span :class="item.lowestColor">
|
|
|
+ {{ handleNumberValue(formatDecimal(item.lowest, item.decimalplace)) }}
|
|
|
+ </span>
|
|
|
+ </td>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
</app-view>
|
|
|
</template>
|
|
|
|
|
|
@@ -42,7 +56,6 @@ import { computed, onActivated, onDeactivated } from 'vue'
|
|
|
import { handleNumberValue, formatDecimal } from '@/filters'
|
|
|
import { useNavigation } from '@mobile/router/navigation'
|
|
|
import quoteSocket from '@/services/websocket/quote'
|
|
|
-import AppList from '@mobile/components/base/list/index.vue'
|
|
|
import { useRequest } from '@/hooks/request'
|
|
|
import { queryTouristGoods, queryTouristQuoteDay } from '@/services/api/goods'
|
|
|
import { useFuturesStore } from '@/stores'
|
|
|
@@ -74,16 +87,18 @@ const { run: getTouristQuoteDay } = useRequest(queryTouristQuoteDay, {
|
|
|
})
|
|
|
|
|
|
// 构建游客交易商品
|
|
|
-const touristTradeGoodsList = computed(() => futuresStore.getGoodsListByTradeMode(52))
|
|
|
-// 构建游客参考行情商品
|
|
|
-const touristRefGoodsList = computed(() => futuresStore.getGoodsListByTradeMode(99))
|
|
|
+const touristTradeGoodsList = computed(() => {
|
|
|
+ const list = futuresStore.getGoodsListByTradeMode(52)
|
|
|
+ // qtydecimalplace 字段暂用作排序
|
|
|
+ return list.sort((a, b) => a.qtydecimalplace - b.qtydecimalplace)
|
|
|
+})
|
|
|
|
|
|
-const columns: Model.TableColumn[] = [
|
|
|
- { prop: 'goodsname', label: '商品' },
|
|
|
- { prop: 'ask', label: '回购' },
|
|
|
- { prop: 'bid', label: '销售' },
|
|
|
- { prop: 'hl', label: '高/低' },
|
|
|
-]
|
|
|
+// 构建游客参考行情商品
|
|
|
+const touristRefGoodsList = computed(() => {
|
|
|
+ const list = futuresStore.getGoodsListByTradeMode(99)
|
|
|
+ // qtydecimalplace 字段暂用作排序
|
|
|
+ return list.sort((a, b) => a.qtydecimalplace - b.qtydecimalplace)
|
|
|
+})
|
|
|
|
|
|
const rowClick = (row: Model.GoodsQuote) => {
|
|
|
router.push({
|