添加游戏中途挂起，返回同步数据

src/pages/battle-room.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, watch, onMounted, onUnmounted } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { onLoad, onShow, onHide } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 import PlayerSeats from "@/components/PlayerSeats.vue";
 import Guide from "@/components/Guide.vue";
@@ -17,7 +17,14 @@ import ScreenHint from "@/components/ScreenHint.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
 import PlayerScore from "@/components/PlayerScore.vue";
-import { getRoomAPI, destroyRoomAPI, exitRoomAPI, startRoomAPI } from "@/apis";
+import {
+  getRoomAPI,
+  destroyRoomAPI,
+  exitRoomAPI,
+  startRoomAPI,
+  getCurrentGameAPI,
+} from "@/apis";
+import { isGameEnded } from "@/util";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -55,6 +62,7 @@ const halfTimeTip = ref(false);
 const isFinalShoot = ref(false);
 const total = ref(15);
 const battleType = ref(0);
+const isEnded = ref(false);
 
 watch(
   () => [players.value, playersScores.value],
@@ -71,120 +79,125 @@ watch(
   }
 );
 
+function recoverData(battleInfo) {
+  battleId.value = battleInfo.id;
+  battleType.value = battleInfo.config.mode;
+  step.value = 2;
+  if (battleInfo.status === 0) {
+    const readyRemain = Date.now() / 1000 - battleInfo.startTime;
+    console.log(`当前局已进行${readyRemain}秒`);
+    if (readyRemain > 0) {
+      setTimeout(() => {
+        uni.$emit("update-timer", 15 - readyRemain);
+      }, 200);
+    }
+    return;
+  } else {
+    step.value = 3;
+    start.value = true;
+  }
+  if (battleInfo.config.mode === 1) {
+    redTeam.value = battleInfo.redTeam;
+    blueTeam.value = battleInfo.blueTeam;
+    if (battleInfo.status !== 0) {
+      currentRound.value = battleInfo.currentRound;
+      totalRounds.value = battleInfo.maxRound;
+      roundResults.value = battleInfo.roundResults;
+      battleInfo.roundResults.forEach((round) => {
+        if (round.blueTotal && round.redTotal) {
+          if (round.blueTotal === round.redTotal) {
+            bluePoints.value += 1;
+            redPoints.value += 1;
+          } else if (round.blueTotal > round.redTotal) {
+            bluePoints.value += 2;
+          } else {
+            redPoints.value += 2;
+          }
+        }
+      });
+      setTimeout(() => {
+        if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
+          scores.value = battleInfo.roundResults[
+            battleInfo.roundResults.length - 1
+          ].redArrows.filter((item) => !!item.playerId);
+          blueScores.value = battleInfo.roundResults[
+            battleInfo.roundResults.length - 1
+          ].blueArrows.filter((item) => !!item.playerId);
+        }
+      }, 300);
+      if (
+        battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
+        battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
+      ) {
+        roundResults.value.push({
+          redArrows: battleInfo.redTeam[0].shotHistory[
+            battleInfo.currentRound
+          ].filter((item) => !!item.playerId),
+          blueArrows: battleInfo.blueTeam[0].shotHistory[
+            battleInfo.currentRound
+          ].filter((item) => !!item.playerId),
+        });
+      } else if (battleInfo.currentRound < 5) {
+        roundResults.value.push({
+          redArrows: [],
+          blueArrows: [],
+        });
+      }
+    }
+    if (battleInfo.status !== 11) return;
+    if (battleInfo.firePlayerIndex) {
+      currentShooterId.value = battleInfo.firePlayerIndex;
+      if (redTeam.value[0].id === currentShooterId.value) {
+        tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
+      } else {
+        tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
+      }
+    }
+    if (battleInfo.fireTime > 0) {
+      const remain = Date.now() / 1000 - battleInfo.fireTime;
+      console.log(`当前箭已过${remain}秒`);
+      if (remain > 0 && remain < 15) {
+        // 等渲染好再通知
+        setTimeout(() => {
+          uni.$emit("update-ramain", 15 - remain);
+        }, 300);
+      }
+    }
+  } else if (battleInfo.config.mode === 2) {
+    total.value = 90;
+    players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
+    players.value.forEach((p) => {
+      playersScores.value[p.id] = [...p.arrows];
+      if (p.id === user.value.id) {
+        scores.value = [...p.arrows];
+      }
+    });
+    if (battleInfo.status === 2) {
+      startCount.value = true;
+      const remain = Date.now() / 1000 - battleInfo.startTime;
+      console.log(`当前局已进行${remain}秒`);
+      tips.value = battleInfo.halfGame
+        ? "下半场：请再射6箭"
+        : "上半场：请先射6箭";
+      setTimeout(() => {
+        uni.$emit("update-ramain", 90 - remain);
+      }, 300);
+    } else if (battleInfo.status === 9) {
+      startCount.value = false;
+      tips.value = "准备下半场";
+      setTimeout(() => {
+        uni.$emit("update-ramain", 0);
+      }, 300);
+    }
+  }
+}
+
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync("current-battle");
-    console.log("----battleInfo", battleInfo);
     if (battleInfo) {
-      battleId.value = battleInfo.id;
-      battleType.value = battleInfo.config.mode;
-      step.value = 2;
-      if (battleInfo.status === 0) {
-        const readyRemain = Date.now() / 1000 - battleInfo.startTime;
-        console.log(`当前局已进行${readyRemain}秒`);
-        if (readyRemain > 0) {
-          setTimeout(() => {
-            uni.$emit("update-timer", 15 - readyRemain);
-          }, 200);
-        }
-        return;
-      } else {
-        step.value = 3;
-        start.value = true;
-      }
-      if (battleInfo.config.mode === 1) {
-        redTeam.value = battleInfo.redTeam;
-        blueTeam.value = battleInfo.blueTeam;
-        if (battleInfo.status !== 0) {
-          currentRound.value = battleInfo.currentRound;
-          totalRounds.value = battleInfo.maxRound;
-          roundResults.value = battleInfo.roundResults;
-          battleInfo.roundResults.forEach((round) => {
-            if (round.blueTotal && round.redTotal) {
-              if (round.blueTotal === round.redTotal) {
-                bluePoints.value += 1;
-                redPoints.value += 1;
-              } else if (round.blueTotal > round.redTotal) {
-                bluePoints.value += 2;
-              } else {
-                redPoints.value += 2;
-              }
-            }
-          });
-          setTimeout(() => {
-            if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
-              scores.value = battleInfo.roundResults[
-                battleInfo.roundResults.length - 1
-              ].redArrows.filter((item) => !!item.playerId);
-              blueScores.value = battleInfo.roundResults[
-                battleInfo.roundResults.length - 1
-              ].blueArrows.filter((item) => !!item.playerId);
-            }
-          }, 300);
-          if (
-            battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
-            battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
-          ) {
-            roundResults.value.push({
-              redArrows: battleInfo.redTeam[0].shotHistory[
-                battleInfo.currentRound
-              ].filter((item) => !!item.playerId),
-              blueArrows: battleInfo.blueTeam[0].shotHistory[
-                battleInfo.currentRound
-              ].filter((item) => !!item.playerId),
-            });
-          } else if (battleInfo.currentRound < 5) {
-            roundResults.value.push({
-              redArrows: [],
-              blueArrows: [],
-            });
-          }
-        }
-        if (battleInfo.status !== 11) return;
-        if (battleInfo.firePlayerIndex) {
-          currentShooterId.value = battleInfo.firePlayerIndex;
-          if (redTeam.value[0].id === currentShooterId.value) {
-            tips.value = `请红队射箭-第${roundsName[currentRound.value]}轮`;
-          } else {
-            tips.value = `请蓝队射箭-第${roundsName[currentRound.value]}轮`;
-          }
-        }
-        if (battleInfo.fireTime > 0) {
-          const remain = Date.now() / 1000 - battleInfo.fireTime;
-          console.log(`当前箭已过${remain}秒`);
-          if (remain > 0 && remain < 15) {
-            // 等渲染好再通知
-            setTimeout(() => {
-              uni.$emit("update-ramain", 15 - remain);
-            }, 300);
-          }
-        }
-      } else if (battleInfo.config.mode === 2) {
-        total.value = 90;
-        players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
-        players.value.forEach((p) => {
-          playersScores.value[p.id] = [...p.arrows];
-          if (p.id === user.value.id) {
-            scores.value = [...p.arrows];
-          }
-        });
-        if (battleInfo.status === 2) {
-          const remain = Date.now() / 1000 - battleInfo.startTime;
-          console.log(`当前局已进行${remain}秒`);
-          tips.value = battleInfo.halfGame
-            ? "下半场：请再射6箭"
-            : "上半场：请先射6箭";
-          setTimeout(() => {
-            uni.$emit("update-ramain", 90 - remain);
-          }, 300);
-        } else if (battleInfo.status === 9) {
-          startCount.value = false;
-          tips.value = "准备下半场";
-          setTimeout(() => {
-            uni.$emit("update-ramain", 0);
-          }, 300);
-        }
-      }
+      recoverData(battleInfo);
+      uni.removeStorageSync("last-awake-time");
     }
   }
   if (options.roomNumber) {
@@ -439,6 +452,7 @@ async function onReceiveMessage(messages = []) {
           ...msg.groupUserStatus.blueTeam,
         ].forEach((player) => {
           playersScores.value[player.id] = player.arrows;
+          if (p.id === user.value.id) scores.value = [...p.arrows];
         });
         startCount.value = false;
         halfTimeTip.value = true;
@@ -453,11 +467,17 @@ async function onReceiveMessage(messages = []) {
           });
           uni.navigateBack();
         } else {
+          isEnded.value = true;
           uni.redirectTo({
             url: `/pages/battle-result?battleId=${msg.id}`,
           });
         }
       }
+      if (msg.constructor === MESSAGETYPES.BackToGame) {
+        if (msg.battleInfo && uni.getStorageSync("last-awake-time")) {
+          recoverData(msg.battleInfo);
+        }
+      }
     }
   });
 }
@@ -503,6 +523,16 @@ onUnmounted(() => {
     exitRoomAPI(roomNumber.value);
   }
 });
+onShow(async () => {
+  if (battleId.value) {
+    if (!isEnded.value && (await isGameEnded())) return;
+    const lastAwakeTime = uni.getStorageSync("last-awake-time");
+    if (lastAwakeTime) await getCurrentGameAPI();
+  }
+});
+onHide(() => {
+  uni.setStorageSync("last-awake-time", Date.now());
+});
 </script>
 
 <template>