From 90a5452779774859889ebfcf0fac108d971758e1 Mon Sep 17 00:00:00 2001
From: jiazhipeng <jiazhipeng@xmainc.com>
Date: Tue, 1 Jul 2025 17:06:49 +0800
Subject: [PATCH] 1

---
 xxdf/chapter2/cover.vue       | 253 ++++++++---------
 xxdf/chapter3/cover.vue       | 506 +++++++++++++++++-----------------
 xxdf/chapter3/randomImage.vue | 156 +++++------
 3 files changed, 458 insertions(+), 457 deletions(-)

diff --git a/xxdf/chapter2/cover.vue b/xxdf/chapter2/cover.vue
index c32ef1b..bf793bb 100644
--- a/xxdf/chapter2/cover.vue
+++ b/xxdf/chapter2/cover.vue
@@ -1,4 +1,7 @@
 <template>
+	<view>
+		
+	
   <swiper class="main-swiper" :current="currentIndex" @change="handleSwiperChange" :duration="300">
     <!-- 主swiper的第一个item -->
     <swiper-item>
@@ -64,138 +67,136 @@
     </swiper-item>
   </swiper>
   <MusicControl />
+  </view>
 </template>
 
-<script setup>
-import {
-  ref,
-  reactive,
-  onMounted,
-  watch
-} from 'vue';
-
-const currentIndex = ref(0);
-const verticalIndex = ref(0);
-
-// 记录主swiper哪些页面已经加载过
-const loadedPages = reactive({
-  0: false,
-  1: false,
-  2: false,
-  3: false
-});
-
-// 记录嵌套swiper哪些页面已经加载过
-const loadedNestedPages = reactive({
-  0: false,
-  1: false,
-  2: false
-});
-
-// 预加载缓冲区大小
-const preloadBuffer = 1;
-const nestedPreloadBuffer = 1;
-
-// 决定是否应该显示主swiper特定页面的内容
-const shouldShowContent = (index) => {
-  return Math.abs(index - currentIndex.value) <= preloadBuffer;
-};
-
-// 决定是否应该显示嵌套swiper特定页面的内容
-const shouldShowNestedContent = (index) => {
-  return Math.abs(index - verticalIndex.value) <= nestedPreloadBuffer;
-};
-
-// 监听主swiper currentIndex变化，更新已加载页面状态
-watch(currentIndex, (newIndex) => {
-  // 标记当前页面和前后buffer页为已加载
-  for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) {
-    loadedPages[i] = true;
-  }
-  
-  // 当切换到第4个item时，初始化嵌套swiper的加载状态
-  if (newIndex === 3) {
-    loadedNestedPages[0] = true;
-    if (nestedPreloadBuffer >= 1) {
-      loadedNestedPages[1] = true;
+<script>
+export default {
+  data() {
+    return {
+      currentIndex: 0,
+      verticalIndex: 0,
+      // 记录主swiper哪些页面已经加载过
+      loadedPages: {
+        0: false,
+        1: false,
+        2: false,
+        3: false
+      },
+      // 记录嵌套swiper哪些页面已经加载过
+      loadedNestedPages: {
+        0: false,
+        1: false,
+        2: false
+      },
+      // 预加载缓冲区大小
+      preloadBuffer: 1,
+      nestedPreloadBuffer: 1
     }
-  }
-}, { immediate: true });
-
-// 监听嵌套swiper verticalIndex变化，更新已加载页面状态
-watch(verticalIndex, (newIndex) => {
-  // 只有当主swiper在第4个item时才更新嵌套swiper状态
-  if (currentIndex.value === 3) {
-    // 标记当前页面和前后buffer页为已加载
-    for (let i = Math.max(0, newIndex - nestedPreloadBuffer); i <= Math.min(2, newIndex + nestedPreloadBuffer); i++) {
-      loadedNestedPages[i] = true;
+  },
+  computed: {
+    // 决定是否应该显示主swiper特定页面的内容
+    shouldShowContent() {
+      return (index) => {
+        return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
+      }
+    },
+    // 决定是否应该显示嵌套swiper特定页面的内容
+    shouldShowNestedContent() {
+      return (index) => {
+        return Math.abs(index - this.verticalIndex) <= this.nestedPreloadBuffer;
+      }
     }
+  },
+  watch: {
+    // 监听主swiper currentIndex变化，更新已加载页面状态
+    currentIndex(newIndex) {
+      // 标记当前页面和前后buffer页为已加载
+      for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this.preloadBuffer); i++) {
+        this.loadedPages[i] = true;
+      }
+      
+      // 当切换到第4个item时，初始化嵌套swiper的加载状态
+      if (newIndex === 3) {
+        this.loadedNestedPages[0] = true;
+        if (this.nestedPreloadBuffer >= 1) {
+          this.loadedNestedPages[1] = true;
+        }
+      }
+    },
+    // 监听嵌套swiper verticalIndex变化，更新已加载页面状态
+    verticalIndex(newIndex) {
+      // 只有当主swiper在第4个item时才更新嵌套swiper状态
+      if (this.currentIndex === 3) {
+        // 标记当前页面和前后buffer页为已加载
+        for (let i = Math.max(0, newIndex - this.nestedPreloadBuffer); i <= Math.min(2, newIndex + this.nestedPreloadBuffer); i++) {
+          this.loadedNestedPages[i] = true;
+        }
+      }
+    }
+  },
+  methods: {
+    handleSwiperChange(e) {
+      this.currentIndex = e.detail.current;
+    },
+    handleVerticalChange(e) {
+      this.verticalIndex = e.detail.current;
+    },
+    goback() {
+      const app = getApp();
+      app.globalData.mainSliderIndex = 4;
+      uni.navigateTo({
+        url: '/xxdf/home/home'
+      });
+    }
+  },
+  mounted() {
+    // 初始化主swiper，标记第一页和相邻页为已加载
+    this.currentIndex = 0;
+    for (let i = 0; i <= Math.min(this.preloadBuffer, 3); i++) {
+      this.loadedPages[i] = true;
+    }
+    
+    // 初始化嵌套swiper的第一页为已加载（以防万一）
+    this.verticalIndex = 0;
+    this.loadedNestedPages[0] = true;
   }
-}, { immediate: true });
-
-const handleSwiperChange = (e) => {
-  currentIndex.value = e.detail.current;
-};
-
-const handleVerticalChange = (e) => {
-  verticalIndex.value = e.detail.current;
-};
-
-const goback = () => {
-  const app = getApp();
-  app.globalData.mainSliderIndex = 4;
-  uni.navigateTo({
-    url: '/pages/home/home'
-  });
-};
-
-onMounted(() => {
-  // 初始化主swiper，标记第一页和相邻页为已加载
-  currentIndex.value = 0;
-  for (let i = 0; i <= Math.min(preloadBuffer, 3); i++) {
-    loadedPages[i] = true;
-  }
-  
-  // 初始化嵌套swiper的第一页为已加载（以防万一）
-  verticalIndex.value = 0;
-  loadedNestedPages[0] = true;
-});
+}
 </script>
 
