v1.3.5

1、bgm、鼓声、视频的播放统一通过pinia进行管理
2、优化bgm播放、点击鼓声、暂停bgm、进入webview及视频播放后退出时的bgm控制

components/ChongwenScene.vue

@@ -2,8 +2,11 @@
 import { ref, onMounted, computed } from 'vue'
 import VideoPlayButton from './VideoPlayButton.vue'
 import VideoPlayerModal from './VideoPlayerModal.vue'
+import { usePlayerStore } from '../store/player'
 import { recordInteraction } from '../api/api.js'
 
+const playerStore = usePlayerStore()
+
 // 组件属性
 const props = defineProps({
   // 是否为活动状态
@@ -55,9 +58,6 @@ const parallaxOffset = computed(() => {
   return props.scrollPosition * 0.1
 })
 
-// 保存BGM状态
-const wasBgPlayingBeforeWebview = ref(false)
-
 // 打开webview页面
 const openWebview = () => {
   // 标记互动点击已完成
@@ -77,20 +77,11 @@ const openWebview = () => {
   // 检查是否满足收集福印的条件
   checkSealCollection()
   
-  // 保存BGM状态
-  wasBgPlayingBeforeWebview.value = props.isMusicPlaying
-  
   // 通知父组件webview即将打开
   emit('webview-open')
   
-  // 暂停全局BGM播放
+  // 暂停全局BGM播放并保存状态
-  if (props.isMusicPlaying) {
   emit('pause-bgm', 'webview')
-  }
-  
-  // 标记即将打开webview
-  uni.setStorageSync('isOpeningWebview', true)
-  uni.setStorageSync('wasMusicPlayingBeforeWebview', props.isMusicPlaying)
   
   uni.navigateTo({
     url: '/pages/webview/webview',
@@ -105,7 +96,7 @@ const openWebview = () => {
         duration: 1500
       })
       // 如果打开失败，恢复BGM状态
-      if (wasBgPlayingBeforeWebview.value) {
+      if (props.isMusicPlaying) {
         emit('resume-bgm')
       }
       // 通知父组件webview打开失败

components/QianmenScene.vue

@@ -106,8 +106,9 @@ watch(() => props.isVideoPlaying, (newIsVideoPlaying) => {
   if (newIsVideoPlaying && isDrumPlaying.value && drumPlayer.value) {
     drumPlayer.value.stop()
     isDrumPlaying.value = false
-    // 恢复BGM播放状态
+    // 不恢复BGM播放状态，由视频关闭时处理
-    emit('resume-bgm')
+    // 因为这个暂停是播放鼓声时暂停的，而不是用户暂停的
+    console.log('视频开始播放，停止鼓声，但不恢复BGM播放')
   }
 })
 
@@ -262,11 +263,10 @@ const openVideoPlayer = () => {
     isDrumPlaying.value = false
     drumPlayer.value.destroy()
     drumPlayer.value = null
-    // 恢复BGM播放状态
+    // 不恢复BGM播放状态，由视频关闭时处理
-    emit('resume-bgm')
   }
   showVideoPlayer.value = true
-  emit('video-open')
+  emit('video-open', true) // 传递isQianmenVideo=true参数
 }
 
 // 关闭视频播放器

components/SinglePageContainer.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, onUnmounted, computed, watch, nextTick } from 'vue'
 import { useSceneStore } from '../store/scene'
 import { useCollectionStore } from '../store/collection'
+import { usePlayerStore } from '../store/player'
 import { recordPageVisit, saveUserInfo, generateCoupletPoster } from '../api/api.js'
 import LongImageViewer from './LongImageViewer.vue'
 import MediaPlayer from './MediaPlayer.vue'
@@ -18,6 +19,7 @@ import LoadingComponent from './LoadingComponent.vue'
 
 const sceneStore = useSceneStore()
 const collectionStore = useCollectionStore()
+const playerStore = usePlayerStore()
 
 // 当前活动场景索引
 const activeSceneIndex = ref(0)
@@ -57,8 +59,6 @@ const isAutoScrolling = ref(false)
 const showLoading = ref(true)
 // 是否已完成图片加载
 const isImagesLoaded = ref(false)
-// 音乐播放状态
-const isMusicPlaying = ref(false)
 // 音乐播放器实例
 const audioPlayer = ref(null)
 
@@ -117,13 +117,6 @@ const scenes = ref([
 const sceneInteractiveStates = ref(scenes.value.map(() => false))
 // 福印收集状态
 const sealCollectedStates = ref(scenes.value.map(() => false))
-// 视频播放状态
-const isVideoPlaying = ref(false)
-
-// webview打开状态
-const isWebviewOpening = ref(false)
-// 鼓声播放状态
-const isDrumPlaying = ref(false)
 
 // 计算当前收集的物品
 const collectedItems = computed(() => {
@@ -149,7 +142,7 @@ const collectionProgress = computed(() => {
 
 // 计算是否禁用BGM控制按钮
 const isBgmButtonDisabled = computed(() => {
-  return isVideoPlaying.value || isDrumPlaying.value
+  return playerStore.isBgmButtonDisabled
 })
 
 // 计算福印收集对象（传递给 EndPage）
@@ -247,7 +240,7 @@ const handleStart = () => {
   console.log('点击开始按钮，hasScrolled:', hasScrolled.value)
   
   // 检查并播放背景音乐
-  if (!isMusicPlaying.value) {
+  if (!playerStore.isMusicPlaying) {
     console.log('背景音乐未播放，开始播放')
     toggleMusic()
   }
@@ -344,10 +337,10 @@ const toggleMusic = () => {
     initMusicPlayer()
   }
   
-  if (isMusicPlaying.value) {
+  if (playerStore.isMusicPlaying) {
     // 暂停音乐
     audioPlayer.value.pause()
-    isMusicPlaying.value = false
+    playerStore.setMusicPlaying(false)
     console.log('音乐已暂停')
   } else {
     // 播放音乐
@@ -357,7 +350,7 @@ const toggleMusic = () => {
       if (result && typeof result.then === 'function') {
         // Web平台：使用Promise处理
         result.then(() => {
-          isMusicPlaying.value = true
+          playerStore.setMusicPlaying(true)
           console.log('音乐已开始播放')
         }).catch(error => {
           console.error('音乐播放失败（需要用户交互）:', error)
@@ -365,7 +358,7 @@ const toggleMusic = () => {
         })
       } else {
         // 其他平台：同步处理
-        isMusicPlaying.value = true
+        playerStore.setMusicPlaying(true)
         console.log('音乐已开始播放')
       }
     } catch (error) {
@@ -614,14 +607,7 @@ const handleQianmenHeightChanged = (height) => {
   console.log('当前CSS变量:', getComputedStyle(document.documentElement).getPropertyValue('--scene-height'))
 }
 
-// 跟踪视频打开前的BGM状态
-const wasMusicPlayingBeforeVideo = ref(false)
 
-// 跟踪鼓声开始前的BGM状态
-const wasMusicPlayingBeforeDrum = ref(false)
-
-// 跟踪webview打开前的BGM状态
-const wasMusicPlayingBeforeWebview = ref(false)
 
 // 页面显示时的生命周期钩子
 import { onShow } from '@dcloudio/uni-app'
@@ -629,77 +615,36 @@ import { onShow } from '@dcloudio/uni-app'
 // 监听页面显示事件
 onShow(() => {
   // 当从webview返回时，恢复BGM状态
-  const isOpeningWebview = uni.getStorageSync('isOpeningWebview')
-  const wasMusicPlayingBeforeWebview = uni.getStorageSync('wasMusicPlayingBeforeWebview')
-  const wasMusicPlayingBeforeDrum = uni.getStorageSync('wasMusicPlayingBeforeDrum')
-  const isVideoPlaying = uni.getStorageSync('isVideoPlaying')
-  const wasMusicPlayingBeforeVideo = uni.getStorageSync('wasMusicPlayingBeforeVideo')
-  
   console.log('onShow - 页面显示:', {
-    isOpeningWebview,
+    isOpeningWebview: playerStore.isWebviewOpening,
-    wasMusicPlayingBeforeWebview,
+    wasMusicPlayingBeforeWebview: playerStore.wasMusicPlayingBeforeWebview,
-    wasMusicPlayingBeforeDrum,
+    wasMusicPlayingBeforeDrum: playerStore.wasMusicPlayingBeforeDrum,
-    isVideoPlaying,
+    isVideoPlaying: playerStore.isVideoPlaying,
-    wasMusicPlayingBeforeVideo,
+    wasMusicPlayingBeforeVideo: playerStore.wasMusicPlayingBeforeVideo,
-    currentIsMusicPlaying: isMusicPlaying.value,
+    currentIsMusicPlaying: playerStore.isMusicPlaying,
     audioPlayerExists: !!audioPlayer.value
   })
   
-  if (isOpeningWebview) {
+  if (playerStore.isWebviewOpening) {
-    // 检查是否是从鼓声播放时进入webview的
-    // uni.getStorageSync 返回空字符串表示键不存在，需要检查是否有值
-    const hasDrumFlag = wasMusicPlayingBeforeDrum !== '' && wasMusicPlayingBeforeDrum !== undefined && wasMusicPlayingBeforeDrum !== null
-    console.log('检查鼓声标记:', { hasDrumFlag, wasMusicPlayingBeforeDrum })
-    
-    if (hasDrumFlag) {
-      console.log('从鼓声播放时进入webview，恢复BGM状态:', wasMusicPlayingBeforeDrum)
-      // 如果之前BGM是播放状态，恢复播放
-      const shouldPlay = wasMusicPlayingBeforeDrum === 'true' || wasMusicPlayingBeforeDrum === true || wasMusicPlayingBeforeDrum === 1 || wasMusicPlayingBeforeDrum === '1'
-      if (shouldPlay && !isMusicPlaying.value) {
-        // 如果audioPlayer不存在，初始化它
-        if (!audioPlayer.value) {
-          initMusicPlayer()
-        }
-        if (audioPlayer.value) {
-          try {
-            console.log('尝试恢复BGM播放（鼓声场景）')
-            const result = audioPlayer.value.play()
-            // 检查play()方法是否返回Promise（Web平台）
-            if (result && typeof result.then === 'function') {
-              // Web平台：使用Promise处理
-              result.then(() => {
-                isMusicPlaying.value = true
-                console.log('全局BGM已恢复播放（从webview返回，之前鼓声播放）')
-              }).catch(error => {
-                console.error('恢复BGM播放失败:', error)
-                // 即使播放失败，也要标记为播放状态，确保UI正确
-                isMusicPlaying.value = true
-              })
-            } else {
-              // 非Web平台：直接标记为播放状态
-              isMusicPlaying.value = true
-              console.log('全局BGM已恢复播放（从webview返回，之前鼓声播放）')
-            }
-          } catch (error) {
-            console.error('恢复BGM播放失败:', error)
-            // 即使播放失败，也要标记为播放状态，确保UI正确
-            isMusicPlaying.value = true
-          }
-        }
-      }
-      // 清除标记
-      uni.removeStorageSync('wasMusicPlayingBeforeDrum')
-    } else {
     // 正常的webview返回，根据之前的BGM状态恢复
-      // 确保wasMusicPlayingBeforeWebview是布尔值
-      const wasPlaying = wasMusicPlayingBeforeWebview === 'true' || wasMusicPlayingBeforeWebview === true || wasMusicPlayingBeforeWebview === 1 || wasMusicPlayingBeforeWebview === '1'
     console.log('正常webview返回，恢复BGM状态:', {
-        wasMusicPlayingBeforeWebview,
+      wasMusicPlayingBeforeWebview: playerStore.wasMusicPlayingBeforeWebview,
-        wasPlaying,
+      wasMusicPlayingBeforeDrum: playerStore.wasMusicPlayingBeforeDrum,
-        currentIsMusicPlaying: isMusicPlaying.value,
+      currentIsMusicPlaying: playerStore.isMusicPlaying,
       audioPlayerExists: !!audioPlayer.value
     })
-      if (wasPlaying && !isMusicPlaying.value) {
+    
+    // 检查是否需要恢复BGM播放
+    // 情况1：如果wasMusicPlayingBeforeWebview为true，说明进入webview前BGM是播放状态，应该恢复播放
+    // 情况2：如果wasMusicPlayingBeforeDrum为true，说明在鼓声播放前BGM是播放状态，应该恢复播放
+    // 情况3：如果wasMusicPlayingBeforeWebview和wasMusicPlayingBeforeDrum都为false，但isDrumPlaying为true，说明从webview返回时鼓声应该还在播放，应该保持BGM暂停
+    // 情况4：如果以上都不满足，说明用户主动暂停了BGM，应该保持暂停
+    const shouldResumeBGM = playerStore.wasMusicPlayingBeforeWebview || playerStore.wasMusicPlayingBeforeDrum
+    
+    console.log('是否应该恢复BGM播放:', shouldResumeBGM)
+    
+    // 恢复BGM播放
+    if (shouldResumeBGM && !playerStore.isMusicPlaying) {
       // 如果audioPlayer不存在，初始化它
       if (!audioPlayer.value) {
         initMusicPlayer()
@@ -712,39 +657,42 @@ onShow(() => {
           if (result && typeof result.then === 'function') {
             // Web平台：使用Promise处理
             result.then(() => {
-                isMusicPlaying.value = true
+              playerStore.setMusicPlaying(true)
               console.log('全局BGM已恢复播放（从webview返回）')
             }).catch(error => {
               console.error('恢复BGM播放失败:', error)
               // 即使播放失败，也要标记为播放状态，确保UI正确
-                isMusicPlaying.value = true
+              playerStore.setMusicPlaying(true)
             })
           } else {
             // 非Web平台：直接标记为播放状态
-              isMusicPlaying.value = true
+            playerStore.setMusicPlaying(true)
             console.log('全局BGM已恢复播放（从webview返回）')
           }
         } catch (error) {
           console.error('恢复BGM播放失败:', error)
           // 即使播放失败，也要标记为播放状态，确保UI正确
-            isMusicPlaying.value = true
+          playerStore.setMusicPlaying(true)
         }
       }
+    } else {
+      // 如果之前BGM是暂停状态，保持暂停
+      console.log('BGM保持暂停状态（从webview返回）')
     }
-    }
+    
-    // 清除标记
+    // 重置webview状态
-    uni.removeStorageSync('isOpeningWebview')
+    playerStore.setWebviewOpening(false)
-    uni.removeStorageSync('wasMusicPlayingBeforeWebview')
     // 重置鼓声播放状态，确保BGM按钮可以点击
-    isDrumPlaying.value = false
+    playerStore.setDrumPlaying(false)
     console.log('重置isDrumPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value)
     // 通知组件webview已关闭
     handleWebviewClose()
-  } else if (isVideoPlaying) {
+    // 重置鼓声前的BGM状态，避免影响下次webview返回
+    playerStore.wasMusicPlayingBeforeDrum = false
+  } else if (playerStore.isVideoPlaying) {
     // 从视频返回，恢复BGM状态
-    console.log('从视频返回，恢复BGM状态:', wasMusicPlayingBeforeVideo)
+    console.log('从视频返回，恢复BGM状态:', playerStore.wasMusicPlayingBeforeVideo)
-    const wasPlaying = wasMusicPlayingBeforeVideo === 'true' || wasMusicPlayingBeforeVideo === true || wasMusicPlayingBeforeVideo === 1 || wasMusicPlayingBeforeVideo === '1'
+    if (playerStore.wasMusicPlayingBeforeVideo && !playerStore.isMusicPlaying) {
-    if (wasPlaying && !isMusicPlaying.value) {
       // 如果audioPlayer不存在，初始化它
       if (!audioPlayer.value) {
         initMusicPlayer()
@@ -757,71 +705,79 @@ onShow(() => {
           if (result && typeof result.then === 'function') {
             // Web平台：使用Promise处理
             result.then(() => {
-              isMusicPlaying.value = true
+              playerStore.setMusicPlaying(true)
               console.log('全局BGM已恢复播放（从视频返回）')
             }).catch(error => {
               console.error('恢复BGM播放失败:', error)
               // 即使播放失败，也要标记为播放状态，确保UI正确
-              isMusicPlaying.value = true
+              playerStore.setMusicPlaying(true)
             })
           } else {
             // 非Web平台：直接标记为播放状态
-            isMusicPlaying.value = true
+            playerStore.setMusicPlaying(true)
             console.log('全局BGM已恢复播放（从视频返回）')
           }
         } catch (error) {
           console.error('恢复BGM播放失败:', error)
           // 即使播放失败，也要标记为播放状态，确保UI正确
-          isMusicPlaying.value = true
+          playerStore.setMusicPlaying(true)
         }
       }
     }
-    // 清除标记
-    uni.removeStorageSync('isVideoPlaying')
-    uni.removeStorageSync('wasMusicPlayingBeforeVideo')
     // 重置视频播放状态
-    isVideoPlaying.value = false
+    playerStore.setVideoPlaying(false)
     console.log('重置isVideoPlaying为false，当前isBgmButtonDisabled:', isBgmButtonDisabled.value)
   }
 })
 
 // 处理视频打开事件
-const handleVideoOpen = () => {
+const handleVideoOpen = (isQianmenVideo = false) => {
   // 标记视频正在播放
-  isVideoPlaying.value = true
+  playerStore.setVideoPlaying(true)
-  // 保存到本地存储
-  uni.setStorageSync('isVideoPlaying', true)
   
   // 保存原始BGM状态
-  wasMusicPlayingBeforeVideo.value = isMusicPlaying.value
+  // 无论是否是前门的视频，都保存鼓声播放前的BGM状态
-  // 保存到本地存储
+  // 这样，无论点击哪个商圈的视频，只要播放鼓声前BGM是播放的，退出视频后都需要恢复BGM播放
-  uni.setStorageSync('wasMusicPlayingBeforeVideo', isMusicPlaying.value)
+  playerStore.wasMusicPlayingBeforeVideo = playerStore.wasMusicPlayingBeforeDrum
+  console.log('视频打开时，保存鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
   
   // 停止全局BGM播放
-  if (audioPlayer.value && isMusicPlaying.value) {
+  if (audioPlayer.value && playerStore.isMusicPlaying) {
     audioPlayer.value.pause()
-    isMusicPlaying.value = false
+    playerStore.setMusicPlaying(false)
     console.log('全局BGM已停止（视频播放中）')
   }
   
   // 标记鼓声应该停止
-  isDrumPlaying.value = false
+  playerStore.setDrumPlaying(false)
+  
+  // 确保BGM保持暂停状态（如果是由鼓声导致的暂停）
+  console.log('视频打开时，BGM状态:', playerStore.isMusicPlaying)
+  console.log('视频打开时，鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
 }
 
 // 处理视频关闭事件
 const handleVideoClose = () => {
   // 标记视频已停止播放
-  isVideoPlaying.value = false
+  playerStore.setVideoPlaying(false)
+  
+  // 检查是否需要恢复BGM播放
+  // 只有当鼓声播放前BGM是播放状态时，才恢复BGM播放
+  const shouldResumeBGM = playerStore.restoreMusicStateAfterVideo()
+  
+  console.log('视频关闭时，是否应该恢复BGM播放:', shouldResumeBGM)
+  console.log('视频关闭时，BGM状态:', playerStore.isMusicPlaying)
+  console.log('视频关闭时，鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
   
   // 恢复全局BGM到原始状态
-  if (audioPlayer.value && wasMusicPlayingBeforeVideo.value && !isMusicPlaying.value) {
+  if (audioPlayer.value && shouldResumeBGM && !playerStore.isMusicPlaying) {
     try {
       const result = audioPlayer.value.play()
       // 检查play()方法是否返回Promise（Web平台）
       if (result && typeof result.then === 'function') {
         // Web平台：使用Promise处理
         result.then(() => {
-          isMusicPlaying.value = true
+          playerStore.setMusicPlaying(true)
           console.log('全局BGM已恢复播放（视频已关闭）')
         }).catch(error => {
           console.error('BGM恢复播放失败（需要用户交互）:', error)
@@ -829,32 +785,34 @@ const handleVideoClose = () => {
         })
       } else {
         // 其他平台：同步处理
-        isMusicPlaying.value = true
+        playerStore.setMusicPlaying(true)
         console.log('全局BGM已恢复播放（视频已关闭）')
       }
     } catch (error) {
       console.error('BGM恢复播放失败（需要用户交互）:', error)
       // 不更新isMusicPlaying状态，保持为false
     }
+  } else {
+    console.log('BGM保持暂停状态（视频已关闭）')
   }
 }
 
 // 处理webview打开事件
 const handleWebviewOpen = () => {
   // 标记webview正在打开
-  isWebviewOpening.value = true
+  playerStore.setWebviewOpening(true)
   console.log('Webview即将打开')
   
-  // 保存鼓声播放前的BGM状态，以便在退出webview时恢复
+  // 注意：不要在这里保存鼓声播放前的BGM状态，因为此时BGM已经被暂停
-  if (isDrumPlaying.value) {
+  // 保持之前保存的playerStore.wasMusicPlayingBeforeDrum值
-    uni.setStorageSync('wasMusicPlayingBeforeDrum', wasMusicPlayingBeforeDrum.value)
+  console.log('当前鼓声播放状态:', playerStore.isDrumPlaying)
-  }
+  console.log('当前鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
 }
 
 // 处理webview关闭事件
 const handleWebviewClose = () => {
   // 标记webview已关闭
-  isWebviewOpening.value = false
+  playerStore.setWebviewOpening(false)
   console.log('Webview已关闭')
 }
 
@@ -862,32 +820,49 @@ const handleWebviewClose = () => {
 const pauseBgm = (source = 'drum') => {
   // 只有当来源是鼓声时，才标记鼓声正在播放
   if (source === 'drum') {
-    isDrumPlaying.value = true
+    playerStore.setDrumPlaying(true)
     // 保存原始BGM状态
-    wasMusicPlayingBeforeDrum.value = isMusicPlaying.value
+    playerStore.saveMusicStateBeforeDrum()
+    console.log('保存鼓声播放前的BGM状态:', playerStore.isMusicPlaying)
+  } else if (source === 'webview') {
+    // 保存webview打开前的BGM状态
+    playerStore.saveMusicStateBeforeWebview()
+    console.log('保存webview打开前的BGM状态:', playerStore.isMusicPlaying)
+    // 注意：不要在这里保存鼓声播放前的BGM状态，因为此时BGM已经被暂停
+    // 保持之前保存的playerStore.wasMusicPlayingBeforeDrum值
+    console.log('当前鼓声播放状态:', playerStore.isDrumPlaying)
+    console.log('当前鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
+    
+    // 确保webview打开时不会修改playerStore.wasMusicPlayingBeforeDrum的值
+    // 只有在播放新的鼓声时，才会更新playerStore.wasMusicPlayingBeforeDrum的值
   }
   
-  if (audioPlayer.value && isMusicPlaying.value) {
+  if (audioPlayer.value && playerStore.isMusicPlaying) {
     audioPlayer.value.pause()
-    isMusicPlaying.value = false
+    playerStore.setMusicPlaying(false)
     console.log(`全局BGM已暂停（${source === 'drum' ? '鼓声播放中' : 'webview打开中'}）`)
   }
+  
+  // 确保鼓声播放前的BGM状态不会被修改
+  if (source === 'webview' && playerStore.isDrumPlaying) {
+    console.log('webview打开时，鼓声播放中，保持鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
+  }
 }
 
 // 恢复BGM（用于鼓声结束）
 const resumeBgm = () => {
   // 标记鼓声已停止播放
-  isDrumPlaying.value = false
+  playerStore.setDrumPlaying(false)
   
   // 恢复BGM到原始状态
-  if (audioPlayer.value && wasMusicPlayingBeforeDrum.value && !isMusicPlaying.value) {
+  if (audioPlayer.value && playerStore.restoreMusicStateAfterDrum() && !playerStore.isMusicPlaying) {
     try {
       const result = audioPlayer.value.play()
       // 检查play()方法是否返回Promise（Web平台）
       if (result && typeof result.then === 'function') {
         // Web平台：使用Promise处理
         result.then(() => {
-          isMusicPlaying.value = true
+          playerStore.setMusicPlaying(true)
           console.log('全局BGM已恢复播放（鼓声已结束）')
         }).catch(error => {
           console.error('BGM恢复播放失败（需要用户交互）:', error)
@@ -895,7 +870,7 @@ const resumeBgm = () => {
         })
       } else {
         // 其他平台：同步处理
-        isMusicPlaying.value = true
+        playerStore.setMusicPlaying(true)
         console.log('全局BGM已恢复播放（鼓声已结束）')
       }
     } catch (error) {
@@ -903,6 +878,10 @@ const resumeBgm = () => {
       // 不更新isMusicPlaying状态，保持为false
     }
   }
+  
+  // 注意：不要重置playerStore.wasMusicPlayingBeforeDrum的值
+  // 因为这个值可能在webview场景中需要使用
+  console.log('鼓声结束后，鼓声播放前的BGM状态:', playerStore.wasMusicPlayingBeforeDrum)
 }
 
 // 使用scroll-view组件后，不再需要手动处理触摸事件
@@ -919,7 +898,7 @@ onUnmounted(() => {
     <!-- 音乐控制按钮 -->
     <div 
       class="music-control"
-      :class="{ 'music-playing': isMusicPlaying, 'disabled': isBgmButtonDisabled }"
+      :class="{ 'music-playing': playerStore.isMusicPlaying, 'disabled': isBgmButtonDisabled }"
       @click="toggleMusic"
     >
       <img src="/static/images/music_on.png" alt="音乐" class="music-icon" />
@@ -999,7 +978,7 @@ onUnmounted(() => {
         :active="activeSceneIndex === 4"
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[4].videoUrl"
-        :is-music-playing="isMusicPlaying"
+        :is-music-playing="playerStore.isMusicPlaying"
         :page-visit-uuid="pageVisitUuid"
         @collect-seal="collectSeal(4)"
         @video-open="handleVideoOpen"
@@ -1015,13 +994,13 @@ onUnmounted(() => {
         :active="activeSceneIndex === 5"
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[5].videoUrl"
-        :is-music-playing="isMusicPlaying"
+        :is-music-playing="playerStore.isMusicPlaying"
-        :is-video-playing="isVideoPlaying"
+        :is-video-playing="playerStore.isVideoPlaying"
-        :is-webview-opening="isWebviewOpening"
+        :is-webview-opening="playerStore.isWebviewOpening"
         :page-visit-uuid="pageVisitUuid"
         @collect-seal="collectSeal(5)"
         @height-changed="handleQianmenHeightChanged"
-        @video-open="handleVideoOpen"
+        @video-open="handleVideoOpen(true)"
         @video-close="handleVideoClose"
         @pause-bgm="(source) => pauseBgm(source)"
         @resume-bgm="resumeBgm"

store/player.js

@@ -0,0 +1,90 @@
+import { defineStore } from 'pinia'
+
+export const usePlayerStore = defineStore('player', {
+  state: () => ({
+    // 音乐播放状态
+    isMusicPlaying: false,
+    // 视频播放状态
+    isVideoPlaying: false,
+    // 鼓声播放状态
+    isDrumPlaying: false,
+    // webview打开状态
+    isWebviewOpening: false,
+    // 视频打开前的BGM状态
+    wasMusicPlayingBeforeVideo: false,
+    // 鼓声开始前的BGM状态
+    wasMusicPlayingBeforeDrum: false,
+    // webview打开前的BGM状态
+    wasMusicPlayingBeforeWebview: false
+  }),
+  
+  getters: {
+    // 计算是否禁用BGM控制按钮
+    isBgmButtonDisabled: (state) => {
+      return state.isVideoPlaying || state.isDrumPlaying
+    }
+  },
+  
+  actions: {
+    // 设置音乐播放状态
+    setMusicPlaying(status) {
+      this.isMusicPlaying = status
+    },
+    
+    // 设置视频播放状态
+    setVideoPlaying(status) {
+      this.isVideoPlaying = status
+    },
+    
+    // 设置鼓声播放状态
+    setDrumPlaying(status) {
+      this.isDrumPlaying = status
+    },
+    
+    // 设置webview打开状态
+    setWebviewOpening(status) {
+      this.isWebviewOpening = status
+    },
+    
+    // 保存视频打开前的BGM状态
+    saveMusicStateBeforeVideo() {
+      this.wasMusicPlayingBeforeVideo = this.isMusicPlaying
+    },
+    
+    // 保存鼓声开始前的BGM状态
+    saveMusicStateBeforeDrum() {
+      this.wasMusicPlayingBeforeDrum = this.isMusicPlaying
+    },
+    
+    // 保存webview打开前的BGM状态
+    saveMusicStateBeforeWebview() {
+      this.wasMusicPlayingBeforeWebview = this.isMusicPlaying
+    },
+    
+    // 恢复视频关闭后的BGM状态
+    restoreMusicStateAfterVideo() {
+      return this.wasMusicPlayingBeforeVideo
+    },
+    
+    // 恢复鼓声结束后的BGM状态
+    restoreMusicStateAfterDrum() {
+      return this.wasMusicPlayingBeforeDrum
+    },
+    
+    // 恢复webview关闭后的BGM状态
+    restoreMusicStateAfterWebview() {
+      return this.wasMusicPlayingBeforeWebview
+    },
+    
+    // 重置所有状态
+    resetState() {
+      this.isMusicPlaying = false
+      this.isVideoPlaying = false
+      this.isDrumPlaying = false
+      this.isWebviewOpening = false
+      this.wasMusicPlayingBeforeVideo = false
+      this.wasMusicPlayingBeforeDrum = false
+      this.wasMusicPlayingBeforeWebview = false
+    }
+  }
+})