update

src/business/account/index.ts

@@ -41,26 +41,27 @@ export function useAccount() {
                             sessionCache.setValue('loginInfo', res);
 
                             initBaseData(() => {
-                                loading.value = false;
                                 resolve(res);
-
                                 const redirect = route.query.redirect;
                                 if (redirect) {
                                     router.replace(redirect.toString());
                                 } else {
                                     router.replace('/');
                                 }
+                            }).catch((err) => {
+                                loading.value = false;
+                                reject(err);
                             })
                         },
                         fail: (err) => {
                             loading.value = false;
-                            reject(err.msg);
+                            reject(err);
                         }
                     })
                 },
                 fail: (err) => {
                     loading.value = false;
-                    reject(err.msg);
+                    reject(err);
                 }
             })
         })

src/business/common/index.ts

@@ -34,15 +34,19 @@ export async function initBaseData(callback?: () => void) {
             success: (res) => {
                 globalState.setValue('goodsList', res.data);
             },
-            fail: (err) => {
-                console.error('商品请求失败', err);
+            fail: () => {
+                console.error('商品请求失败');
             }
         })
 
-        await Promise.all([getGoodsList]);
+        await Promise.all([getGoodsList]).then(() => {
+            callback && callback();
+        }).catch(() => {
+            return Promise.reject('初始化失败');
+        })
+    } else {
+        callback && callback();
     }
