修改音频加载提示的交互

src/components/Container.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from "vue";
+import { ref, computed, onMounted, onBeforeUnmount } from "vue";
 import { onShow } from "@dcloudio/uni-app";
 import AppBackground from "@/components/AppBackground.vue";
 import Header from "@/components/Header.vue";
@@ -7,6 +7,7 @@ import ScreenHint from "@/components/ScreenHint.vue";
 import BackToGame from "@/components/BackToGame.vue";
 import { getCurrentGameAPI, laserAimAPI } from "@/apis";
 import { debounce } from "@/util";
+import AudioManager from "@/audioManager";
 const props = defineProps({
   title: {
     type: String,
@@ -45,6 +46,9 @@ const showHint = ref(false);
 const hintType = ref(0);
 const capsuleHeight = ref(0);
 const isLoading = ref(false);
+const audioInitProgress = ref(1);
+const audioProgress = ref(0);
+const audioTimer = ref(null);
 
 const showGlobalHint = (type) => {
   hintType.value = type;
@@ -55,14 +59,48 @@ const hideGlobalHint = () => {
   showHint.value = false;
 };
 
+const checkAudioProgress = async () => {
+  return new Promise((resolve, reject) => {
+    try {
+      audioInitProgress.value = AudioManager.getLoadProgress();
+      if (audioInitProgress.value === 1) return resolve();
+      audioTimer.value = setInterval(() => {
+        const result = AudioManager.getLoadProgress();
+        if (result > audioProgress.value) {
+          audioProgress.value = result;
+        }
+        if (audioProgress.value === 1) {
+          setTimeout(() => {
+            audioInitProgress.value = 1;
+          }, 200);
+          clearInterval(audioTimer.value);
+          resolve();
+        }
+      }, 200);
+    } catch (err) {
+      reject(err);
+    }
+  });
+};
+
+const audioFinalProgress = computed(() => {
+  const left = 1 - audioInitProgress.value;
+  return (audioProgress.value - audioInitProgress.value) / left;
+});
+
 onMounted(() => {
   const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
   capsuleHeight.value = menuBtnInfo.top - 9;
 });
 
+onBeforeUnmount(() => {
+  if (audioTimer.value) clearInterval(audioTimer.value);
+});
+
 onShow(() => {
   uni.$showHint = showGlobalHint;
   uni.$hideHint = hideGlobalHint;
+  uni.$checkAudio = checkAudioProgress;
   showHint.value = false;
 });
 
@@ -177,13 +215,27 @@ const goCalibration = async () => {
         </view>
       </view>
     </ScreenHint>
+    <view v-if="audioInitProgress < 1" class="audio-progress">
+      <image
+        src="https://static.shelingxingqiu.com/attachment/2025-11-26/deihtj15xjwcz3c1tx.png"
+        mode="widthFix"
+      />
+      <view>
+        <view :style="{ width: `${audioFinalProgress * 100}%` }">
+          <image
+            src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
+            mode="widthFix"
+          />
+        </view>
+        <text>资源加载中...</text>
+      </view>
+    </view>
   </view>
 </template>
 
 <style scoped>
 .content {
   width: 100vw;
-  height: 100vh;
   overflow-x: hidden;
   display: flex;
   flex-direction: column;
@@ -228,4 +280,52 @@ const goCalibration = async () => {
   color: #666;
   opacity: 0.6;
 }
+.audio-progress {
+  z-index: 999;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: rgb(0 0 0 / 0.6);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.audio-progress > image:nth-child(1) {
+  width: 140rpx;
+  height: 150rpx;
+  margin-bottom: 20rpx;
+}
+.audio-progress > view:nth-child(2) {
+  width: 380rpx;
+  height: 6rpx;
+  background: #000000;
+  border-radius: 4rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: flex-start;
+}
+.audio-progress > view:nth-child(2) > view {
+  background: #ffe431;
+  min-height: 6rpx;
+  border-radius: 4rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  transition: width 0.5s ease;
+}
+.audio-progress > view:nth-child(2) > view > image {
+  width: 46rpx;
+  height: 26rpx;
+}
+.audio-progress > view:nth-child(2) > text {
+  width: 100%;
+  font-size: 22rpx;
+  color: #a2a2a2;
+  text-align: center;
+  margin-top: 10rpx;
+}
 </style>

src/pages.json

@@ -1,8 +1,5 @@
 {
   "pages": [
-    {
-      "path": "pages/load-resources"
-    },
     {
       "path": "pages/index"
     },

src/pages/index.vue

@@ -26,7 +26,7 @@ const showModal = ref(false);
 const showGuide = ref(false);
 const calibration = ref(false);
 
-const toPage = (path) => {
+const toPage = async (path) => {
   if (!user.value.id) {
     showModal.value = true;
     return;
@@ -53,6 +53,9 @@ const toPage = (path) => {
       });
     }
   }
+  if (path === "/pages/first-try") {
+    await uni.$checkAudio();
+  }
   uni.navigateTo({
     url: path,
   });

src/pages/load-resources.vue

@@ -1,107 +0,0 @@
-<script setup>
-import { ref, onMounted, onBeforeUnmount } from "vue";
-import AudioManager from "@/audioManager";
-
-const timer = ref(null);
-const progress = ref(0);
-
-onMounted(() => {
-  timer.value = setInterval(() => {
-    const result = AudioManager.getLoadProgress();
-    if (result > progress.value) {
-      progress.value = result;
-    }
-    if (progress.value === 1) {
-      clearInterval(timer.value);
-      uni.redirectTo({
-        url: "/pages/index",
-      });
-    }
-  }, 200);
-});
-
-onBeforeUnmount(() => {
-  if (timer.value) clearInterval(timer.value);
-});
-</script>
-
-<template>
-  <view class="container">
-    <image
-      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91bppqmq1mwf3f.png"
-      mode="aspectFill"
-    />
-    <image
-      src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a4hjot4ulumg.png"
-      mode="widthFix"
-    />
-    <view>
-      <view :style="{ width: `${progress * 100}%` }">
-        <image
-          src="https://static.shelingxingqiu.com/attachment/2025-11-24/degu91a7si77sg9jqv.png"
-          mode="widthFix"
-        />
-      </view>
-      <text>资源加载中...</text>
-    </view>
-  </view>
-</template>
-
-<style scoped lang="scss">
-.container {
-  width: 100vw;
-  height: 100vh;
-  position: relative;
-  display: flex;
-}
-.container > image:first-child {
-  width: 100vw;
-  height: 100vh;
-  position: fixed;
-  top: 0;
-  left: 0;
-}
-.container > image:nth-child(2) {
-  width: 300rpx;
-  height: 420rpx;
-  position: fixed;
-  top: 45%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.container > view:nth-child(3) {
-  width: 380rpx;
-  height: 6rpx;
-  background: #000000;
-  border-radius: 4rpx;
-  position: fixed;
-  top: 80%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: flex-start;
-}
-.container > view:nth-child(3) > view {
-  background: #ffe431;
-  min-height: 6rpx;
-  border-radius: 4rpx;
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  transition: width 0.5s ease;
-}
-.container > view:nth-child(3) > view > image {
-  width: 46rpx;
-  height: 26rpx;
-}
-.container > view:nth-child(3) > text {
-  width: 100%;
-  opacity: 0.5;
-  font-size: 22rpx;
-  color: #ffffff;
-  text-align: center;
-  margin-top: 20rpx;
-}
-</style>

src/pages/practise.vue

@@ -12,13 +12,15 @@ const store = useStore();
 const { user } = storeToRefs(store);
 const data = ref({});
 
-const toPractiseOne = () => {
+const toPractiseOne = async () => {
+  await uni.$checkAudio();
   uni.navigateTo({
     url: "/pages/practise-one",
   });
 };
 
-const toPractiseTwo = () => {
+const toPractiseTwo = async () => {
+  await uni.$checkAudio();
   uni.navigateTo({
     url: "/pages/practise-two",
   });

src/pages/ranking.vue

@@ -65,6 +65,7 @@ const toMatchPage = async (gameType, teamSize) => {
     uni.$showHint(1);
     return;
   }
+  await uni.$checkAudio();
   uni.navigateTo({
     url: `/pages/match-page?gameType=${gameType}&teamSize=${teamSize}`,
   });