EpicSoul/xxdf/chapter3/randomImage.vue

<template>
    <view class="random-image-container">
        <RandomImage :images="randomImages" ref="randomImageRef" />
        <image @click="goBack" class="back-icon" src="https://static.ticket.sz-trip.com/epicSoul/back.png" mode=""></image>
        <image class="save-icon" src="https://static.ticket.sz-trip.com/epicSoul/save-btn.png" mode=""></image>
		<NavMenu :nav-index="0" @jump-to-page="handleJumpToPage" />
    </view>
</template>

<script>
import RandomImage from '../../components/chapter3/RandomImage.vue';
import NavMenu from '../components/NavMenu.vue';
export default {
    components: {
        RandomImage,
		NavMenu
    },
    data() {
        return {
            randomImages: []
        }
    },
    mounted() {
        // 尝试从本地存储获取
        let storedImages = uni.getStorageSync('randomImages');

        // 检查全局数据
        const app = getApp();

        if (storedImages) {
            // 从本地存储恢复
            this.randomImages = JSON.parse(storedImages);
        } else if (app.globalData && app.globalData.randomImages) {
            // 从全局数据获取
            this.randomImages = app.globalData.randomImages;
        } else {
            // 使用默认图片数组
            this.randomImages = [
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image1.png',
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image2.png',
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image3.png',
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image4.png',
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image5.png',
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image6.png',
                'https://static.ticket.sz-trip.com/epicSoul/image/chapter3/random/image7.png'
            ];
        }

        // 等待DOM更新完成
        this.$nextTick(() => {
            if (this.$refs.randomImageRef && this.$refs.randomImageRef.selectRandomImage) {
                this.$refs.randomImageRef.selectRandomImage();
            }
        });
		
		console.log(this.randomImages)
    },
    methods: {
        // 返回第三章封面
        goBack() {
            const app = getApp();
            app.globalData.mainSliderIndex = 4; // 第三章封面的索引
            uni.navigateTo({
                url: '/xxdf/home/home'
            })
        }
    }
}
</script>

<style scoped>
.random-image-container {
    width: 100%;
    height: 100vh;
    position: relative;
}

.back-icon {
    width: 48rpx;
    height: 48rpx;
    position: absolute;
    left: 40rpx;
    top: 107rpx;
    z-index: 10;
}

.save-icon {
    width: 340rpx;
    height: 60rpx;
    position: absolute;
    left: 50%;
    z-index: 10;
    bottom: 14%;
    transform: translate(-50%, -50%);
}
</style>