接入H5讲解后端数据闭环

src/pages/explain/list.vue

@@ -26,9 +26,10 @@
       />
 
       <AudioPlayer
+        ref="audioPlayerRef"
         :visible="showAudioPlayer"
         :audio="currentAudio"
-        :auto-play="true"
+        :auto-play="false"
         avoid-bottom-nav
         @update:visible="handleAudioVisibleChange"
         @play="handleAudioPlay"
@@ -66,8 +67,14 @@ const explainError = ref('')
 const showAudioPlayer = ref(false)
 const isAudioPlaying = ref(false)
 const currentAudio = ref<AudioItem | null>(null)
+const audioPlayerRef = ref<AudioPlayerExpose | null>(null)
 let explainLoadPromise: Promise<void> | null = null
 
+interface AudioPlayerExpose {
+  play: (audio: AudioItem) => void
+  pause: () => void
+}
+
 const loadExplainExhibits = async () => {
   if (explainExhibits.value.length) return
   if (explainLoadPromise) return explainLoadPromise
@@ -129,14 +136,23 @@ const handleExplainHallClick = (hallId: string) => {
 
 const handleAudioClick = async (exhibit: Exhibit) => {
   if (exhibit.audioUrl) {
-    currentAudio.value = {
+    const audio: AudioItem = {
       id: `media-${exhibit.id}`,
       name: exhibit.title,
       audioUrl: exhibit.audioUrl,
       image: exhibit.coverImage,
       duration: exhibit.audioDuration
     }
+
+    const isSameAudio = currentAudio.value?.id === audio.id
+    if (showAudioPlayer.value && isSameAudio && isAudioPlaying.value) {
+      audioPlayerRef.value?.pause()
+      return
+    }
+
+    currentAudio.value = audio
     showAudioPlayer.value = true
+    audioPlayerRef.value?.play(audio)
     return
   }
 
@@ -158,6 +174,10 @@ const handleAudioClick = async (exhibit: Exhibit) => {
     duration: selection.media.duration
   }
   showAudioPlayer.value = true
+  uni.showToast({
+    title: '音频已准备好，请点击底部播放按钮',
+    icon: 'none'
+  })
 }
 
 const clearAudioState = () => {