From b8a60a936964f8cd4b41c0ca0e1fa596d9c8a2e6 Mon Sep 17 00:00:00 2001 From: "pikachu1995@126.com" Date: Thu, 22 Oct 2026 09:24:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20m-goods-list=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=95=86=E5=93=81=E5=8D=A1=E7=89=87=E5=AD=97=E6=AE=B5=E5=BC=80?= =?UTF-8?q?=E5=85=B3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/m-goods-list/README.md | 7 +++ components/m-goods-list/list.vue | 71 ++++++++++++++++++++++++++++--- 2 files changed, 72 insertions(+), 6 deletions(-) diff --git a/components/m-goods-list/README.md b/components/m-goods-list/README.md index bade838..9261269 100644 --- a/components/m-goods-list/README.md +++ b/components/m-goods-list/README.md @@ -8,4 +8,11 @@ | `type` | 商品展示类型 oneColumns twoColumns ,默认展示一行两列商品 | String | 否 | | `storeName` | 是否展示店铺名称,默认展示 | Boolean | 否 | | `keywords` | 高亮展示搜索内容 | String | 否 | +| `showFields` | 商品卡片字段开关(Object,null=现状渲染全量字段)。键:`subTitle` 副标题、`spec` 规格摘要(取 attrList 前 2 项)、`tags` 促销标签、`selfTag` 自营、`price` 价格、`linePrice` 划线价(仅 marketPrice>price 时显示)、`sales` 已售/评论、`cart` 购物车按钮。新增字段(副标题/规格/划线价/购物车)仅在 showFields 提供时才会渲染;目前仅 oneColumns 布局支持开关 | Object | 否 | + +### EVENTS 事件说明 + +| 事件名 | 说明 | 回调参数 | +| ------ | ---- | -------- | +| `addCart` | 点击购物车按钮(showFields.cart 开启时渲染) | 当前商品对象 | diff --git a/components/m-goods-list/list.vue b/components/m-goods-list/list.vue index ba7ce07..bcf09f4 100644 --- a/components/m-goods-list/list.vue +++ b/components/m-goods-list/list.vue @@ -56,14 +56,20 @@
{{ item.goodsName }}
+
{{ item.sellingPoint }}
+
{{ specSummary(item) }}
-
+
¥{{ goodsFormatPrice(item.price )[0] }} .{{ goodsFormatPrice(item.price )[1] }}
+
¥{{ item.marketPrice }}
+
+ +
-
+
批
@@ -73,13 +79,13 @@ 秒杀
-
+
已售 {{ item.buyCount || '0' }} {{ item.commentNum || '0' }}条评论
- 自营 + 自营 {{ item.storeName }} 进店 @@ -107,14 +113,29 @@ const props = withDefaults(defineProps<{ storeName?: boolean tabBarGap?: boolean keyword?: string | null + showFields?: Record | null }>(), { res: () => [], type: 'twoColumns', storeName: true, tabBarGap: true, - keyword: '' + keyword: '', + showFields: null }) +const emit = defineEmits(['addCart']) + +// 存量字段(促销/销量/自营/价格):showFields 为 null 时维持现状渲染 +const flag = (key: string) => props.showFields == null || props.showFields[key] !== false +// 新增字段(副标题/规格/划线价/购物车按钮):仅 showFields 提供时可渲染 +const extra = (key: string) => props.showFields != null && props.showFields[key] !== false +const hasMarketPrice = (item: any) => + item.marketPrice != null && item.price != null && item.marketPrice > item.price +const specSummary = (item: any) => + Array.isArray(item.attrList) + ? item.attrList.slice(0, 2).map((a: any) => `${a.name}: ${a.value}`).join(' · ') + : '' + watch(() => props.keyword, (val) => { if (val) { lightSearchStr(val as string, '') @@ -250,7 +271,45 @@ watch(() => props.keyword, (val) => { overflow: hidden; } - .promotion { + .selling-point { + font-size: 22rpx; + color: #999; + line-height: 1.4; + margin-top: 4rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .spec-summary { + font-size: 22rpx; + color: #999; + line-height: 1.4; + margin-top: 4rpx; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .market-price { + font-size: 22rpx; + color: #999; + text-decoration: line-through; + margin-left: 8rpx; + } + + .cart-btn { + width: 44rpx; + height: 44rpx; + border-radius: 50%; + background: $main-color; + display: flex; + align-items: center; + justify-content: center; + flex-shrink: 0; + } + + .promotion { margin-top: 4rpx; display: flex;