EpicSoul/xrcc/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"
		/> -->

		<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="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1-text.png" mode="widthFix" class="img1-text"></image>
					</template>
					<template v-if="index == 1">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2-text.png" mode="widthFix" class="img1-text" style="width: 115.85rpx;"></image>
					</template>
					<template v-if="index == 2">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3-text.png" mode="widthFix" class="img1-text" style="width: 577.23rpx;"></image>
					</template>
					<template v-if="index == 3">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4-text.png" mode="widthFix" class="img4-text"></image>
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix" class="btn-img" @click="gotoPath('/xrcc/chapter1/index')"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>

		<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';
	export default {
		components: {
			MusicControl,
			SinglePlayGif,
			NavMenu
		},
		data() {
			return {
				isPlaying: false,
				playTimer: null,
				duration: 5000,
				currentIndex: 0,
				navIndex: 0,
				swiperImages: [
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img1s.gif',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img2.gif',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img3.gif',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/home/img4.gif'
				]
			}
		},
		onLoad(option) {
			this.currentIndex = option.currentIndex || 0
			if (this.currentIndex == this.swiperImages.length - 1) this.navIndex = 1;
		},
		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) {
			    this.currentIndex = e.detail.current;
				if (this.currentIndex == this.swiperImages.length - 1) {
					this.navIndex = 1;
				}else {
					this.navIndex = 0
				}
			},
		},
		// 微信分享配置
		// #ifdef MP-WEIXIN
		onShareAppMessage() {
			return {
				title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
				mpId: 'wx8954209bb3ad489e',
				path: '/xrcc/home/home',
				imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png'
			};
		},
		onShareTimeline() {
			return {
				title: '今夜,我们都有一艘秘密飞船｜「Epic Soul」阅读体 issue05',
				query: '',
				imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/xrcc/share.png'
			};
		}
		// #endif
	}
</script>

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

	.swiper-item {
		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>