图片添加地址

shop-app/components/cart/CartItemRow.vue

@@ -10,7 +10,7 @@
 			</view>
 		</view>
 		<view class="cart-item__main" @click="emit('goods-click', item)">
-			<image class="cart-item__pic" :src="item.displayPic" mode="aspectFill" />
+			<image-preview class="cart-item__pic" :src="item.mainPic || item.displayPic" />
 			<view class="cart-item__info">
 				<text class="cart-item__name">{{ item.goodsName }}</text>
 				<view v-if="item.specList && item.specList.length" class="cart-item__specs">

shop-app/components/common/ImagePreview.vue

@@ -0,0 +1,156 @@
+<template>
+	<view class="image-preview" :style="wrapStyle" @click="onTap">
+		<image
+			v-if="showImage"
+			class="image-preview__img"
+			:src="realSrc"
+			:mode="mode"
+			@error="onError"
+			@load="onLoad"
+		/>
+		<view v-else class="image-preview__slot">
+			<image
+				v-if="placeholder"
+				class="image-preview__img"
+				:src="placeholder"
+				:mode="mode"
+			/>
+			<u-icon v-else name="photo" color="#c0c4cc" :size="iconSize" />
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue'
+import { resolveFileUrl, resolveFileUrlList } from '@/utils/image'
+
+const props = defineProps({
+	/** 后端路径或逗号分隔多图（展示首张） */
+	src: {
+		type: String,
+		default: ''
+	},
+	width: {
+		type: [String, Number],
+		default: ''
+	},
+	height: {
+		type: [String, Number],
+		default: ''
+	},
+	mode: {
+		type: String,
+		default: 'aspectFill'
+	},
+	/** 加载失败或 src 为空时的占位图 */
+	placeholder: {
+		type: String,
+		default: '/static/logo.png'
+	},
+	/** 点击预览大图 */
+	preview: {
+		type: Boolean,
+		default: false
+	},
+	/** 预览列表；不传则从 src 逗号拆分 */
+	previewList: {
+		type: Array,
+		default: () => []
+	},
+	previewIndex: {
+		type: Number,
+		default: 0
+	},
+	iconSize: {
+		type: [String, Number],
+		default: 28
+	}
+})
+
+const loadFailed = ref(false)
+
+const realSrc = computed(() => {
+	if (!props.src) return ''
+	return resolveFileUrl(props.src)
+})
+
+const resolvedPreviewList = computed(() => {
+	if (props.previewList && props.previewList.length) {
+		return resolveFileUrlList(props.previewList)
+	}
+	return resolveFileUrlList(props.src)
+})
+
+const showImage = computed(() => !!(realSrc.value && !loadFailed.value))
+
+const wrapStyle = computed(() => {
+	const style = {}
+	if (props.width !== '' && props.width != null) {
+		style.width = formatSize(props.width)
+	}
+	if (props.height !== '' && props.height != null) {
+		style.height = formatSize(props.height)
+	}
+	return style
+})
+
+watch(
+	() => props.src,
+	() => {
+		loadFailed.value = false
+	}
+)
+
+function formatSize(val) {
+	if (typeof val === 'number') {
+		return `${val}rpx`
+	}
+	const s = String(val)
+	if (/^\d+$/.test(s)) {
+		return `${s}rpx`
+	}
+	return s
+}
+
+function onError() {
+	loadFailed.value = true
+}
+
+function onLoad() {
+	loadFailed.value = false
+}
+
+function onTap() {
+	if (!props.preview) return
+	const urls = resolvedPreviewList.value
+	if (!urls.length) return
+	const idx = Math.min(Math.max(props.previewIndex, 0), urls.length - 1)
+	uni.previewImage({
+		urls,
+		current: urls[idx]
+	})
+}
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+	display: block;
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	background: #ebeef5;
+}
+.image-preview__img {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+.image-preview__slot {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: #ebeef5;
+}
+</style>

shop-app/components/goods/ReviewCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="review-card">
 		<view class="review-card__head">
-			<image class="review-card__avatar" :src="avatarSrc" mode="aspectFill" />
+			<image-preview class="review-card__avatar" :src="item.memberAvatar || avatarSrc" />
 			<view class="review-card__meta">
 				<text class="review-card__name">{{ item.memberNickName }}</text>
 				<view v-if="item.score" class="review-card__stars">
@@ -12,13 +12,14 @@
 		</view>
 		<text class="review-card__content">{{ item.content }}</text>
 		<view v-if="item.pics && item.pics.length" class="review-card__pics">
-			<image
+			<image-preview
 				v-for="(pic, idx) in item.pics"
 				:key="idx"
 				class="review-card__pic"
 				:src="pic"
-				mode="aspectFill"
-				@click="previewPics(idx)"
+				preview
+				:preview-list="item.pics"
+				:preview-index="idx"
 			/>
 		</view>
 		<view v-if="item.replyContent" class="review-card__reply">
@@ -38,13 +39,7 @@ const props = defineProps({
 	}
 })
 
