EpicSoul/bmzm/chapter3/index.vue

<template>
    <view>
        <swiper class="swiper" :current="currentIndex" :vertical="true" @change="handleSwiperChange">
            <!-- 动态渲染 swiper-item -->
            <swiper-item v-for="(image, imageIndex) in allImages" :key="imageIndex">
                <view :class="['swiper-item', {'swiper-item2-4': image.hasSubImage, 'swiper-item2-10': image.hasSubImages}]" :style="{ backgroundImage: `url(${getImageUrl(image)})` }">
                    <!-- 特殊处理需要显示小图片的情况 -->
                    <template v-if="image.hasSubImage || image.hasSubImages">
                        <image
                            v-for="(subImage, subIndex) in image.subImages"
                            :key="subIndex"
                            :src="getImageUrl(subImage)"
                            mode="aspectFill"
                            @click="click(image,subIndex+1)"
                        ></image>
                    </template>
                </view>
            </swiper-item>
        </swiper>

        <!-- 第二章 第四节弹框 -->
        <uni-popup ref="chapterPopup" type="center">
            <image
                :src="getImageUrl(`chapter2/img4-${popupIndex}s.png`)"
                mode="widthFix"
                class="image-popup"
            ></image>
        </uni-popup>
		
		<MusicControl />
    </view>
</template>

<script>
import MusicControl from '@/components/MusicControl.vue';
export default {
	components: {
	    MusicControl
	},
    data() {
        return {
            currentIndex: 0,
            initialIndex: 1,
            popupIndex: 1,
            // 图片数据结构
            chapters: [
                {
                    name: 'chapter2',
                    images: [
                        { url: 'chapter2/img2.png' },
                        { url: 'chapter2/img3.png' },
                        {
                            url: 'chapter2/img4.png',
                            hasSubImage: true,
                            subImages: Array.from({ length: 4 }, (_, i) => `chapter2/img4-${i + 1}.png`)
                        },
                        { url: 'chapter2/img5.png' },
                        { url: 'chapter2/img6.png' },
                        { url: 'chapter2/img7.png' },
                        { url: 'chapter2/img8.png' },
                        // { url: 'chapter2/img9.png' },
                        {
                            url: 'chapter2/img10.png',
                            hasSubImages: true,
                            subImages: Array.from({ length: 4 }, (_, i) => `chapter2/img10-${i + 1}.png`)
                        }
                    ]
                }
            ]
        };
    },
    computed: {
        allImages() {
            return this.chapters.reduce((acc, chapter) => {
                return acc.concat(chapter.images);
            }, []);
        }
    },
    methods: {
        // 处理 swiper 滑动事件
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
        },
		click(item,index) {
			if(item.hasSubImage) {
				this.openPopup(index)
			}else if(item.hasSubImages) {
				let text = ''
				switch (index){
					case 1:
						text = '文字的秩序'
						break;
					case 2:
						text = '诗歌的温度'
						break;
					case 3:
						text = '世界的经纬'
						break;
					case 4:
						text = '禅思的哲学'
						break;
					default:
						break;
				}
				this.appendToStorage('answerObj', { answer3: text });
				this.gotoPath(`/bmzm/chapter4/index?index=${index + 10}`)
			}
		},
        // 打开第二章第四节弹框
        openPopup(index) {
            this.popupIndex = index;
            this.$refs.chapterPopup.open();
        },
        // 生成图片完整 URL
        getImageUrl(path) {
            if (typeof path === 'object') {
                path = path.url;
            }
            return `https://static.ticket.sz-trip.com/epicSoul/bmzm/${path}`;
        }
    }
};
</script>

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

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

.swiper-item2-4 {
    padding: 160rpx 50rpx 500rpx;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

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

.swiper-item2-10 {
    padding: 600rpx 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;
    }
}

.image-popup {
    width: 700rpx;
}
</style>