1

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,105 +67,103 @@
     </swiper-item>
   </swiper>
   <MusicControl />
+  </view>
 </template>
 
-<script setup>
+<script>
-import {
+export default {
-  ref,
+  data() {
-  reactive,
+    return {
-  onMounted,
+      currentIndex: 0,
-  watch
+      verticalIndex: 0,
-} from 'vue';
-
-const currentIndex = ref(0);
-const verticalIndex = ref(0);
-
       // 记录主swiper哪些页面已经加载过
-const loadedPages = reactive({
+      loadedPages: {
         0: false,
         1: false,
         2: false,
         3: false
-});
+      },
-
       // 记录嵌套swiper哪些页面已经加载过
-const loadedNestedPages = reactive({
+      loadedNestedPages: {
         0: false,
         1: false,
         2: false
-});
+      },
-
       // 预加载缓冲区大小
-const preloadBuffer = 1;
+      preloadBuffer: 1,
-const nestedPreloadBuffer = 1;
+      nestedPreloadBuffer: 1
-
+    }
+  },
+  computed: {
     // 决定是否应该显示主swiper特定页面的内容
-const shouldShowContent = (index) => {
+    shouldShowContent() {
-  return Math.abs(index - currentIndex.value) <= preloadBuffer;
+      return (index) => {
-};
+        return Math.abs(index - this.currentIndex) <= this.preloadBuffer;
-
+      }
+    },
     // 决定是否应该显示嵌套swiper特定页面的内容
-const shouldShowNestedContent = (index) => {
+    shouldShowNestedContent() {
-  return Math.abs(index - verticalIndex.value) <= nestedPreloadBuffer;
+      return (index) => {
-};
+        return Math.abs(index - this.verticalIndex) <= this.nestedPreloadBuffer;
-
+      }
+    }
+  },
+  watch: {
     // 监听主swiper currentIndex变化，更新已加载页面状态
-watch(currentIndex, (newIndex) => {
+    currentIndex(newIndex) {
       // 标记当前页面和前后buffer页为已加载
-  for (let i = Math.max(0, newIndex - preloadBuffer); i <= Math.min(3, newIndex + preloadBuffer); i++) {
+      for (let i = Math.max(0, newIndex - this.preloadBuffer); i <= Math.min(3, newIndex + this.preloadBuffer); i++) {
-    loadedPages[i] = true;
+        this.loadedPages[i] = true;
       }
       
       // 当切换到第4个item时，初始化嵌套swiper的加载状态
       if (newIndex === 3) {
-    loadedNestedPages[0] = true;
+        this.loadedNestedPages[0] = true;
-    if (nestedPreloadBuffer >= 1) {
+        if (this.nestedPreloadBuffer >= 1) {
-      loadedNestedPages[1] = true;
+          this.loadedNestedPages[1] = true;
         }
       }
-}, { immediate: true });
+    },
-
     // 监听嵌套swiper verticalIndex变化，更新已加载页面状态
-watch(verticalIndex, (newIndex) => {
+    verticalIndex(newIndex) {
       // 只有当主swiper在第4个item时才更新嵌套swiper状态
-  if (currentIndex.value === 3) {
+      if (this.currentIndex === 3) {
         // 标记当前页面和前后buffer页为已加载
-    for (let i = Math.max(0, newIndex - nestedPreloadBuffer); i <= Math.min(2, newIndex + nestedPreloadBuffer); i++) {
+        for (let i = Math.max(0, newIndex - this.nestedPreloadBuffer); i <= Math.min(2, newIndex + this.nestedPreloadBuffer); i++) {
-      loadedNestedPages[i] = true;
+          this.loadedNestedPages[i] = true;
         }
       }
-}, { immediate: true });
+    }
-
+  },
-const handleSwiperChange = (e) => {
+  methods: {
-  currentIndex.value = e.detail.current;
+    handleSwiperChange(e) {
-};
+      this.currentIndex = e.detail.current;
-
+    },
-const handleVerticalChange = (e) => {
+    handleVerticalChange(e) {
-  verticalIndex.value = e.detail.current;
+      this.verticalIndex = e.detail.current;
-};
+    },
-
+    goback() {
-const goback = () => {
       const app = getApp();
       app.globalData.mainSliderIndex = 4;
       uni.navigateTo({
-    url: '/pages/home/home'
+        url: '/xxdf/home/home'
       });
-};
+    }
-
+  },
-onMounted(() => {
+  mounted() {
     // 初始化主swiper，标记第一页和相邻页为已加载
-  currentIndex.value = 0;
+    this.currentIndex = 0;
-  for (let i = 0; i <= Math.min(preloadBuffer, 3); i++) {
+    for (let i = 0; i <= Math.min(this.preloadBuffer, 3); i++) {
-    loadedPages[i] = true;
+      this.loadedPages[i] = true;
     }
     
     // 初始化嵌套swiper的第一页为已加载（以防万一）
-  verticalIndex.value = 0;
+    this.verticalIndex = 0;
-  loadedNestedPages[0] = true;
+    this.loadedNestedPages[0] = true;
-});
+  }
+}
 </script>
 
-
 <style scoped>
 .main-swiper {
   width: 100%;

xxdf/chapter3/cover.vue

@@ -1,16 +1,15 @@
 <template>
+	<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="(e) => handleVerticalChange(e, outerIndex)"
+            <swiper class="nested-swiper" :duration="300" @change="handleVerticalChange" :current="nestedIndices[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=""
+                        <image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '.png'" mode="" :lazy-load="true"></image>
-							: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="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>
@@ -18,13 +17,10 @@
                 <swiper-item>
                     <view class="page-container home-page">
                         <view class="gif-container">
-							<image v-if="shouldLoadContent(outerIndex)" class="gif-style"
+                            <image v-if="shouldLoadContent(outerIndex)" class="gif-style" :src="'/static/3-' + (outerIndex+1) + '-2.gif'" mode="aspectFill" :lazy-load="true"></image>
-								: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=""
+                        <image class="bg-image" :src="'/static/images/chapter3/cover' + (outerIndex+2) + '-1.png'" mode="" :lazy-load="true"></image>
-							:lazy-load="true"></image>
                         <view class="qrcode-content">
                             <image class="qrCode" src="/static/qrcode.png" mode="" :lazy-load="true"></image>
                             <view class="code-txt">
@@ -38,28 +34,21 @@
         <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=""
+                <image @click="goRandomImage" class="cover-txt9" src="/static/images/chapter3/cover9-txt.png" mode="" :lazy-load="true"></image>
-					:lazy-load="true"></image>
             </view>
         </swiper-item>
     </swiper>
     <MusicControl />
+	</view>
 </template>
 
-<script setup>
+<script>
-	import {
+export default {
-		ref,
+    data() {
-		reactive,
+        return {
-		onMounted,
+            currentIndex: 0,
-		onUnmounted,
-		watch,
-		computed
-	} from 'vue';
-
-	const currentIndex = ref(0);
-
             // 嵌套swiper索引
-	const nestedIndices = reactive({
+            nestedIndices: {
                 0: 0,
                 1: 0,
                 2: 0,
@@ -67,10 +56,9 @@
                 4: 0,
                 5: 0,
                 6: 0
-	});
+            },
-
             // 当前活跃的页面，用于内容加载判断
-	const activePages = reactive({
+            activePages: {
                 mainIndex: 0,
                 nestedIndices: {
                     0: 0,
@@ -81,31 +69,28 @@
                     5: 0,
                     6: 0
                 }
-	});
+            },
-
             // 预加载缓冲区大小
-	const preloadBuffer = 2;
+            preloadBuffer: 2
-
+        }
-	const shouldLoadContent = (outerIndex) => {
+    },
-		// 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
+    methods: {
-		return Math.abs(outerIndex - currentIndex.value) <= preloadBuffer &&
-			(nestedIndices[outerIndex] === 1 || activePages.nestedIndices[outerIndex] === 1);
-	};
-
         // 主swiper切换事件处理
-	const handleSwiperChange = (e) => {
+        handleSwiperChange(e) {
-		currentIndex.value = e.detail.current;
+            this.currentIndex = e.detail.current;
-		activePages.mainIndex = e.detail.current;
+            this.activePages.mainIndex = e.detail.current;
-	};
+        },
         
         // 嵌套swiper切换事件处理
-	const handleVerticalChange = (e, outerIndex) => {
+        handleVerticalChange(e) {
-		nestedIndices[outerIndex] = e.detail.current;
+            const outerIndex = parseInt(e.target.dataset.index);
-		activePages.nestedIndices[outerIndex] = e.detail.current;
+            this.nestedIndices[outerIndex] = e.detail.current;
-	};
+            this.activePages.nestedIndices[outerIndex] = e.detail.current;
+        },
         
-	const goRandomImage = () => {
+        goRandomImage() {
-		const imageArray = [{
+            const imageArray = [
+                {
                     id: 1,
                     image: '/static/images/chapter3/random/image1.png',
                     name: '雏菊',
@@ -153,23 +138,36 @@
             app.globalData.randomImages = imageArray;
             uni.setStorageSync('randomImages', JSON.stringify(imageArray));
             uni.navigateTo({
-			url: '/pages/chapter3/randomImage'
+                url: '/xxdf/chapter3/randomImage'
             });
-	};
+        },
         
-	const goback = () => {
+        goback() {
             const app = getApp();
             app.globalData.mainSliderIndex = 4;
             uni.redirectTo({
-			url: '/pages/home/home'
+                url: '/xxdf/home/home'
             });
-	};
+        }
-
+    },
-	onMounted(() => {
+    computed: {
+        shouldLoadContent() {
+            return (outerIndex) => {
+                // 当主索引在附近，且嵌套索引是第二页(GIF页)时预加载
+                return Math.abs(outerIndex - this.currentIndex) <= this.preloadBuffer &&
+                    (this.nestedIndices[outerIndex] === 1 || this.activePages.nestedIndices[outerIndex] === 1);
+            }
+        }
+    },
+    mounted() {
         // 初始化状态
-		currentIndex.value = 0;
+        this.currentIndex = 0;
-		activePages.mainIndex = 0;
+        this.activePages.mainIndex = 0;
-	});
+    },
+    beforeDestroy() {
+        // 组件销毁前的清理工作（如果有）
+    }
+}
 </script>
 
 <style scoped>

xxdf/chapter3/randomImage.vue

@@ -6,18 +6,19 @@
     </view>
 </template>
 
-<script setup>
+<script>
-	import {
-		ref,
-		onMounted,
-		nextTick
-	} from 'vue';
 import RandomImage from '../../components/chapter3/RandomImage.vue';
 
-	// 获取传递的图片数组
+export default {
-	const randomImages = ref([]);
+    components: {
-	const randomImageRef = ref(null);
+        RandomImage
-	onMounted(() => {
+    },
+    data() {
+        return {
+            randomImages: []
+        }
+    },
+    mounted() {
         // 尝试从本地存储获取
         let storedImages = uni.getStorageSync('randomImages');
 
@@ -26,13 +27,13 @@
 
         if (storedImages) {
             // 从本地存储恢复
-			randomImages.value = JSON.parse(storedImages);
+            this.randomImages = JSON.parse(storedImages);
         } else if (app.globalData && app.globalData.randomImages) {
             // 从全局数据获取
-			randomImages.value = app.globalData.randomImages;
+            this.randomImages = app.globalData.randomImages;
         } else {
             // 使用默认图片数组
-			randomImages.value = [
+            this.randomImages = [
                 '/static/images/chapter3/random/image1.png',
                 '/static/images/chapter3/random/image2.png',
                 '/static/images/chapter3/random/image3.png',
@@ -43,23 +44,24 @@
             ];
         }
 
-		// 等待组件挂载完成
+        // 等待DOM更新完成
-		nextTick(() => {
+        this.$nextTick(() => {
-			if (randomImageRef.value && randomImageRef.value.selectRandomImage) {
+            if (this.$refs.randomImageRef && this.$refs.randomImageRef.selectRandomImage) {
-				randomImageRef.value.selectRandomImage();
+                this.$refs.randomImageRef.selectRandomImage();
             }
         });
-	});
+    },
-
+    methods: {
-
         // 返回第三章封面
-	const goBack = () => {
+        goBack() {
             const app = getApp();
             app.globalData.mainSliderIndex = 4; // 第三章封面的索引
             uni.navigateTo({
-			url: '/pages/home/home'
+                url: '/xxdf/home/home'
             })
         }
+    }
+}
 </script>
 
 <style scoped>