|
|
@@ -0,0 +1,102 @@
|
|
|
+<template>
|
|
|
+ <app-view>
|
|
|
+ <template #header>
|
|
|
+ <app-navbar :title="titleName" :show-back-button="showBackButton" />
|
|
|
+ </template>
|
|
|
+ <div class="pricing-v2">
|
|
|
+ <div class="pricing-v2-item" v-for="(item, index) in dataList" :key="index">
|
|
|
+ <article>
|
|
|
+ <h3>
|
|
|
+ <span>{{ item.goodscode }}</span>
|
|
|
+ </h3>
|
|
|
+ <section @click="rowClick(item)">
|
|
|
+ <dl>
|
|
|
+ <dt>{{ t('quote.ask') }}</dt>
|
|
|
+ <dd :class="item.bidColor">{{ item.bid }}</dd>
|
|
|
+ </dl>
|
|
|
+ <dl>
|
|
|
+ <dt>{{ t('quote.bid') }}</dt>
|
|
|
+ <dd :class="item.askColor">{{ item.ask }}</dd>
|
|
|
+ </dl>
|
|
|
+ </section>
|
|
|
+ </article>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </app-view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script lang="ts" setup>
|
|
|
+import { computed, onUnmounted, onActivated, PropType } from 'vue'
|
|
|
+import { parsePercent, handleNumberValue, formatDecimal } from '@/filters'
|
|
|
+import { useNavigation } from '@mobile/router/navigation'
|
|
|
+import { useFuturesStore, i18n } from '@/stores'
|
|
|
+import { ETradeMode } from '@/constants/client'
|
|
|
+import quoteSocket from '@/services/websocket/quote'
|
|
|
+import { BuyOrSell, BuildType } from '@/constants/order'
|
|
|
+
|
|
|
+const props = defineProps({
|
|
|
+ showBackButton: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ marketSection: {
|
|
|
+ type: Object as PropType<Model.Marketsectionconfignew>
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const { global: { t } } = i18n
|
|
|
+const { router, getQueryString } = useNavigation()
|
|
|
+const futuresStore = useFuturesStore()
|
|
|
+
|
|
|
+const title = getQueryString('title')
|
|
|
+const titleName = computed(() => title ? decodeURIComponent(title) : props.marketSection?.displayname ?? '订单点价')
|
|
|
+
|
|
|
+const dataList = computed(() => {
|
|
|
+ const list = futuresStore.getGoodsListByTradeMode(ETradeMode.TRADEMODE_MARKETMAKE)
|
|
|
+ return list.map((item) => {
|
|
|
+ const quote = futuresStore.getGoodsQuote(item.goodscode)
|
|
|
+ const { lastColor, openedColor, lowestColor, highestColor, last = 0, presettle = 0, rise = 0, change, amplitude, highest = 0, lowest = 0, opened = 0, ask = 0, bid = 0, bidColor, askColor, decimalplace } = quote.value ?? {}
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ lastColor,
|
|
|
+ openedColor,
|
|
|
+ lowestColor,
|
|
|
+ highestColor,
|
|
|
+ last: handleNumberValue(formatDecimal(last, decimalplace)),
|
|
|
+ rise: handleNumberValue(formatDecimal(rise, decimalplace)),
|
|
|
+ change: parsePercent(change),
|
|
|
+ opened: handleNumberValue(formatDecimal(opened, decimalplace)),
|
|
|
+ presettle: handleNumberValue(formatDecimal(presettle, decimalplace)),
|
|
|
+ lowest: handleNumberValue(formatDecimal(lowest, decimalplace)),
|
|
|
+ highest: handleNumberValue(formatDecimal(highest, decimalplace)),
|
|
|
+ amplitude: parsePercent(amplitude),
|
|
|
+ ask: handleNumberValue(formatDecimal(ask, decimalplace)),
|
|
|
+ bid: handleNumberValue(formatDecimal(bid, decimalplace)),
|
|
|
+ bidColor,
|
|
|
+ askColor
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+
|
|
|
+const goodsCodes = dataList.value.map((e) => e.goodscode.toUpperCase())
|
|
|
+const subscribe = quoteSocket.createSubscribe()
|
|
|
+
|
|
|
+const rowClick = (row: Model.GoodsQuote) => {
|
|
|
+ router.push({
|
|
|
+ name: 'pricing-trade',
|
|
|
+ query: {
|
|
|
+ goodsid: row.goodsid,
|
|
|
+ goodscode: row.goodscode,
|
|
|
+ buyOrSell: BuyOrSell.Buy,
|
|
|
+ buildType: BuildType.Open
|
|
|
+ }
|
|
|
+ })
|
|
|
+}
|
|
|
+
|
|
|
+onActivated(() => subscribe.start(...goodsCodes))
|
|
|
+onUnmounted(() => subscribe.stop())
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+@import './index.less';
|
|
|
+</style>
|
