v1.2.9

1、结束页按钮间隔位置样式调整
2、首页滑动提示修改
3、bgm播放、鼓声播放、视频播放需要相互停止，保证同一时间内只有一种声音在播放

components/ChongwenScene.vue

@@ -23,7 +23,7 @@ const props = defineProps({
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal'])
+const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
 
 // 是否收集福印
 const sealCollected = ref(false)
@@ -67,11 +67,13 @@ const openWebview = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
+  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
+  emit('video-close')
 }
 
 // 页面挂载时的初始化

components/DongzhimenScene.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   }
 })
 
-const emit = defineEmits(['collect-seal'])
+const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
 
 // sq3图片显示状态
 const sq3ImageVisible = ref(false)
@@ -478,11 +478,13 @@ const resetDuckPosition = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
+  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
+  emit('video-close')
 }
 
 // 预加载图片

components/EndPage.vue

@@ -293,11 +293,14 @@ onMounted(() => {
 
 .end-buttons {
   display: flex;
-  gap: 20px;
   justify-content: center;
   margin-bottom: 60px;
 }
 
+.end-buttons .function-image:not(:last-child) {
+  margin-right: 20px;
+}
+
 .function-btn {
   cursor: pointer;
   width: 306rpx;

components/LoadingComponent.vue

@@ -137,6 +137,7 @@ onMounted(() => {
   align-items: center;
   justify-content: center;
   z-index: 9999;
+  background-color: #fd4336;
 }
 
 .loading-bg {

components/LongfusiScene.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal'])
+const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
 
 // sq3图片显示状态
 const sq3ImageVisible = ref(false)
@@ -108,11 +108,13 @@ const closeGallery = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
+  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
+  emit('video-close')
 }
 
 // 页面挂载时的初始化

components/QianmenScene.vue

@@ -19,19 +19,28 @@ const props = defineProps({
   videoUrl: {
     type: String,
     default: ''
+  },
+  // 全局BGM播放状态
+  isMusicPlaying: {
+    type: Boolean,
+    default: false
   }
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal', 'height-changed'])
+const emit = defineEmits(['collect-seal', 'height-changed', 'video-open', 'video-close', 'pause-bgm', 'resume-bgm'])
 
 // 是否收集福印
 const sealCollected = ref(false)
 
-// 音乐播放状态
+// 音乐播放状态（由父组件控制）
-const isMusicPlaying = ref(false)
 const musicPlayer = ref(null)
 
+// 鼓声音频状态
+const isDrumPlaying = ref(false)
+const drumPlayer = ref(null)
+const wasBgPlayingBeforeDrum = ref(false)
+
 // 福字点击区域状态
 const sq1ImageVisible = ref(false)
 // 视频播放状态
@@ -79,7 +88,7 @@ const parallaxOffset = computed(() => {
   return offset
 })
 
-// 控制音乐播放/暂停
+// 控制鼓声播放/暂停
 const toggleMusic = () => {
   // 第一次点击音乐按钮时收集福印
   if (!sealCollected.value) {
@@ -88,38 +97,48 @@ const toggleMusic = () => {
     emit('collect-seal')
   }
   
-  if (!musicPlayer.value) {
+  if (!drumPlayer.value) {
-    // 创建音频对象
+    // 创建鼓声音频对象
-    musicPlayer.value = uni.createInnerAudioContext()
+    drumPlayer.value = uni.createInnerAudioContext()
-    const bgmUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
+    const drumUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
-    musicPlayer.value.src = bgmUrl.href
+    drumPlayer.value.src = drumUrl.href
-    musicPlayer.value.loop = false
+    drumPlayer.value.loop = false
     
     // 监听播放结束
-    musicPlayer.value.onEnded(() => {
+    drumPlayer.value.onEnded(() => {
-      isMusicPlaying.value = false
+      isDrumPlaying.value = false
+      // 恢复BGM播放状态
+      emit('resume-bgm')
     })
     
     // 监听错误
-    musicPlayer.value.onError((err) => {
+    drumPlayer.value.onError((err) => {
-      console.error('音乐播放失败:', err)
+      console.error('鼓声播放失败:', err)
-      isMusicPlaying.value = false
+      isDrumPlaying.value = false
-      showToast({
+      // 恢复BGM播放状态
-        message: '音乐播放失败',
+      emit('resume-bgm')
-        icon: 'error',
+      uni.showToast({
+        title: '鼓声播放失败',
+        icon: 'none',
         duration: 1500
       })
     })
   }
   
-  if (isMusicPlaying.value) {
+  if (isDrumPlaying.value) {
     // 正在播放，点击后停止
-    musicPlayer.value.stop()
+    drumPlayer.value.stop()
-    isMusicPlaying.value = false
+    isDrumPlaying.value = false
+    // 恢复BGM播放状态
+    emit('resume-bgm')
   } else {
-    // 未播放，点击后开始播放
+    // 保存BGM状态
-    musicPlayer.value.play()
+    wasBgPlayingBeforeDrum.value = props.isMusicPlaying
-    isMusicPlaying.value = true
+    // 暂停BGM
+    emit('pause-bgm')
+    // 播放鼓声
+    drumPlayer.value.play()
+    isDrumPlaying.value = true
   }
 }
 
@@ -155,12 +174,23 @@ const calculateHeight = () => {
 
 // 打开视频播放器
 const openVideoPlayer = () => {
+  // 如果鼓声正在播放，停止鼓声
+  if (isDrumPlaying.value && drumPlayer.value) {
+    drumPlayer.value.stop()
+    isDrumPlaying.value = false
+    drumPlayer.value.destroy()
+    drumPlayer.value = null
+    // 恢复BGM播放状态
+    emit('resume-bgm')
+  }
   showVideoPlayer.value = true
+  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
+  emit('video-close')
 }
 
 // 组件卸载时清理
@@ -170,6 +200,11 @@ onUnmounted(() => {
     musicPlayer.value.destroy()
     musicPlayer.value = null
   }
+  if (drumPlayer.value) {
+    drumPlayer.value.stop()
+    drumPlayer.value.destroy()
+    drumPlayer.value = null
+  }
 })
 </script>
 
@@ -180,23 +215,14 @@ onUnmounted(() => {
       <!-- 使用复制到public目录的背景图片 -->
       <img src="/static/bg/bg1.jpg" alt="前门商圈" class="background-image" />
     </div>
-    
-    <!-- 增强动效层 -->
-    <div class="enhancement-layer">
-      <!-- 灯笼增强动效 -->
-      <div class="lanterns">
-        <div class="lantern left-lantern">🏮</div>
-        <div class="lantern right-lantern">🏮</div>
-      </div>
-    </div>
   
     <!-- 音乐控制按钮 -->
     <div class="music-control" @click="toggleMusic">
       <img 
-        :src="isMusicPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png'" 
+        :src="isDrumPlaying ? '/static/images/icon_music2.png' : '/static/images/icon_music1.png' " 
         alt="音乐控制" 
         class="music-icon"
-        :class="{ 'playing': isMusicPlaying }"
+        :class="{ 'playing': isDrumPlaying }"
       />
     </div>
     

components/SinglePageContainer.vue

@@ -117,6 +117,10 @@ const scenes = ref([
 const sceneInteractiveStates = ref(scenes.value.map(() => false))
 // 福印收集状态
 const sealCollectedStates = ref(scenes.value.map(() => false))
+// 视频播放状态
+const isVideoPlaying = ref(false)
+// 鼓声播放状态
+const isDrumPlaying = ref(false)
 
 // 计算当前收集的物品
 const collectedItems = computed(() => {
@@ -140,6 +144,11 @@ const collectionProgress = computed(() => {
   return Math.round((collected / total) * 100)
 })
 
+// 计算是否禁用BGM控制按钮
+const isBgmButtonDisabled = computed(() => {
+  return isVideoPlaying.value || isDrumPlaying.value
+})
+
 // 计算福印收集对象（传递给 EndPage）
 const collectedSeals = computed(() => {
   return {
@@ -234,6 +243,12 @@ const handleStart = () => {
   hasScrolled.value = false
   console.log('点击开始按钮，hasScrolled:', hasScrolled.value)
   
+  // 检查并播放背景音乐
+  if (!isMusicPlaying.value) {
+    console.log('背景音乐未播放，开始播放')
+    toggleMusic()
+  }
+  
   // 初始化页面
   initPage()
 }
@@ -319,6 +334,9 @@ const initMusicPlayer = () => {
 
 // 播放/暂停音乐
 const toggleMusic = () => {
+  // 如果按钮被禁用，不处理点击
+  if (isBgmButtonDisabled.value) return
+  
   if (!audioPlayer.value) {
     initMusicPlayer()
   }
@@ -330,9 +348,27 @@ const toggleMusic = () => {
     console.log('音乐已暂停')
   } else {
     // 播放音乐
-    audioPlayer.value.play()
+    try {
-    isMusicPlaying.value = true
+      const result = audioPlayer.value.play()
-    console.log('音乐已开始播放')
+      // 检查play()方法是否返回Promise（Web平台）
+      if (result && typeof result.then === 'function') {
+        // Web平台：使用Promise处理
+        result.then(() => {
+          isMusicPlaying.value = true
+          console.log('音乐已开始播放')
+        }).catch(error => {
+          console.error('音乐播放失败（需要用户交互）:', error)
+          // 不更新isMusicPlaying状态，保持为false
+        })
+      } else {
+        // 其他平台：同步处理
+        isMusicPlaying.value = true
+        console.log('音乐已开始播放')
+      }
+    } catch (error) {
+      console.error('音乐播放失败（需要用户交互）:', error)
+      // 不更新isMusicPlaying状态，保持为false
+    }
   }
 }
 
@@ -343,10 +379,8 @@ onMounted(() => {
   // 初始化音乐播放器
   initMusicPlayer()
   
-  // 自动开始播放音乐
+  // 移除自动播放音乐的代码，避免触发浏览器自动播放限制
-  setTimeout(() => {
+  // 音乐将在用户点击开始按钮或音乐控制按钮时播放
-    toggleMusic()
-  }, 1000)
 })
 
 // 处理滚动事件（从下往上滑动）
@@ -577,6 +611,105 @@ const handleQianmenHeightChanged = (height) => {
   console.log('当前CSS变量:', getComputedStyle(document.documentElement).getPropertyValue('--scene-height'))
 }
 
+// 跟踪视频打开前的BGM状态
+const wasMusicPlayingBeforeVideo = ref(false)
+
+// 跟踪鼓声开始前的BGM状态
+const wasMusicPlayingBeforeDrum = ref(false)
+
+// 处理视频打开事件
+const handleVideoOpen = () => {
+  // 标记视频正在播放
+  isVideoPlaying.value = true
+  
+  // 保存原始BGM状态
+  wasMusicPlayingBeforeVideo.value = isMusicPlaying.value
+  
+  // 停止全局BGM播放
+  if (audioPlayer.value && isMusicPlaying.value) {
+    audioPlayer.value.pause()
+    isMusicPlaying.value = false
+    console.log('全局BGM已停止（视频播放中）')
+  }
+}
+
+// 处理视频关闭事件
+const handleVideoClose = () => {
+  // 标记视频已停止播放
+  isVideoPlaying.value = false
+  
+  // 恢复全局BGM到原始状态
+  if (audioPlayer.value && wasMusicPlayingBeforeVideo.value && !isMusicPlaying.value) {
+    try {
+      const result = audioPlayer.value.play()
+      // 检查play()方法是否返回Promise（Web平台）
+      if (result && typeof result.then === 'function') {
+        // Web平台：使用Promise处理
+        result.then(() => {
+          isMusicPlaying.value = true
+          console.log('全局BGM已恢复播放（视频已关闭）')
+        }).catch(error => {
+          console.error('BGM恢复播放失败（需要用户交互）:', error)
+          // 不更新isMusicPlaying状态，保持为false
+        })
+      } else {
+        // 其他平台：同步处理
+        isMusicPlaying.value = true
+        console.log('全局BGM已恢复播放（视频已关闭）')
+      }
+    } catch (error) {
+      console.error('BGM恢复播放失败（需要用户交互）:', error)
+      // 不更新isMusicPlaying状态，保持为false
+    }
+  }
+}
+
+// 暂停BGM（用于鼓声播放）
+const pauseBgm = () => {
+  // 标记鼓声正在播放
+  isDrumPlaying.value = true
+  
+  // 保存原始BGM状态
+  wasMusicPlayingBeforeDrum.value = isMusicPlaying.value
+  
+  if (audioPlayer.value && isMusicPlaying.value) {
+    audioPlayer.value.pause()
+    isMusicPlaying.value = false
+    console.log('全局BGM已暂停（鼓声播放中）')
+  }
+}
+
+// 恢复BGM（用于鼓声结束）
+const resumeBgm = () => {
+  // 标记鼓声已停止播放
+  isDrumPlaying.value = false
+  
+  // 恢复BGM到原始状态
+  if (audioPlayer.value && wasMusicPlayingBeforeDrum.value && !isMusicPlaying.value) {
+    try {
+      const result = audioPlayer.value.play()
+      // 检查play()方法是否返回Promise（Web平台）
+      if (result && typeof result.then === 'function') {
+        // Web平台：使用Promise处理
+        result.then(() => {
+          isMusicPlaying.value = true
+          console.log('全局BGM已恢复播放（鼓声已结束）')
+        }).catch(error => {
+          console.error('BGM恢复播放失败（需要用户交互）:', error)
+          // 不更新isMusicPlaying状态，保持为false
+        })
+      } else {
+        // 其他平台：同步处理
+        isMusicPlaying.value = true
+        console.log('全局BGM已恢复播放（鼓声已结束）')
+      }
+    } catch (error) {
+      console.error('BGM恢复播放失败（需要用户交互）:', error)
+      // 不更新isMusicPlaying状态，保持为false
+    }
+  }
+}
+
 // 使用scroll-view组件后，不再需要手动处理触摸事件
 // scroll-view会自动处理触摸滚动
 
@@ -591,7 +724,7 @@ onUnmounted(() => {
     <!-- 音乐控制按钮 -->
     <div 
       class="music-control"
-      :class="{ 'music-playing': isMusicPlaying }"
+      :class="{ 'music-playing': isMusicPlaying, 'disabled': isBgmButtonDisabled }"
       @click="toggleMusic"
     >
       <img src="/static/images/music_on.png" alt="音乐" class="music-icon" />
@@ -639,6 +772,8 @@ onUnmounted(() => {
         :scroll-position="scrollContainer && scrollContainer.value ? scrollContainer.value.scrollTop : 0"
         :video-url="scenes[1].videoUrl"
         @collect-seal="collectSeal(1)"
+        @video-open="handleVideoOpen"
+        @video-close="handleVideoClose"
       />
 
       <!-- 隆福寺商圈 -->
@@ -647,6 +782,8 @@ onUnmounted(() => {
         :scroll-position="scrollContainer && scrollContainer.value ? scrollContainer.value.scrollTop : 0"
         :video-url="scenes[2].videoUrl"
         @collect-seal="collectSeal(2)"
+        @video-open="handleVideoOpen"
+        @video-close="handleVideoClose"
       />
 
       <!-- 王府井商圈 -->
@@ -655,6 +792,8 @@ onUnmounted(() => {
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[3].videoUrl"
         @collect-seal="collectSeal(3)"
+        @video-open="handleVideoOpen"
+        @video-close="handleVideoClose"
       />
 
       <!-- 崇文门商圈 -->
@@ -663,6 +802,8 @@ onUnmounted(() => {
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[4].videoUrl"
         @collect-seal="collectSeal(4)"
+        @video-open="handleVideoOpen"
+        @video-close="handleVideoClose"
       />
 
       <!-- 前门商圈 -->
@@ -670,8 +811,13 @@ onUnmounted(() => {
         :active="activeSceneIndex === 5"
         :scroll-position="scrollContainer?.value?.scrollTop || 0"
         :video-url="scenes[5].videoUrl"
+        :is-music-playing="isMusicPlaying"
         @collect-seal="collectSeal(5)"
         @height-changed="handleQianmenHeightChanged"
+        @video-open="handleVideoOpen"
+        @video-close="handleVideoClose"
+        @pause-bgm="pauseBgm"
+        @resume-bgm="resumeBgm"
       />
       
       <!-- 新年文案模块 -->
@@ -707,7 +853,7 @@ onUnmounted(() => {
       <!-- 向上滑动提示 -->
       <div class="scroll-tip-bottom" v-if="!hasScrolled">
         <img src="/static/images/icon_hand1.png" class="tip-icon" alt="滑动提示" />
-        <p>向上滑动探索商圈</p>
+        <p>向下滑动探索商圈</p>
       </div>
 
     <!-- 抽奖留资弹窗 -->
@@ -943,6 +1089,20 @@ onUnmounted(() => {
   justify-content: center;
   z-index: 1000;
   cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.music-control:hover:not(.disabled) {
+  transform: scale(1.1);
+}
+
+.music-control:active:not(.disabled) {
+  transform: scale(0.95);
+}
+
+.music-control.disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 

components/VideoPlayButton.vue

@@ -63,7 +63,7 @@ const handlePlayClick = () => {
 
 /* 鼠标悬停效果 */
 .video-play-button-container:hover .video-play-button-bg {
-  background-color: rgba(0, 0, 0, 0.9);
+  background-color: rgba(0, 0, 0, 0.4);
   transform: scale(1.05);
   animation: none;
 }

components/VideoPlayerModal.vue

@@ -37,9 +37,6 @@ const handleContentClick = (e) => {
 <template>
   <div v-if="visible" class="video-modal">
     <div class="video-modal-content" @click="handleContentClick">
-      <div class="video-close-button" @click="handleClose">
-        <span>×</span>
-      </div>
       <video
         :src="videoUrl"
         class="video-player"
@@ -48,6 +45,10 @@ const handleContentClick = (e) => {
         loop
       ></video>
     </div>
+    <!-- 关闭按钮（放在视频下方） -->
+    <div class="video-close-button" @click="handleClose">
+      <img src="/static/images/btn_close.png" alt="关闭" class="close-icon" />
+    </div>
   </div>
 </template>
 
@@ -63,6 +64,7 @@ const handleContentClick = (e) => {
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   z-index: 999;
 }
 
@@ -70,18 +72,22 @@ const handleContentClick = (e) => {
   position: relative;
   border-radius: 20rpx;
   overflow: hidden;
+  width: 720rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.video-player {
   width: 720rpx;
   height: 405rpx;
+  background-color: #000;
 }
 
 .video-close-button {
-  position: absolute;
+  margin-top: 30rpx;
-  top: 10rpx;
+  width: 68rpx;
-  right: 10rpx;
+  height: 68rpx;
-  width: 40rpx;
-  height: 40rpx;
-  background-color: rgba(0, 0, 0, 0.7);
-  border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -89,17 +95,9 @@ const handleContentClick = (e) => {
   z-index: 10;
 }
 
-.video-close-button span {
+.close-icon {
-  color: white;
+  width: 68rpx;
-  font-size: 30rpx;
+  height: 68rpx;
-  font-weight: bold;
+  object-fit: contain;
-  line-height: 30rpx;
-  height: 30rpx;
-}
-
-.video-player {
-  width: 100%;
-  height: 100%;
-  background-color: #000;
 }
 </style>

components/WangfujingScene.vue

@@ -25,7 +25,7 @@ const props = defineProps({
 })
 
 // 组件事件
-const emit = defineEmits(['collect-seal'])
+const emit = defineEmits(['collect-seal', 'video-open', 'video-close'])
 
 // 福字点击区域状态
 const sq3ImageVisible = ref(false)
@@ -106,11 +106,13 @@ const closeGallery = () => {
 // 打开视频播放器
 const openVideoPlayer = () => {
   showVideoPlayer.value = true
+  emit('video-open')
 }
 
 // 关闭视频播放器
 const closeVideoPlayer = () => {
   showVideoPlayer.value = false
+  emit('video-close')
 }
 
 // 页面挂载时的初始化