EpicSoul/xqk/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 == 1" >
						<image @click="hanldGifPage" :src="showImg('/uploads/20250903/dcfd8b8a708f4f2d43edf35a906f75ba.png')" mode="widthFix" class="img1-text"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 2,
				swiperImages: [
					this.showImg('/uploads/20250903/3bd4fe43f2a6a8806799f06a548f9477.png'),
					this.showImg('/uploads/20250903/8fe8d66210edd96a9f322a661b4d9ba4.png'),
					
				],
				// 控制图片显示的变量
				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
			},
			hanldGifPage(){
				uni.navigateTo({
					url:'/xqk/chapter5/index'
				})
			},
			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;
		.img1-text{
			width: 484rpx;
			position: absolute;
			bottom: 100rpx;
			left: 250rpx;
		}
		.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>