Hooke / stdj_h5

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
52366861 1 parent 80fda451

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

移除自定义的遮罩层弹窗代码，改用vant的ImagePreview组件实现图片预览功能
统一将图片url字段改为src以适配ImagePreview
Inline Side-by-side
Showing 2 changed files with 34 additions and 80 deletions
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 > 26 >
27 <div class="image-wrapper"> 27 <div class="image-wrapper">
28 <img 28 <img
29 - :src="item.url" 29 + :src="item.src"
30 :alt="item.title" 30 :alt="item.title"
31 :style="{ height: item.height + 'px' }" 31 :style="{ height: item.height + 'px' }"
32 @load="onImageLoad" 32 @load="onImageLoad"
...@@ -41,31 +41,6 @@ ...@@ -41,31 +41,6 @@
41 </div> 41 </div>
42 </van-list> 42 </van-list>
43 </div> 43 </div>
44 -
45 - <!-- 遮罩层弹窗 -->
46 - <van-overlay :show="showOverlay" @click="closeOverlay">
47 - <div class="overlay-content" @click.stop>
48 - <!-- 关闭按钮 -->
49 - <div class="close-btn" @click="closeOverlay">
50 - <van-icon name="cross" size="1.5rem" color="#fff" />
51 - </div>
52 -
53 - <!-- 图片展示 -->
54 - <div class="overlay-image-wrapper">
55 - <img
56 - :src="selectedImage?.url"
57 - :alt="selectedImage?.title"
58 - class="overlay-image"
59 - />
60 - </div>
61 -
62 - <!-- 描述内容 -->
63 - <div class="overlay-description">
64 - <h3 class="overlay-title">{{ selectedImage?.title }}</h3>
65 - <p class="overlay-text">{{ selectedImage?.description }}</p>
66 - </div>
67 - </div>
68 - </van-overlay>
69 </div> 44 </div>
70 </template> 45 </template>
71 46
...@@ -73,6 +48,7 @@ ...@@ -73,6 +48,7 @@
73 import { ref, reactive, onMounted } from 'vue' 48 import { ref, reactive, onMounted } from 'vue'
74 import { useTitle } from '@vueuse/core'; 49 import { useTitle } from '@vueuse/core';
75 import { useRouter } from 'vue-router' 50 import { useRouter } from 'vue-router'
51 +import { showImagePreview } from 'vant'
76 52
77 // 导入接口 53 // 导入接口
78 import { getImgStreamAPI } from '@/api/index.js' 54 import { getImgStreamAPI } from '@/api/index.js'
...@@ -91,10 +67,6 @@ const pageSize = 10 ...@@ -91,10 +67,6 @@ const pageSize = 10
91 const allImages = ref([]) 67 const allImages = ref([])
92 const columns = reactive([[], []]) 68 const columns = reactive([[], []])
93 69
94 -// 遮罩层相关状态
95 -const showOverlay = ref(false)
96 -const selectedImage = ref(null)
97 -
98 // 加载数据 70 // 加载数据
99 const onLoad = async () => { 71 const onLoad = async () => {
100 loading.value = true 72 loading.value = true
...@@ -107,12 +79,12 @@ const onLoad = async () => { ...@@ -107,12 +79,12 @@ const onLoad = async () => {
107 limit: pageSize 79 limit: pageSize
108 }) 80 })
109 81
110 - if (response.code && response.list) { 82 + if (response && response.list) {
111 const newData = response.list.map(item => ({ 83 const newData = response.list.map(item => ({
112 id: item.id, 84 id: item.id,
113 - url: item.photo, 85 + src: item.photo, // 修改为src，用于ImagePreview
114 title: item.post_title, 86 title: item.post_title,
115 - description: item.post_content, 87 + description: item.post_excerpt,
116 date: item.post_date, 88 date: item.post_date,
117 height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局 89 height: Math.floor(Math.random() * 200) + 200 // 随机高度用于瀑布流布局
118 })) 90 }))
...@@ -151,17 +123,22 @@ const distributeImages = (images) => { ...@@ -151,17 +123,22 @@ const distributeImages = (images) => {
151 }) 123 })
152 } 124 }
153 125
154 -// 图片点击事件 126 +// 图片点击事件 - 使用ImagePreview
155 const onImageClick = (item) => { 127 const onImageClick = (item) => {
156 console.log('点击图片:', item) 128 console.log('点击图片:', item)
157 - selectedImage.value = item
158 - showOverlay.value = true
159 -}
160 129
161 -// 关闭遮罩层 130 + // 获取当前点击图片在所有图片中的索引
162 -const closeOverlay = () => { 131 + const currentIndex = allImages.value.findIndex(img => img.id === item.id)
163 - showOverlay.value = false 132 +
164 - selectedImage.value = null 133 + // 提取所有图片的src用于预览
134 + const images = allImages.value.map(img => img.src)
135 +
136 + // 显示图片预览
137 + showImagePreview({
138 + images,
139 + startPosition: currentIndex,
140 + closeable: true
141 + })
165 } 142 }
166 143
167 // 图片加载成功 144 // 图片加载成功
......
1 <!-- 1 <!--
2 * @Date: 2025-01-01 15:20:00 2 * @Date: 2025-01-01 15:20:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-10-31 13:20:49 4 + * @LastEditTime: 2025-10-31 14:37:36
5 * @FilePath: /stdj_h5/src/views/Volunteers.vue 5 * @FilePath: /stdj_h5/src/views/Volunteers.vue
6 * @Description: 义工页面 - 图片瀑布流展示 6 * @Description: 义工页面 - 图片瀑布流展示
7 --> 7 -->
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
26 > 26 >
27 <div class="image-wrapper"> 27 <div class="image-wrapper">
28 <img 28 <img
29 - :src="item.url" 29 + :src="item.src"
30 :alt="item.title" 30 :alt="item.title"
31 :style="{ height: item.height + 'px' }" 31 :style="{ height: item.height + 'px' }"
32 @load="onImageLoad" 32 @load="onImageLoad"
...@@ -41,31 +41,6 @@ ...@@ -41,31 +41,6 @@
41 </div> 41 </div>
42 </van-list> 42 </van-list>
43 </div> 43 </div>
44 -
45 - <!-- 遮罩层弹窗 -->
46 - <van-overlay :show="showOverlay" @click="closeOverlay">
47 - <div class="overlay-content" @click.stop>
48 - <!-- 关闭按钮 -->
49 - <div class="close-btn" @click="closeOverlay">
50 - <van-icon name="cross" size="1.5rem" color="#fff" />
51 - </div>
52 -
53 - <!-- 图片展示 -->
54 - <div class="overlay-image-wrapper">
55 - <img
56 - :src="selectedImage?.url"
57 - :alt="selectedImage?.title"
58 - class="overlay-image"
59 - />
60 - </div>
61 -
62 - <!-- 描述内容 -->
63 - <div class="overlay-description">
64 - <h3 class="overlay-title">{{ selectedImage?.title }}</h3>
65 - <p class="overlay-text">{{ selectedImage?.description }}</p>
66 - </div>
67 - </div>
68 - </van-overlay>
69 </div> 44 </div>
70 </template> 45 </template>
71 46
...@@ -73,6 +48,7 @@ ...@@ -73,6 +48,7 @@
73 import { ref, reactive, onMounted } from 'vue' 48 import { ref, reactive, onMounted } from 'vue'
74 import { useTitle } from '@vueuse/core'; 49 import { useTitle } from '@vueuse/core';
75 import { useRouter } from 'vue-router' 50 import { useRouter } from 'vue-router'
51 +import { showImagePreview } from 'vant'
76 52
77 // 导入接口 53 // 导入接口
78 import { getImgStreamAPI } from '@/api/index.js' 54 import { getImgStreamAPI } from '@/api/index.js'
...@@ -91,10 +67,6 @@ const pageSize = 10 ...@@ -91,10 +67,6 @@ const pageSize = 10
91 const allImages = ref([]) 67 const allImages = ref([])
92 const columns = reactive([[], []]) 68 const columns = reactive([[], []])
93 69
94 -// 遮罩层相关状态
95 -const showOverlay = ref(false)
96 -const selectedImage = ref(null)
97 -
98 // 加载数据 70 // 加载数据
99 const onLoad = async () => { 71 const onLoad = async () => {
100 loading.value = true 72 loading.value = true
...@@ -151,17 +123,22 @@ const distributeImages = (images) => { ...@@ -151,17 +123,22 @@ const distributeImages = (images) => {
151 }) 123 })
152 } 124 }
153 125
154 -// 图片点击事件 126 +// 图片点击事件 - 使用ImagePreview
155 const onImageClick = (item) => { 127 const onImageClick = (item) => {
156 console.log('点击图片:', item) 128 console.log('点击图片:', item)
157 - selectedImage.value = item
158 - showOverlay.value = true
159 -}
160 129
161 -// 关闭遮罩层 130 + // 获取当前点击图片在所有图片中的索引
162 -const closeOverlay = () => { 131 + const currentIndex = allImages.value.findIndex(img => img.id === item.id)
163 - showOverlay.value = false 132 +
164 - selectedImage.value = null 133 + // 提取所有图片的src用于预览
134 + const images = allImages.value.map(img => img.src)
135 +
136 + // 显示图片预览
137 + showImagePreview({
138 + images,
139 + startPosition: currentIndex,
140 + closeable: true
141 + })
165 } 142 }
166 143
167 // 图片加载成功 144 // 图片加载成功
......