订单详情页商品分级采用“订单头+商品分组+SKU”三层结构，用嵌套数组（order.items→item.skus）组织，分组键用shop_id；uni-app中通过scroll-view、懒加载、v-if控制渲染粒度防卡顿；点击跳转需手动计算偏移并统一转px；物流信息须绑定到对应分组并按展开状态控制组件挂载。
订单详情页里怎么组织商品分级数据结构
订单详情页的商品分级展示，本质是把一个订单拆成「订单头信息 + 多个商品分组 + 每组内多个 SKU」三层关系。不能直接 flat 丢进 v-for 渲染，否则无法区分“这是同一笔凑单的两件衣服”还是“两个独立下单的商品”。
推荐用嵌套数组结构：order.items 是一级分组（比如“来自店铺 A 的订单”），每个 item 再带 skus 数组（具体尺码/颜色）。后端最好按此结构返回，前端若需拼接，注意用 groupById 或 reduce 聚合，别靠 findIndex 循环硬匹配。
- 分组 key 建议用
shop_id或order_item_id，不用goods_id—— 同一商品不同规格要分开显示 - 每组顶部需展示店铺名、物流单号（如有）、统一操作按钮（如“再次购买”）
- SKU 行必须包含：图片、规格文字、单价、数量、小计、操作（如“联系客服”）
如何让多级列表在 uni-app 里不卡顿
订单详情页常含 10+ 商品、每组 3–5 SKU，scroll-view 嵌套滚动 + 图片懒加载没配好，真机上一滑就掉帧。核心是控制渲染粒度和资源加载时机。
关键动作：
- 外层用
<scroll-view scroll-y>，但禁止内部再套scroll-view—— 分组间用普通<view>+margin-bottom隔开即可 - 所有
<image>必须加lazy-load="true"，且 src 不为空字符串（空图占位用/static/images/placeholder.png） - SKU 列表超过 5 条时，考虑用
v-if控制“展开/收起”，默认只渲染前 3 条，避免一次性 mount 过多节点 - 不要在
v-for中调用计算属性或方法返回样式 —— 提前算好存在 data 里，比如sku.displayPrice = (sku.price * sku.count).toFixed(2)
点击“查看全部商品”后怎么精准跳转到对应分组
订单页常有顶部汇总栏（如“共 3 家店铺，12 件商品”），点击某家店铺的“查看全部”，需要平滑滚动到该分组位置。uni-app 的 scroll-view 不支持原生 scrollIntoView，得手动算偏移。
实操要点：
- 给每个分组容器加唯一
id，比如:id="'group-' + item.shop_id' - 用
uni.createSelectorQuery()拿到目标元素boundingClientRect，再调scroll-view的scrollTop属性 - 注意：H5 和小程序对
scrollTop的单位处理不一致 —— 小程序是 px，H5 是 rpx，建议统一转成 px 计算（用uni.upx2px） - 滚动前先
setTimeout一帧（requestAnimationFrame更稳），确保 DOM 已渲染完毕，否则查不到节点
为什么“已发货”状态下的物流信息总对不上商品分组
常见错误是把物流进度条（logistics）和商品分组（items）当成平行结构处理，结果物流节点塞在页面顶部，用户找不到哪段进度对应哪个包裹。
正确做法是把物流数据按 express_no 或 package_id 绑定到对应分组：
- 后端返回时，每个
items[i]带logistics字段（哪怕为空），前端渲染时判断是否存在再决定是否显示进度条 - 不要复用同一个
<uni-logistics>组件实例 —— 每组一个实例，传入独立的tracking-number和type - 小程序平台对
uni-logistics的height有最小限制（至少 200rpx），若物流节点少于 3 条，底部会留白，需用style="min-height: 200rpx"保底
最易被忽略的是：分组折叠状态下，物流组件仍会请求接口。务必在 v-if="isGroupExpanded" 里控制组件挂载，而不是只靠 v-show。
