update

src/filters/index.ts

@@ -98,7 +98,7 @@ export function handleNoneValue<T>(value?: T, suffix = '') {
  * @param suffix 后缀名
  * @returns 
  */
-export function handleNumberValue(value: number | string, suffix = '') {
+export function handleNumberValue(value: number | string = 0, suffix = '') {
     try {
         if (Number(value) === 0) {
             return '--'

src/packages/mobile/assets/themes/global/global.less

@@ -15,6 +15,14 @@
     }
 }
 
+.g-up-color {
+    color: #ff3333;
+}
+
+.g-down-color {
+    color: #0baf1f;
+}
+
 .g-form {
     &__container {
         display: flex;

src/packages/mobile/views/market/list/Index.vue

@@ -8,6 +8,38 @@
             <template #goodscode="{ value }">
                 <span @click="$router.push({ name: 'market-detail' })">{{ value }}</span>
             </template>
+            <!-- 卖价 -->
+            <template #ask="{ row }">
+                <span :class="row.askColor">{{ row.ask }}</span>
+            </template>
+            <!-- 买价 -->
+            <template #bid="{ row }">
+                <span :class="row.bidColor">{{ row.bid }}</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>
         </app-list>
     </app-view>
 </template>
@@ -25,6 +57,12 @@ const dataList = computed(() => {
     const list = futuresStore.quoteList.filter((e) => e.marketid === 99201)
     return list.map((e) => ({
         goodscode: e.goodscode,
+        askColor: e.askColor,
+        bidColor: e.bidColor,
+        lastColor: e.lastColor,
+        openedColor: e.openedColor,
+        lowestColor: e.lowestColor,
+        highestColor: e.highestColor,
         ask: handleNumberValue(e.ask),
         bid: handleNumberValue(e.bid),
         last: handleNumberValue(e.last),

src/packages/mobile/views/swap/list/Index.vue

@@ -7,6 +7,30 @@
             <template #goodsname="{ value }">
                 <span @click="$router.push({ name: 'swap-detail' })">{{ value }}</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>
         </app-list>
     </app-view>
 </template>
@@ -14,7 +38,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 import { v4 } from 'uuid'
-import { parsePercent } from '@/filters'
+import { parsePercent, handleNumberValue } from '@/filters'
 import { useRequest } from '@/hooks/request'
 import { queryQuoteGoodsList } from '@/services/api/swap'
 import { useFuturesStore, useUserStore } from '@/stores'
@@ -40,12 +64,21 @@ const { dataList } = useRequest(queryQuoteGoodsList, {
 const tableList = computed(() => {
     return dataList.value.map(({ refgoodscode, decimalplace }) => {
         const quote = futuresStore.getQuoteInfo(refgoodscode)
-        const { rise, change, amplitude } = quote.value ?? {}
+        const { goodsname, lastColor, openedColor, lowestColor, highestColor, last, presettle, rise, change, amplitude, highest, lowest, opened } = quote.value ?? {}
 
         return {
-            ...quote.value,
-            rise: rise?.toFixed(decimalplace),
+            goodsname,
+            lastColor,
+            openedColor,
+            lowestColor,
+            highestColor,
+            last: handleNumberValue(last),
+            rise: handleNumberValue(rise?.toFixed(decimalplace)),
             change: parsePercent(change),
+            opened: handleNumberValue(opened),
+            presettle: handleNumberValue(presettle),
+            lowest: handleNumberValue(lowest),
+            highest: handleNumberValue(highest),
             amplitude: parsePercent(amplitude),
         }
     })

src/stores/modules/futures.ts

@@ -45,6 +45,17 @@ export const useFuturesStore = defineStore(() => {
             const change = presettle ? rise / presettle : 0 // 涨跌幅/幅度: (最新价 - 昨结价) / 昨结价
             const amplitude = last ? (highest - lowest) / last : 0 // 振幅: (最高价 - 最低价 ) / 最新价
 
+            // 处理行情价格颜色
+            const handleColor = (value: number) => {
+                if (value === presettle) {
+                    return ''
+                } else if (value > presettle) {
+                    return 'g-up-color'
+                } else {
+                    return 'g-down-color'
+                }
+            }
+
             const item: Model.Futures = {
                 marketid,
                 goodsgroupid,
@@ -69,7 +80,15 @@ export const useFuturesStore = defineStore(() => {
                 totalturnover,
                 opened,
                 highest,
-                lowest
+                lowest,
+                bidColor: handleColor(bid),
+                askColor: handleColor(ask),
+                lastColor: handleColor(last),
+                bidvolumeColor: handleColor(bidvolume),
+                askvolumeColor: handleColor(askvolume),
+                openedColor: handleColor(opened),
+                highestColor: handleColor(highest),
+                lowestColor: handleColor(lowest),
             }
             res.push(item)
             return res
@@ -124,34 +143,160 @@ export const useFuturesStore = defineStore(() => {
     const handleQuote = timerInterceptor.setThrottle(() => {
         state.quotes.forEach((item) => {
             const goods = state.goodsList.find((e) => e.goodscode.toUpperCase() === item.goodscode?.toUpperCase())
-            const quote = state.quoteDayList.find((e) => e.goodscode.toUpperCase() === item.goodscode?.toUpperCase())
+            const quote: Model.QuoteDayRsp | undefined = state.quoteDayList.find((e) => e.goodscode.toUpperCase() === item.goodscode?.toUpperCase())
             const lasttime = (item.date && item.time) ? moment(item.date + item.time, 'YYYYMMDDHHmmss').format('YYYY-MM-DD HH:mm:ss') : ''
 
             // 处理报价小数位
-            const last = (() => {
-                const decimal = goods?.decimalplace ?? 0
-                const num = Math.pow(10, decimal)
-                if (item.last) {
-                    return item.last / num
+            const handleDeimalplace = (value = 0) => {
+                const decimal = goods ? Math.pow(10, goods.decimalplace) : 0
+                if (decimal) {
+                    return value / decimal
                 }
-                return 0
-            })()
+                return value
+            }
+
+            const quoteItem: Model.QuoteDayRsp = {
+                ask: handleDeimalplace(item.ask),
+                ask2: handleDeimalplace(item.ask2),
+                ask3: handleDeimalplace(item.ask3),
+                ask4: handleDeimalplace(item.ask4),
+                ask5: handleDeimalplace(item.ask5),
+                ask6: 0,
+                ask7: 0,
+                ask8: 0,
+                ask9: 0,
+                ask10: 0,
+                askorderid: 0,
+                askorderid2: 0,
+                askorderid3: 0,
+                askorderid4: 0,
+                askorderid5: 0,
+                askordervolume: 0,
+                askordervolume2: 0,
+                askordervolume3: 0,
+                askordervolume4: 0,
+                askordervolume5: 0,
+                askordervolume6: 0,
+                askordervolume7: 0,
+                askordervolume8: 0,
+                askordervolume9: 0,
+                askordervolume10: 0,
+                askqueueinfo: '',
+                askvolume: handleDeimalplace(item.askvolume),
+                askvolume2: handleDeimalplace(item.askvolume2),
+                askvolume3: handleDeimalplace(item.askvolume3),
+                askvolume4: handleDeimalplace(item.askvolume4),
+                askvolume5: handleDeimalplace(item.askvolume5),
+                askvolume6: 0,
+                askvolume7: 0,
+                askvolume8: 0,
+                askvolume9: 0,
+                askvolume10: 0,
+                averageprice: 0,
+                bid: handleDeimalplace(item.bid),
+                bid2: handleDeimalplace(item.bid2),
+                bid3: handleDeimalplace(item.bid3),
+                bid4: handleDeimalplace(item.bid4),
+                bid5: handleDeimalplace(item.bid5),
+                bid6: 0,
+                bid7: 0,
+                bid8: 0,
+                bid9: 0,
+                bid10: 0,
+                bidorderid: 0,
+                bidorderid2: 0,
+                bidorderid3: 0,
+                bidorderid4: 0,
+                bidorderid5: 0,
+                bidordervolume: 0,
+                bidordervolume2: 0,
+                bidordervolume3: 0,
+                bidordervolume4: 0,
+                bidordervolume5: 0,
+                bidordervolume6: 0,
+                bidordervolume7: 0,
+                bidordervolume8: 0,
+                bidordervolume9: 0,
+                bidordervolume10: 0,
+                bidqueueinfo: "",
+                bidvolume: handleDeimalplace(item.bidvolume),
+                bidvolume2: handleDeimalplace(item.bidvolume2),
+                bidvolume3: handleDeimalplace(item.bidvolume3),
+                bidvolume4: handleDeimalplace(item.bidvolume4),
+                bidvolume5: handleDeimalplace(item.bidvolume5),
+                bidvolume6: 0,
+                bidvolume7: 0,
+                bidvolume8: 0,
+                bidvolume9: 0,
+                bidvolume10: 0,
+                calloptionpremiums: handleDeimalplace(item.calloptionpremiums),
+                calloptionpremiums2: handleDeimalplace(item.calloptionpremiums2),
+                calloptionpremiums3: handleDeimalplace(item.calloptionpremiums3),
+                calloptionpremiums4: handleDeimalplace(item.calloptionpremiums4),
+                calloptionpremiums5: handleDeimalplace(item.calloptionpremiums5),
+                cleartime: 0,
+                exchangecode: handleDeimalplace(item.exchangecode),
+                exchangedate: handleDeimalplace(item.exchangedate),
+                goodscode: item.goodscode ?? '',
+                grepmarketprice: 0,
+                highest: handleDeimalplace(item.highest),
+                holdincrement: 0,
+                holdvolume: handleDeimalplace(item.holdvolume),
+                iep: 0,
+                iev: 0,
+                inventory: handleDeimalplace(item.inventory),
+                iscleared: 0,
+                issettled: 0,
+                last: handleDeimalplace(item.last),
+                lastlot: 0,
+                lasttime,
+                Lastturnover: 0,
+                lastvolume: handleDeimalplace(item.lastvolume),
+                limitdown: handleDeimalplace(item.limitlow),
+                limitup: handleDeimalplace(item.limithigh),
+                lowest: handleDeimalplace(item.lowest),
+                nontotalholdervolume: 0,
+                nontotallot: 0,
+                nontotalturnover: 0,
+                nontotalvolume: 0,
+                opened: handleDeimalplace(item.opened),
+                opentime: '',
+                orderid: 0,
+                preclose: handleDeimalplace(item.preclose),
+                preholdvolume: handleDeimalplace(item.preholdvolume),
+                presettle: handleDeimalplace(item.presettle),
+                publictradetype: '',
+                putoptionpremiums: handleDeimalplace(item.putoptionpremiums),
+                putoptionpremiums2: handleDeimalplace(item.putoptionpremiums2),
+                putoptionpremiums3: handleDeimalplace(item.putoptionpremiums3),
+                putoptionpremiums4: handleDeimalplace(item.putoptionpremiums4),
+                putoptionpremiums5: handleDeimalplace(item.putoptionpremiums5),
+                settle: handleDeimalplace(item.settle),
+                strikeprice: 0,
+                totalaskvolume: 0,
+                totalbidvolume: 0,
+                totallot: 0,
+                totalturnover: handleDeimalplace(item.totalturnover),
+                totalvolume: handleDeimalplace(item.totalvolume),
+                utclasttime: ''
+            }
 
             if (quote) {
-                Object.entries(item).forEach(([key, value]) => {
+                Object.keys(item).forEach((key) => {
                     // 只更新存在的属性
                     if (Reflect.has(quote, key)) {
-                        Object.defineProperty(quote, key, { value })
+                        (<K extends keyof Model.QuoteDayRsp>(prop: K) => {
+                            quote[prop] = quoteItem[prop]
+                        })(key as keyof Model.QuoteDayRsp)
                     }
                 })
-                quote.last = last
                 // 处理最高最低价
-                if (last) {
-                    if (last > quote.highest) {
-                        quote.highest = last
+                if (quote.last) {
+                    if (quote.last > quote.highest) {
+                        quote.highest = quote.last
                     }
-                    if (last < quote.lowest) {
-                        quote.lowest = last
+                    if (quote.last < quote.lowest) {
+                        quote.lowest = quote.last
                     }
                 }
                 // 处理最新时间
@@ -160,131 +305,7 @@ export const useFuturesStore = defineStore(() => {
                 }
             } else {
                 console.warn('行情推送的商品 ' + item.goodscode + ' 缺少盘面信息')
-                state.quoteDayList.push({
-                    ask: item.ask ?? 0,
-                    ask2: item.ask2 ?? 0,
-                    ask3: item.ask3 ?? 0,
-                    ask4: item.ask4 ?? 0,
-                    ask5: item.ask5 ?? 0,
-                    ask6: 0,
-                    ask7: 0,
-                    ask8: 0,
-                    ask9: 0,
-                    ask10: 0,
-                    askorderid: 0,
-                    askorderid2: 0,
-                    askorderid3: 0,
-                    askorderid4: 0,
-                    askorderid5: 0,
-                    askordervolume: 0,
-                    askordervolume2: 0,
-                    askordervolume3: 0,
-                    askordervolume4: 0,
-                    askordervolume5: 0,
-                    askordervolume6: 0,
-                    askordervolume7: 0,
-                    askordervolume8: 0,
-                    askordervolume9: 0,
-                    askordervolume10: 0,
-                    askqueueinfo: "",
-                    askvolume: item.askvolume ?? 0,
-                    askvolume2: item.askvolume2 ?? 0,
-                    askvolume3: item.askvolume3 ?? 0,
-                    askvolume4: item.askvolume4 ?? 0,
-                    askvolume5: item.askvolume5 ?? 0,
-                    askvolume6: 0,
-                    askvolume7: 0,
-                    askvolume8: 0,
-                    askvolume9: 0,
-                    askvolume10: 0,
-                    averageprice: 0,
-                    bid: item.bid ?? 0,
-                    bid2: item.bid2 ?? 0,
-                    bid3: item.bid3 ?? 0,
-                    bid4: item.bid4 ?? 0,
-                    bid5: item.bid5 ?? 0,
-                    bid6: 0,
-                    bid7: 0,
-                    bid8: 0,
-                    bid9: 0,
-                    bid10: 0,
-                    bidorderid: 0,
-                    bidorderid2: 0,
-                    bidorderid3: 0,
-                    bidorderid4: 0,
-                    bidorderid5: 0,
-                    bidordervolume: 0,
-                    bidordervolume2: 0,
-                    bidordervolume3: 0,
-                    bidordervolume4: 0,
-                    bidordervolume5: 0,
-                    bidordervolume6: 0,
-                    bidordervolume7: 0,
-                    bidordervolume8: 0,
-                    bidordervolume9: 0,
-                    bidordervolume10: 0,
-                    bidqueueinfo: "",
-                    bidvolume: item.bidvolume ?? 0,
-                    bidvolume2: item.bidvolume2 ?? 0,
-                    bidvolume3: item.bidvolume3 ?? 0,
-                    bidvolume4: item.bidvolume4 ?? 0,
-                    bidvolume5: item.bidvolume5 ?? 0,
-                    bidvolume6: 0,
-                    bidvolume7: 0,
-                    bidvolume8: 0,
-                    bidvolume9: 0,
-                    bidvolume10: 0,
-                    calloptionpremiums: item.calloptionpremiums ?? 0,
-                    calloptionpremiums2: item.calloptionpremiums2 ?? 0,
-                    calloptionpremiums3: item.calloptionpremiums3 ?? 0,
-                    calloptionpremiums4: item.calloptionpremiums4 ?? 0,
-                    calloptionpremiums5: item.calloptionpremiums5 ?? 0,
-                    cleartime: 0,
-                    exchangecode: item.exchangecode ?? 0,
-                    exchangedate: item.exchangedate ?? 0,
-                    goodscode: item.goodscode ?? '',
-                    grepmarketprice: 0,
-                    highest: item.highest ?? 0,
-                    holdincrement: 0,
-                    holdvolume: item.holdvolume ?? 0,
-                    iep: 0,
-                    iev: 0,
-                    inventory: item.inventory ?? 0,
-                    iscleared: 0,
-                    issettled: 0,
-                    last,
-                    lastlot: 0,
-                    lasttime,
-                    Lastturnover: 0,
-                    lastvolume: item.lastvolume ?? 0,
-                    limitdown: item.limitlow ?? 0,
-                    limitup: item.limithigh ?? 0,
-                    lowest: item.lowest ?? 0,
-                    nontotalholdervolume: 0,
-                    nontotallot: 0,
-                    nontotalturnover: 0,
-                    nontotalvolume: 0,
-                    opened: item.opened ?? 0,
-                    opentime: '',
-                    orderid: 0,
-                    preclose: item.preclose ?? 0,
-                    preholdvolume: item.preholdvolume ?? 0,
-                    presettle: item.presettle ?? 0,
-                    publictradetype: '',
-                    putoptionpremiums: item.putoptionpremiums ?? 0,
-                    putoptionpremiums2: item.putoptionpremiums2 ?? 0,
-                    putoptionpremiums3: item.putoptionpremiums3 ?? 0,
-                    putoptionpremiums4: item.putoptionpremiums4 ?? 0,
-                    putoptionpremiums5: item.putoptionpremiums5 ?? 0,
-                    settle: item.settle ?? 0,
-                    strikeprice: 0,
-                    totalaskvolume: 0,
-                    totalbidvolume: 0,
-                    totallot: 0,
-                    totalturnover: item.totalturnover ?? 0,
-                    totalvolume: item.totalvolume ?? 0,
-                    utclasttime: ''
-                })
+                state.quoteDayList.push(quoteItem)
             }
         })
     }, 200)

src/types/model/market.d.ts

@@ -65,5 +65,13 @@ declare namespace Model {
         opened: number; // 开盘
         highest: number; // 最高
         lowest: number; // 最低
+        bidColor: string;// 买价颜色
+        askColor: string;// 卖价颜色
+        lastColor: string;// 最新价颜色
+        bidvolumeColor: string;// 买量颜色
+        askvolumeColor: string;// 卖量颜色
+        openedColor: string;// 开盘颜色
+        highestColor: string;// 最高颜色
+        lowestColor: string;// 最低颜色
     }
 }