uni-app实现美团式多规格加购的核心是将规格组合、库存校验、加购动作压缩至一次点击：动态生成二维规格按钮矩阵，点击即时校验缓存库存并禁用按钮，成功后仅更新购物车数量与徽标并toast提示，未选全时动态提示缺失项。
uni-app 实现类似美团详情页的多规格商品快速加购，核心不是堆功能，而是把「规格组合 → 库存校验 → 加购动作」这三步链路压进一次点击里。跳过弹窗、不依赖全局状态、避免重复请求，才能做到“点一下就加进购物车”。
规格按钮必须用二维数组动态生成，不能硬编码
美团式规格（如“颜色 × 尺寸 × 版本”）本质是笛卡尔积组合。后端返回的通常是扁平化规格列表 + 规格值映射关系，前端要自己还原结构：
-
specsList是原始数据，比如[{id:1,name:"颜色",values:["红","蓝"]},{id:2,name:"尺寸",values:["S","M"]}] - 用
computed生成二维数组specMatrix：每行是一个规格维度，每列是该维度下的可选项 - 每个按钮绑定
@click="selectSpec(dimIndex, valueIndex)"，而不是直接写死"红色"或"S码" - 关键点：点击后只更新当前维度选中态，其他维度保留原选择 —— 这样用户能自由切换组合，而不是强制“先选颜色再选尺寸”
库存校验必须在点击瞬间完成，不能等弹窗确认
用户点“加入购物车”那一刻，你得立刻知道这个组合有没有货。否则就会出现“点了才提示缺货”，体验断层：
- 后端必须提供接口，接收规格 ID 数组（如
[101, 203]），返回{in_stock: true, stock_num: 5} - 前端缓存所有组合的库存状态，用
Map存键值对：new Map([["101-203", {in_stock:true, stock_num:5}], ["102-203", {in_stock:false}]]) - 点击加购前，先查 Map；命中则直接走加购逻辑；未命中则发请求并缓存结果，**同时禁用按钮加 loading 状态**，防止重复点击
- 别用
v-if控制按钮显隐 —— 那会导致 DOM 重绘卡顿；用:disabled+ class 切换样式更稳
加购动作要绕过购物车页面，直接提交并局部反馈
美团详情页加购后，顶部购物车图标数字+1、小红点闪一下、底部弹 toast，全程不跳转。实现要点：
- 调用加购接口时，传参包含：商品 ID、规格 ID 数组、数量（默认为 1）、用户 token
- 成功后，**仅更新两个地方**：
cartCount（全局或 vuex 中的购物车总数）、cartBadge（当前页右上角徽标） - 用
uni.showToast({icon:'success',title:'已加入购物车',duration:800})，别用uni.showModal—— 模态框打断操作流 - 如果用户连续点击，需在请求 pending 期间锁住按钮，并在响应后重置状态；否则会出现“点三次加三件”但只显示 +1 的错觉
容易被忽略的边界：规格未选全时的按钮状态和文案
用户只选了“颜色”没选“尺寸”，此时加购按钮不能灰掉就完事 —— 得明确告诉ta缺什么：
- 按钮文案从“加入购物车”变成“请选择尺寸”
- 未选维度的按钮区域加红色边框或底部提示条（如“尺寸：未选择”）
- 不要用
required或表单校验方式处理，那是表单场景；这里是交互引导，靠状态驱动更自然 - 注意 iOS 微信里
button组件的hover-class默认有 300ms 延迟，建议设成hover-start-time="30"提升反馈感
