EpicSoul/bmzm/chapter1/index.vue

<template>
	<view>
		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
			<swiper-item v-for="(item, index) in swiperItems" :key="index" v-if="index < indexShow">
				<view :class="['swiper-item',{'swiper-item1-10': item.images}]"
					:style="{ backgroundImage: `url(${item.imageUrl})` }" @click="changeIndex(index)">
					<!-- 如果是第一章的第10个swiper-item，显示图片并绑定点击事件 -->
					<template v-if="item.images">
						<image v-for="(image, imgIndex) in item.images" :key="imgIndex" :src="image.src"
							mode="aspectFill"
							@click="setStorage(imgIndex);gotoPath(item.link.replace('{index}', imgIndex + item.linkIndex))">
						</image>
					</template>
					<!-- 视频 -->
					<template v-if="index == 3">
						<video src="https://des.dayunyuanjian.cn/epicSoul/bmzm.mp4" @play="handleVideoPlay"
							@pause="handleVideoPause" @ended="handleVideoEnded" style="width: 100vw;height: 30vh;"
							objectFit="cover"></video>
					</template>
					<!-- 动图 -->
					<template v-if="index == 8">
						<image src="https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter1/img7s.gif" mode="widthFix"
							style="width: 100vw;"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		<MusicControl />
		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3" />
	</view>
</template>

<script>
	import AudioControl from '@/components/AudioControl.vue';
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu,
			AudioControl
		},
		data() {
			return {
				currentIndex: 0,
				// 禁止滑动到的索引
				forbiddenIndex: 2,
				initialIndex: 1,
				popupIndex: 1,
				// 视频播放前的状态记录
				beforeVideoState: {
					audioWasPlaying: false,
					bgMusicWasPlaying: false
				},
				// 抽象出swiper-item的数据
				swiperItems: [{
						imageUrl: `https://des.dayunyuanjian.cn/epicSoul/bmzm/index/index1.png`
					},
					{
						imageUrl: 'https://des.dayunyuanjian.cn/epicSoul/bmzm/index/index5.png'
					},
					// 第一章
					...Array.from({
						length: 9
					}, (_, i) => ({
						imageUrl: `https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter1/img${i + 1}.png`
					})),
					{
						imageUrl: 'https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter1/img10.png',
						images: Array.from({
							length: 4
						}, (_, i) => ({
							src: `https://des.dayunyuanjian.cn/epicSoul/bmzm/chapter1/img10-${i + 1}.png`
						})),
						link: '/bmzm/chapter2/index?index={index}',
						linkIndex: 11
					}
				],
				indexShow: 3
			};
		},
		onLoad(option) {
			this.initialIndex = option.index;
			// 更新第一个swiper-item的图片路径
			this.swiperItems[0].imageUrl =
				`https://des.dayunyuanjian.cn/epicSoul/bmzm/index/index${this.initialIndex}.png`;
		},
		methods: {
			touchmove() {
				return this.currentIndex == 2 ? true : false
			},
			changeIndex(index) {
				if (index == 2) this.currentIndex = 3
				this.indexShow = 100
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
				if (this.currentIndex == 2) this.indexShow = 3
			},
			// 存储答案，供后面使用
			setStorage(i) {
				let text = ''
				switch (i) {
					case 0:
						text = '灵感的捕捉者'
						break;
					case 1:
						text = '众智的编织者'
						break;
					case 2:
						text = '智慧的开启者'
						break;
					case 3:
						text = '自然的尊重者'
						break;
					default:
						break;
				}
				this.appendToStorage('answerObj', {
					answer2: text
				});
			},
			// 视频开始播放
			handleVideoPlay() {
				console.log('视频开始播放');

				// 记录当前状态
				this.recordCurrentState();

				// 暂停音频和背景音乐
				this.pauseAllAudio();
			},

			// 视频暂停
			handleVideoPause() {
				console.log('视频暂停');
				// 恢复之前的状态
				this.restorePreviousState();
			},

			// 视频播放结束
			handleVideoEnded() {
				console.log('视频播放结束');
				// 恢复之前的状态
				this.restorePreviousState();
			},

			// 记录当前音频和背景音乐状态
			recordCurrentState() {
				try {
					// 检查音频状态
					if (uni.$globalAudio && uni.$globalAudio.isAudioPlaying()) {
						this.beforeVideoState.audioWasPlaying = true;
						console.log('bmzm chapter1: 记录：音频正在播放');
					} else {
						this.beforeVideoState.audioWasPlaying = false;
					}

					// 检查背景音乐状态
					const app = getApp();
					if (app && app.globalData && app.globalData.isMusicPlaying) {
						this.beforeVideoState.bgMusicWasPlaying = true;
						console.log('bmzm chapter1: 记录：背景音乐正在播放');
					} else {
						this.beforeVideoState.bgMusicWasPlaying = false;
					}
				} catch (error) {
					console.error('bmzm chapter1: 记录状态失败:', error);
				}
			},

			// 暂停所有音频
			pauseAllAudio() {
				try {
					// 暂停音频
					if (this.beforeVideoState.audioWasPlaying && uni.$globalAudio) {
						uni.$globalAudio.pauseCurrentAudio();
						console.log('bmzm chapter1: 暂停音频');
					}

					// 暂停背景音乐
					if (this.beforeVideoState.bgMusicWasPlaying) {
						const app = getApp();
						if (app && app.globalData && app.globalData.bgMusic) {
							app.globalData.bgMusic.pause();
							console.log('bmzm chapter1: 暂停背景音乐');
						}
					}
				} catch (error) {
					console.error('bmzm chapter1: 暂停音频失败:', error);
				}
			},

			// 恢复之前的状态
			restorePreviousState() {
				try {
					// 恢复音频
					if (this.beforeVideoState.audioWasPlaying && uni.$globalAudio) {
						uni.$globalAudio.playCurrentAudio();
						console.log('bmzm chapter1: 恢复音频播放');
					}

					// 恢复背景音乐
					if (this.beforeVideoState.bgMusicWasPlaying) {
						const app = getApp();
						if (app && app.globalData && app.globalData.bgMusic) {
							app.globalData.bgMusic.play();
							console.log('bmzm chapter1: 恢复背景音乐播放');
						}
					}

					// 重置状态记录
					this.beforeVideoState.audioWasPlaying = false;
					this.beforeVideoState.bgMusicWasPlaying = false;
				} catch (error) {
					console.error('bmzm chapter1: 恢复状态失败:', error);
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
	}

	.swiper-item1-10 {
		padding: 506rpx 65rpx 370rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		&>image:nth-child(n+1) {
			width: 310rpx;
			height: 316.58rpx;
		}

		&>image:nth-child(n+2) {
			width: 291.61rpx;
			height: 334.55rpx;
		}

		&>image:nth-child(n+3) {
			width: 292.61rpx;
			height: 334.55rpx;
		}

		&>image:nth-child(n+4) {
			width: 309.59rpx;
			height: 317.58rpx;
			margin-top: 15rpx;
		}
	}
</style>