|
|
@@ -1,10 +1,114 @@
|
|
|
<template>
|
|
|
<app-view>
|
|
|
<template #header>
|
|
|
- <app-navbar title="挂牌点价" />
|
|
|
+ <app-navbar title="订单点价" />
|
|
|
</template>
|
|
|
+ <app-list :columns="columns" :data-list="tableList">
|
|
|
+ <template #goodsname="{ row }">
|
|
|
+ <span @click="$router.push({ name: 'pricing-detail', query: { goodscode: row.goodscode, buyOrSell: BuyOrSell.Buy, buildType: BuildType.Open } })">{{ 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>
|
|
|
+ <!-- 买价 -->
|
|
|
+ <template #ask="{ row }">
|
|
|
+ <span :class="row.askColor">{{ row.ask }}</span>
|
|
|
+ </template>
|
|
|
+ <!-- 卖价 -->
|
|
|
+ <template #bid="{ row }">
|
|
|
+ <span :class="row.bidColor">{{ row.bid }}</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 quoteSocket from '@/services/websocket/quote'
|
|
|
+import AppList from '@mobile/components/base/list/index.vue'
|
|
|
+import { BuyOrSell, BuildType } from '@/constants/order'
|
|
|
+
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+const userStore = useUserStore()
|
|
|
+const subscribeId = v4()
|
|
|
+
|
|
|
+const { dataList } = useRequest(queryQuoteGoodsList, {
|
|
|
+ params: {
|
|
|
+ usertype: userStore.userType ?? 0,
|
|
|
+ marketids: '10101'
|
|
|
+ },
|
|
|
+ onSuccess: (res) => {
|
|
|
+ const goodsCodes = res.data.map((e) => e.refgoodscode)
|
|
|
+ const subscribe = quoteSocket.addSubscribe(goodsCodes, subscribeId)
|
|
|
+ subscribe.start()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const tableList = computed(() => {
|
|
|
+ return dataList.value.map((item) => {
|
|
|
+ const quote = futuresStore.getQuoteInfo(item.goodscode)
|
|
|
+ const { lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened, ask, bid, bidColor, askColor } = quote.value ?? {}
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ 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),
|
|
|
+ ask: handleNumberValue(ask),
|
|
|
+ bid: handleNumberValue(bid),
|
|
|
+ bidColor,
|
|
|
+ askColor
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+const columns: Model.TableColumn[] = [
|
|
|
+ { prop: 'goodsname', label: '商品/标的' },
|
|
|
+ { prop: 'last', label: '当前价' },
|
|
|
+ { prop: 'ask', label: '买价' },
|
|
|
+ { prop: 'bid', label: '卖价' },
|
|
|
+ { prop: 'rise', label: '涨跌' },
|
|
|
+ { prop: 'change', label: '幅度' },
|
|
|
+ { prop: 'opened', label: '今开' },
|
|
|
+ { prop: 'presettle', label: '昨结' },
|
|
|
+ { prop: 'lowest', label: '最低' },
|
|
|
+ { prop: 'highest', label: '最高' },
|
|
|
+ { prop: 'amplitude', label: '振幅' },
|
|
|
+]
|
|
|
+
|
|
|
</script>
|
