You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
90 lines
2.1 KiB
90 lines
2.1 KiB
<template>
|
|
<view class="random-image-container">
|
|
<RandomImage :images="randomImages" ref="randomImageRef" />
|
|
<image @click="goBack" class="back-icon" src="/static/back.png" mode=""></image>
|
|
<image class="save-icon" src="/static/save-btn.png" mode=""></image>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {
|
|
ref,
|
|
onMounted,
|
|
nextTick
|
|
} from 'vue';
|
|
import RandomImage from '../../components/chapter3/RandomImage.vue';
|
|
|
|
// 获取传递的图片数组
|
|
const randomImages = ref([]);
|
|
const randomImageRef = ref(null);
|
|
onMounted(() => {
|
|
// 尝试从本地存储获取
|
|
let storedImages = uni.getStorageSync('randomImages');
|
|
|
|
// 检查全局数据
|
|
const app = getApp();
|
|
|
|
if (storedImages) {
|
|
// 从本地存储恢复
|
|
randomImages.value = JSON.parse(storedImages);
|
|
} else if (app.globalData && app.globalData.randomImages) {
|
|
// 从全局数据获取
|
|
randomImages.value = app.globalData.randomImages;
|
|
} else {
|
|
// 使用默认图片数组
|
|
randomImages.value = [
|
|
'/static/images/chapter3/random/image1.png',
|
|
'/static/images/chapter3/random/image2.png',
|
|
'/static/images/chapter3/random/image3.png',
|
|
'/static/images/chapter3/random/image4.png',
|
|
'/static/images/chapter3/random/image5.png',
|
|
'/static/images/chapter3/random/image6.png',
|
|
'/static/images/chapter3/random/image7.png'
|
|
];
|
|
}
|
|
|
|
// 等待组件挂载完成
|
|
nextTick(() => {
|
|
if (randomImageRef.value && randomImageRef.value.selectRandomImage) {
|
|
randomImageRef.value.selectRandomImage();
|
|
}
|
|
});
|
|
});
|
|
|
|
|
|
// 返回第三章封面
|
|
const goBack = () => {
|
|
const app = getApp();
|
|
app.globalData.mainSliderIndex = 4; // 第三章封面的索引
|
|
uni.navigateTo({
|
|
url: '/pages/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: 40rpx;
|
|
z-index: 10;
|
|
}
|
|
|
|
.save-icon {
|
|
width: 340rpx;
|
|
height: 60rpx;
|
|
position: absolute;
|
|
left: 50%;
|
|
z-index: 10;
|
|
bottom: 14%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
</style>
|