EpicSoul/xqk/home/home.vue

<template>
	<view style="width: 100vw;position: relative;">
		<!-- <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})` }">
					<template v-if="index == 0" >
						<image :src="showImg('/uploads/20250905/75a01f24cf88d71499d8ae1bf256e913.png')" style="width: 678rpx;" mode="widthFix" ></image>
					</template>
					</view>
				</swiper-item>
			</swiper>
		<!-- </SwipeToNext> -->
		<image @click="gotoPath('/xqk/chapter1/index')" :src="showImg('/uploads/20250905/692abbf32b38257ffb2153651f468a63.png')" class="imgJump" mode=""></image>
		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3" />
		<MusicControl />
	</view>
</template>

<script>
	import AudioControl from '@/components/AudioControl.vue';
	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,
			AudioControl
		},
		data() {
			return {
				isPlaying: false,
				playTimer: null,
				duration: 5000,
				currentIndex: 0,
				navIndex: 0,
				audioUrl: 'https://des.js-dyyj.com/data/2025/09/04/fbc13519-cfe5-4088-89b2-59f138bc23cb.MP3',
				swiperImages: [
					this.showImg('/uploads/20250904/e734717a187c357b63d64d6214de0ca1.gif'),
					// 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://des.js-dyyj.com/data/2025/09/04/bb2921f6-eeac-4f21-b2b7-11c1e3138976.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」阅读体 issue06',
					mpId: 'wx8954209bb3ad489e',
					path: '/xqk/home/home',
					imageUrl: this.showImg('/uploads/20250903/66ff1f3cd63ea776a0203e8e0dd92dda.jpg')
				};
			},
			onShareTimeline() {
				return {
					title: '一只蟹的生命远征｜「Epic Soul」阅读体 issue06',
					query: '',
					imageUrl: this.showImg('/uploads/20250903/66ff1f3cd63ea776a0203e8e0dd92dda.jpg')
				};
			}
			// #endif
		}
	}
</script>

<style lang="scss" scoped>
	.swiper {
		width: 100vw;
		height: 100vh;
	}
	.imgJump{
		position: absolute;
		bottom:120rpx;
		left:247rpx;
		width: 273rpx;
		height: 85rpx;
		opacity: 1;
		z-index: 999999;
	}
	.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;
		display: flex;
		align-items: center;
		justify-content: center;
		.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>