EpicSoul/xqk/chapter5/index.vue

<template>
	<view style="width: 100vw;position: relative;">
		<BackButton/>
		<!-- <SwipeToNext :is-last-slide="isLastSlide" :always-enable="swiperImages.length === 1" -->
			<!-- :target-path="'/xqk/chapter3/index'" :enable-delay="swiperImages.length > 1"> -->
			<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})` }">

					</view>
				</swiper-item>
			</swiper>
			<image @click="gotoPath('/xqk/chapter3/index')" v-if="currentIndex == swiperImages.length-1"
				:src="showImg('/uploads/20250905/692abbf32b38257ffb2153651f468a63.png')" class="imgJump"
				mode=""></image>
		<!-- </SwipeToNext> -->
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.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';
	// import SwipeToNext from '@/components/SwipeToNext.vue';
	export default {
		components: {
			MusicControl,
			NavMenu,
			// SwipeToNext,
			AudioControl
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 2,
				swiperImages: [
					this.showImg('/uploads/20250903/dd5b260002da55d4c3d56b338451bc11.gif'),
				],
				animateShow: false,
				isLastSlide: false // 是否在最后一页
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			// 对于单张图片或初始在最后一页的情况
			if (this.currentIndex == this.swiperImages.length - 1) {
				this.navIndex = 2;
				this.isLastSlide = true;
			}
			// 如果只有一张图片，也认为是最后一页
			if (this.swiperImages.length === 1) {
				this.isLastSlide = true;
			}
		},
		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 == this.swiperImages.length - 1) {
					// 判断是否切换到最后一页
					this.isLastSlide = true;
				} else {
					// 判断是否切换到最后一页
					this.isLastSlide = false;
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}
	.imgJump{
		position: absolute;
		bottom:100rpx;
		left:250rpx;
		width: 273rpx;
		height: 85rpx;
		opacity: 0.8;
		z-index: 999999;
	}
	.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>