H5 购物车 · 未达起送量「顺手买」原型

现状:未达起送量只弹窗提示(可继续结算)。本原型在购物车里加顺手买:未达标供应商卡片内展示该供应商销量前 5 的商品,点「+」直接加入购物车,加完实时重算「还差X件」,达标自动消失。
可交互:改数量 / 勾选 / 顺手买加购 / 查看更多推荐展开 / 点结算看弹窗。

北京市百新贸易有限公司 还差6件
商品图
科罗娜 特级SBT小瓶啤酒 275ml
275ml*24/箱
¥133.00
1+
商品图
百威 纯纯 330ml
330ml*24/箱 · 退瓶8元/箱
¥45.00
1+
商品图
52度经典浓香型高粱酒 500ml
500ml*12/箱
¥50.00
2+
还差6件达到起送数量(≥10件),顺手买一单 销量TOP5
查看更多推荐
小计 ¥278.00
北京市众诚汇贸有限公司
商品图
青岛 纯生8度 316ml
316ml*24/箱
¥89.00
1+
小计 ¥89.00
全选 合计 ¥100.00
结算(2)
首页
视频号
订货
购物车4
我的

你问的两个问题

① 触发条件是什么?—— 现成的,不用新开发。
现有接口 checkOrderReminder(storeId, items) 已经返回每个供应商的: needReminder(是否未达标)、minQuantity / totalQuantity(起送件数 / 当前件数)、minAmount / totalAmount(起送金额 / 当前金额)。 购物车页右上角「还差6件」就是它算出来的,且加购 / 改数量后有 600ms 防抖自动重算(scheduleReminderRefresh)。
触发条件 = reminderMap[supplierId].needReminder === true,为 true 就展示顺手买,达标自动收起。

② 能直接加在购物车里吗?—— 能,成本很低。
购物车本来就按供应商分组存储,顺手买商品走普通加购接口:同一商品自动合并数量、天然落回对应供应商分组,加购后防抖重算还差件数,达标后横条自动消失。后端零新增接口 —— 顺手买商品列表复用现有商品分页接口(/store/store-commodity/page 已支持 supplierId 过滤)。

触发时机

时机触发条件交互
① 购物车页加载 / 改数量 / 加购后 needReminder = true 未达标供应商卡片内出现「顺手买」横条,展示该供应商销量前 5 的商品:先显示第 1 个(行式排版与购物车商品一致),点「查看更多推荐」展开其余 4 个;点「+」直接加购;达标后横条变绿「已达标」并消失
② 点「结算」时 已勾选商品中存在未达标供应商 现有弹窗保留(返回 / 继续结算两按钮),文案提示可回购物车顺手买凑满,不拦截继续结算

凑单细节(实现时注意)

  1. 商品范围:只展示当前未达标供应商的可售商品(起送是供应商维度);过滤库存不足商品。
  2. 展示方式销量前 5;默认只显示第 1 个,点「查看更多推荐」展开其余 4 个(可再点「收起」折叠)。
  3. 排版:行式布局,与购物车商品行一致(图左、名称/规格右、底部价格 + 绿色「+」按钮)。
  4. 已在购物车的商品:不排除(可重复买),加购按钮变「已加n」。
  5. 数量与金额双阈值:两个条件是「或」的关系(接口语义 数量≥10 或 金额≥X),横条文案按剩余差距大的那个提示。

改动清单(确认后落地)

  1. 前端 cart.vue:利用现有 reminderMap,未达标供应商卡片内渲染顺手买横条(新组件 cart-suishou-buy);商品取该供应商销量前 5;默认展示 1 个 + 「查看更多推荐」展开;加购后调 scheduleReminderRefresh()
  2. 前端 cart.vue:结算弹窗保持返回 / 继续结算两按钮(不新增「去凑单」入口)。
  3. 后端:商品分页接口若不支持按销量排序,需补一个 orderBy=sales 排序参数(取前 5 用);checkOrderReminder 复用不动。