商品卡片 GoodsCard

S2B 商城最核心的复合业务组件。只需切换 scene 属性，即可在商品分类、快速下单、购物车与双列推荐四种业务视图间无缝切换，自动适配排版方向、图标显隐、单/多 SKU 展示与步进器规格。

场景一：快速下单（scene="quick-order"）

横向左图右文布局，同时展示右上角收藏星与规格行删除图标，支持多 SKU 下单。

优选食材 量大价优锁鲜发货

预售必买安井小厨鸡肉洋葱圈空气炸锅鸡肉零食800g/包

商品别名，商品别名，商品别名

安井9块9狂欢购关东煮夜宵食品不计积分

800g

库存：充足

上月销量: 1285包本月销量: 868包

毛重9斤、特级原料制作、一斤约100粒、5斤、肉质饱满鲜嫩、活虾加工、液氮锁鲜工艺口感。

限量买赠满200送1包虾滑

剩28天09:01:57

¥185.66/件 ¥12.5/件 一客一价

0

一件30包描述公式补充基准价: ¥480/件指导价: ¥480/件

起购数量5加购数量5限购数量30

¥185.66/件 ¥12.5/件 合约价

1

已预付定金¥10/包

一件30包描述公式补充基准价: ¥185/件指导价: ¥200/件

起购数量5加购数量5限购数量30

<GoodsCard :goods="goods" @delete="handleDelete" scene="quick-order"/>

场景二：购物车（scene="cart"）

自动展示左上角序号角标、左侧多选框、扁平无底色步进器，且收敛为仅显示核心主 SKU。

1

优选食材 量大价优锁鲜发货

预售必买安井小厨鸡肉洋葱圈空气炸锅鸡肉零食800g/包

商品别名，商品别名，商品别名

安井9块9狂欢购关东煮夜宵食品不计积分

800g

库存：充足

上月销量: 1285包本月销量: 868包

毛重9斤、特级原料制作、一斤约100粒、5斤、肉质饱满鲜嫩、活虾加工、液氮锁鲜工艺口感。

限量买赠满200送1包虾滑

剩28天09:01:57

¥185.66/件 ¥12.5/件 一客一价

0

一件30包描述公式补充基准价: ¥480/件指导价: ¥480/件

起购数量5加购数量5限购数量30

<GoodsCard :goods="goods" :index="1" scene="cart" v-model:checked="checked"/>

场景三：双列推荐（scene="recommend"）

切换为上图下文竖排布局，销量通栏 100% 撑满卡片宽度并自动折行；初始展示 20×20 单圆 + 号，点击后展开小尺寸步进器。

优选食材 量大价优锁鲜发货

预售必买安井小厨鸡肉洋葱圈空气炸锅鸡肉零食800g/包

商品别名，商品别名，商品别名

安井9块9狂欢购关东煮夜宵食品不计积分

800g

库存：充足

上月销量: 1285包本月销量: 868包

毛重9斤、特级原料制作、一斤约100粒、5斤、肉质饱满鲜嫩、活虾加工、液氮锁鲜工艺口感。

限量买赠满200送1包虾滑

剩28天09:01:57

¥185.66/件

¥12.5/件 一客一价

一件30包描述公式补充基准价: ¥480/件指导价: ¥480/件

起购数量5加购数量5限购数量30

必买安井慕斯蛋奶橘子包卡通包子流心包半成品懒人速食面点

商品别名，商品别名，商品别名

安井关东煮夜宵食品不计积分

800g

库存：充足

上月销量: 980包本月销量: 620包

造型逼真可爱，内馅香浓顺滑，早餐店/商超热销爆款单品。

¥185.66/件

一客一价

一件30包描述公式补充基准价: ¥480/件指导价: ¥480/件

起购数量5加购数量5限购数量30

<GoodsCard :goods="goods" scene="recommend"/>

API 参数说明

参数名	说明	类型	默认值
goods	商品完整数据对象（含主副标题、标签、销量、活动、SKU 列表）	GoodsData	必填
scene	业务场景：category / quick-order / cart / recommend	string	'category'
index	购物车左上角序号角标（仅 scene="cart" 生效）	number	-
checked	购物车勾选状态（支持 v-model:checked）	boolean	false
showFavorite	强制覆盖是否显示右上角收藏星	boolean	按场景自动派生
showDelete	强制覆盖是否显示规格行删除图标	boolean	按场景自动派生