|
|
@@ -0,0 +1,115 @@
|
|
|
+<template>
|
|
|
+ <app-view>
|
|
|
+ <template #header>
|
|
|
+ <app-navbar title="行情" :show-back-button="false" />
|
|
|
+ </template>
|
|
|
+ <app-list :columns="columns" :data-list="goodsList" @row-click="rowClick">
|
|
|
+ <!-- 商品名称/代码 -->
|
|
|
+ <template #goodsname="{ row }">
|
|
|
+ <span>{{ row.goodsname }}</span>
|
|
|
+ <span class="text-small">{{ row.goodscode }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 买价 -->
|
|
|
+ <template #bid="{ row }">
|
|
|
+ <span :class="row.bidColor">{{ handleNumberValue(formatDecimal(row.bid, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 买量 -->
|
|
|
+ <template #bidvolume="{ row }">
|
|
|
+ <span :class="row.bidvolumeColor">{{ handleNumberValue(row.bidvolume) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 卖价 -->
|
|
|
+ <template #ask="{ row }">
|
|
|
+ <span :class="row.askColor">{{ handleNumberValue(formatDecimal(row.ask, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 卖量 -->
|
|
|
+ <template #askvolume="{ row }">
|
|
|
+ <span :class="row.askvolumeColor">{{ handleNumberValue(row.askvolume) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 当前价 -->
|
|
|
+ <template #last="{ row }">
|
|
|
+ <span :class="row.lastColor">{{ handleNumberValue(formatDecimal(row.last, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨跌 -->
|
|
|
+ <template #rise="{ row }">
|
|
|
+ <span :class="row.lastColor">{{ formatDecimal(row.rise, row.decimalplace) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨跌幅 -->
|
|
|
+ <template #change="{ row }">
|
|
|
+ <span :class="row.lastColor">{{ parsePercent(row.change) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 今开 -->
|
|
|
+ <template #opened="{ row }">
|
|
|
+ <span :class="row.openedColor">{{ handleNumberValue(formatDecimal(row.opened, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最低 -->
|
|
|
+ <template #lowest="{ row }">
|
|
|
+ <span :class="row.lowestColor">{{ handleNumberValue(formatDecimal(row.lowest, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 最高 -->
|
|
|
+ <template #highest="{ row }">
|
|
|
+ <span :class="row.highestColor">{{ handleNumberValue(formatDecimal(row.highest, row.decimalplace)) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 振幅 -->
|
|
|
+ <template #amplitude="{ value }">
|
|
|
+ <span>{{ parsePercent(value) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 涨停 -->
|
|
|
+ <template #limitup="{ value }">
|
|
|
+ <span class="g-price-up">{{ handleNumberValue(value) }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 跌停 -->
|
|
|
+ <template #limitdown="{ value }">
|
|
|
+ <span class="g-price-down">{{ handleNumberValue(value) }}</span>
|
|
|
+ </template>
|
|
|
+ </app-list>
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { onUnmounted, onActivated, computed } from 'vue'
|
|
|
+import { parsePercent, handleNumberValue, formatDecimal } from '@/filters'
|
|
|
+import { useNavigation } from '@mobile/router/navigation'
|
|
|
+import { useFuturesStore } from '@/stores'
|
|
|
+import quoteSocket from '@/services/websocket/quote'
|
|
|
+import AppList from '@mobile/components/base/list/index.vue'
|
|
|
+
|
|
|
+const { router } = useNavigation()
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+
|
|
|
+const goodsList = computed(() => futuresStore.getGoodsListByTradeMode(50))
|
|
|
+
|
|
|
+const columns: Model.TableColumn[] = [
|
|
|
+ { prop: 'goodsname', label: '商品名称/代码' },
|
|
|
+ { prop: 'bid', label: '买价' },
|
|
|
+ { prop: 'bidvolume', label: '买量' },
|
|
|
+ { prop: 'ask', label: '卖价' },
|
|
|
+ { prop: 'askvolume', 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: '振幅' },
|
|
|
+ { prop: 'limitup', label: '涨停价' },
|
|
|
+ { prop: 'limitdown', label: '跌停价' },
|
|
|
+]
|
|
|
+
|
|
|
+const rowClick = (row: Model.QuoteGoodsListRsp) => {
|
|
|
+ router.push({
|
|
|
+ name: 'goods-detail',
|
|
|
+ query: {
|
|
|
+ goodsid: row.goodsid
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onActivated(() => {
|
|
|
+ const goodsCodes = goodsList.value.map((e) => e.goodscode)
|
|
|
+ subscribe.start(...goodsCodes)
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(() => subscribe.stop())
|
|
|
+</script>
|