优化返回游戏的数据更新

src/apis.js

@@ -296,6 +296,7 @@ export const isGamingAPI = async () => {
 };
 
 export const getCurrentGameAPI = async () => {
+  uni.$emit("update-header-loading", true);
   const result = await request("GET", "/user/join/battle");
   return result.currentGame || {};
 };

src/components/Header.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, onMounted, onUnmounted } from "vue";
 const isIos = ref(true);
 
 const props = defineProps({
@@ -18,9 +18,28 @@ const onClick = () => {
   else uni.navigateBack();
 };
 
+const loading = ref(false);
+const showLoader = ref(false);
+const updateLoading = (value) => {
+  loading.value = value;
+};
+
 onMounted(() => {
   const deviceInfo = uni.getDeviceInfo();
   isIos.value = deviceInfo.osName === "ios";
+  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"
+  ) {
+    showLoader.value = true;
+  }
+  uni.$on("update-header-loading", updateLoading);
+});
+onUnmounted(() => {
+  uni.$off("update-header-loading", updateLoading);
 });
 </script>
 
@@ -58,6 +77,12 @@ onMounted(() => {
         </view>
       </block>
     </view>
+    <image
+      :style="{ opacity: showLoader && loading ? 1 : 0 }"
+      src="../static/btn-loading.png"
+      mode="widthFix"
+      class="loading"
+    />
   </view>
 </template>
 
@@ -100,4 +125,12 @@ onMounted(() => {
   font-size: 16px;
   color: #fff;
 }
+.loading {
+  width: 20px;
+  height: 20px;
+  margin-left: 10px;
+  transition: all 0.3s ease;
+  background-blend-mode: darken;
+  animation: rotate 2s linear infinite;
+}
 </style>

src/components/ShootProgress.vue

@@ -117,7 +117,7 @@ watch(
 
 const updateRemain = (value) => {
   if (timer.value) clearInterval(timer.value);
-  remain.value = Math.floor(value);
+  remain.value = Math.round(value);
   if (remain.value > 0) {
     timer.value = setInterval(() => {
       if (remain.value > 0) remain.value--;

src/components/Timer.vue

@@ -70,7 +70,7 @@ onUnmounted(() => {
 .container > view:last-child > text:nth-child(2) {
   color: #fed847;
   font-size: 16px;
-  width: 16px;
+  width: 18px;
   text-align: center;
 }
 </style>

src/pages/battle-result.vue

@@ -39,7 +39,7 @@ onMounted(async () => {
     ifWin.value = battleInfo.mode === 1 && mine.team === battleInfo.winner;
   }
   timer.value = setTimeout(() => {
-    const lastLvl = uni.getStorageSync("lastest-lvl");
+    const lastLvl = uni.getStorageSync("latest-lvl");
     if (parseInt(lastLvl) > user.value.lvl) {
       latestLvl.value = parseInt(lastLvl);
     }

src/pages/battle-room.vue

@@ -80,6 +80,7 @@ watch(
 );
 
 function recoverData(battleInfo) {
+  uni.removeStorageSync("last-awake-time");
   battleId.value = battleInfo.id;
   battleType.value = battleInfo.config.mode;
   step.value = 2;
@@ -144,7 +145,8 @@ function recoverData(battleInfo) {
         });
       }
     }
-    if (battleInfo.status !== 11) return;
+    // 这个状态不准
+    // if (battleInfo.status !== 11) return;
     if (battleInfo.firePlayerIndex) {
       currentShooterId.value = battleInfo.firePlayerIndex;
       if (redTeam.value[0].id === currentShooterId.value) {
@@ -193,10 +195,8 @@ function recoverData(battleInfo) {
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync("current-battle");
-    if (battleInfo) {
+    if (battleInfo) recoverData(battleInfo);
-      recoverData(battleInfo);
+    setTimeout(getCurrentGameAPI, 2000);
-      uni.removeStorageSync("last-awake-time");
-    }
   }
   if (options.roomNumber) {
     roomNumber.value = options.roomNumber;
@@ -383,6 +383,8 @@ async function onReceiveMessage(messages = []) {
       }
       if (msg.constructor === MESSAGETYPES.ShootResult) {
         if (battleType.value === 1) {
+          // 会有蓝队射箭时间，红队射箭也有结果返回的情况
+          if (currentShooterId.value !== msg.userId) return;
           const isRed = redTeam.value.find((item) => item.id === msg.userId);
           if (isRed) scores.value.push(msg.target);
           else blueScores.value.push(msg.target);
@@ -472,9 +474,8 @@ async function onReceiveMessage(messages = []) {
         }
       }
       if (msg.constructor === MESSAGETYPES.BackToGame) {
-        if (msg.battleInfo && uni.getStorageSync("last-awake-time")) {
+        uni.$emit("update-header-loading", false);
-          recoverData(msg.battleInfo);
+        if (msg.battleInfo) recoverData(msg.battleInfo);
-        }
       }
     }
   });
@@ -521,14 +522,24 @@ onUnmounted(() => {
     exitRoomAPI(roomNumber.value);
   }
 });
+const refreshTimer = ref(null);
 onShow(async () => {
   if (battleId.value) {
     if (!isEnded.value && (await isGameEnded())) return;
+    getCurrentGameAPI();
+    const refreshData = () => {
       const lastAwakeTime = uni.getStorageSync("last-awake-time");
-    if (lastAwakeTime) await getCurrentGameAPI();
+      if (lastAwakeTime) {
+        getCurrentGameAPI();
+      } else {
+        clearInterval(refreshTimer.value);
+      }
+    };
+    refreshTimer.value = setInterval(refreshData, 2000);
   }
 });
 onHide(() => {
+  if (refreshTimer.value) clearInterval(refreshTimer.value);
   uni.setStorageSync("last-awake-time", Date.now());
 });
 </script>
@@ -608,7 +619,7 @@ onHide(() => {
       <ShootProgress
         :tips="tips"
         :seq="seq"
-        :start="start && startCount"
+        :start="players.length > 0 && start && startCount"
         :total="total"
         :currentRound="currentRound"
         :battleId="battleId"

src/pages/melee-match.vue

@@ -53,6 +53,7 @@ watch(
 );
 
 function recoverData(battleInfo) {
+  uni.removeStorageSync("last-awake-time");
   battleId.value = battleInfo.id;
   players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
   players.value.forEach((p) => {
@@ -91,10 +92,7 @@ function recoverData(battleInfo) {
 onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync("current-battle");
-    if (battleInfo) {
+    if (battleInfo) recoverData(battleInfo);
-      recoverData(battleInfo);
-      uni.removeStorageSync("last-awake-time");
-    }
   } else {
     gameType.value = options.gameType;
     teamSize.value = options.teamSize;
@@ -177,9 +175,8 @@ async function onReceiveMessage(messages = []) {
       }
     }
     if (msg.constructor === MESSAGETYPES.BackToGame) {
-      if (msg.battleInfo && uni.getStorageSync("last-awake-time")) {
+      uni.$emit("update-header-loading", false);
-        recoverData(msg.battleInfo);
+      if (msg.battleInfo) recoverData(msg.battleInfo);
-      }
     }
   });
 }
@@ -205,14 +202,24 @@ onUnmounted(() => {
     matchGameAPI(false, gameType.value, teamSize.value);
   }
 });
+const refreshTimer = ref(null);
 onShow(async () => {
   if (battleId.value) {
     if (!isEnded.value && (await isGameEnded())) return;
+    getCurrentGameAPI();
+    const refreshData = () => {
       const lastAwakeTime = uni.getStorageSync("last-awake-time");
-    if (lastAwakeTime) getCurrentGameAPI();
+      if (lastAwakeTime) {
+        getCurrentGameAPI();
+      } else {
+        clearInterval(refreshTimer.value);
+      }
+    };
+    refreshTimer.value = setInterval(refreshData, 2000);
   }
 });
 onHide(() => {
+  if (refreshTimer.value) clearInterval(refreshTimer.value);
   uni.setStorageSync("last-awake-time", Date.now());
 });
 </script>

src/pages/team-match.vue

@@ -46,6 +46,7 @@ const isFinalShoot = ref(false);
 const isEnded = ref(false);
 
 function recoverData(battleInfo) {
+  uni.removeStorageSync("last-awake-time");
   battleId.value = battleInfo.id;
   redTeam.value = battleInfo.redTeam;
   blueTeam.value = battleInfo.blueTeam;
@@ -103,7 +104,7 @@ function recoverData(battleInfo) {
       });
     }
   }
-  if (battleInfo.status !== 11) return;
+  // if (battleInfo.status !== 11) return;
   if (battleInfo.firePlayerIndex) {
     currentShooterId.value = battleInfo.firePlayerIndex;
     if (redTeam.value[0].id === currentShooterId.value) {
@@ -128,7 +129,7 @@ onLoad(async (options) => {
   if (options.battleId) {
     const battleInfo = uni.getStorageSync("current-battle");
     if (battleInfo) recoverData(battleInfo);
-    uni.removeStorageSync("last-awake-time");
+    setTimeout(getCurrentGameAPI, 2000);
   } else {
     gameType.value = options.gameType;
     teamSize.value = options.teamSize;
@@ -185,6 +186,7 @@ async function onReceiveMessage(messages = []) {
       }
     }
     if (msg.constructor === MESSAGETYPES.ShootResult) {
+      if (currentShooterId.value !== msg.userId) return;
       const isRed = redTeam.value.find((item) => item.id === msg.userId);
       if (isRed) scores.value.push(msg.target);
       else blueScores.value.push(msg.target);
@@ -246,9 +248,8 @@ async function onReceiveMessage(messages = []) {
       }
     }
     if (msg.constructor === MESSAGETYPES.BackToGame) {
-      if (msg.battleInfo && uni.getStorageSync("last-awake-time")) {
+      uni.$emit("update-header-loading", false);
-        recoverData(msg.battleInfo);
+      if (msg.battleInfo) recoverData(msg.battleInfo);
-      }
     }
   });
 }
@@ -274,14 +275,24 @@ onUnmounted(() => {
     matchGameAPI(false, gameType.value, teamSize.value);
   }
 });
+const refreshTimer = ref(null);
 onShow(async () => {
   if (battleId.value) {
     if (!isEnded.value && (await isGameEnded())) return;
+    getCurrentGameAPI();
+    const refreshData = () => {
       const lastAwakeTime = uni.getStorageSync("last-awake-time");
-    if (lastAwakeTime) await getCurrentGameAPI();
+      if (lastAwakeTime) {
+        getCurrentGameAPI();
+      } else {
+        clearInterval(refreshTimer.value);
+      }
+    };
+    refreshTimer.value = setInterval(refreshData, 2000);
   }
 });
 onHide(() => {
+  if (refreshTimer.value) clearInterval(refreshTimer.value);
   uni.setStorageSync("last-awake-time", Date.now());
 });
 </script>