|
|
@@ -1,75 +1,40 @@
|
|
|
<template>
|
|
|
<div class="app-quote-forex">
|
|
|
- <dl v-if="quote">
|
|
|
+ <dl>
|
|
|
<dt>
|
|
|
<span>卖挂牌</span>
|
|
|
<span @click="navigateTo(BuyOrSell.Sell)" v-if="showMore">更多
|
|
|
<Icon name="arrow" />
|
|
|
</span>
|
|
|
</dt>
|
|
|
- <dd @click="onSellClick(1)">
|
|
|
- <span>卖一</span>
|
|
|
- <span :class="quote.askColor">{{ handleNumberValue(quote.ask) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.askvolume) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onSellClick(2)" v-if="quote.quotegear > 1">
|
|
|
- <span>卖二</span>
|
|
|
- <span :class="quote.ask2Color">{{ handleNumberValue(quote.ask2) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.askvolume2) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onSellClick(3)" v-if="quote.quotegear > 2">
|
|
|
- <span>卖三</span>
|
|
|
- <span :class="quote.ask3Color">{{ handleNumberValue(quote.ask3) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.askvolume3) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onSellClick(4)" v-if="quote.quotegear > 3">
|
|
|
- <span>卖四</span>
|
|
|
- <span :class="quote.ask4Color">{{ handleNumberValue(quote.ask4) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.askvolume4) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onSellClick(5)" v-if="quote.quotegear > 4">
|
|
|
- <span>卖五</span>
|
|
|
- <span :class="quote.ask5Color">{{ handleNumberValue(quote.ask5) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.askvolume5) }}</span>
|
|
|
- </dd>
|
|
|
+ <template v-for="(item, index) in sellList" :key="index">
|
|
|
+ <dd :class="active === 'sell_' + index ? 'is-active' : ''" @click="onSellClick(index)">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span :class="item.color">{{ handleNumberValue(item.price.toFixed(quote?.decimalplace)) }}</span>
|
|
|
+ <span>{{ handleNumberValue(item.qty) }}</span>
|
|
|
+ </dd>
|
|
|
+ </template>
|
|
|
</dl>
|
|
|
- <dl v-if="quote">
|
|
|
+ <dl>
|
|
|
<dt>
|
|
|
<span>买挂牌</span>
|
|
|
<span @click="navigateTo(BuyOrSell.Buy)" v-if="showMore">更多
|
|
|
<Icon name="arrow" />
|
|
|
</span>
|
|
|
</dt>
|
|
|
- <dd @click="onBuyClick(1)">
|
|
|
- <span>买一</span>
|
|
|
- <span :class="quote.bidColor">{{ handleNumberValue(quote.bid) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.bidvolume) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onBuyClick(2)" v-if="quote.quotegear > 1">
|
|
|
- <span>买二</span>
|
|
|
- <span :class="quote.bid2Color">{{ handleNumberValue(quote.bid2) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.bidvolume2) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onBuyClick(3)" v-if="quote.quotegear > 2">
|
|
|
- <span>买三</span>
|
|
|
- <span :class="quote.bid3Color">{{ handleNumberValue(quote.bid3) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.bidvolume3) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onBuyClick(4)" v-if="quote.quotegear > 3">
|
|
|
- <span>买四</span>
|
|
|
- <span :class="quote.bid4Color">{{ handleNumberValue(quote.bid4) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.bidvolume4) }}</span>
|
|
|
- </dd>
|
|
|
- <dd @click="onBuyClick(5)" v-if="quote.quotegear > 4">
|
|
|
- <span>买五</span>
|
|
|
- <span :class="quote.bid5Color">{{ handleNumberValue(quote.bid5) }}</span>
|
|
|
- <span>{{ handleNumberValue(quote.bidvolume5) }}</span>
|
|
|
- </dd>
|
|
|
+ <template v-for="(item, index) in buyList" :key="index">
|
|
|
+ <dd :class="active === 'buy_' + index ? 'is-active' : ''" @click="onBuyClick(index)">
|
|
|
+ <span>{{ item.label }}</span>
|
|
|
+ <span :class="item.color">{{ handleNumberValue(item.price.toFixed(quote?.decimalplace)) }}</span>
|
|
|
+ <span>{{ handleNumberValue(item.qty) }}</span>
|
|
|
+ </dd>
|
|
|
+ </template>
|
|
|
</dl>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+import { shallowRef, computed, useAttrs } from 'vue'
|
|
|
import { Icon } from 'vant'
|
|
|
import { handleNumberValue } from '@/filters'
|
|
|
import { useNavigation } from '../../../../router/navigation'
|
|
|
@@ -87,17 +52,109 @@ const props = defineProps({
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const emit = defineEmits(['sellclick', 'buyclick'])
|
|
|
+const emit = defineEmits<{ (event: string, ...args: unknown[]): void }>()
|
|
|
const { router } = useNavigation()
|
|
|
+const attrs = useAttrs()
|
|
|
const futuresStore = useFuturesStore()
|
|
|
-const quote = futuresStore.getQuoteInfo(props.goodsCode)
|
|
|
+const quote = computed(() => futuresStore.getQuoteInfo(props.goodsCode).value)
|
|
|
+const active = shallowRef('')
|
|
|
+
|
|
|
+const buyList = computed(() => {
|
|
|
+ const item = quote.value
|
|
|
+ if (item) {
|
|
|
+ const result = [
|
|
|
+ {
|
|
|
+ label: '买一',
|
|
|
+ price: item.bid,
|
|
|
+ qty: item.bidvolume,
|
|
|
+ color: item.bidColor,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '买二',
|
|
|
+ price: item.bid2,
|
|
|
+ qty: item.bidvolume2,
|
|
|
+ color: item.bid2Color,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '买三',
|
|
|
+ price: item.bid3,
|
|
|
+ qty: item.bidvolume3,
|
|
|
+ color: item.bid3Color,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '买四',
|
|
|
+ price: item.bid4,
|
|
|
+ qty: item.bidvolume4,
|
|
|
+ color: item.bid4Color,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '买五',
|
|
|
+ price: item.bid5,
|
|
|
+ qty: item.bidvolume5,
|
|
|
+ color: item.bid5Color,
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ return result.slice(0, item.quotegear || 1)
|
|
|
+ }
|
|
|
+ return []
|
|
|
+})
|
|
|
+
|
|
|
+const sellList = computed(() => {
|
|
|
+ const item = quote.value
|
|
|
+ if (item) {
|
|
|
+ const result = [
|
|
|
+ {
|
|
|
+ label: '卖一',
|
|
|
+ price: item.ask,
|
|
|
+ qty: item.askvolume,
|
|
|
+ color: item.askColor,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '卖二',
|
|
|
+ price: item.ask2,
|
|
|
+ qty: item.askvolume2,
|
|
|
+ color: item.ask2Color,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '卖三',
|
|
|
+ price: item.ask3,
|
|
|
+ qty: item.askvolume3,
|
|
|
+ color: item.ask3Color,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '卖四',
|
|
|
+ price: item.ask4,
|
|
|
+ qty: item.askvolume4,
|
|
|
+ color: item.ask4Color,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '卖五',
|
|
|
+ price: item.ask5,
|
|
|
+ qty: item.askvolume5,
|
|
|
+ color: item.ask5Color,
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ return result.slice(0, item.quotegear || 1)
|
|
|
+ }
|
|
|
+ return []
|
|
|
+})
|
|
|
|
|
|
const onBuyClick = (index: number) => {
|
|
|
- emit('buyclick', index)
|
|
|
+ if (attrs.onBuyClick) {
|
|
|
+ const { bid, presettle } = quote.value ?? {}
|
|
|
+ const item = buyList.value[index]
|
|
|
+ active.value = 'buy_' + index
|
|
|
+ emit('buyClick', item.price || bid || presettle)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const onSellClick = (index: number) => {
|
|
|
- emit('sellclick', index)
|
|
|
+ if (attrs.onSellClick) {
|
|
|
+ const { ask, presettle } = quote.value ?? {}
|
|
|
+ const item = sellList.value[index]
|
|
|
+ active.value = 'sell_' + index
|
|
|
+ emit('sellClick', item.price || ask || presettle)
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
const navigateTo = (buyorsell: BuyOrSell) => {
|