EpicSoul/bmzm/chapter2/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" :style="{ backgroundImage: `url(${getImageUrl(image)})`}"
				@click="image.onClick ? gotoPath('/bmzm/chapter3/index') : null">
                </view>
            </swiper-item>
        </swiper>
		<MusicControl />
		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
		<AudioControl audioSrc="https://des.dayunyuanjian.cn/data/2025/09/05/9875a62d-14ef-481e-b88f-19c061478ce6.MP3" />
    </view>
</template>

<script>
import AudioControl from '@/components/AudioControl.vue';
import MusicControl from '@/components/MusicControl.vue';
import NavMenu from '../components/NavMenu.vue';
export default {
	components: {
	    MusicControl,
		NavMenu,
		AudioControl
	},
    data() {
        return {
            currentIndex: 0,
            initialIndex: 1,
            popupIndex: 1,
            // 图片数据结构
            chapters: [
                {
                    name: 'chapter1',
                    images: [
                        { url: `chapter1/img11.png` }
                    ]
                },
                {
                    name: 'chapter2',
                    images: [
                        { url: 'chapter2/img1.png', onClick: true },
                    ]
                }
            ]
        };
    },
    computed: {
        allImages() {
            return this.chapters.reduce((acc, chapter) => {
                return acc.concat(chapter.images);
            }, []);
        }
    },
    onLoad(option) {
        this.initialIndex = option.index;
        // 更新第一章图片路径
        this.chapters[0].images[0].url = `chapter1/img${this.initialIndex}.png`;
    },
    methods: {
        // 处理 swiper 滑动事件
        handleSwiperChange(e) {
            this.currentIndex = e.detail.current;
        },
        // 生成图片完整 URL
        getImageUrl(path) {
            if (typeof path === 'object') {
                path = path.url;
            }
            return `https://des.dayunyuanjian.cn/epicSoul/bmzm/${path}`;
        }
    }
};
</script>

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

.swiper-item {
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
}
.image-popup {
    width: 700rpx;
}
</style>