Bootstrap仅提供UI组件，拼团逻辑需自行实现：用card和progress搭建页面骨架，倒计时须动态计算并校准时间，按钮状态要与服务端实时同步。
Bootstrap 本身不提供拼团业务逻辑，它只负责 UI 布局和组件样式；直接套用 card、progress、badge 就能快速搭出拼团页面骨架，但关键交互（如倒计时、参团状态、按钮禁用逻辑）必须自己写 JavaScript 控制。
用 Bootstrap 5 的 card 和 progress 组装拼团商品区块
拼团页核心是「商品信息 + 团进度 + 时间 + 按钮」四要素。Bootstrap 5 的 card 足够承载，注意别用过深的嵌套——太多 row/col 容易让响应式错乱。
实操建议：
- 用
<div class="card"> 包裹单个拼团项，内部用 <code>card-img-top放商品图，card-body放标题、价格、成团人数 - 进度条用
<div class="progress"><div class="progress-bar" role="progressbar" style="width: 65%"></div></div>，宽度值必须由后端或 JS 动态计算（比如Math.round((current / target) * 100)） - 倒计时数字建议单独用
<span class="text-danger fw-bold">02:18:47</span>，别塞进progress里——语义不清且不好对齐 - 把结束时间硬编码在 HTML 里，JS 只读一次，后续不更新 → 倒计时卡住
- 用
setTimeout递归调用但没清理，切换页面后还在后台跑 → 内存泄漏 - 没做时间校准，纯靠客户端时间 → 用户手机时间不准导致提前/延后结束
- 后端返回 ISO 格式结束时间（如
"2024-06-15T23:59:59Z"），JS 用new Date()对比计算剩余毫秒数 - 用
setInterval每秒更新，每次先算remaining = endTime - new Date()，再转成时分秒 - 倒计时归零后，立刻清除定时器，并更新按钮文字为
"已结束"、添加disabled属性 - 用户点按钮 → 立即
btn.disabled = true+btn.innerHTML = "<span class="spinner-border spinner-border-sm"></span> 提交中..." - 请求成功 → 根据返回的
status字段跳转详情页或刷新当前页 - 请求失败（HTTP 错误、超时、400/403）→ 恢复按钮可点击，并提示具体错误（如
"库存不足"或"您已参团"） - 特别注意：如果接口返回的是 200 但业务失败（如
{"code": 4001, "msg": "该团已满员"}），前端必须解析code字段，不能只看 HTTP 状态码
倒计时要用 setInterval，不能靠服务端渲染静态时间
用户打开页面时，倒计时必须实时跑，否则刷新就重置，体验断裂。Bootstrap 没有内置倒计时组件，得自己写。
常见错误现象：
实操建议：
拼团按钮状态要同步服务端真实数据，不能仅靠前端 toggle
用户点击“发起拼团”或“加入拼团”后，按钮必须立刻变灰、显示加载中，同时发请求。但很多人只改了按钮样式，没处理请求失败或网络中断的情况。
使用场景：
拼团页面最难的不是布局，而是状态同步——倒计时、按钮、进度条、库存数，这四个东西必须全部从同一份服务端数据驱动。哪怕只缓存一个字段（比如把成团人数存在 localStorage），都可能造成用户看到“还差 1 人”却点不了按钮。
