🐞 fix(home): 修复定时器未成功清除的问题

(cherry picked from commit 519fe55904931026fdff55103a8f07b23e1a11d0)

src/pages/Home.vue

@@ -5,7 +5,7 @@
 
 <script lang="ts" setup>
 // vue
-import { ref, markRaw, onMounted, onUnmounted } from "vue";
+import { ref, markRaw, onMounted, onUnmounted, onUpdated } from "vue";
 import TLoading from "../components/t-loading.vue";
 import TPool from "../components/t-pool.vue";
 import TPosition from "../components/t-position.vue";
@@ -25,6 +25,20 @@ const loadingSubtitle = ref("");
 const components = ref([] as any[]);
 const itemRefs = ref([] as any[]);
 
+// 定时器
+const timer = ref(null as any);
+
+function readLoading (): void {
+  if (!loading.value) return;
+  const loadingMap = itemRefs.value.map((item) => {
+    return item.loading ? item.name : null;
+  });
+  loadingSubtitle.value = "正在加载 " + loadingMap.filter((item) => item)?.join("、");
+  if (loadingMap.every((item) => !item)) {
+    loading.value = false;
+  }
+}
+
 onMounted(async () => {
   loadingTitle.value = "正在加载首页";
   const showItems = homeStore.getShowValue();
@@ -42,22 +56,19 @@ onMounted(async () => {
       }
     }),
   );
-  setInterval(() => {
+  timer.value = setInterval(readLoading, 100);
-    if (!loading.value) clearInterval(this);
-    const loadingMap = itemRefs.value.map((item) => {
-      return item.loading ? item.name : null;
-    });
-    loadingSubtitle.value = "正在加载 " + loadingMap.filter((item) => item)?.join("、");
-    if (loadingMap.every((item) => !item)) {
-      loading.value = false;
-    }
-  }, 100);
 });
+
 function setItemRef (item: any) {
   if (itemRefs.value.includes(item)) return;
   itemRefs.value.push(item);
 }
 
+// 监听定时器
+onUpdated(() => {
+  if (!loading.value) clearInterval(timer.value);
+});
+
 onUnmounted(() => {
   itemRefs.value = [];
 });

src/views/t-lottery.vue

@@ -67,7 +67,7 @@
 </template>
 <script lang="ts" setup>
 // vue
-import { ref, onMounted, reactive } from "vue";
+import { ref, onMounted, reactive, onUpdated } from "vue";
 import { useRoute } from "vue-router";
 import JsonViewer from "vue-json-viewer";
 import TLoading from "../components/t-loading.vue";
@@ -88,6 +88,24 @@ const loadingEmpty = ref(false as boolean);
 // store
 const appStore = useAppStore();
 
+// 定时器
+const lotteryTimer = ref(null as any);
+
+function flushTimeStatus () {
+  const timeNow = new Date().getTime();
+  const timeDiff = Number(jsonData.draw_time) * 1000 - timeNow;
+  if (timeDiff <= 0) {
+    timeStatus.value = "已开奖";
+    clearInterval(lotteryTimer);
+  } else {
+    const day = Math.floor(timeDiff / (24 * 3600 * 1000));
+    const hour = Math.floor((timeDiff % (24 * 3600 * 1000)) / (3600 * 1000));
+    const minute = Math.floor((timeDiff % (3600 * 1000)) / (60 * 1000));
+    const second = Math.floor((timeDiff % (60 * 1000)) / 1000);
+    timeStatus.value = `${day}天${hour}小时${minute}分${second}秒`;
+  }
+}
+
 // 数据
 const lotteryId = useRoute().params.lottery_id as string;
 const lotteryCard = ref({} as LotteryCard);
@@ -121,25 +139,22 @@ onMounted(async () => {
   if (jsonData.status === "Settled") {
     timeStatus.value = "已开奖";
   } else {
-    await setInterval(() => {
+    lotteryTimer.value = setInterval(() => {
-      const timeNow = new Date().getTime();
+      flushTimeStatus();
-      const timeDiff = Number(jsonData.draw_time) * 1000 - timeNow;
-      if (timeDiff <= 0) {
-        timeStatus.value = "已开奖";
-        clearInterval(this);
-      } else {
-        const day = Math.floor(timeDiff / (24 * 3600 * 1000));
-        const hour = Math.floor((timeDiff % (24 * 3600 * 1000)) / (3600 * 1000));
-        const minute = Math.floor((timeDiff % (3600 * 1000)) / (60 * 1000));
-        const second = Math.floor((timeDiff % (60 * 1000)) / 1000);
-        timeStatus.value = `${day}天${hour}小时${minute}分${second}秒`;
-      }
     }, 1000);
   }
   setTimeout(() => {
     loading.value = false;
   }, 200);
 });
+
+// 监听 timeStatus
+onUpdated(() => {
+  if (timeStatus.value === "已开奖") {
+    clearInterval(lotteryTimer);
+  }
+});
+
 </script>
 <style lang="css">
 .lottery-div {