qimaohong
/
deepChartVueApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

加入loading动画，修改marketDetail页面数据加载函数作用生命周期

lihuilin/feature-20251024095243-我的
hongxilin 3 weeks ago
parent
f440802c59
commit
d6e20a1ec5
5 changed files with 108 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 54
      components/h-loading.vue
  2. 8
      pages/marketSituation/globalIndex.vue
  3. 31
      pages/marketSituation/marketDetail.vue
  4. 32
      pages/marketSituation/marketOverview.vue
  5. BIN
      static/loading-gif.gif

54
components/h-loading.vue
View File

@ -0,0 +1,54 @@
<!-- @format -->
<template>
<view v-if="loading" class="loading">
<image class="loadingGif" src="/static/loading-gif.gif" mode=""></image>
</view>
</template>
<script setup>
import { ref, computed, onMounted,watch } from "vue";
// 定义 props
const props = defineProps({
loading: {
type: Boolean,
default: false,
},
});
const loading = ref(false);
// 监听 props.loading 变化
watch(() => props.loading, (newVal) => {
loading.value = newVal;
});
// 生命周期
onMounted(() => {
loading.value = props.loading;
});
</script>
<style scoped>
.loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
.loadingGif {
width: 100rpx;
height: 100rpx;
}
</style>

8
pages/marketSituation/globalIndex.vue
View File