-
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
-	.nested-swiper {
-	  width: 100%;
-	  height: 100vh;
-	}
-	.page-container {
-		height: 100vh;
-	}
-
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
-
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 12%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 250rpx;
-		height: 60rpx;
-	}
+.main-swiper {
+  width: 100%;
+  height: 100vh;
+}
+.nested-swiper {
+  width: 100%;
+  height: 100vh;
+}
+.page-container {
+  height: 100vh;
+}
+
+.home-page {
+  position: relative;
+  overflow: hidden;
+}
+
+.bg-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+}
+.btn {
+  position: absolute;
+  left: 50%;
+  bottom: 12%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+  width: 250rpx;
+  height: 60rpx;
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter3/cover.vue b/xxdf/chapter3/cover.vue
index 371607e..a4fcfe2 100644
--- a/xxdf/chapter3/cover.vue
+++ b/xxdf/chapter3/cover.vue
@@ -1,276 +1,274 @@
 <template>
-	<swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
-		<swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
-			<swiper class="nested-swiper" :duration="300" @change="(e) => handleVerticalChange(e, outerIndex)"
-				:current="nestedIndices[outerIndex]">
-				<!-- 嵌套swiper的第一个item（封面页） -->
-				<swiper-item>
-					<view class="page-container home-page">
-						<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}.png`" mode=""
-							:lazy-load="true"></image>
-						<image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}"
-							:src="`/static/images/chapter3/cover${outerIndex+2}-txt.png`" mode="" :lazy-load="true">
-						</image>
-						<image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image>
-					</view>
-				</swiper-item>
-				<!-- 嵌套swiper的第二个item-->
-				<swiper-item>
-					<view class="page-container home-page">
-						<view class="gif-container">
-							<image v-if="shouldLoadContent(outerIndex)" class="gif-style"
-								:src="`/static/3-${outerIndex+1}-2.gif`" mode="aspectFill" :lazy-load="true">
-							</image>
-						</view>
+	<view>
+		
+	
+    <swiper class="main-swiper" :vertical="true" :current="currentIndex" @change="handleSwiperChange" :duration="300">
+        <swiper-item v-for="(_, outerIndex) in 7" :key="outerIndex">
+            <swiper class="nested-swiper" :duration="300" @change="handleVerticalChange" :current="nestedIndices[outerIndex]">
+                <!-- 嵌套swiper的第一个item（封面页） -->
+                <swiper-item>
+                    <view class="page-container home-page">
+                        <image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '.png'" mode="" :lazy-load="true"></image>
+                        <image class="cover-txt" :class="{'cover-txt2': outerIndex > 0}" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-txt.png'" mode="" :lazy-load="true"></image>
+                        <image class="btn" src="/static/seek2-btn.png" mode="" :lazy-load="true"></image>
+                    </view>
+                </swiper-item>
+                <!-- 嵌套swiper的第二个item-->
+                <swiper-item>
+                    <view class="page-container home-page">
+                        <view class="gif-container">
+                            <image v-if="shouldLoadContent(outerIndex)" class="gif-style" :src="'/static/3-' + (outerIndex+1) + '-2.gif'" mode="aspectFill" :lazy-load="true"></image>
+                        </view>
 
-						<image class="bg-image" :src="`/static/images/chapter3/cover${outerIndex+2}-1.png`" mode=""
-							:lazy-load="true"></image>
-						<view class="qrcode-content">
-							<image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image>
-							<view class="code-txt">
-								扫码下单
-							</view>
-						</view>
-					</view>
-				</swiper-item>
-			</swiper>
-		</swiper-item>
-		<swiper-item>
-			<view class="page-container home-page">
-				<image class="bg-image" src="/static/images/chapter3/cover9.png" mode="" :lazy-load="true"></image>
-				<image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode=""
-					:lazy-load="true"></image>
-			</view>
-		</swiper-item>
-	</swiper>
-	<MusicControl />
+                        <image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-1.png'" mode="" :lazy-load="true"></image>
+                        <view class="qrcode-content">
+                            <image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image>
+                            <view class="code-txt">
+                                扫码下单
+                            </view>
+                        </view>
+                    </view>
+                </swiper-item>
+            </swiper>
+        </swiper-item>
+        <swiper-item>
+            <view class="page-container home-page">
+                <image class="bg-image" src="/static/images/chapter3/cover9.png" mode="" :lazy-load="true"></image>
+                <image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode="" :lazy-load="true"></image>
+            </view>
+        </swiper-item>
+    </swiper>
+    <MusicControl />
+	</view>
 </template>
 
-<script setup>
-	import {
-		ref,
-		reactive,
-		onMounted,
-		onUnmounted,
-		watch,
-		computed
-	} from 'vue';
+<script>
+export default {
+    data() {
+        return {
+            currentIndex: 0,
+            // 嵌套swiper索引
+            nestedIndices: {
+                0: 0,
+                1: 0,
+                2: 0,
+                3: 0,
+                4: 0,
+                5: 0,
+                6: 0
+            },
+            // 当前活跃的页面，用于内容加载判断
+            activePages: {
+                mainIndex: 0,
+                nestedIndices: {
+                    0: 0,
+                    1: 0,
+                    2: 0,
+                    3: 0,
+                    4: 0,
+                    5: 0,
+                    6: 0
+                }
+            },
+            // 预加载缓冲区大小
+            preloadBuffer: 2
+        }
+    },
+    methods: {
+        // 主swiper切换事件处理
+        handleSwiperChange(e) {
+            this.currentIndex = e.detail.current;
+            this.activePages.mainIndex = e.detail.current;
+        },
+        
+        // 嵌套swiper切换事件处理
+        handleVerticalChange(e) {
+            const outerIndex = parseInt(e.target.dataset.index);
+            this.nestedIndices[outerIndex] = e.detail.current;
+            this.activePages.nestedIndices[outerIndex] = e.detail.current;
+        },
+        
+        goRandomImage() {
+            const imageArray = [
+                {
+                    id: 1,
+                    image: '/static/images/chapter3/random/image1.png',
+                    name: '雏菊',
+                    desc: '宋 丛菊图页'
+                },
+                {
+                    id: 2,
+                    image: '/static/images/chapter3/random/image2.png',
+                    name: '杜鹃',
+                    desc: '清 恽寿平 花卉十开 杜鹃'
+                },
+                {
+                    id: 3,
+                    image: '/static/images/chapter3/random/image3.png',
+                    name: '金桂',
+                    desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
+                },
+                {
+                    id: 4,
+                    image: '/static/images/chapter3/random/image4.png',
+                    name: '绿梅',
+                    desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
+                },
+                {
+                    id: 5,
+                    image: '/static/images/chapter3/random/image5.png',
+                    name: '墨兰',
+                    desc: '宋 秋兰绽蕊图'
+                },
+                {
+                    id: 6,
+                    image: '/static/images/chapter3/random/image6.png',
+                    name: '茉莉',
+                    desc: '宋 茉莉花图页'
+                },
+                {
+                    id: 7,
+                    image: '/static/images/chapter3/random/image7.png',
+                    name: '青莲',
+                    desc: '宋 出水芙蓉图页'
+                },
+            ];
 
-	const currentIndex = ref(0);
-
-	// 嵌套swiper索引
-	const nestedIndices = reactive({
-		0: 0,
-		1: 0,
-		2: 0,
-		3: 0,
-		4: 0,
-		5: 0,
-		6: 0
-	});
-
-	// 当前活跃的页面，用于内容加载判断
-	const activePages = reactive({
-		mainIndex: 0,
-		nestedIndices: {
-			0: 0,
-			1: 0,
-			2: 0,
-			3: 0,
-			4: 0,
-			5: 0,
-			6: 0
-		}
-	});
-
-	// 预加载缓冲区大小
-	const preloadBuffer = 2;
-
-	const shouldLoadContent = (outerIndex) => {
-		// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
-		return Math.abs(outerIndex - currentIndex.value) <= preloadBuffer &&
-			(nestedIndices[outerIndex] === 1 || activePages.nestedIndices[outerIndex] === 1);
-	};
-
-	// 主swiper切换事件处理
-	const handleSwiperChange = (e) => {
-		currentIndex.value = e.detail.current;
-		activePages.mainIndex = e.detail.current;
-	};
-
-	// 嵌套swiper切换事件处理
-	const handleVerticalChange = (e, outerIndex) => {
-		nestedIndices[outerIndex] = e.detail.current;
-		activePages.nestedIndices[outerIndex] = e.detail.current;
-	};
-
-	const goRandomImage = () => {
-		const imageArray = [{
-				id: 1,
-				image: '/static/images/chapter3/random/image1.png',
-				name: '雏菊',
-				desc: '宋 丛菊图页'
-			},
-			{
-				id: 2,
-				image: '/static/images/chapter3/random/image2.png',
-				name: '杜鹃',
-				desc: '清 恽寿平 花卉十开 杜鹃'
-			},
-			{
-				id: 3,
-				image: '/static/images/chapter3/random/image3.png',
-				name: '金桂',
-				desc: '清 蒋延锡 桂花图 局部 台北故宫博物馆院藏'
-			},
-			{
-				id: 4,
-				image: '/static/images/chapter3/random/image4.png',
-				name: '绿梅',
-				desc: '北宋 赵佶 梅花秀眼图页 北京故宫博物院藏'
-			},
-			{
-				id: 5,
-				image: '/static/images/chapter3/random/image5.png',
-				name: '墨兰',
-				desc: '宋 秋兰绽蕊图'
-			},
-			{
-				id: 6,
-				image: '/static/images/chapter3/random/image6.png',
-				name: '茉莉',
-				desc: '宋 茉莉花图页'
-			},
-			{
-				id: 7,
-				image: '/static/images/chapter3/random/image7.png',
-				name: '青莲',
-				desc: '宋 出水芙蓉图页'
-			},
-		];
-
-		const app = getApp();
-		app.globalData.randomImages = imageArray;
-		uni.setStorageSync('randomImages', JSON.stringify(imageArray));
-		uni.navigateTo({
-			url: '/pages/chapter3/randomImage'
-		});
-	};
-
-	const goback = () => {
-		const app = getApp();
-		app.globalData.mainSliderIndex = 4;
-		uni.redirectTo({
-			url: '/pages/home/home'
-		});
-	};
-
-	onMounted(() => {
-		// 初始化状态
-		currentIndex.value = 0;
-		activePages.mainIndex = 0;
-	});
+            const app = getApp();
+            app.globalData.randomImages = imageArray;
+            uni.setStorageSync('randomImages', JSON.stringify(imageArray));
+            uni.navigateTo({
+                url: '/xxdf/chapter3/randomImage'
+            });
+        },
+        
+        goback() {
+            const app = getApp();
+            app.globalData.mainSliderIndex = 4;
+            uni.redirectTo({
+                url: '/xxdf/home/home'
+            });
+        }
+    },
+    computed: {
+        shouldLoadContent() {
+            return (outerIndex) => {
+                // 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
+                return Math.abs(outerIndex - this.currentIndex) <= this.preloadBuffer &&
+                    (this.nestedIndices[outerIndex] === 1 || this.activePages.nestedIndices[outerIndex] === 1);
+            }
+        }
+    },
+    mounted() {
+        // 初始化状态
+        this.currentIndex = 0;
+        this.activePages.mainIndex = 0;
+    },
+    beforeDestroy() {
+        // 组件销毁前的清理工作（如果有）
+    }
+}
 </script>
 
 <style scoped>
-	.main-swiper {
-		width: 100%;
-		height: 100vh;
-	}
+.main-swiper {
+    width: 100%;
+    height: 100vh;
+}
 
-	.nested-swiper {
-		width: 100%;
-		height: 100vh;
-	}
+.nested-swiper {
+    width: 100%;
+    height: 100vh;
+}
 
-	.page-container {
-		height: 100vh;
-	}
+.page-container {
+    height: 100vh;
+}
 
-	.home-page {
-		position: relative;
-		overflow: hidden;
-	}
+.home-page {
+    position: relative;
+    overflow: hidden;
+}
 
-	.bg-image {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: 1;
-	}
+.bg-image {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+}
 
-	.cover-txt {
-		position: absolute;
-		left: 50%;
-		bottom: 22%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 74%;
-		height: 122rpx;
-	}
+.cover-txt {
+    position: absolute;
+    left: 50%;
+    bottom: 22%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 74%;
+    height: 122rpx;
+}
 
-	.cover-txt2 {
-		width: 60% !important;
-		height: 134rpx !important;
-	}
+.cover-txt2 {
+    width: 60% !important;
+    height: 134rpx !important;
+}
 
-	.cover-txt9 {
-		position: absolute;
-		left: 50%;
-		bottom: 0;
-		transform: translate(-50%, -20%);
-		z-index: 2;
-		width: 360rpx;
-		height: 280rpx;
-	}
+.cover-txt9 {
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, -20%);
+    z-index: 2;
+    width: 360rpx;
+    height: 280rpx;
+}
 
-	.btn {
-		position: absolute;
-		left: 50%;
-		bottom: 16%;
-		transform: translate(-50%, -50%);
-		z-index: 2;
-		width: 244rpx;
-		height: 60rpx;
-	}
+.btn {
+    position: absolute;
+    left: 50%;
+    bottom: 16%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    width: 244rpx;
+    height: 60rpx;
+}
 
-	.qrcode-content {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		position: absolute;
-		left: 50%;
-		bottom: 0;
-		transform: translate(-50%, -25%);
-		z-index: 2;
-	}
+.qrcode-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    left: 50%;
+    bottom: 0;
+    transform: translate(-50%, -25%);
+    z-index: 2;
+}
 
-	.qrCode {
-		width: 200rpx;
-		height: 200rpx;
-	}
+.qrCode {
+    width: 200rpx;
+    height: 200rpx;
+}
 
-	.code-txt {
-		color: #333;
-		font-size: 24rpx;
-		margin-top: 10rpx;
-	}
+.code-txt {
+    color: #333;
+    font-size: 24rpx;
+    margin-top: 10rpx;
+}
 
-	.gif-container {
-		background: #333333;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 400rpx;
-		z-index: 2;
-	}
+.gif-container {
+    background: #333333;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 400rpx;
+    z-index: 2;
+}
 
-	.gif-style {
-		width: 100%;
-		height: 100%;
-		object-fit: cover;
-	}
+.gif-style {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
 </style>
\ No newline at end of file
diff --git a/xxdf/chapter3/randomImage.vue b/xxdf/chapter3/randomImage.vue
index 3b9f1ed..2f6b248 100644
--- a/xxdf/chapter3/randomImage.vue
+++ b/xxdf/chapter3/randomImage.vue
@@ -1,90 +1,92 @@
 <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>
+    <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';
+<script>
+import RandomImage from '../../components/chapter3/RandomImage.vue';
 
-	// 获取传递的图片数组
-	const randomImages = ref([]);
-	const randomImageRef = ref(null);
-	onMounted(() => {
-		// 尝试从本地存储获取
-		let storedImages = uni.getStorageSync('randomImages');
+export default {
+    components: {
+        RandomImage
+    },
+    data() {
+        return {
+            randomImages: []
+        }
+    },
+    mounted() {
+        // 尝试从本地存储获取
+        let storedImages = uni.getStorageSync('randomImages');
 
-		// 检查全局数据
-		const app = getApp();
+        // 检查全局数据
+        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'
-			];
-		}
+        if (storedImages) {
+            // 从本地存储恢复
+            this.randomImages = JSON.parse(storedImages);
+        } else if (app.globalData && app.globalData.randomImages) {
+            // 从全局数据获取
+            this.randomImages = app.globalData.randomImages;
+        } else {
+            // 使用默认图片数组
+            this.randomImages = [
+                '/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'
-		})
-	}
+        // 等待DOM更新完成
+        this.$nextTick(() => {
+            if (this.$refs.randomImageRef && this.$refs.randomImageRef.selectRandomImage) {
+                this.$refs.randomImageRef.selectRandomImage();
+            }
+        });
+    },
+    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;
-	}
+.random-image-container {
+    width: 100%;
+    height: 100vh;
+    position: relative;
+}
 
-	.back-icon {
-		width: 48rpx;
-		height: 48rpx;
-		position: absolute;
-		left: 40rpx;
-		top: 40rpx;
-		z-index: 10;
-	}
+.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%);
-	}
+.save-icon {
+    width: 340rpx;
+    height: 60rpx;
+    position: absolute;
+    left: 50%;
+    z-index: 10;
+    bottom: 14%;
+    transform: translate(-50%, -50%);
+}
 </style>
\ No newline at end of file