EpicSoul/xrcc/chapter3/index.vue

<template>
	<view style="width: 100vw; position: relative;">
		<!-- 滑动拦截遮罩（仅在第5页且未输入内容时显示） -->
		<view 
			v-if="currentIndex === 5 && !inputValue.trim()"
			class="swipe-blocker"
			@click="$refs.customPopup.open()"
		></view>

		<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})` }">
					<!-- 第5页内容 -->
					<template v-if="index === 5">
						<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img6-text.png"
							mode="widthFix" class="img6-text"></image>
						<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img6-btn.png"
							mode="widthFix" class="img6-btn" @click="$refs.customPopup.open()"></image>
					</template>
					
					<!-- 第6页内容 -->
					<template v-if="index === 6">
						<view class="img7-box">
							<view class="img7-textBg">
								<view>你的</view>
								<view style="margin: 10rpx 0;">{{inputValue}}</view>
								<view>已备好</view>
							</view>
							<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img7-text.png"
								mode="widthFix" class="img7-text"></image>
						</view>
					</template>
					
					<template v-if="index === 7">
						<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img8-text.png" mode="widthFix" class="img8-text"></image>
						<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
							class="btn-img" @click="gotoPath('/xrcc/chapter4/index')"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>

		<!-- 输入弹框 -->
		<uni-popup ref="customPopup" type="center">
			<view class="popup-content">
				<textarea v-model="inputValue" class="input-area" placeholder="填写你的“物件”  (可以是一本书、一首歌、一段回忆、一个困惑...)"
					maxlength="20"></textarea>

				<view class="word-count">
					{{ inputValue.length }}/20
				</view>

				<image src="https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img6-btns.png" mode="widthFix" @click="submit" class="confirm-btn"></image>
			</view>
		</uni-popup>
<AudioControl audioSrc="https://des.dayunyuanjian.cn/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: 3,
				swiperImages: [
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img1.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img2s.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img3s.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img4s.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img5s.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img6.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img7.png',
					'https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img8.gif',
				],
				inputValue: '',
				swipeDirection: ''
			}
		},
		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
			},
			handleTouchStart(e) {
				this.startY = e.touches[0].clientY;
			},
			handleTouchMove(e) {
				const moveY = e.touches[0].clientY;
				this.swipeDirection = moveY < this.startY ? 'down' : 'up';
			},
			handleSwiperChange(e) {
				const newIndex = e.detail.current;
				
				if (this.currentIndex === 5 && newIndex === 6 && !this.inputValue.trim()) {
					this.currentIndex = 5;
					uni.showToast({
						title: '请先填写内容才能继续',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				
				this.currentIndex = newIndex;
				if (this.currentIndex === this.swiperImages.length - 1) {
					this.navIndex = 4;
				} else {
					this.navIndex = 3;
				}
			},
			submit() {
				if (!this.inputValue.trim()) return;
				this.$refs.customPopup.close()
				this.currentIndex = 6;
			}
		}
	}
</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;

		.img6-text {
			width: 442.41rpx;
			position: absolute;
			top: 170rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		.img6-btn {
			position: absolute;
			width: 520.31rpx;
			bottom: 210rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}
		
		/* 其他样式保持不变 */
		.img7-box {
			position: relative;
			top: 170rpx;
			margin: 0 auto;
		}
		
		.img7-textBg {
			background-image: url('https://des.dayunyuanjian.cn/epicSoul/xrcc/chapter3/img7-textBg.png');
			background-size: 100% 100%;
			padding: 30rpx 50rpx;
			font-size: 50rpx;
			text-align: center;
			color: #fff;
			width: 520.31rpx;
			margin: 0 auto;
		}
		
		.img7-text {
			display: block;
			margin: 60rpx auto 0;
			width: 447.4rpx;
		}
		
		.img8-text {
			width: 379.49rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}
		
		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 100rpx;
		}
	}

	.swipe-blocker {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9;
	}

	.popup-content {
		width: 85vw;
		background-color: #fff;
		border-radius: 16rpx;
		padding: 40rpx 30rpx;
		box-sizing: border-box;

		.input-area {
			width: 100%;
			min-height: 180rpx;
			padding: 20rpx;
			border: 2rpx solid #eee;
			border-radius: 8rpx;
			font-size: 28rpx;
			resize: none;
			box-sizing: border-box;
			margin-bottom: 15rpx;
		}

		.word-count {
			text-align: right;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 35rpx;
		}

		.confirm-btn {
			width: 100%;
		}
	}
</style>