update

src/hooks/echarts/candlestick/index.ts

@@ -65,10 +65,13 @@ export function useCandlestickChart(goodscode: string) {
         // 获取历史行情
         queryHistoryDatas({
             data: {
-                goodscode
+                cycleType: cycletype,
+                goodsCode: goodscode,
+                count: 1440,
             }
         }).then((res) => {
-            const data = res.data;
+            // 日期升序排序
+            const data = res.data.sort((a, b) => moment(a.ts).valueOf() - moment(b.ts).valueOf());
             if (data.length) {
                 dataIndex.value = data.length - 1;
                 isEmpty.value = false;

src/hooks/echarts/candlestick/options.ts

@@ -368,7 +368,7 @@ export function useOptions(dataset: EchartsDataset) {
                 source: cci.source,
             },
         }
-    }, 1000)
+    }, 500)
 
     // 监听主题变化
     watch(appTheme, () => {

src/hooks/echarts/timeline/index.ts

@@ -37,7 +37,7 @@ export function useTimelineChart(goodscode: string) {
         // 获取历史行情
         queryTSData({
             data: {
-                goodscode
+                goodsCode: goodscode
             }
         }).then((res) => {
             const { historyDatas } = res.data;

src/hooks/echarts/timeline/options.ts

@@ -243,7 +243,7 @@ export function useOptions(dataset: EchartsDataset) {
                 },
             ],
         }
-    }, 1000)
+    }, 500)
 
     // 监听主题变化
     watch(appTheme, () => {

src/packages/mobile/components/modules/echarts-timeline/index.vue

@@ -1,6 +1,38 @@
 <template>
-    <div>待开发</div>
+    <div class="app-echats-timeline">
+        <template v-if="loading">
+            <div class="app-echats-kline__tip">正在加载...</div>
+        </template>
+        <template v-else-if="isEmpty">
+            <div class="app-echats-kline__tip">暂无数据</div>
+        </template>
+        <template v-else>
+            <div class="app-echats-kline__container">
+                <ul class="legend">
+                    <li class="legend-item">开: {{ selectedItem.open }}</li>
+                    <li class="legend-item">收: {{ selectedItem.close }}</li>
+                    <li class="legend-item">高: {{ selectedItem.highest }}</li>
+                    <li class="legend-item">低: {{ selectedItem.lowest }}</li>
+                    <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
+                    <li class="legend-item">MA10: {{ selectedItem.ma10 }}</li>
+                    <li class="legend-item">MA15: {{ selectedItem.ma15 }}</li>
+                </ul>
+                <app-echarts :option="options.timeline" v-model:dataIndex="dataIndex" @ready="initOptions" />
+            </div>
+        </template>
+    </div>
 </template>
 
 <script lang="ts" setup>
+import { useTimelineChart } from '@/hooks/echarts/timeline'
+import AppEcharts from '@/components/base/echarts/index.vue'
+
+const props = defineProps({
+    goodscode: {
+        type: String,
+        default: '',
+    },
+})
+
+const { loading, dataIndex, isEmpty, options, selectedItem, initOptions } = useTimelineChart(props.goodscode)
 </script>

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

@@ -1,8 +1,92 @@
 <template>
-    <app-view>
-
+    <app-view class="market-detail">
+        <template #header>
+            <app-navbar title="商品详情" />
+        </template>
+        <div class="market-detail__quote" v-if="quote">
+            <ul>
+                <li>
+                    <span>{{ quote.last }}</span>
+                </li>
+                <li>
+                    <span>卖价</span>
+                    <span>{{ quote.ask }}</span>
+                </li>
+                <li>
+                    <span>开盘</span>
+                    <span>{{ quote.opened }}</span>
+                </li>
+                <li>
+                    <span>{{ handleNumberValue(quote.rise.toFixed(quote.decimalplace)) }}</span>
+                    <span>{{ parsePercent(quote.change) }}</span>
+                </li>
+                <li>
+                    <span>买价</span>
+                    <span>{{ quote.bid }}</span>
+                </li>
+                <li>
+                    <span>均价</span>
+                    <span>{{ }}</span>
+                </li>
+                <li>
+                    <span>昨结</span>
+                    <span>{{ quote.presettle }}</span>
+                </li>
+                <li>
+                    <span>最高</span>
+                    <span>{{ quote.highest }}</span>
+                </li>
+                <li>
+                    <span>结算</span>
+                    <span>{{ }}</span>
+                </li>
+                <li>
+                    <span>昨收</span>
+                    <span>{{ }}</span>
+                </li>
+                <li>
+                    <span>最低</span>
+                    <span>{{ quote.lowest }}</span>
+                </li>
+            </ul>
+        </div>
+        <Tabs v-model:active="active">
+            <template v-for="(item, index) in getChartCycleTypeList()" :key="index">
+                <Tab :title="item.label" :name="item.value" />
+            </template>
+        </Tabs>
+        <component :is="componentMap.get('echartsTimeline')" v-bind="{ goodscode }" v-if="active === ChartCycleType.Time" />
+        <component :is="componentMap.get('echartsKline')" v-bind="{ goodscode, cycleType: active }" v-else />
     </app-view>
 </template>
 
 <script lang="ts" setup>
-</script>
+import { shallowRef, onMounted, onUnmounted, defineAsyncComponent } from 'vue'
+import { Tab, Tabs } from 'vant'
+import { parsePercent, handleNumberValue } from '@/filters'
+import { getChartCycleTypeList, ChartCycleType } from '@/constants/chart'
+import { useNavigation } from '@/hooks/navigation'
+import { useFuturesStore } from '@/stores'
+import quoteSocket from '@/services/websocket/quote'
+
+const componentMap = new Map<string, unknown>([
+    ['echartsTimeline', defineAsyncComponent(() => import('@mobile/components/modules/echarts-timeline/index.vue'))],
+    ['echartsKline', defineAsyncComponent(() => import('@mobile/components/modules/echarts-kline/index.vue'))]
+])
+
+const { getQueryString } = useNavigation()
+const futuresStore = useFuturesStore()
+const goodscode = getQueryString('goodscode')
+const active = shallowRef(ChartCycleType.Time)
+
+const quote = futuresStore.getQuoteInfo(goodscode)
+const subscribe = quoteSocket.addSubscribe([goodscode])
+
+onMounted(() => subscribe.start())
+
+onUnmounted(() => subscribe.stop())
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/mobile/views/market/detail/index.less

@@ -0,0 +1,15 @@
+.market-detail {
+    &__quote {
+        ul {
+            display: flex;
+            flex-wrap: wrap;
+
+            li {
+                display: flex;
+                justify-content: space-between;
+                width: ~"calc(100% / 3)";
+                padding: 0 .2rem;
+            }
+        }
+    }
+}

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

@@ -91,9 +91,12 @@ const columns: Model.TableColumn[] = [
     { prop: 'amplitude', label: '振幅' },
 ]
 
-const rowClick = () => {
+const rowClick = (row: Model.Futures) => {
     router.push({
         name: 'market-detail',
+        query: {
+            goodscode: row.goodscode
+        }
     })
 }
 

src/packages/mobile/views/transfer/delisting/components/delisting/index.less

@@ -1,13 +0,0 @@
-.supply-demand-listing {
-    &__form {
-        .van-stepper {
-            display: flex;
-            align-items: center;
-            width: 100%;
-
-            &__input {
-                flex: 1;
-            }
-        }
-    }
-}

src/services/api/quote/index.ts

@@ -15,8 +15,8 @@ export function quoteSubscribe(config: RequestConfig<Model.QuoteSubscribeReq> =
 /**
  * 查询行情历史数据
  */
-export function queryHistoryDatas(config: RequestConfig<{ goodscode: string }> = {}) {
-    return http.commonRequest<Model.QueryHistoryDatasRsp[]>({
+export function queryHistoryDatas(config: RequestConfig<Model.HistoryDatasReq> = {}) {
+    return http.commonRequest<Model.HistoryDatasRsp[]>({
         url: '/Quote/QueryHistoryDatas',
         params: config.data,
     })
@@ -25,8 +25,8 @@ export function queryHistoryDatas(config: RequestConfig<{ goodscode: string }> =
 /**
  * 分时图数据查询
  */
-export function queryTSData(config: RequestConfig<{ goodscode: string }> = {}) {
-    return http.commonRequest<Model.QueryTSDataRsp>({
+export function queryTSData(config: RequestConfig<{ goodsCode: string }> = {}) {
+    return http.commonRequest<Model.TSDataRsp>({
         url: '/Quote/QueryTSData',
         params: config.data,
     })

src/stores/modules/login.ts

@@ -91,7 +91,7 @@ export const useLoginStore = defineStore(() => {
     // 清除登录信息
     const clearLoginInfo = () => {
         localData.reset('loginInfo')
-        sessionData.reset('loginInfo')
+        sessionData.reset()
         state.loginInfo = initLoginInfo()
     }
 

src/types/model/quote.d.ts

@@ -139,8 +139,18 @@ declare namespace Model {
         utclasttime: string; // utc的行情时间
     }
 
-    /** K线历史数据 */
-    interface QueryHistoryDatasRsp {
+    /** 查询行情历史数据 请求 */
+    interface HistoryDatasReq {
+        cycleType: number; // 周期类型, 0-秒 1: 1分钟 2: 5分钟 3: 30分钟 4: 60分钟 120: 2小时 240: 4小时 11: 日线 12：周线 13：月线 14：年线
+        goodsCode: string; // 商品代码
+        startTime?: string; // 开始时间，格式：yyyy-MM-dd HH:mm:ss
+        endTime?: string; // 结束时间，格式：yyyy-MM-dd HH:mm:ss
+        count?: number; // 条数
+        isAsc?: boolean; // 是否按时间顺序排序（默认为时间倒序排序）
+    }
+
+    /** 查询行情历史数据 响应 */
+    interface HistoryDatasRsp {
         o: number;
         h: number;
         l: number;
@@ -153,8 +163,8 @@ declare namespace Model {
         f: boolean;
     }
 
-    /** 分时历史数据 */
-    interface QueryTSDataRsp {
+    /** 分时历史数据 响应 */
+    interface TSDataRsp {
         Count: number;
         decimalPlace: number;
         endTime: string;
@@ -163,25 +173,23 @@ declare namespace Model {
         preSettle: number;
         startTime: string;
         tradeDate: string;
-        historyDatas: QueryHistoryDatasRsp[];
-        runSteps: QueryTSDataRsp.RunSteps[];
+        historyDatas: HistoryDatasRsp[];
+        runSteps: RunSteps[];
     }
 
-    namespace QueryTSDataRsp {
-        interface RunSteps {
-            end: string;
-            endflag: number;
-            endtime: string;
-            endweekday: number;
-            groupid: number;
-            runstep: number;
-            sectionid: number;
-            start: string;
-            startflag: number;
-            starttime: string;
-            startweekday: number;
-            tradeweekday: number;
-        }
+    interface RunSteps {
+        end: string;
+        endflag: number;
+        endtime: string;
+        endweekday: number;
+        groupid: number;
+        runstep: number;
+        sectionid: number;
+        start: string;
+        startflag: number;
+        starttime: string;
+        startweekday: number;
+        tradeweekday: number;
     }
 
     /** 查询行情Tik数据 请求 */