轮播图可以预览

frontend/src/features/listings/views/MobileHomeView.vue

@@ -21,7 +21,7 @@ import {
   type AWRecycleConfig,
   type HomeBannerSlide,
 } from '@/features/listings/api/homeConfig'
-import { showToast } from 'vant'
+import { showImagePreview, showToast } from 'vant'
 import AuthImage from '@/shared/components/business/AuthImage.vue'
 import MobileHomeFilterSheet, { type FilterSection } from './MobileHomeFilterSheet.vue'
 import {
@@ -485,6 +485,21 @@ function openAWRecycle() {
   awRecyclePreviewVisible.value = true
 }
 
+function openBannerPreview(slide: HomeBannerSlide) {
+  const url = slide.image_url?.trim()
+  if (!url) return
+  const images = bannerSlides.value
+    .map(item => item.image_url?.trim() || '')
+    .filter((item): item is string => Boolean(item))
+  const startPosition = images.indexOf(url)
+  if (startPosition < 0) return
+  showImagePreview({
+    images,
+    startPosition,
+    closeable: true,
+  })
+}
+
 async function onRefresh() {
   refreshing.value = true
   try {
@@ -830,7 +845,11 @@ syncMobileHomeQuery()
             <van-swipe-item v-for="slide in bannerSlides" :key="slide.title || slide.image_url">
               <div
                 class="mobile-banner"
-                :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]"
+                :class="[
+                  `tone-${slide.tone}`,
+                  { 'has-image': slide.image_url, 'is-previewable': !!slide.image_url },
+                ]"
+                @click="openBannerPreview(slide)"
               >
                 <img
                   v-if="slide.image_url"