音频开关以及自动播放

pages/nearbystores/index.vue

@@ -25,17 +25,16 @@
     <view class="tubiao">
       <view class="audio-controls">
         <image
-          v-if="pageConfig.topIcons.leftIcon.hidden"
-          :class="{ playing: isAudioPlaying }"
+          v-if="isAudioPlaying"
           :src="pageConfig.topIcons.leftIcon.img"
           mode=""
-          @click="playAudio"
+          @click="toggleAudio"
         ></image>
         <image
-          :class="{ stopped: !isAudioPlaying }"
+          v-if="!isAudioPlaying"
           :src="pageConfig.topIcons.rightIcon.img"
           mode=""
-          @click="stopAudio"
+          @click="toggleAudio"
         ></image>
       </view>
       <view class="tubiao-item">
@@ -155,7 +154,7 @@ export default {
         endTime: "",
         audioUrl: "",
       },
-      isAudioPlaying: false,
+      isAudioPlaying: true, // 改为默认开启
       audioContext: null,
     };
   },
@@ -296,6 +295,11 @@ export default {
           this.stopMarquee();
           this.startMarquee();
 
+          // 自动播放音频
+          if (this.templeData.audioUrl) {
+            this.playAudio();
+          }
+
           console.log("寺庙数据加载成功");
         } else {
           throw new Error("寺庙数据API响应无效");
@@ -442,6 +446,17 @@ export default {
       }
     },
 
+    /**
+     * 切换音频播放状态
+     */
+    toggleAudio() {
+      if (this.isAudioPlaying) {
+        this.stopAudio();
+      } else {
+        this.playAudio();
+      }
+    },
+
     /**
      * 播放音频
      */
@@ -716,14 +731,6 @@ page {
       transform: scale(0.9);
       opacity: 0.8;
     }
-
-    &.playing {
-      animation: pulse 2s infinite;
-    }
-
-    &.stopped {
-      opacity: 0.6;
-    }
   }
 }