-const avatarSrc = computed(() => props.item.memberAvatar || '/static/logo.png')
-
-function previewPics(index) {
-	const urls = props.item.pics || []
-	if (!urls.length) return
-	uni.previewImage({ urls, current: urls[index] })
-}
+const avatarSrc = computed(() => '/static/logo.png')
 </script>
 
 <style lang="scss" scoped>

shop-app/components/mall/GoodsGrid.vue

@@ -6,7 +6,7 @@
 			class="goods-card"
 			@click="emit('item-click', item)"
 		>
-			<image class="goods-card__pic" :src="item.displayPic" mode="aspectFill" />
+			<image-preview class="goods-card__pic" :src="item.mainPic || item.displayPic" />
 			<view class="goods-card__body">
 				<text class="goods-card__name">{{ item.goodsName }}</text>
 				<view class="goods-card__price">

shop-app/components/mine/ImageUpload.vue

@@ -2,11 +2,11 @@
 	<view class="img-upload">
 		<text v-if="label" class="img-upload__label">{{ label }}</text>
 		<view class="img-upload__box" @click="chooseImage">
-			<image
-				v-if="displayUrl"
+			<image-preview
+				v-if="modelValue"
 				class="img-upload__preview"
-				:src="displayUrl"
-				mode="aspectFill"
+				:src="modelValue"
+				preview
 			/>
 			<view v-else class="img-upload__placeholder">
 				<u-icon name="camera-fill" color="#9a938c" size="40" />
