EpicSoul/bmzm/chapter1/index.vue

<template>
    <view>
        <swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
            <swiper-item v-for="(item, index) in swiperItems" :key="index" v-if="index < indexShow">
                <view :class="['swiper-item',{'swiper-item1-10': item.images}]" :style="{ backgroundImage: `url(${item.imageUrl})` }" @click="changeIndex(index)">
                    <!-- 如果是第一章的第10个swiper-item，显示图片并绑定点击事件 -->
                    <template v-if="item.images">
                        <image v-for="(image, imgIndex) in item.images" :key="imgIndex" :src="image.src"
                               mode="aspectFill" @click="setStorage(imgIndex);gotoPath(item.link.replace('{index}', imgIndex + item.linkIndex))"></image>
                    </template>
					<!-- 视频 -->
					<template v-if="index == 3">
						<video src="https://static.ticket.sz-trip.com/epicSoul/bmzm.mp4" style="width: 100vw;height: 30vh;" objectFit="cover"></video>
					</template>
					<!-- 动图 -->
					<template v-if="index == 8">
						<image src="https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img7s.gif" mode="widthFix" style="width: 100vw;"></image>
					</template>
                </view>
            </swiper-item>
        </swiper>
		<MusicControl />
    </view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
export default {
	components: {
	    MusicControl
	},
    data() {
        return {
            currentIndex: 0,
			// 禁止滑动到的索引
			forbiddenIndex: 2,
            initialIndex: 1,
            popupIndex: 1,
            // 抽象出swiper-item的数据
            swiperItems: [
                {
                    imageUrl: `https://static.ticket.sz-trip.com/epicSoul/bmzm/index/index1.png`
                },
                {
                    imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/index/index5.png'
                },
                // 第一章
                ...Array.from({ length: 9 }, (_, i) => ({
                    imageUrl: `https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img${i + 1}.png`
                })),
                {
                    imageUrl: 'https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img10.png',
                    images: Array.from({ length: 4 }, (_, i) => ({
                        src: `https://static.ticket.sz-trip.com/epicSoul/bmzm/chapter1/img10-${i + 1}.png`
                    })),
                    link: '/bmzm/chapter2/index?index={index}',
                    linkIndex: 11
                }
            ],
			indexShow: 3
        };
    },
    onLoad(option) {
        this.initialIndex = option.index;
        // 更新第一个swiper-item的图片路径
        this.swiperItems[0].imageUrl = `https://static.ticket.sz-trip.com/epicSoul/bmzm/index/index${this.initialIndex}.png`;
    },
    methods: {
		touchmove() {
			return this.currentIndex == 2 ? true : false
		},
		changeIndex(index) {
			if(index == 2) this.currentIndex = 3
			this.indexShow = 100
		},
        handleSwiperChange(e) {
			this.currentIndex = e.detail.current;
			if(this.currentIndex == 2) this.indexShow = 3
        },
		// 存储答案，供后面使用
		setStorage(i) {
			let text = ''
			switch (i){
				case 0:
					text = '灵感的捕捉者'
					break;
				case 1:
					text = '众智的编织者'
					break;
				case 2:
					text = '智慧的开启者'
					break;
				case 3:
					text = '自然的尊重者'
					break;
				default:
					break;
			}
			this.appendToStorage('answerObj', { answer2: text });
		}
    }
};
</script>

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

.swiper-item {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
}

.swiper-item1-10 {
    padding: 506rpx 65rpx 370rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    &>image:nth-child(n+1) {
        width: 310rpx;
        height: 316.58rpx;
    }

    &>image:nth-child(n+2) {
        width: 291.61rpx;
        height: 334.55rpx;
    }

    &>image:nth-child(n+3) {
        width: 292.61rpx;
        height: 334.55rpx;
    }

    &>image:nth-child(n+4) {
        width: 309.59rpx;
        height: 317.58rpx;
        margin-top: 15rpx;
    }
}
</style>