-
-    callback && callback();
 }
 
 /**

src/components/base/echarts/index.less

@@ -1,27 +1,6 @@
 .app-echarts {
     flex: 1;
 
-    &.is-empty {
-        position: relative;
-
-        &::before {
-            content        : '暂无数据';
-            position       : absolute;
-            top            : 0;
-            left           : 0;
-            z-index        : 1;
-            display        : flex;
-            justify-content: center;
-            align-items    : center;
-            width          : 100%;
-            height         : 100%;
-        }
-
-        >div {
-            z-index: -100;
-        }
-    }
-
     .tooltip {
         &-title {
             text-align: left;

src/components/base/echarts/index.ts

@@ -1,7 +1,6 @@
 import { ref, onMounted, onUnmounted, getCurrentInstance } from 'vue'
 import { timerInterceptor } from '@/utils/timer'
-import { localCache } from '@/store'
-import ResizeObserver from 'resize-observer-polyfill';
+import ResizeObserver from 'resize-observer-polyfill'
 import * as echarts from 'echarts'
 
 // 默认配置项
@@ -25,36 +24,8 @@ export function useEcharts() {
 
     // 图表配置项
     const setOptions = (option: echarts.EChartsOption, notMerge = false) => {
-        chart.setOption(option, notMerge);
-        chart.hideLoading();
-        instance?.emit('update:loading', false);
-    };
-
-    // 显示加载动画
-    const showLoading = (loading: boolean) => {
-        if (loading) {
-            chart.clear(); // 清空图表
-            chart.setOption(defaultOption);
-
-            const theme = localCache.getValue('appTheme'); // 当前主题
-            switch (theme) {
-                case 'default':
-                case 'dark':
-                    chart.showLoading({
-                        text: '加载中...',
-                        textColor: '#fff',
-                        color: 'rgba(255, 255, 255, 0.75)',
-                        maskColor: 'transparent',
-                    });
-                    break;
-                default:
-                    chart.showLoading({
-                        text: '加载中...',
-                        maskColor: 'transparent',
-                    });
-            }
-        }
-    };
+        chart?.setOption(option, notMerge);
+    }
 
     // 图表初始化
     onMounted(() => {
@@ -75,14 +46,13 @@ export function useEcharts() {
                 }
             })
 
-            // 监听元素变化
-            new ResizeObserver(() => {
-                // 图表重置大小
-                timerInterceptor.debounce(() => {
-                    chart.resize && chart.resize();
-                }, 50);
-            }).observe(el);
+            // 图表重置大小
+            const resize = timerInterceptor.setDebounce(() => {
+                chart.resize && chart.resize();
+            }, 50);
 
+            // 监听元素变化
+            new ResizeObserver(() => resize()).observe(el);
             instance?.emit('ready', chart);
         }
     })
@@ -93,7 +63,6 @@ export function useEcharts() {
 
     return {
         chartElement,
-        showLoading,
         setOptions
     }
 }

src/components/base/echarts/index.vue

@@ -27,25 +27,11 @@ const props = defineProps({
     type: Number,
     default: 0,
   },
-  loading: {
-    type: Boolean,
-    default: false,
-  },
-  empty: {
-    type: Boolean,
-    default: false,
-  },
 })
 
-const { chartElement, setOptions, showLoading } = useEcharts();
-
-watch(() => props.loading, (val) => showLoading(val));
-watch(() => props.option, (val) => {
-  if (!props.empty) {
-    setOptions(val)
-  }
-});
+const { chartElement, setOptions } = useEcharts();
 
+watch(() => props.option, (val) => setOptions(val));
 </script>
 
 <style lang="less">

src/hooks/echarts/candlestick/index.ts

@@ -1,4 +1,5 @@
 import { ref, computed, watch } from 'vue'
+//import { timerInterceptor } from '@/utils/timer'
 import { EChartsCycleType } from '@/constants/enum/echarts'
 import { queryHistoryDatas } from '@/services/api/quote'
 import { getQuoteDayInfoByCode } from '@/business/common'
@@ -11,7 +12,7 @@ export function useCandlestickChart(goodscode: string) {
     const { options, initOptions, updateOptions } = useOptions(dataset);
 
     const loading = ref(false);
-    const isEmpty = ref(false);
+    const isEmpty = ref(true);
     const dataIndex = ref(-1); // 当前数据索引值
     const cycleType = ref(EChartsCycleType.minutes);
     const quote = getQuoteDayInfoByCode(goodscode);
@@ -57,8 +58,8 @@ export function useCandlestickChart(goodscode: string) {
         clearData();
         dataIndex.value = -1;
         cycleType.value = cycletype;
-        isEmpty.value = false;
         loading.value = true;
+        isEmpty.value = true;
 
         // 获取历史行情
         queryHistoryDatas({
@@ -69,9 +70,8 @@ export function useCandlestickChart(goodscode: string) {
                 const data = res.data;
                 if (data.length) {
                     dataIndex.value = data.length - 1;
-                    handleData(data, () => initOptions(updateChart));
-                } else {
-                    isEmpty.value = true;
+                    isEmpty.value = false;
+                    handleData(data);
                 }
             },
             complete: () => {
@@ -126,6 +126,7 @@ export function useCandlestickChart(goodscode: string) {
 
             if (diffTime > cycleMilliseconds * 2) {
                 // 时间间隔超过两个周期，重新请求历史数据
+                //timerInterceptor.debounce(() => initData(cycleType.value), 1000, 'updateChart');
             } else {
                 // 判断时间差是否大于周期时间
                 if (lastIndex === -1 || diffTime > cycleMilliseconds) {
@@ -185,7 +186,7 @@ export function useCandlestickChart(goodscode: string) {
                     record.close = last; // 更新收盘价
                 }
 
-                // 更新各种指标
+                // 计算各项指标
                 calcIndicator(lastIndex === -1 ? 0 : lastIndex);
                 updateOptions();
             }
@@ -194,7 +195,7 @@ export function useCandlestickChart(goodscode: string) {
 
     // 监听行情推送
     watch(quote, () => {
-        if (!loading.value) {
+        if (!loading.value && !isEmpty.value) {
             updateChart();
         }
     })

src/hooks/echarts/candlestick/options.ts

@@ -291,13 +291,12 @@ export function useOptions(dataset: EchartsDataset) {
         }
     }
 
-    const initOptions = (onReady?: () => void) => {
+    const initOptions = () => {
         setCandlestickOption();
         setMacdOption();
         setVolOption();
         setKdjOption();
         setCciOption();
-        onReady && onReady();
     }
 
     // 动态更新数据

src/hooks/echarts/timeline/index.ts

@@ -1,4 +1,5 @@
 import { ref, computed, watch } from 'vue'
+//import { timerInterceptor } from '@/utils/timer'
 import { queryTSData } from '@/services/api/quote'
 import { getQuoteDayInfoByCode } from '@/business/common'
 import { useDataset } from './dataset'
@@ -29,7 +30,7 @@ export function useTimelineChart(goodscode: string) {
     const initData = () => {
         clearData();
         dataIndex.value = -1;
-        isEmpty.value = false;
+        isEmpty.value = true;
         loading.value = true;
 
         // 获取历史行情
@@ -41,9 +42,8 @@ export function useTimelineChart(goodscode: string) {
                 const { historyDatas } = res.data;
                 if (historyDatas.length) {
                     dataIndex.value = historyDatas.length - 1;
-                    handleData(res.data, () => initOptions(updateChart));
-                } else {
-                    isEmpty.value = true;
+                    isEmpty.value = false;
+                    handleData(res.data);
                 }
             },
             complete: () => {
@@ -67,6 +67,7 @@ export function useTimelineChart(goodscode: string) {
 
             if (diffTime > cycleMilliseconds * 2) {
                 // 时间间隔超过两个周期，重新请求历史数据
+                //timerInterceptor.debounce(() => initData(), 1000, 'updateChart');
             } else {
                 // 判断时间差是否大于周期时间
                 if (lastIndex === -1 || diffTime > cycleMilliseconds) {
@@ -90,11 +91,13 @@ export function useTimelineChart(goodscode: string) {
 
     // 监听行情推送
     watch(quote, () => {
-        if (!loading.value) {
+        if (!loading.value && !isEmpty.value) {
             updateChart();
         }
     })
 
+    initData();
+
     return {
         loading,
         isEmpty,
@@ -102,5 +105,6 @@ export function useTimelineChart(goodscode: string) {
         options,
         selectedItem,
         initData,
+        initOptions,
     }
 }

src/hooks/echarts/timeline/options.ts

@@ -70,7 +70,7 @@ export function useOptions(dataset: EchartsDataset) {
         return '0%';
     }
 
-    const initOptions = (onReady?: () => void) => {
+    const initOptions = () => {
         const { timeline, maxMark, minMark, interval, yestclose, decimal } = dataset;
         const { colors } = options;
 
@@ -198,8 +198,6 @@ export function useOptions(dataset: EchartsDataset) {
                 },
             ],
         }
-
-        onReady && onReady();
     }
 
     // 动态更新数据

src/mock/account.ts

@@ -3,7 +3,7 @@ const getLoginId = {
     type: 'get',
     response: {
         code: 200,
-        message: 'success',
+        msg: 'success',
         total: 0,
         data: '110000000001'
     }
@@ -14,7 +14,7 @@ const login = {
     type: 'post',
     response: {
         code: 200,
-        message: 'success',
+        msg: 'success',
         total: 0,
         data: {
             id: 1000,

src/mock/goods.ts

@@ -3,7 +3,7 @@ const goods = {
     type: 'get',
     response: {
         code: 200,
-        message: 'success',
+        msg: 'success',
         total: 0,
         data: [
             {

src/mock/quote.ts

@@ -3,7 +3,7 @@ const historyDatas = {
     type: 'get',
     response: {
         code: 200,
-        message: 'success',
+        msg: 'success',
         total: 0,
         data: [
             {
@@ -3387,7 +3387,7 @@ const tsData = {
     type: 'get',
     response: {
         code: 200,
-        message: 'success',
+        msg: 'success',
         total: 0,
         data: {
             "goodsCode": "SR209",

src/mock/router.ts

@@ -3,7 +3,7 @@ const appmenu = {
     type: 'get',
     response: {
         code: 200,
-        message: 'success',
+        msg: 'success',
         total: 0,
         data: [
             {

src/packages/mobile/components/modules/echarts-kline/index.less

@@ -0,0 +1,33 @@
+.app-echats-kline {
+    display       : flex;
+    flex-direction: column;
+    height        : 300px;
+
+    &__tip {
+        margin: auto;
+    }
+
+    &__container {
+        flex          : 1;
+        display       : flex;
+        flex-direction: column;
+
+        .app-echarts {
+            flex: 1;
+        }
+
+        .legend {
+            display  : flex;
+            color    : #7a8a94;
+            font-size: 12px;
+            padding  : 4px 4%;
+            margin   : 0;
+
+            &-item {
+                &:not(:first-child) {
+                    margin-left: 10px;
+                }
+            }
+        }
+    }
+}

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

@@ -1,3 +1,61 @@
 <template>
-    <div></div>
-</template>
+    <div class="app-echats-kline">
+        <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.candlestick" v-model:index="dataIndex" @ready="initOptions" />
+            </div>
+        </template>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { PropType, watch } from 'vue'
+import { EChartsCycleType } from '@/constants/enum'
+import { useCandlestickChart } from '@/hooks/echarts/candlestick'
+import AppEcharts from '@/components/base/echarts/index.vue'
+
+const props = defineProps({
+    goodscode: {
+        type: String,
+        default: '',
+    },
+    // 周期类型
+    cycleType: {
+        type: Number as PropType<EChartsCycleType>,
+        default: EChartsCycleType.minutes,
+    },
+    // 是否显示指标
+    showIndicator: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+const { loading, dataIndex, isEmpty, options, selectedItem, initData, initOptions } = useCandlestickChart(props.goodscode);
+
+// 监听周期选择变化
+watch(() => props.cycleType, (val) => {
+    initData(val);
+}, {
+    immediate: true
+})
+</script>
+
+<style lang="less">
+@import './index.less';
+</style>

src/packages/mobile/views/order/detail/index.vue

@@ -3,9 +3,8 @@
     <app-navbar title="详情" />
     <div class="g-flex__body">
       <app-tab theme="menu" :data-source="tabs" :data-index="1" @change="tabChange" />
-      <component :is="components['echartsTimeline']" style="height:70%;"
-        v-if="selectedCycleType === EChartsCycleType.time" />
-      <component :is="components['echartsKline']" :cycle-type="selectedCycleType" style="height:70%;" v-else />
+      <component :is="components['echartsTimeline']" v-if="selectedCycleType === EChartsCycleType.time" />
+      <component :is="components['echartsKline']" :cycle-type="selectedCycleType" v-else />
     </div>
     <div class="order-detail__footer">
       <Button @click="openComponent('trade')" type="primary" round block>挂牌求购</Button>
@@ -37,9 +36,6 @@ const tabs = [
   { label: '1分钟', value: EChartsCycleType.minutes },
   { label: '5分钟', value: EChartsCycleType.minutes5 },
   { label: '30分钟', value: EChartsCycleType.minutes30 },
-  { label: '60分钟', value: EChartsCycleType.minutes60 },
-  { label: '4小时', value: EChartsCycleType.Hours4 },
-  { label: '日K', value: EChartsCycleType.days },
 ]
 
 // 指标切换

src/packages/pc/components/modules/echarts-kline/index.less

@@ -3,6 +3,10 @@
     flex-direction: column;
     height        : 100%;
 
+    &__tip {
+        margin: auto;
+    }
+
     &__container {
         display       : flex;
         flex-direction: column;

src/packages/pc/components/modules/echarts-kline/index.vue

@@ -1,58 +1,61 @@
 <template>
   <div class="app-echats-kline">
-    <div class="app-echats-kline__container main">
-      <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.candlestick" :empty="isEmpty" v-model:index="dataIndex" v-model:loading="loading"
-        @ready="mainReady" />
-    </div>
-    <template v-if="showIndicator">
-      <div class="app-echats-kline__container indicator">
-        <!-- MACD -->
-        <section class="section" v-if="activeSeriesType === EChartsSeriesType.MACD">
-          <ul class="legend">
-            <li class="legend-item">MACD: {{ selectedItem.macd }}</li>
-            <li class="legend-item">DIF: {{ selectedItem.dif }}</li>
-            <li class="legend-item">DEA: {{ selectedItem.dea }}</li>
-          </ul>
-          <app-echarts :option="options.macd" :empty="isEmpty" v-model:index="dataIndex" v-model:loading="loading"
-            @ready="indicatorReady" />
-        </section>
-        <!-- VOL -->
-        <section class="section" v-if="activeSeriesType === EChartsSeriesType.VOL">
-          <ul class="legend">
-            <li class="legend-item">VOL: {{ selectedItem.vol }}</li>
-          </ul>
-          <app-echarts :option="options.vol" :empty="isEmpty" v-model:index="dataIndex" v-model:loading="loading"
-            @ready="indicatorReady" />
-        </section>
-        <!-- KDJ -->
-        <section class="section" v-if="activeSeriesType === EChartsSeriesType.KDJ">
-          <ul class="legend">
-            <li class="legend-item">K: {{ selectedItem.k }}</li>
-            <li class="legend-item">D: {{ selectedItem.d }}</li>
-            <li class="legend-item">J: {{ selectedItem.j }}</li>
-          </ul>
-          <app-echarts :option="options.kdj" :empty="isEmpty" v-model:index="dataIndex" v-model:loading="loading"
-            @ready="indicatorReady" />
-        </section>
-        <!-- CCI -->
-        <section class="section" v-if="activeSeriesType === EChartsSeriesType.CCI">
-          <ul class="legend">
-            <li class="legend-item">CCI: {{ selectedItem.cci }}</li>
-          </ul>
-          <app-echarts :option="options.cci" :empty="isEmpty" v-model:index="dataIndex" v-model:loading="loading"
-            @ready="indicatorReady" />
-        </section>
+    <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 main">
+        <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.candlestick" v-model:index="dataIndex" @ready="mainReady" />
       </div>
-      <app-tab theme="menu" :data-source="tabs" @change="tabChange" />
+      <template v-if="showIndicator">
+        <div class="app-echats-kline__container indicator">
+          <!-- MACD -->
+          <section class="section" v-if="activeSeriesType === EChartsSeriesType.MACD">
+            <ul class="legend">
+              <li class="legend-item">MACD: {{ selectedItem.macd }}</li>
+              <li class="legend-item">DIF: {{ selectedItem.dif }}</li>
+              <li class="legend-item">DEA: {{ selectedItem.dea }}</li>
+            </ul>
+            <app-echarts :option="options.macd" v-model:index="dataIndex" @ready="indicatorReady" />
+          </section>
+          <!-- VOL -->
+          <section class="section" v-if="activeSeriesType === EChartsSeriesType.VOL">
+            <ul class="legend">
+              <li class="legend-item">VOL: {{ selectedItem.vol }}</li>
+            </ul>
+            <app-echarts :option="options.vol" v-model:index="dataIndex" @ready="indicatorReady" />
+          </section>
+          <!-- KDJ -->
+          <section class="section" v-if="activeSeriesType === EChartsSeriesType.KDJ">
+            <ul class="legend">
+              <li class="legend-item">K: {{ selectedItem.k }}</li>
+              <li class="legend-item">D: {{ selectedItem.d }}</li>
+              <li class="legend-item">J: {{ selectedItem.j }}</li>
+            </ul>
+            <app-echarts :option="options.kdj" v-model:index="dataIndex" @ready="indicatorReady" />
+          </section>
+          <!-- CCI -->
+          <section class="section" v-if="activeSeriesType === EChartsSeriesType.CCI">
+            <ul class="legend">
+              <li class="legend-item">CCI: {{ selectedItem.cci }}</li>
+            </ul>
+            <app-echarts :option="options.cci" v-model:index="dataIndex" @ready="indicatorReady" />
+          </section>
+        </div>
+        <app-tab theme="menu" :data-source="tabs" @change="tabChange" />
+      </template>
     </template>
   </div>
 </template>
@@ -103,7 +106,7 @@ const tabChange = (index: number) => {
 
 const mainReady = (chart: echarts.ECharts) => {
   chartGroup.set('main', chart);
-  initData(props.cycleType);
+  initOptions();
 }
 
 const indicatorReady = (chart: echarts.ECharts) => {
@@ -112,7 +115,11 @@ const indicatorReady = (chart: echarts.ECharts) => {
 }
 
 // 监听周期选择变化
-watch(() => props.cycleType, (val) => initData(val));
+watch(() => props.cycleType, (val) => {
+  initData(val);
+}, {
+  immediate: true
+})
 </script>
 
 <style lang="less">

src/packages/pc/components/modules/echarts-timeline/index.less

@@ -3,6 +3,10 @@
     flex-direction: column;
     height        : 100%;
 
+    &__tip {
+        margin: auto;
+    }
+
     .legend {
         display  : flex;
         color    : #7a8a94;

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

@@ -1,11 +1,18 @@
 <template>
   <div class="app-echats-timeline">
-    <ul class="legend">
-      <li class="legend-item">收: {{ selectedItem.close }}</li>
-      <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
-    </ul>
-    <app-echarts :option="options.timeline" :empty="isEmpty" v-model:index="dataIndex" v-model:loading="loading"
-      @ready="initData" />
+    <template v-if="loading">
+      <div class="app-echats-timeline__tip">正在加载...</div>
+    </template>
+    <template v-else-if="isEmpty">
+      <div class="app-echats-timeline__tip">暂无数据</div>
+    </template>
+    <template v-else>
+      <ul class="legend">
+        <li class="legend-item">收: {{ selectedItem.close }}</li>
+        <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
+      </ul>
+      <app-echarts :option="options.timeline" v-model:index="dataIndex" @ready="initOptions" />
+    </template>
   </div>
 </template>
 
@@ -20,7 +27,7 @@ const props = defineProps({
   },
 })
 
-const { loading, dataIndex, isEmpty, options, selectedItem, initData } = useTimelineChart(props.goodscode);
+const { loading, dataIndex, isEmpty, options, selectedItem, initOptions } = useTimelineChart(props.goodscode);
 </script>
 
 <style lang="less">

src/packages/pc/views/boot/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="boot">
     <el-button :loading="loading" v-if="loading">正在烧烤...</el-button>
-    <el-button v-else>烧烤完毕</el-button>
+    <div v-else>烧烤失败</div>
   </div>
 </template>
 
@@ -17,15 +17,17 @@ const route = useRoute(),
 
 service.onReady(() => {
   initBaseData(() => {
-    loading.value = false;
-
     const redirect = route.query.redirect;
     if (redirect) {
       router.replace(redirect.toString());
     } else {
       router.replace('/');
     }
+  }).catch(() => {
+    loading.value = false;
   })
+}).catch(() => {
+  loading.value = false;
 })
 </script>
 

src/packages/pc/views/market/goods/index.vue

@@ -3,8 +3,9 @@
     <div>全局共享数据：{{ goodsList }}</div>
     <el-button @click="clearGoods">清空</el-button>
     <app-tab theme="menu" :data-source="tabs" :data-index="1" @change="tabChange" />
-    <app-echarts-timeline style="height:70%;" v-if="selectedCycleType === EChartsCycleType.time" />
-    <app-echarts-kline :cycle-type="selectedCycleType" style="height:70%;" v-else />
+    <component :is="components.echartsTimeline" style="height:70%;"
+      v-if="selectedCycleType === EChartsCycleType.time" />
+    <component :is="components.echartsKline" :cycle-type="selectedCycleType" style="height:70%;" v-else />
     <!-- <div ref="scrollEl" style="height:300px;overflow-y:auto;">
       <div style="height:3000px;"></div>
     </div> -->
@@ -12,14 +13,17 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from 'vue'
+import { defineAsyncComponent, ref } from 'vue'
 import { timerInterceptor } from '@/utils/timer'
 import { globalState } from '@/store'
 import { EChartsCycleType } from '@/constants/enum'
-import AppEchartsKline from '@pc/components/modules/echarts-kline/index.vue'
-import AppEchartsTimeline from '@pc/components/modules/echarts-timeline/index.vue'
 import AppTab from '@/components/base/tab/index.vue'
 
+const components = {
+  echartsKline: defineAsyncComponent(() => import('@pc/components/modules/echarts-kline/index.vue')),
+  echartsTimeline: defineAsyncComponent(() => import('@pc/components/modules/echarts-timeline/index.vue')),
+}
+
 const scrollEl = ref<HTMLDivElement>();
 const selectedCycleType = ref(EChartsCycleType.minutes); // 当前选中的图表周期
 const goodsList = globalState.getRef('goodsList');

src/services/http/index.ts

@@ -83,21 +83,16 @@ export async function httpRequest<T, R>(url: string, method: Method, params: Htt
                 //store.dispatch("user/logout", () => {
                 //    window.location.reload();
                 //});
-                console.warn('令牌无效');
-                break;
+                return Promise.reject('令牌无效');
             case ResultCode.Success:
                 success && success(data);
                 break;
             default:
-                fail && fail(data);
+                return Promise.reject(data.msg);
         }
     }).catch((err) => {
-        fail && fail({
-            code: -1,
-            msg: err,
-            total: 0,
-            data: undefined as unknown as R
-        });
+        fail && fail(err);
+        return Promise.reject(err);
     }).finally(() => {
         complete && complete();
     })

src/services/http/interface.ts

@@ -4,7 +4,7 @@
 export interface HttpRequest<Req = unknown, Rsp = unknown> {
     data?: Req;
     success?: (res: HttpResponse<Rsp>) => void;
-    fail?: (err: HttpResponse<Rsp>) => void;
+    fail?: (err: string) => void;
     complete?: () => void;
 }
 

src/services/socket/trade/index.ts

@@ -88,25 +88,24 @@ export async function tradeServerRequest<Req, Rsp>(params: TradeRequest<Req, Rsp
             }
             case -1: {
                 // 管理端错误消息
-                fail && fail({ msg: RetDesc });
-                break;
+                return Promise.reject(RetDesc);
             }
             case 12018: {
                 if (RetDesc) {
                     // 解析base64
                     res.RetDesc = Buffer.from(RetDesc, 'base64').toString();
                 }
-                fail && fail({ msg: res.RetDesc });
-                break;
+                return Promise.reject(res.RetDesc);
             }
             default: {
                 const msg = (RetDesc || RetCode).toString();
-                fail && fail({ msg });
+                return Promise.reject(msg);
             }
         }
-        complete && complete();
-    }).catch((msg) => {
-        fail && fail({ msg });
+    }).catch((err) => {
+        fail && fail(err);
+        return Promise.reject(err);
+    }).finally(() => {
         complete && complete();
     })
 }

src/services/socket/trade/interface.ts

@@ -6,7 +6,7 @@ import { IMessageHead } from './protobuf/proto'
 export interface TradeRequest<Req, Rsp> {
     data: { Header?: IMessageHead } & Req;
     success?: (res: Rsp) => void;
-    fail?: (err: { msg: string }) => void;
+    fail?: (err: string) => void;
     complete?: () => void;
 }