From 1ea01f7d46745ddf10120e87f7a239f4f9a922ab Mon Sep 17 00:00:00 2001
From: yml2213 <a2213290201@gmail.com>
Date: Thu, 23 Jul 2026 18:28:35 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AE=E6=92=AD=E5=9B=BE=E5=8F=AF=E4=BB=A5?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../listings/components/HomeBanner.vue        | 48 ++++++++++++++++++-
 .../listings/views/MobileHomeView.css         |  4 ++
 .../listings/views/MobileHomeView.vue         | 23 ++++++++-
 3 files changed, 71 insertions(+), 4 deletions(-)

diff --git a/frontend/src/features/listings/components/HomeBanner.vue b/frontend/src/features/listings/components/HomeBanner.vue
index 2990cad..ee7871d 100644
--- a/frontend/src/features/listings/components/HomeBanner.vue
+++ b/frontend/src/features/listings/components/HomeBanner.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { computed, ref } from 'vue'
+
 interface HomeBannerSlide {
   title?: string
   eyebrow?: string
@@ -12,14 +14,43 @@ interface Props {
   banners: HomeBannerSlide[]
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const previewVisible = ref(false)
+const previewIndex = ref(0)
+
+const previewUrls = computed(() =>
+  props.banners
+    .map(slide => slide.image_url?.trim() || '')
+    .filter((url): url is string => Boolean(url))
+)
+
+function openPreview(slide: HomeBannerSlide) {
+  const url = slide.image_url?.trim()
+  if (!url) return
+  const index = previewUrls.value.indexOf(url)
+  if (index < 0) return
+  previewIndex.value = index
+  previewVisible.value = true
+}
+
+function closePreview() {
+  previewVisible.value = false
+}
 </script>
 
 <template>
   <section class="hero-board">
     <el-carousel height="240px" indicator-position="outside" :interval="3600">
       <el-carousel-item v-for="slide in banners" :key="slide.title || slide.image_url">
-        <div class="hero-slide" :class="[`tone-${slide.tone}`, { 'has-image': slide.image_url }]">
+        <div
+          class="hero-slide"
+          :class="[
+            `tone-${slide.tone}`,
+            { 'has-image': slide.image_url, 'is-previewable': !!slide.image_url },
+          ]"
+          @click="openPreview(slide)"
+        >
           <img
             v-if="slide.image_url"
             :src="slide.image_url"
@@ -34,6 +65,15 @@ defineProps<Props>()
         </div>
       </el-carousel-item>
     </el-carousel>
+
+    <el-image-viewer
+      v-if="previewVisible"
+      :url-list="previewUrls"
+      :initial-index="previewIndex"
+      teleported
+      hide-on-click-modal
+      @close="closePreview"
+    />
   </section>
 </template>
 
@@ -69,6 +109,10 @@ defineProps<Props>()
   background: linear-gradient(135deg, #eff6ff 0%, #ffffff 58%, #fff7ed 100%);
 }
 
+.hero-slide.is-previewable {
+  cursor: zoom-in;
+}
+
 .hero-slide.tone-blue {
   background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 56%, #fff7ed 100%);
 }
diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css
index 6146d73..84a55b4 100644
--- a/frontend/src/features/listings/views/MobileHomeView.css
+++ b/frontend/src/features/listings/views/MobileHomeView.css
@@ -250,6 +250,10 @@
   color: #fff;
 }
 
+.mobile-banner.is-previewable {
+  cursor: zoom-in;
+}
+
 .mobile-banner.tone-warm {
   background: #9a3412;
 }
diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue
index ba63a38..f7cf8fb 100644
--- a/frontend/src/features/listings/views/MobileHomeView.vue
+++ b/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"