练习流程修改

src/components/ShootProgress.vue

@@ -38,6 +38,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  onStop: {
+    type: Function,
+    default: () => {},
+  },
 });
 
 const barColor = ref("#fed847");
@@ -75,34 +79,25 @@ watch(
   }
 );
 
-watch(
-  () => props.tips,
-  (newVal) => {
-    if (newVal.includes("红队")) barColor.value = "#FF6060";
-    if (newVal.includes("蓝队")) barColor.value = "#5FADFF";
-    if (newVal.includes("红队") || newVal.includes("蓝队")) {
-      if (timer.value) clearInterval(timer.value);
-      remain.value = props.total;
-      timer.value = setInterval(() => {
-        if (remain.value > 0) remain.value--;
-      }, 1000);
-    }
-  },
-  {
-    immediate: true,
+const resetTimer = (count) => {
+  if (timer.value) clearInterval(timer.value);
+  remain.value = Math.round(count);
+  if (remain.value > 0) {
+    timer.value = setInterval(() => {
+      if (remain.value === 0) {
+        clearInterval(timer.value);
+        props.onStop();
+      }
+      if (remain.value > 0) remain.value--;
+    }, 1000);
   }
-);
+};
 
 watch(
   () => props.start,
   (newVal) => {
-    if (timer.value) clearInterval(timer.value);
-    if (newVal) {
-      remain.value = props.total;
-      timer.value = setInterval(() => {
-        if (remain.value > 0) remain.value--;
-      }, 1000);
-    }
+    if (newVal) resetTimer(props.total);
+    else if (timer.value) clearInterval(timer.value);
   },
   {
     immediate: true,
@@ -116,16 +111,6 @@ const tipContent = computed(() => {
   return props.start && remain.value === 0 ? "时间到！" : props.tips;
 });
 
-const updateRemain = (value) => {
-  if (timer.value) clearInterval(timer.value);
-  remain.value = Math.round(value);
-  if (remain.value > 0) {
-    timer.value = setInterval(() => {
-      if (remain.value > 0) remain.value--;
-    }, 1000);
-  }
-};
-
 const updateSound = () => {
   sound.value = !sound.value;
   audioManager.setMuted(!sound.value);
@@ -194,13 +179,13 @@ const playSound = (key) => {
 };
 
 onMounted(() => {
-  uni.$on("update-ramain", updateRemain);
+  uni.$on("update-ramain", resetTimer);
   uni.$on("socket-inbox", onReceiveMessage);
   uni.$on("play-sound", playSound);
 });
 
 onBeforeUnmount(() => {
-  uni.$off("update-ramain", updateRemain);
+  uni.$off("update-ramain", resetTimer);
   uni.$off("socket-inbox", onReceiveMessage);
   uni.$off("play-sound", playSound);
   if (timer.value) clearInterval(timer.value);