wenzhe
/
qs_xinchun2026_h5
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

v1.2.9 

1、结束页按钮间隔位置样式调整
2、首页滑动提示修改
3、bgm播放、鼓声播放、视频播放需要相互停止，保证同一时间内只有一种声音在播放
This commit is contained in:
Wenzhe 2026-02-04 21:27:25 +08:00
parent 3ed1978442
commit e7cc71d841
7 changed files with 217 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/ChongwenScene.vue
View File

@ -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')
}
// 页面挂载时的初始化

4
components/DongzhimenScene.vue
View File

@ -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')
}
// 预加载图片

5
components/EndPage.vue
View File

@ -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;

4
components/LongfusiScene.vue
View File

@ -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')
}
// 页面挂载时的初始化

96
components/QianmenScene.vue
View File

@ -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) {
// 创建音频对象
musicPlayer.value = uni.createInnerAudioContext()
const bgmUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
musicPlayer.value.src = bgmUrl.href
musicPlayer.value.loop = false
if (!drumPlayer.value) {
// 创建鼓声音频对象
drumPlayer.value = uni.createInnerAudioContext()
const drumUrl = new URL('/static/music/bgm1.mp3', import.meta.url)
drumPlayer.value.src = drumUrl.href
drumPlayer.value.loop = false
// 监听播放结束
musicPlayer.value.onEnded(() => {
isMusicPlaying.value = false
drumPlayer.value.onEnded(() => {
isDrumPlaying.value = false
// 恢复BGM播放状态
emit('resume-bgm')
})
// 监听错误
musicPlayer.value.onError((err) => {
console.error('音乐播放失败:', err)
isMusicPlaying.value = false
showToast({
message: '音乐播放失败',
icon: 'error',
drumPlayer.value.onError((err) => {
console.error('鼓声播放失败:', err)
isDrumPlaying.value = false
// 恢复BGM播放状态
emit('resume-bgm')
uni.showToast({
title: '鼓声播放失败',
icon: 'none',
duration: 1500
})
})
}
if (isMusicPlaying.value) {
if (isDrumPlaying.value) {
// 正在播放，点击后停止
musicPlayer.value.stop()
isMusicPlaying.value = false
drumPlayer.value.stop()
isDrumPlaying.value = false
// 恢复BGM播放状态
emit('resume-bgm')
} else {
// 未播放，点击后开始播放
musicPlayer.value.play()
isMusicPlaying.value = true
// 保存BGM状态
wasBgPlayingBeforeDrum.value = props.isMusicPlaying
// 暂停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>

142
components/SinglePageContainer.vue
View File

@ -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 {
@ -325,6 +334,9 @@ const initMusicPlayer = () => {
// 播放/暂停音乐
const toggleMusic = () => {
// 如果按钮被禁用，不处理点击
if (isBgmButtonDisabled.value) return
if (!audioPlayer.value) {
initMusicPlayer()
}
@ -599,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会自动处理触摸滚动
@ -613,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" />
@ -661,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"
/>
<!-- 隆福寺商圈 -->
@ -669,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"
/>
<!-- 王府井商圈 -->
@ -677,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"
/>
<!-- 崇文门商圈 -->
@ -685,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"
/>
<!-- 前门商圈 -->
@ -692,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"
/>
<!-- 新年文案模块 -->
@ -729,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>
<!-- 抽奖留资弹窗 -->
@ -965,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;
}

4
components/WangfujingScene.vue
View File

@ -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')
}
// 页面挂载时的初始化