EpicSoul/xrcc/chapter2/index.vue

<template>
	<view style="width: 100vw;">
		<swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
			<swiper-item v-for="(image, index) in swiperImages" :key="index">
				<view class="swiper-item" :style="{ backgroundImage: `url(${image})` }">
					<template v-if="index === 6">
						<!-- 第一张图：延迟0.5秒 -->
						<image 
							v-if="showImg7_1"
							src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-1.png" 
							mode="widthFix"
							class="fade-in-image"
							:style="{ animationDelay: '0s' }"
						></image>
						
						<!-- 第二张图：延迟1秒 -->
						<image 
							v-if="showImg7_2"
							src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-2.png" 
							mode="widthFix"
							class="fade-in-image"
							:style="{ animationDelay: '0s' }"
						></image>
						
						<!-- 第三张图：延迟2秒 -->
						<image 
							v-if="showImg7_3"
							src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7-3.png" 
							mode="widthFix"
							class="fade-in-image"
							:style="{ animationDelay: '0s' }"
						></image>
					</template>
					
					<template v-if="index === 7">
						<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img8-${i+1}.png`"
							v-for="i in 4" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]"
							@click="openPopup(i+1)"></image>
					</template>
					
					<template v-if="index === 9">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img10-text.png" mode="widthFix" class="img10-text"></image>
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
							class="btn-img" @click="gotoPath('/xrcc/chapter3/index')"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		
		<!-- 第八页气泡弹框 -->
		<uni-popup ref="chapterPopup">
			<image :src="getImageUrl(`img8-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;">
			</image>
		</uni-popup>

		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/05/7d970645-f026-4ae0-8d60-a8b5c47bebfc.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,
				navIndex: 2,
				swiperImages: [
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img1.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img3.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img4.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img5s.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img6.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img7s.jpg',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img8.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img9.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/img10.gif'
				],
				// 控制图片显示的变量
				showImg7_1: false,
				showImg7_2: false,
				showImg7_3: false,
				// 存储定时器
				timers: [],
				popupIndex: 1
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		onUnload() {
			// 清除定时器
			this.timers.forEach(timer => clearTimeout(timer))
		},
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
				if(idx == this.swiperImages.length - 1) this.navIndex = idx + 1
			},
			handleSwiperChange(e) {
				// 清除之前的定时器
				this.timers.forEach(timer => clearTimeout(timer))
				this.timers = []
				
				this.currentIndex = e.detail.current;
				
				if (this.currentIndex == this.swiperImages.length - 1) {
					this.navIndex = 3;
				}else {
					this.navIndex = 2
				}
				
				if (this.currentIndex === 6) {
					// 重置显示状态（确保每次进入都重新动画）
					this.showImg7_1 = false
					this.showImg7_2 = false
					this.showImg7_3 = false
					
					// 延迟0.5秒显示第一张图
					const timer1 = setTimeout(() => {
						this.showImg7_1 = true
					}, 500)
					
					// 延迟1秒显示第二张图
					const timer2 = setTimeout(() => {
						this.showImg7_2 = true
					}, 1000)
					
					// 延迟2秒显示第三张图
					const timer3 = setTimeout(() => {
						this.showImg7_3 = true
					}, 2000)
					
					this.timers.push(timer1, timer2, timer3)
				} else {
					// 非目标索引时隐藏所有图片
					this.showImg7_1 = false
					this.showImg7_2 = false
					this.showImg7_3 = false
				}
			},
			// 第八页气泡弹框
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter2/${path}`;
			}
		}
	}
</script>

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

	.swiper-item {
		width: 100vw;
		height: 100vh;
		background-size: 100% 100%;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;
		
		.img10-text {
			width: 484rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}

		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 100rpx;
		}
		
		.module-img {
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			width: 564.25rpx;
		}
		.module1 {
			top: 630rpx;
		}
		.module2 {
			top: 780rpx;
		}
		.module3 {
			top: 930rpx;
		}
		.module4 {
			top: 1080rpx;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}

	/* 渐入动画样式 */
	.fade-in-image {
		/* 初始状态：透明 */
		opacity: 0;
		/* 添加过渡动画：1秒内透明度从0到1 */
		animation: fadeIn 1s ease-out forwards;
		/* 根据需要调整图片的定位 */
		position: absolute;
	}

	/* 渐入动画关键帧 */
	@keyframes fadeIn {
		from {
			opacity: 0;
			transform: translateY(20rpx); /* 可选：添加轻微上移动画 */
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.fade-in-image:nth-child(1) {
		width: 22.97rpx;
		top: 825rpx;
		right: 191rpx;
	}

	.fade-in-image:nth-child(2) {
		width: 34.95rpx;
		top: 790rpx;
		right: 170rpx;
	}

	.fade-in-image:nth-child(3) {
		width: 144.81rpx;
		top: 680rpx;
		right: 71rpx;
	}
</style>