refactor(图片预览): 用vant的ImagePreview替换自定义遮罩层实现

移除自定义的遮罩层弹窗代码，改用vant的ImagePreview组件实现图片预览功能统一将图片url字段改为src以适配ImagePreview

refactor(图片预览): 用vant的ImagePreview替换自定义遮罩层实现
移除自定义的遮罩层弹窗代码，改用vant的ImagePreview组件实现图片预览功能统一将图片url字段改为src以适配ImagePreview
hookehuyr
Commit 523668613917b1f874e6b04a7b93eea7777965cf 52366861 1 parent 80fda451
Showing 2 changed files with 36 additions and 82 deletions
src/views/Students.vue
src/views/Volunteers.vue
--- a/src/views/Students.vue
View file @5236686
+++ b/src/views/Students.vue
View file @5236686
@@ -26,7 +26,7 @@
             >
               <div class="image-wrapper">
                 <img
-                  :src="item.url"
+                  :src="item.src"
                   :alt="item.title"
                   :style="{ height: item.height + 'px' }"
                   @load="onImageLoad"
@@ -41,31 +41,6 @@
         </div>
       </van-list>
     </div>
-
-    <!-- 遮罩层弹窗 -->
-    <van-overlay :show="showOverlay" @click="closeOverlay">
-      <div class="overlay-content" @click.stop>
-        <!-- 关闭按钮 -->
-        <div class="close-btn" @click="closeOverlay">
-          <van-icon name="cross" size="1.5rem" color="#fff" />
-        </div>
-
-        <!-- 图片展示 -->
-        <div class="overlay-image-wrapper">
-          <img
-            :src="selectedImage?.url"
-            :alt="selectedImage?.title"
-            class="overlay-image"
-          />
-        </div>
-
-        <!-- 描述内容 -->
-        <div class="overlay-description">
-          <h3 class="overlay-title">{{ selectedImage?.title }}</h3>
-          <p class="overlay-text">{{ selectedImage?.description }}</p>
-        </div>
-      </div>
-    </van-overlay>
   </div>
 </template>
@@ -73,6 +48,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useTitle } from '@vueuse/core';
 import { useRouter } from 'vue-router'
+import { showImagePreview } from 'vant'
 // 导入接口
 import { getImgStreamAPI } from '@/api/index.js'
@@ -91,10 +67,6 @@ const pageSize = 10
 const allImages = ref([])
 const columns = reactive([[], []])
-// 遮罩层相关状态
-const showOverlay = ref(false)
-const selectedImage = ref(null)
-
 // 加载数据
 const onLoad = async () => {
   loading.value = true
@@ -107,12 +79,12 @@ const onLoad = async () => {
       limit: pageSize
     })
-    if (response.code && response.list) {
+    if (response && response.list) {
       const newData = response.list.map(item => ({
         id: item.id,
-        url: item.photo,
+        src: item.photo, // 修改为src，用于ImagePreview
         title: item.post_title,
-        description: item.post_content,
+        description: item.post_excerpt,
         date: item.post_date,
         height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
       }))
@@ -151,17 +123,22 @@ const distributeImages = (images) => {
   })
 }
-// 图片点击事件
+// 图片点击事件 - 使用ImagePreview
 const onImageClick = (item) => {
   console.log('点击图片:', item)
-  selectedImage.value = item
+  
-  showOverlay.value = true
+  // 获取当前点击图片在所有图片中的索引
-}
+  const currentIndex = allImages.value.findIndex(img => img.id === item.id)
-
+  
-// 关闭遮罩层
+  // 提取所有图片的src用于预览
-const closeOverlay = () => {
+  const images = allImages.value.map(img => img.src)
-  showOverlay.value = false
+  
-  selectedImage.value = null
+  // 显示图片预览
+  showImagePreview({
+    images,
+    startPosition: currentIndex,
+    closeable: true
+  })
 }
 // 图片加载成功
--- a/src/views/Volunteers.vue
View file @5236686
+++ b/src/views/Volunteers.vue
View file @5236686
 <!--
  * @Date: 2025-01-01 15:20:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-10-31 13:20:49
+ * @LastEditTime: 2025-10-31 14:37:36
  * @FilePath: /stdj_h5/src/views/Volunteers.vue
  * @Description: 义工页面 - 图片瀑布流展示
 -->
@@ -26,7 +26,7 @@
             >
               <div class="image-wrapper">
                 <img
-                  :src="item.url"
+                  :src="item.src"
                   :alt="item.title"
                   :style="{ height: item.height + 'px' }"
                   @load="onImageLoad"
@@ -41,31 +41,6 @@
         </div>
       </van-list>
     </div>
-
-    <!-- 遮罩层弹窗 -->
-    <van-overlay :show="showOverlay" @click="closeOverlay">
-      <div class="overlay-content" @click.stop>
-        <!-- 关闭按钮 -->
-        <div class="close-btn" @click="closeOverlay">
-          <van-icon name="cross" size="1.5rem" color="#fff" />
-        </div>
-
-        <!-- 图片展示 -->
-        <div class="overlay-image-wrapper">
-          <img
-            :src="selectedImage?.url"
-            :alt="selectedImage?.title"
-            class="overlay-image"
-          />
-        </div>
-
-        <!-- 描述内容 -->
-        <div class="overlay-description">
-          <h3 class="overlay-title">{{ selectedImage?.title }}</h3>
-          <p class="overlay-text">{{ selectedImage?.description }}</p>
-        </div>
-      </div>
-    </van-overlay>
   </div>
 </template>
@@ -73,6 +48,7 @@
 import { ref, reactive, onMounted } from 'vue'
 import { useTitle } from '@vueuse/core';
 import { useRouter } from 'vue-router'
+import { showImagePreview } from 'vant'
 // 导入接口
 import { getImgStreamAPI } from '@/api/index.js'
@@ -91,10 +67,6 @@ const pageSize = 10
 const allImages = ref([])
 const columns = reactive([[], []])
-// 遮罩层相关状态
-const showOverlay = ref(false)
-const selectedImage = ref(null)
-
 // 加载数据
 const onLoad = async () => {
   loading.value = true
@@ -151,17 +123,22 @@ const distributeImages = (images) => {
   })
 }
-// 图片点击事件
+// 图片点击事件 - 使用ImagePreview
 const onImageClick = (item) => {
   console.log('点击图片:', item)
-  selectedImage.value = item
+  
-  showOverlay.value = true
+  // 获取当前点击图片在所有图片中的索引
-}
+  const currentIndex = allImages.value.findIndex(img => img.id === item.id)
-
+  
-// 关闭遮罩层
+  // 提取所有图片的src用于预览
-const closeOverlay = () => {
+  const images = allImages.value.map(img => img.src)
-  showOverlay.value = false
+  
-  selectedImage.value = null
+  // 显示图片预览
+  showImagePreview({
+    images,
+    startPosition: currentIndex,
+    closeable: true
+  })
 }
 // 图片加载成功