@@ -20,8 +20,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue'
-import { joinApiUrl } from '@/config'
+import { ref } from 'vue'
 import { uploadFile } from '@/utils/upload'
 
 const props = defineProps({
@@ -34,13 +33,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const uploading = ref(false)
 
-const displayUrl = computed(() => {
-  const v = props.modelValue || ''
-  if (!v) return ''
-  if (/^https?:\/\//i.test(v)) return v
-  return joinApiUrl(v)
-})
-
 function chooseImage() {
   if (uploading.value) return
   uni.chooseImage({

shop-app/components/order/CheckoutGoodsRow.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="checkout-goods">
-		<image class="checkout-goods__pic" :src="goods.displayPic" mode="aspectFill" />
+		<image-preview class="checkout-goods__pic" :src="goods.mainPic || goods.displayPic" />
 		<view class="checkout-goods__info">
 			<text class="checkout-goods__name">{{ goods.goodsName }}</text>
 			<view v-if="goods.specList && goods.specList.length" class="checkout-goods__specs">

shop-app/components/order/CheckoutMultiGoodsRow.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="multi-goods-row">
-		<image class="multi-goods-row__pic" :src="item.displayPic" mode="aspectFill" />
+		<image-preview class="multi-goods-row__pic" :src="item.mainPic || item.displayPic" />
 		<view class="multi-goods-row__main">
 			<text class="multi-goods-row__name">{{ item.goodsName }}</text>
 			<view v-if="item.specList && item.specList.length" class="multi-goods-row__specs">

shop-app/components/order/ImageUploadGrid.vue

@@ -3,7 +3,7 @@
 		<text v-if="label" class="img-grid__label">{{ label }}</text>
 		<view class="img-grid__list">
 			<view v-for="(url, index) in modelValue" :key="index" class="img-grid__item">
-				<image class="img-grid__pic" :src="displayUrl(url)" mode="aspectFill" />
+				<image-preview class="img-grid__pic" :src="url" preview />
 				<view class="img-grid__del" @click="removeAt(index)">×</view>
 			</view>
 			<view
@@ -20,7 +20,6 @@
 
 <script setup>
 import { ref } from 'vue'
-import { joinApiUrl } from '@/config'
 import { uploadFile } from '@/utils/upload'
 
 const props = defineProps({
@@ -42,12 +41,6 @@ const emit = defineEmits(['update:modelValue'])
 
 const uploading = ref(false)
 
-function displayUrl(url) {
-	if (!url) return ''
-	if (/^https?:\/\//i.test(url)) return url
-	return joinApiUrl(url)
-}
-
 function removeAt(index) {
 	const next = [...props.modelValue]
 	next.splice(index, 1)

shop-app/components/order/OrderGoodsRow.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="order-goods-row" @click="emit('click')">
-		<image class="order-goods-row__pic" :src="item.displayPic" mode="aspectFill" />
+		<image-preview class="order-goods-row__pic" :src="item.goodsImage || item.mainPic || item.displayPic" />
 		<view class="order-goods-row__main" :class="{ 'order-goods-row__main--compact': reviewAction }">
 			<text class="order-goods-row__name">{{ item.goodsName }}</text>
 			<view v-if="item.specList && item.specList.length" class="order-goods-row__specs">

shop-app/components/order/ReviewDoneSummaryCard.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="review-done-card">
 		<view class="review-done-card__goods">
-			<image class="review-done-card__pic" :src="item.displayPic" mode="aspectFill" />
+			<image-preview class="review-done-card__pic" :src="item.goodsImage || item.mainPic || item.displayPic" />
 			<view class="review-done-card__goods-meta">
 				<text class="review-done-card__name">{{ item.goodsName }}</text>
 				<text v-if="item.specText" class="review-done-card__spec">{{ item.specText }}</text>

shop-app/components/search/ShopList.vue

@@ -6,7 +6,7 @@
 			class="shop-card"
 			@click="emit('item-click', item)"
 		>
-			<image class="shop-card__avatar" :src="item.displayAvatar" mode="aspectFill" />
+			<image-preview class="shop-card__avatar" :src="item.shopAvatar || item.displayAvatar" />
 			<view class="shop-card__body">
 				<text class="shop-card__name">{{ item.shopName }}</text>
 				<view v-if="item.showRating || item.showFans" class="shop-card__meta">

shop-app/components/shop/ShopFollowList.vue

@@ -6,7 +6,7 @@
 			class="follow-card"
 			@click="emit('item-click', item)"
 		>
-			<image class="follow-card__avatar" :src="item.displayAvatar" mode="aspectFill" />
+			<image-preview class="follow-card__avatar" :src="item.shopAvatar || item.displayAvatar" />
 			<view class="follow-card__body">
 				<view class="follow-card__title-row">
 					<text class="follow-card__name">{{ item.shopName }}</text>

shop-app/pages.json

@@ -4,7 +4,8 @@
 		"custom": {
 			"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
 			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
-			"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
+			"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
+			"^image-preview$": "@/components/common/ImagePreview.vue"
 		}
 	},
 	"pages": [

shop-app/pages/category/index.vue

@@ -28,7 +28,7 @@
 						class="right-item"
 						@click="onLevel2Tap(child)"
 					>
-						<image class="right-item__pic" :src="child.displayPic" mode="aspectFill" />
+						<image-preview class="right-item__pic" :src="child.categoryPic || child.displayPic" />
 						<text v-if="child.isHot" class="right-item__badge">热</text>
 						<text class="right-item__name">{{ child.categoryName }}</text>
 					</view>

shop-app/pages/index/index.vue

@@ -34,11 +34,12 @@
 					duration="500"
 				>
 					<swiper-item v-for="(item, index) in bannerList" :key="item.bannerId || index">
-						<image
+						<image-preview
 							class="banner-img"
 							:src="item.bannerImage"
-							mode="aspectFill"
-							@click="onBannerPreview(index)"
+							preview
+							:preview-list="bannerPreviewList"
+							:preview-index="index"
 						/>
 					</swiper-item>
 				</swiper>
@@ -54,11 +55,9 @@
 							class="category-item"
 							@click="onCategoryTap(item)"
 						>
-							<image
+							<image-preview
 								class="category-icon"
-								:src="item.displayPic"
-								mode="aspectFill"
-								@error="onCategoryImgError(item)"
+								:src="item.categoryPic || item.displayPic"
 							/>
 							<text class="category-name">{{ item.categoryName }}</text>
 						</view>
@@ -96,7 +95,7 @@
 						class="hot-card"
 						@click="onGoodsTap(item)"
 					>
-						<image class="hot-pic" :src="item.displayPic" mode="aspectFill" />
+						<image-preview class="hot-pic" :src="item.mainPic || item.displayPic" />
 						<view class="hot-info">
 							<text class="hot-name">{{ item.goodsName }}</text>
 							<view class="hot-meta">
@@ -146,6 +145,10 @@ const categoryLoadFailed = ref(false)
 
 const headerTotalHeight = computed(() => statusBarHeight.value + headerContentHeight)
 
+const bannerPreviewList = computed(() =>
+	bannerList.value.map((b) => b.bannerImage).filter(Boolean)
+)
+
 /** 并行拉取三接口，各模块独立渲染（HM14） */
 function loadHomeData() {
 	hotLoading.value = true
@@ -237,12 +240,6 @@ function onSearchTap() {
 	uni.navigateTo({ url: PAGE_SEARCH_INDEX })
 }
 
-function onBannerPreview(index) {
-	const urls = bannerList.value.map((b) => b.bannerImage).filter(Boolean)
-	if (!urls.length) return
-	uni.previewImage({ urls, current: urls[index] || urls[0] })
-}
-
 function onCategoryTap(item) {
 	uni.navigateTo({
 		url:
@@ -256,10 +253,6 @@ function onMoreCategoryTap() {
 	uni.switchTab({ url: PAGE_CATEGORY_TAB })
 }
 
-function onCategoryImgError(item) {
-	item.displayPic = CATEGORY_PLACEHOLDER
-}
-
 function onGoodsTap(item) {
 	goGoodsDetail(item.goodsId)
 }

shop-app/pages/mine/index.vue

@@ -2,7 +2,7 @@
 	<view class="mine-page">
 		<view class="mine-header" @click="onHeaderClick">
 			<view class="mine-header__row">
-				<image class="mine-header__avatar" :src="avatarUrl" mode="aspectFill" />
+				<image-preview class="mine-header__avatar" :src="avatarUrl" />
 				<view class="mine-header__info">
 					<text class="mine-header__name">{{ headerTitle }}</text>
 					<text v-if="loggedIn && mobileText" class="mine-header__sub">{{ mobileText }}</text>

shop-app/subpackage/category/level1.vue

@@ -5,7 +5,7 @@
 		<view v-if="level1Name" class="cat-panel">
 			<!-- 手风琴标题：一级分类，点击展开/收起二级 -->
 			<view class="l1-hero" @click="toggleAccordion">
-				<image class="l1-hero__pic" :src="level1DisplayPic" mode="aspectFill" />
+				<image-preview class="l1-hero__pic" :src="level1Pic" :placeholder="CATEGORY_PLACEHOLDER" />
 				<view class="l1-hero__info">
 					<view class="l1-hero__title-row">
 						<text class="l1-hero__name">{{ level1Name }}</text>
@@ -39,7 +39,7 @@
 							@click.stop="onTabChange(index)"
 						>
 							<view class="l2-item__pic-wrap">
-								<image class="l2-item__pic" :src="tab.displayPic" mode="aspectFill" />
+								<image-preview class="l2-item__pic" :src="tab.categoryPic || tab.displayPic" :placeholder="CATEGORY_PLACEHOLDER" />
 								<text v-if="tab.isHot" class="l2-item__hot">热</text>
 							</view>
 							<text class="l2-item__name">{{ tab.categoryName }}</text>
@@ -66,7 +66,6 @@ import { ref, computed } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import { getCategoryTree, getLevel2Tabs } from '@/api/category'
 import { mapCategoryTree, mapLevel2Tabs } from '@/utils/categoryDisplay'
-import { resolveFileUrl } from '@/utils/image'
 import { DEFAULT_SORT_BY } from '@/constants/categorySort'
 import SearchEntry from '@/components/mall/SearchEntry.vue'
 import GoodsListBlock from '@/components/category/GoodsListBlock.vue'
@@ -93,10 +92,6 @@ const activeCategoryId = computed(() => {
 	return tab ? tab.categoryId : ''
 })
 
-const level1DisplayPic = computed(
-	() => resolveFileUrl(level1Pic.value) || CATEGORY_PLACEHOLDER
-)
-
 const activeTabName = computed(() => {
 	const tab = tabList.value[activeTabIndex.value]
 	return tab ? tab.categoryName : ''

shop-app/subpackage/goods/detail.vue

@@ -17,7 +17,13 @@
 					:circular="detail.pics.length > 1"
 				>
 					<swiper-item v-for="(pic, idx) in detail.pics" :key="idx">
-						<image class="pic-swiper__img" :src="pic" mode="aspectFill" @click="previewPics(idx)" />
+						<image-preview
+							class="pic-swiper__img"
+							:src="pic"
+							preview
+							:preview-list="detail.pics"
+							:preview-index="idx"
+						/>
 					</swiper-item>
 				</swiper>
 
@@ -87,7 +93,7 @@
 				<view v-if="detail.services.length" class="card section-card">
 					<view class="section-title">服务说明</view>
 					<view v-for="svc in detail.services" :key="svc.serviceId" class="service-item">
-						<image v-if="svc.serviceIcon" class="service-icon" :src="svc.serviceIcon" mode="aspectFit" />
+						<image-preview v-if="svc.serviceIcon" class="service-icon" :src="svc.serviceIcon" mode="aspectFit" />
 						<view class="service-body">
 							<text class="service-name">{{ svc.serviceName }}</text>
 							<text v-if="svc.serviceIntro" class="service-intro">{{ svc.serviceIntro }}</text>
@@ -127,7 +133,7 @@
 
 				<!-- 店铺入口 -->
 				<view class="card shop-card" @click="onEnterShop">
-					<image class="shop-avatar" :src="detail.shop.shopAvatar" mode="aspectFill" />
+					<image-preview class="shop-avatar" :src="detail.shop.shopAvatar" />
 					<view class="shop-info">
 						<text class="shop-name">{{ detail.shop.shopName || '—' }}</text>
 						<text class="shop-enter">进店逛逛 ></text>
@@ -150,7 +156,7 @@
 		<u-popup :show="qtyPopupShow" mode="bottom" round="16" @close="qtyPopupShow = false">
 			<view class="qty-popup">
 				<view class="qty-popup__head">
-					<image class="qty-popup__pic" :src="detail?.pics?.[0]" mode="aspectFill" />
+					<image-preview class="qty-popup__pic" :src="detail?.pics?.[0]" />
 					<view>
 						<text class="qty-popup__price">¥ {{ detail?.priceText }}</text>
 						<text class="qty-popup__stock">库存 {{ detail?.stock }}</text>
@@ -286,11 +292,6 @@ async function loadReviewPreview() {
 	}
 }
 
-function previewPics(index) {
-	const urls = detail.value?.pics || []
-	uni.previewImage({ urls, current: urls[index] })
-}
-
 function openQtyPopup() {
 	if (!detail.value) return
 	qtyPopupShow.value = true

shop-app/subpackage/order/aftersale-detail.vue

@@ -18,7 +18,7 @@
 			<view class="as-card">
 				<text class="as-card__title">商品信息</text>
 				<view class="as-goods">
-					<image class="as-goods__pic" :src="detail.displayPic" mode="aspectFill" />
+					<image-preview class="as-goods__pic" :src="detail.goodsImage || detail.displayPic" />
 					<view class="as-goods__info">
 						<text class="as-goods__name">{{ detail.goodsName }}</text>
 						<text
@@ -73,13 +73,14 @@
 			<view v-if="detail.evidencePics && detail.evidencePics.length" class="as-card">
 				<text class="as-card__title">凭证图片</text>
 				<view class="as-pics">
-					<image
+					<image-preview
 						v-for="(pic, idx) in detail.evidencePics"
 						:key="idx"
 						class="as-pics__item"
 						:src="pic"
-						mode="aspectFill"
-						@click="previewPic(idx)"
+						preview
+						:preview-list="detail.evidencePics"
+						:preview-index="idx"
 					/>
 				</view>
 			</view>
@@ -126,14 +127,6 @@ async function loadDetail() {
 	}
 }
 
-function previewPic(index) {
-	if (!detail.value || !detail.value.evidencePics) return
-	uni.previewImage({
-		current: index,
-		urls: detail.value.evidencePics
-	})
-}
-
 onLoad((options) => {
 	aftersaleId.value = options.aftersaleId || ''
 	if (!aftersaleId.value) {

shop-app/subpackage/order/aftersale-list.vue

@@ -39,7 +39,7 @@
 						<text class="aftersale-card__status">{{ row.statusText }}</text>
 					</view>
 					<view class="aftersale-card__goods">
-						<image class="aftersale-card__pic" :src="row.displayPic" mode="aspectFill" />
+						<image-preview class="aftersale-card__pic" :src="row.goodsImage || row.displayPic" />
 						<view class="aftersale-card__info">
 							<text class="aftersale-card__name">{{ row.goodsName }}</text>
 							<text class="aftersale-card__type">{{ row.applyTypeText }} · {{ row.applyReason }}</text>

shop-app/subpackage/order/checkout-cart.vue

@@ -15,7 +15,7 @@
 				<address-bar :address="preview.address" @click="onAddressTap" />
 
 				<view class="shop-head">
-					<image class="shop-head__avatar" :src="preview.shop.shopAvatar" mode="aspectFill" />
+					<image-preview class="shop-head__avatar" :src="preview.shop.shopAvatar" />
 					<text class="shop-head__name">{{ preview.shop.shopName }}</text>
 				</view>
 

shop-app/subpackage/order/checkout.vue

@@ -15,7 +15,7 @@
 				<address-bar :address="preview.address" @click="onAddressTap" />
 
 				<view class="shop-head">
-					<image class="shop-head__avatar" :src="preview.shop.shopAvatar" mode="aspectFill" />
+					<image-preview class="shop-head__avatar" :src="preview.shop.shopAvatar" />
 					<text class="shop-head__name">{{ preview.shop.shopName }}</text>
 				</view>
 

shop-app/subpackage/order/detail.vue

@@ -34,7 +34,7 @@
 
 				<view class="detail-card">
 					<view class="detail-shop">
-						<image class="detail-shop__avatar" :src="detail.shopAvatar" mode="aspectFill" />
+						<image-preview class="detail-shop__avatar" :src="detail.shopAvatar" />
 						<text class="detail-shop__name">{{ detail.shopName }}</text>
 					</view>
 					<order-goods-row

shop-app/subpackage/order/list.vue

@@ -49,7 +49,7 @@
 					@click="onCardClick(card)"
 				>
 					<view class="order-card__head">
-						<image class="order-card__shop-avatar" :src="card.shopAvatar" mode="aspectFill" />
+						<image-preview class="order-card__shop-avatar" :src="card.shopAvatar" />
 						<text class="order-card__shop-name">{{ card.shopName }}</text>
 						<text
 							class="order-card__status"

shop-app/subpackage/order/review-view.vue

@@ -26,13 +26,14 @@
 				<text class="review-view-card__label">评价内容</text>
 				<text class="review-view-content">{{ review.content || '（无文字评价）' }}</text>
 				<view v-if="review.pics && review.pics.length" class="review-view-pics">
-					<image
+					<image-preview
 						v-for="(pic, idx) in review.pics"
 						:key="idx"
 						class="review-view-pic"
 						:src="pic"
-						mode="aspectFill"
-						@click="previewPics(idx)"
+						preview
+						:preview-list="review.pics"
+						:preview-index="idx"
 					/>
 				</view>
 				<text v-if="review.createTime" class="review-view-time">评价时间：{{ review.createTime }}</text>
@@ -100,11 +101,6 @@ async function loadReview() {
 	}
 }
 
-function previewPics(index) {
-	const urls = review.value?.pics || []
-	uni.previewImage({ urls, current: urls[index] })
-}
-
 onLoad((options) => {
 	if (!ensureApiToken(true)) return
 	orderId.value = options.orderId || ''

shop-app/subpackage/shop/index.vue

@@ -13,7 +13,7 @@
 
 			<template v-else-if="profile">
 				<view class="shop-header">
-					<image class="shop-header__avatar" :src="profile.shopAvatar" mode="aspectFill" />
+					<image-preview class="shop-header__avatar" :src="profile.shopAvatar" />
 					<view class="shop-header__main">
 						<view class="shop-header__title-row">
 							<text class="shop-header__name">{{ profile.shopName }}</text>

shop-app/utils/image.js

@@ -23,3 +23,18 @@ export function resolveFileUrl(path) {
   }
   return joinApiUrl(raw.startsWith('/') ? raw : `/${raw}`)
 }
+
+/**
+ * 将逗号分隔或数组形式的图片路径转为完整 URL 列表（对齐 ruoyi-ui ImagePreview）
+ * @param {string|string[]|null|undefined} pathOrList
+ */
+export function resolveFileUrlList(pathOrList) {
+  if (pathOrList == null || pathOrList === '') return []
+  if (Array.isArray(pathOrList)) {
+    return pathOrList.map((item) => resolveFileUrl(item)).filter(Boolean)
+  }
+  return String(pathOrList)
+    .split(',')
+    .map((s) => resolveFileUrl(s.trim()))
+    .filter(Boolean)
+}