EpicSoul/xqk/home/home.vue

<template>
	<view style="width: 100vw;">
		<!-- <SinglePlayGif
			gifSrc="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.gif"
			staticCover="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1.png"
			duration="5000"
		/> -->
		<!-- 触底方法跳转页面组件 -->
		<SwipeToNext 
			:is-last-slide="isLastSlide" 
			:always-enable="swiperImages.length === 1"
			:target-path="'/xqk/chapter1/index'"
			:enable-delay="swiperImages.length > 1"
			@swipe-to-next="handleSwipeToNext"
		>
			<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>
		</SwipeToNext>
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />

		<MusicControl />
	</view>
</template>

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import SinglePlayGif from '../components/SinglePlayGif.vue';
	import NavMenu from '../components/NavMenu.vue';
	import SwipeToNext from '@/components/SwipeToNext.vue';
	export default {
		components: {
			MusicControl,
			SinglePlayGif,
			NavMenu,
			SwipeToNext
		},
		data() {
			return {
				isPlaying: false,
				playTimer: null,
				duration: 5000,
				currentIndex: 0,
				navIndex: 0,
				swiperImages: [
					this.showImg('/uploads/20250903/b4f601dee7b4ad1b42c878fd54693c92.png'),
					// this.showImg('/uploads/20250903/24303e4b7218eaf3d857c846417eb490.png'),
					// this.showImg('/uploads/20250903/17495ef65648c64c31920d312301e991.png'),
					// this.showImg('/uploads/20250903/92d6f1c6f8f7de040f3c31c8faf98927.png'),
				],
				isLastSlide: false // 是否在最后一页
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			// 对于单张图片或初始在最后一页的情况
			if (this.currentIndex == this.swiperImages.length - 1) {
				this.navIndex = 1;
				this.isLastSlide = true;
			}
			// 如果只有一张图片，也认为是最后一页
			if (this.swiperImages.length === 1) {
				this.isLastSlide = true;
			}
		},
		onShow() {
			const app = getApp();
			app.updateMusicSrc('https://static.ticket.sz-trip.com/epicSoul/xrcc/bgm.mp3');
			app.initBackgroundMusic(); // 初始化背景音乐
			uni.$bgMusic.play(); // 播放音乐
		},
		methods: {
			handleJumpToPage(idx) {
				this.navIndex = idx
				if (idx == this.swiperImages.length - 1) this.navIndex = idx + 1
			},
			handleSwiperChange(e) {
				console.log(e);
				this.currentIndex = e.detail.current;
				if (this.currentIndex == this.swiperImages.length - 1) {
					this.navIndex = 1;
					// 判断是否切换到最后一页
					this.isLastSlide = true;
				} else {
					this.navIndex = 0;
					this.isLastSlide = false;
				}
			},
			// 处理滑动跳转事件
			handleSwipeToNext(targetPath) {
				console.log('收到滑动跳转事件，目标路径:', targetPath);
				// 可以在这里添加额外的逻辑，比如数据统计等
			},
			// <!--微信分享配置-- >
			// #ifdef MP-WEIXIN
			onShareAppMessage() {
				return {
					title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
					mpId: 'wx8954209bb3ad489e',
					path: '/xrcc/home/home',
					imageUrl: this.showImg('/uploads/20250903/66ff1f3cd63ea776a0203e8e0dd92dda.jpg')
				};
			},
			onShareTimeline() {
				return {
					title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
					query: '',
					imageUrl: this.showImg('/uploads/20250903/66ff1f3cd63ea776a0203e8e0dd92dda.jpg')
				};
			}
			// #endif
		}
	}
</script>

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

	.swiper-item {
		/* 新增安全区域适配 */
		padding-top: env(safe-area-inset-top);
		/* 顶部安全距离 */
		padding-bottom: env(safe-area-inset-bottom);
		/* 底部安全距离 */
		box-sizing: border-box;
		/* 修改背景尺寸为覆盖模式 */
		background-size: cover;
		width: 100vw;
		height: 100vh;
		// background-size: 100% auto;
		background-position: center center;
		background-color: #000;
		background-repeat: no-repeat;
		position: relative;

		.img1-text {
			position: absolute;
			width: 632.16rpx;
			top: 170rpx;
			left: 0;
			right: 0;
			margin: 0 auto;
		}

		.img4-text {
			position: absolute;
			width: 476.36rpx;
			top: 170rpx;
			left: 84rpx;
		}

		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 84rpx;
		}
	}

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