From 83fc02a2799eef18e9ab6f81fd52fedd90f4d160 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 13 Jul 2026 16:22:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(diy-goods-list):=20=E7=BB=9F=E4=B8=80?=
 =?UTF-8?q?=E5=95=86=E5=93=81=E5=9B=BE=E7=89=87mode=E9=80=82=E9=85=8D?=
 =?UTF-8?q?=E9=B8=BF=E8=92=99=E5=85=83=E6=9C=8D=E5=8A=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

修复鸿蒙元服务环境下商品图片显示裁剪/不全的问题，根据模板和平台动态适配图片mode模式
---
 components-diy/diy-goods-list.vue | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/components-diy/diy-goods-list.vue b/components-diy/diy-goods-list.vue
index e94964f..c7c60dc 100644
--- a/components-diy/diy-goods-list.vue
+++ b/components-diy/diy-goods-list.vue
@@ -7,7 +7,7 @@
 					<view class="goods-img-wrap">
 						<image class="goods-img"
 							:src="$util.img(item.goods_image, { size: goodsValue.template == 'large-mode' ? 'big' : 'mid' })"
-							mode="widthFix" @error="imgError(index)"
+							:mode="imgMode" @error="imgError(index)"
 							:style="{ borderRadius: goodsValue.imgAroundRadius * 2 + 'rpx' }"
 							show-menu-by-longpress />
 						<view class="sell-out" v-if="item.stock <= 0">
@@ -117,7 +117,7 @@
 					:class="[goodsValue.ornament.type]" :style="goodsItemCss">
 					<view class="goods-img-wrap">
 						<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
-							:src="$util.img(item.goods_image, { size: 'mid' })" mode="widthFix" @error="imgError(index)"
+							:src="$util.img(item.goods_image, { size: 'mid' })" :mode="imgMode" @error="imgError(index)"
 							:lazy-load="true" show-menu-by-longpress />
 						<view class="sell-out" v-if="item.stock <= 0">
 							<text class="iconfont icon-shuqing"></text>
@@ -184,7 +184,7 @@
 						:class="[goodsValue.ornament.type]" :style="goodsItemCss">
 						<view class="goods-img-wrap">
 							<image class="goods-img" :style="{ borderRadius: value.imgAroundRadius * 2 + 'rpx' }"
-								:src="$util.img(dataItem.goods_image, { size: 'mid' })" mode="widthFix"
+								:src="$util.img(dataItem.goods_image, { size: 'mid' })" :mode="imgMode"
 								@error="imgError(dataIndex)" :lazy-load="true" show-menu-by-longpress />
 							<view class="sell-out" v-if="dataItem.stock <= 0">
 								<text class="iconfont icon-shuqing"></text>
@@ -302,6 +302,19 @@ export default {
 		}
 	},
 	computed: {
+		// 商品图 image 的 mode 模式:
+		// - 大图模式(large-mode):容器高度由图片决定,固定使用 widthFix 保持原比例
+		// - 鸿蒙元服务:其他模板下 image 的 widthFix 模式异常(图片被裁剪/显示不全),改用 aspectFill 填满固定容器
+		// - H5、微信小程序等其他环境:保持 widthFix 行为不变
+		imgMode() {
+			if (this.goodsValue.template == 'large-mode') return 'widthFix';
+			// #ifdef MP-HARMONY
+			return 'aspectFill';
+			// #endif
+			// #ifndef MP-HARMONY
+			return 'widthFix';
+			// #endif
+		},
 		goodsListWarpCss() {
 			var obj = '';
 			obj += 'background-color:' + this.goodsValue.componentBgColor + ';';