EpicSoul/xrcc/chapter5/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 src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2s.png" mode="widthFix"
							:class="['img2s', {'animate-enter-from-right': animateShow}]"></image>
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2-btn.png"
							mode="widthFix" class="img2-btn" @click="gotoPath('/subPackages/techan/detail?id=39')"></image>
					</template>
					<template v-if="index === 2">
						<view class="img3-btn" @click="gotoPath('/subPackages/techan/detail?id=39')">立即购买</view>
					</template>
					
					<template v-if="index === 5">
						<view class="flex-column">
							<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5-texts.png" mode="widthFix"
								class="img5-text"></image>
							<!-- <image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5-btn.png"
								mode="widthFix" class="img5-btn" @click="goHome"></image> -->
						</view>
					</template>
					
					<template v-if="index === 6">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img6-text.png" mode="widthFix"
							class="img6-text" @click="gotoPath('/xrcc/chapter6/index')"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/05/7d970645-f026-4ae0-8d60-a8b5c47bebfc.MP3" />
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<MusicControl />
	</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: 5,
				swiperImages: [
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img1.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img2ss.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img3.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img4.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img8.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img5.gif',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter5/img6.png'
				],
				animateShow: false,
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
				if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1
			},
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
				if(this.currentIndex == 1) {
					this.animateShow = true
				}else {
					this.animateShow = false
				}
				
				if (this.currentIndex == this.swiperImages.length - 1) {
					this.navIndex = 6;
				} else {
					this.navIndex = 5
				}
			},
			// 去首页
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			}
		},
	}
</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;

		.img2s {
			position: absolute;
			top: 380rpx;
			right: 25rpx;
			width: 358rpx;
			transform: translateX(100%);
			opacity: 0;
		}

		.img2-btn {
			width: 558rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 70rpx;
		}
		
		.img3-btn {
			width: 558rpx;
			line-height: 72rpx;
			text-align: center;
			border-radius: 20rpx;
			border: 2rpx solid;
			font-size: 30rpx;
			color: #fff;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 180rpx;
		}
		
		.flex-column {
			position: absolute;
			bottom: 280rpx;
			width: 100%;
			align-items: center;
			
			.img5-text {
				width: 100%;
			}
			
			.img5-btn {
				width: 230rpx;
				margin-top: 99rpx;
			}
		}

		.img6-text {
			width: 408.46rpx;
			position: absolute;
			left: 0;
			right: 0;
			margin: 0 auto;
			bottom: 365rpx
		}
	}

	/* 从右往左进入的动画 */
	.animate-enter-from-right {
		animation: enterFromRight 2s ease-out forwards;
	}

	@keyframes enterFromRight {
		0% {
			/* 起始位置：右侧外部 */
			transform: translateX(100%);
			opacity: 0;
		}

		100% {
			/* 结束位置：正常位置 */
			transform: translateX(0);
			opacity: 1;
		}
	}

	.swiper-img {
		width: 100vw;
		height: 100vh;
	}
</style>