EpicSoul/xrcc/chapter4/index.vue

<template>
	<view style="width: 100vw;">
		<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 === 3">
						<view class="module-box">
							<image :src="`https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4-${i+1}.png`"
								v-for="i in 5" :key="i" mode="widthFix" :class="['module-img', 'module'+(i+1)]"
								@click="openPopup(i+1)"></image>
						</view>
					</template>
					
					<template v-if="index === 5">
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5-text.png" mode="widthFix" class="img5-text"></image>
						<image src="https://static.ticket.sz-trip.com/epicSoul/xrcc/home/btn-img.png" mode="widthFix"
							class="btn-img" @click="gotoPath('/xrcc/chapter5/index')"></image>
					</template>
				</view>
			</swiper-item>
		</swiper>
		
		<uni-popup ref="chapterPopup">
			<image :src="getImageUrl(`img4-${popupIndex}s.png`)" mode="widthFix" style="width: 600rpx;">
			</image>
		</uni-popup>

		<NavMenu :nav-index="navIndex" @jump-to-page="handleJumpToPage" />

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

<script>
	import MusicControl from '@/components/MusicControl.vue';
	import NavMenu from '../components/NavMenu.vue';
	export default {
		components: {
			MusicControl,
			NavMenu
		},
		data() {
			return {
				currentIndex: 0,
				navIndex: 4,
				swiperImages: [
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img1.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img2.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img3.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img4.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img5s.png',
					'https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/img6.gif',
				],
				popupIndex: 1
			}
		},
		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
			},
			handleSwiperChange(e) {
			    this.currentIndex = e.detail.current;
				if (this.currentIndex == this.swiperImages.length - 1) {
					this.navIndex = 5;
				}else {
					this.navIndex = 4
				}
			},
			openPopup(i) {
				this.popupIndex = i
				this.$refs.chapterPopup.open();
			},
			getImageUrl(path) {
				if (typeof path === 'object') {
					path = path.url;
				}
				return `https://static.ticket.sz-trip.com/epicSoul/xrcc/chapter4/${path}`;
			}
		},
	}
</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;
		
		.img5-text {
			width: 576.23rpx;
			position: absolute;
			top: 170rpx;
			left: 100rpx;
		}
		
		.btn-img {
			position: absolute;
			width: 149.8rpx;
			bottom: 290rpx;
			left: 100rpx;
		}
		
		.module-box {
			position: absolute;
			top: 460rpx;
			text-align: center;
			
			image {
				width: 650rpx;
				margin-bottom: 80rpx;
			}
		}
	}

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