@ -2,6 +2,8 @@
<template>
<view class="main">
<!-- 加载中 -->
<h-loading :loading="loading"></h-loading>
<!-- 固定头部 -->
<view class="header_fixed" :style="{ top: iSMT + 'px' }">
<view class="header_content">
@ -69,6 +71,7 @@ import { ref, onMounted, onUnmounted, computed, nextTick, watch } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import footerBar from "../../components/footerBar.vue";
import IndexCard from "../../components/IndexCard.vue";
import hLoading from "@/components/h-loading.vue";
import { getRegionalGroupAPI } from "../../api/marketSituation/marketSituation.js";
import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
const marketSituationStore = useMarketSituationStore();
@ -78,7 +81,7 @@ const contentHeight = ref(0);
const headerHeight = ref(0); // 头部高度
const searchValue = ref(""); // 搜索值
const isWarnTextOverflow = ref(false); // warn文字是否溢出
const loading = ref(false);
// 数据状态加载
const isDataLoaded = ref(false);
@ -160,11 +163,14 @@ const viewIndexDetail = (item, parentIndex, index) => {
const getRegionalGroup = async () => {
try {
loading.value = true;
const result = await getRegionalGroupAPI();
globalIndexArray.value = result.data;
marketSituationStore.gloablCardData = result.data;
loading.value = false;
} catch (e) {
console.log("获取区域指数失败", e);
loading.value = false;
}
};

31
pages/marketSituation/marketDetail.vue
View File

@ -2,6 +2,8 @@
<template>
<view class="main">
<!-- 加载中 -->
<h-loading :loading="loading"></h-loading>
<!-- 自定义导航栏 -->
<view class="header_fixed" :style="{ top: iSMT + 'px' }">
<view class="header-content">
@ -65,8 +67,9 @@
<script setup>
import { ref, computed, onMounted, onUnmounted, nextTick, watch } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
import footerBar from "@/components/footerBar.vue";
import hLoading from "@/components/h-loading.vue";
import { getRegionalGroupListAPI } from "../../api/marketSituation/marketSituation.js";
import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
const marketSituationStore = useMarketSituationStore();
@ -77,7 +80,7 @@ const headerHeight = ref(80);
const marketTitle = ref();
const sortType = ref(""); // 排序类型：'price' 或 'change'
const sortOrder = ref("desc"); // 排序顺序：'asc' 或 'desc'
const loading = ref(false);
const regionalGroupArray = ref([]);
// 计算属性
@ -111,13 +114,16 @@ const judgeSymbol = (num) => {
const getRegionalGroupList = async () => {
try {
loading.value = true;
const result = await getRegionalGroupListAPI({
name: marketTitle.value,
});
regionalGroupArray.value = result.data;
marketSituationStore.marketDetailCardData = result.data;
loading.value = false;
} catch (e) {
console.error("获取区域分组列表失败:", e);
loading.value = false;
}
};
@ -430,15 +436,26 @@ const startTcp = () => {
}
};
onShow(async () => {
console.log("显示页面");
await getRegionalGroupList();
initTcpListeners();
await nextTick();
// 开始连接
startTcp();
});
onHide(() => {
console.log("隐藏页面");
sendTcpMessage("stop_real_time");
removeTcpListeners();
disconnectTcp();
});
// 页面加载时接收参数
onLoad(async (options) => {
if (options && options.market) {
marketTitle.value = options.market;
await getRegionalGroupList();
initTcpListeners();
await nextTick();
// 开始连接
startTcp();
}
});

32
pages/marketSituation/marketOverview.vue
View File

@ -2,14 +2,23 @@
<template>
<view class="main">
<h-loading :loading="loading"></h-loading>
<!-- 可滚动内容区域 -->
<scroll-view class="content_scroll" scroll-y="true" :style="{ top: contentTopPosition + 'px' }">
<view class="content">
<view class="map">
<view class="INDU">道琼斯<view :class="getSignClass(INDU.value)">{{ judgeSymbol(INDU.value) }}</view></view>
<view class="NDX">纳斯达克<view :class="getSignClass(NDX.value)">{{ judgeSymbol(NDX.value) }}</view></view>
<view class="HSI">恒生指数<view :class="getSignClass(HSI.value)">{{ judgeSymbol(HSI.value) }}</view></view>
<view class="CN">上证指数<view :class="getSignClass(CN.value)">{{ judgeSymbol(CN.value) }}</view></view>
<view class="INDU"
>道琼斯<view :class="getSignClass(INDU.value)">{{ judgeSymbol(INDU.value) }}</view></view
>
<view class="NDX"
>纳斯达克<view :class="getSignClass(NDX.value)">{{ judgeSymbol(NDX.value) }}</view></view
>
<view class="HSI"
>恒生指数<view :class="getSignClass(HSI.value)">{{ judgeSymbol(HSI.value) }}</view></view
>
<view class="CN"
>上证指数<view :class="getSignClass(CN.value)">{{ judgeSymbol(CN.value) }}</view></view
>
<image src="/static/marketSituation-image/map.png" mode="widthFix"></image>
</view>
<view class="global_index">
@ -54,6 +63,7 @@ import { ref, onMounted, onUnmounted, watch, nextTick, computed } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import util from "../../common/util.js";
import IndexCard from "../../components/IndexCard.vue";
import hLoading from "@/components/h-loading.vue";
import { useMarketSituationStore } from "../../stores/modules/marketSituation.js";
const marketSituationStore = useMarketSituationStore();
import { getGlobalIndexAPI } from "../../api/marketSituation/marketSituation.js";
@ -63,6 +73,7 @@ const searchValue = ref("");
const contentHeight = ref(0);
const headerHeight = ref(0); // 动态计算的header高度
const isWarnTextOverflow = ref(false); // warn文字是否溢出
const loading = ref(false);
const INDU = ref({ stockName: "道琼斯", stockCode: "INDU", value: "" });
const NDX = ref({ stockName: "纳斯达克", stockCode: "513300", value: "" });
@ -91,13 +102,13 @@ const judgeSymbol = (num) => {
};
function getSignClass(value) {
const s = typeof value === 'string' ? value : String(value ?? '');
const s = typeof value === "string" ? value : String(value ?? "");
const trimmed = s.trim();
if (trimmed.startsWith('-')) return 'index-down';
if (trimmed.startsWith('+')) return 'index-up';
if (trimmed.startsWith("-")) return "index-down";
if (trimmed.startsWith("+")) return "index-up";
const n = parseFloat(trimmed);
if (!isNaN(n)) return n >= 0 ? 'index-up' : 'index-down';
return '';
if (!isNaN(n)) return n >= 0 ? "index-up" : "index-down";
return "";
}
// 搜索输入事件
@ -185,10 +196,13 @@ const goToGlobalIndex = () => {
const getGlobalIndex = async () => {
try {
loading.value = true;
const result = await getGlobalIndexAPI();
globalIndexArray.value = result.data;
loading.value = false;
} catch (e) {
console.log("获取全球指数失败", e);
loading.value = false;
}
};

BIN
static/loading-gif.gif
View File

Side by Side

After

Width: 120  |  Height: 120  |  Size: 134 KiB

Write Preview
Loading…
Cancel
Save