修改音频加载提示的交互

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>