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

src/pages/battle-result.vue

@@ -30,7 +30,6 @@ const checkBowData = () => {
 };
 onMounted(async () => {
   const battleInfo = uni.getStorageSync("last-battle");
-  console.log("----battleInfo", battleInfo);
   data.value = battleInfo;
   const mine = battleInfo.playerStats.find((p) => p.id === user.value.id);
   rank.value =
@@ -144,7 +143,7 @@ onUnmounted(() => {
     </block>
     <view class="battle-e">
       <image src="../static/row-yellow-bg.png" mode="widthFix" />
-      <Avatar v-if="data.mode === 1" :src="user.avatar" :size="40" />
+      <Avatar :src="user.avatar" :size="40" />
       <text v-if="data.battleMode === 1">
         经验 {{ totalPoints > 0 ? "+" + totalPoints : totalPoints }}
       </text>

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,11 +79,7 @@ watch(
   }
 );
 
-onLoad(async (options) => {
+function recoverData(battleInfo) {
-  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;
@@ -169,6 +173,7 @@ onLoad(async (options) => {
       }
     });
     if (battleInfo.status === 2) {
+      startCount.value = true;
       const remain = Date.now() / 1000 - battleInfo.startTime;
       console.log(`当前局已进行${remain}秒`);
       tips.value = battleInfo.halfGame
@@ -186,6 +191,14 @@ onLoad(async (options) => {
     }
   }
 }
+
+onLoad(async (options) => {
+  if (options.battleId) {
+    const battleInfo = uni.getStorageSync("current-battle");
+    if (battleInfo) {
+      recoverData(battleInfo);
+      uni.removeStorageSync("last-awake-time");
+    }
   }
   if (options.roomNumber) {
     roomNumber.value = 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>

src/pages/melee-match.vue

@@ -13,7 +13,8 @@ import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import Matching from "@/components/Matching.vue";
 import TestDistance from "@/components/TestDistance.vue";
-import { matchGameAPI } from "@/apis";
+import { getCurrentGameAPI, matchGameAPI } from "@/apis";
+import { isGameEnded } from "@/util";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -34,6 +35,7 @@ const playersSorted = ref([]);
 const playersScores = ref({});
 const halfTimeTip = ref(false);
 const onComplete = ref(null);
+const isEnded = ref(false);
 
 watch(
   () => [players.value, playersScores.value],
@@ -50,11 +52,7 @@ watch(
   }
 );
 
-onLoad(async (options) => {
+function recoverData(battleInfo) {
-  if (options.battleId) {
-    const battleInfo = uni.getStorageSync("current-battle");
-    console.log("----battleInfo", battleInfo);
-    if (battleInfo) {
   battleId.value = battleInfo.id;
   players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
   players.value.forEach((p) => {
@@ -75,6 +73,7 @@ onLoad(async (options) => {
     start.value = true;
   }
   if (battleInfo.status === 2) {
+    startCount.value = true;
     // 这里的开始时间不是游戏开始时间，而是上半场或者下半场或者中场的开始时间，还要根据状态来判断
     tips.value = battleInfo.halfGame
       ? "下半场：请再射6箭"
@@ -90,6 +89,15 @@ onLoad(async (options) => {
     }, 200);
   }
 }
+
+onLoad(async (options) => {
+  if (options.battleId) {
+    const battleInfo = uni.getStorageSync("current-battle");
+    if (battleInfo) {
+      recoverData(battleInfo);
+      console.log("remove last time");
+      uni.removeStorageSync("last-awake-time");
+    }
   } else {
     gameType.value = options.gameType;
     teamSize.value = options.teamSize;
@@ -148,6 +156,7 @@ async function onReceiveMessage(messages = []) {
       [...msg.groupUserStatus.redTeam, ...msg.groupUserStatus.blueTeam].forEach(
         (player) => {
           playersScores.value[player.id] = player.arrows;
+          if (p.id === user.value.id) scores.value = [...p.arrows];
         }
       );
       startCount.value = false;
@@ -163,11 +172,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);
+      }
+    }
   });
 }
 const onBack = () => {
@@ -177,7 +192,6 @@ const onBack = () => {
     uni.$showHint(3);
   }
 };
-onShow(() => {});
 onMounted(() => {
   uni.setKeepScreenOn({
     keepScreenOn: true,
@@ -193,6 +207,16 @@ onUnmounted(() => {
     matchGameAPI(false, gameType.value, teamSize.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>

src/pages/team-match.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, 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 BattleHeader from "@/components/BattleHeader.vue";
 import Guide from "@/components/Guide.vue";
@@ -14,7 +14,8 @@ import SButton from "@/components/SButton.vue";
 import Matching from "@/components/Matching.vue";
 import RoundEndTip from "@/components/RoundEndTip.vue";
 import TestDistance from "@/components/TestDistance.vue";
-import { matchGameAPI } from "@/apis";
+import { getCurrentGameAPI, matchGameAPI } from "@/apis";
+import { isGameEnded } from "@/util";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
@@ -42,12 +43,9 @@ const bluePoints = ref(0);
 const showRoundTip = ref(false);
 const onComplete = ref(null);
 const isFinalShoot = ref(false);
+const isEnded = ref(false);
 
-onLoad(async (options) => {
+function recoverData(battleInfo) {
-  if (options.battleId) {
-    const battleInfo = uni.getStorageSync("current-battle");
-    console.log("----battleInfo", battleInfo);
-    if (battleInfo) {
   battleId.value = battleInfo.id;
   redTeam.value = battleInfo.redTeam;
   blueTeam.value = battleInfo.blueTeam;
@@ -125,6 +123,12 @@ onLoad(async (options) => {
     }
   }
 }
+
+onLoad(async (options) => {
+  if (options.battleId) {
+    const battleInfo = uni.getStorageSync("current-battle");
+    if (battleInfo) recoverData(battleInfo);
+    uni.removeStorageSync("last-awake-time");
   } else {
     gameType.value = options.gameType;
     teamSize.value = options.teamSize;
@@ -235,11 +239,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);
+      }
+    }
   });
 }
 const onBack = () => {
@@ -264,6 +274,16 @@ onUnmounted(() => {
     matchGameAPI(false, gameType.value, teamSize.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>

src/util.js

@@ -1,4 +1,5 @@
 import websocket from "@/websocket";
+import { isGamingAPI } from "@/apis";
 
 export const formatTimestamp = (timestamp) => {
   const date = new Date(timestamp * 1000);
@@ -264,3 +265,17 @@ export const wxShare = async () => {
     });
   }
 };
+
+export const isGameEnded = async () => {
+  const isGaming = await isGamingAPI();
+  if (!isGaming) {
+    uni.showToast({
+      title: "比赛已结束",
+      icon: "none",
+    });
+    setTimeout(() => {
+      uni.navigateBack();
+    }, 1000);
+  }
+  return !isGaming;
+};

src/websocket.js

@@ -28,8 +28,18 @@ function createWebSocket(token, onMessage) {
     const msg = data.data.updates[0];
     if (!msg) return;
     if (msg.constructor === MESSAGETYPES.BackToGame) {
+      const pages = getCurrentPages();
+      const currentPage = pages[pages.length - 1];
+      if (
+        currentPage.route === "pages/battle-room" ||
+        currentPage.route === "pages/team-match" ||
+        currentPage.route === "pages/melee-match"
+      ) {
+        return;
+      }
       const { battleInfo } = msg;
       uni.setStorageSync("current-battle", battleInfo);
+      console.log("----battleInfo", battleInfo);
       // 约战
       if (battleInfo.config.battleMode === 1) {
         uni.navigateTo({