diff --git a/frontend/src/features/listings/views/MobileHomeView.css b/frontend/src/features/listings/views/MobileHomeView.css index 98abf33..6146d73 100644 --- a/frontend/src/features/listings/views/MobileHomeView.css +++ b/frontend/src/features/listings/views/MobileHomeView.css @@ -930,3 +930,43 @@ .home-footer-copyright { color: #a0aab6; } + +/* AW炫彩回收预览(teleport 到 body) */ +.aw-recycle-preview { + display: flex; + flex-direction: column; + max-height: 86vh; + overflow: hidden; + background: #fff; +} + +.aw-recycle-preview-head { + flex-shrink: 0; + padding: 14px 44px 10px 16px; + border-bottom: 1px solid #f0f2f5; +} + +.aw-recycle-preview-head h3 { + margin: 0; + color: #17233d; + font-size: 16px; + font-weight: 800; + line-height: 1.3; +} + +.aw-recycle-preview-body { + flex: 1; + min-height: 0; + overflow: auto; + padding: 12px; + background: #f8fafc; +} + +.aw-recycle-preview-body :deep(.aw-recycle-preview-img) { + display: block; + width: 100%; + max-height: calc(86vh - 72px); + object-fit: contain; + border-radius: 10px; + background: #fff; +} diff --git a/frontend/src/features/listings/views/MobileHomeView.vue b/frontend/src/features/listings/views/MobileHomeView.vue index efd936c..ba63a38 100644 --- a/frontend/src/features/listings/views/MobileHomeView.vue +++ b/frontend/src/features/listings/views/MobileHomeView.vue @@ -21,8 +21,8 @@ import { type AWRecycleConfig, type HomeBannerSlide, } from '@/features/listings/api/homeConfig' -import { showImagePreview, showToast } from 'vant' -import { fetchFileBlobByURL } from '@/shared/api/files' +import { showToast } from 'vant' +import AuthImage from '@/shared/components/business/AuthImage.vue' import MobileHomeFilterSheet, { type FilterSection } from './MobileHomeFilterSheet.vue' import { clearStoredHomeQuery, @@ -80,6 +80,7 @@ const searchValue = ref('') const announcements = ref(defaultHomeAnnouncements) const bannerSlides = ref(defaultHomeBanners) const awRecycle = ref({ ...defaultAWRecycleConfig }) +const awRecyclePreviewVisible = ref(false) const supportLoading = ref(false) const showBackTop = ref(false) const mobilePageSize = 10 @@ -476,32 +477,12 @@ async function loadHomeConfig() { } } -async function openAWRecycle() { - const source = awRecycle.value.image_url - if (!source) { +function openAWRecycle() { + if (!awRecycle.value.image_url) { showToast({ message: '回收说明图片尚未配置', icon: 'warning-o' }) return } - try { - // 私有 /api/files/object 需带鉴权拉取;公开 /api/public/files 可直接预览 - let previewURL = source - if ( - source.includes('/api/files/object') || - source.includes('/api/admin/files/object') - ) { - const blob = await fetchFileBlobByURL(source) - previewURL = URL.createObjectURL(blob) - } - showImagePreview({ - images: [previewURL], - closeable: true, - }) - } catch { - showToast({ - message: '图片加载失败,请在后台重新上传(需使用公开图)', - icon: 'cross', - }) - } + awRecyclePreviewVisible.value = true } async function onRefresh() { @@ -1077,6 +1058,32 @@ syncMobileHomeQuery() + +
+
+

{{ awRecycle.title }}

+
+
+ + +
+
+
+