9:41
发货订单
支付订单
兑换订单
订货订单
全部
待发货
备货中
待收货
已完成
已取消
我的赏袋
积分商城
修改收货地址
收货人
手机号
所在地区
详细地址
确认收货

确认已收到该订单的所有商品?

确认后将无法撤回

取消订单

确定要取消该订单吗?

取消后将无法恢复

1
顶部导航
纯色 #D96E89 头部:返回箭头(回「我的」)+ 标题「我的订单」+ 微信胶囊;iOS 状态栏
2
主 Tab
发货订单 / 支付订单 / 兑换订单 / 订货订单;仅发货订单有数据,其余显示空态「暂无订单」(SVG 图标)
3
状态筛选
全部/待发货/备货中/待收货/已完成/已取消 chips,选中粉底白字,横向滚动(v5.13 无滚动条,鼠标拖拽)
4
来源切换
我的赏袋 / 积分商城 两个来源 Tab,切换过滤订单列表
5
订单卡片
来源圆点 + 时间 + 状态标签 + 货品图条 + 汇总(X 款卡牌/赏品 · 共 N 件);神秘礼物订单金色圆点 + 金色 badge + 礼物图,数量按实际件数渲染 ×N
6
卡片操作按钮
待发货:取消订单/修改地址;神秘礼物订单为自动发货不可取消,仅修改地址;待收货:确认收货(二次确认弹窗)
7
订单详情
滑入式详情:订单信息(编号可复制/来源/时间/完成时间)+ 收货信息(无地址显示「暂无收货地址」防御性兼容)+ 物流包裹 + 货品明细 + 底部操作栏
8
修改地址弹窗
底部弹层表单(收货人/手机号/所在地区/详细地址),保存后 toast「地址已修改」;浅粉通透蒙版 + blur
9
状态流转
确认收货/取消订单二次确认弹窗(主题色勾选/警告图标),操作后 toast 反馈;状态写入 sessionStorage 会话内持久化,刷新保留
10
复制
订单编号/物流单号点击复制,toast「已复制」
📋 说明面板 / 开发交付文档 — 我的订单 v5.13(神秘礼物联动)
📌 功能概述

我的订单(发货订单):查看来自「我的赏袋」「积分商城」的发货订单,支持按状态筛选(待发货/备货中/待收货/已完成/已取消)与按来源切换(我的赏袋/积分商城),点击订单卡片查看详情(订单信息/收货信息/物流/货品),支持取消订单、修改地址、确认收货等操作。

v5.3 新增(2026-08-05):与「我的赏袋 v2.0 销毁系统」联动——赏袋销毁累计满 5,000 张触发的神秘礼物自动生成发货订单(localStorage「mysteryOrders」),订单页加载时合并展示:金色来源圆点 + 「神秘礼物」金色 badge + 礼物图(wms-images/products/mystery-gift.png);无地址订单显示「暂无收货地址」引导。

v5.4 更新(2026-08-06):新增一条 moc 神秘礼物发货订单(静态演示数据,置顶展示金色圆点 + 礼物图 + badge);无地址兼容展示「暂无收货地址」保留(防御性)——实际业务中不会出现无地址订单:用户不填地址,神秘礼物保持未领取状态(赏袋 v2.1 待领取机制),不生成订单。

v5.5 更新(2026-08-06):神秘礼物订单为自动发货订单,不可取消——列表卡片与详情页底部均移除「取消订单」按钮(仅保留「修改地址」)。

v5.6 更新(2026-08-06):① 多个待领取神秘礼物**合并一张订单**(神秘礼物 ×N),列表卡/详情页数量按订单实际件数渲染(×N / 共 N 件);② 订单页 UI emoji(空态/确认图标/神秘礼物 badge)全部换内联 SVG。

v5.7 更新(2026-08-06):mock 枚举保留 **2 条神秘礼物订单**(×1 一条、多数量 ×3 一条,置顶展示);合并 localStorage 时**只保留 FH 编号订单**,非 FH 开头(旧 MY 前缀)数据加载时清除。

v5.8 更新(2026-08-06):神秘礼物订单补齐 **备货中 / 待收货 / 已完成** 三个状态 mock(待收货、已完成带物流包裹信息,包裹内展示礼物图)。

v5.9 更新(2026-08-06):按最新设计规范全量整改——① 头部浅粉渐变改**纯色 #D96E89**;② 主题色 token 统一草莓粉(brand/brand-text/brand-bg);③ 次级文字 #6E6E6E、占位/图标 #757575;④ 滚动条铁律:筛选栏/列表/详情滚动条可见(thin + 浅粉 thumb);⑤ 蒙版纯黑改**浅粉通透 rgba(253,242,245,.75) + blur(2px)**;⑥ 弹窗补粉调阴影;⑦ 列表卡间距 12px。

v5.10 更新(2026-08-06):评审复评——状态流转(确认收货/取消订单)**会话内持久化**(sessionStorage orderOverrides),刷新后状态保留;操作反馈 toast(已确认收货/订单已取消/已复制/地址已修改)确认已具备。

v5.11 更新(2026-08-06):① 修复:修改地址/确认收货/取消订单弹窗原嵌在 detailOverlay 内(平时 translateX(100%) 移出屏幕),列表页点击无反应——弹窗与 toast 移至 .phone 层级,列表操作可见可用;② 新增**交互面板**(右侧,10 项标注)。

v5.12 更新(2026-08-06):浏览器布局对齐其他页设计规范——body **align-items:flex-start 顶部对齐**(原 center 垂直居中)、去掉装饰性径向渐变背景(统一纯 #E8E5E0)。

v5.13 更新(2026-08-06):**所有滚动条隐藏**(珏哥要求,覆盖滚动条铁律),滚动功能保留;横向区域(状态筛选/卡片图条)改**鼠标拖拽滚动**(拖拽后抑制误触点击)。

🧱 页面结构
模块内容数据来源
顶部导航返回 + 「我的订单」标题 + 微信胶囊固定
主 Tab发货订单 / 支付订单 / 兑换订单 / 订货订单仅发货订单有数据,其余空态
状态筛选全部/待发货/备货中/待收货/已完成/已取消orders.status
来源 Tab我的赏袋 / 积分商城orders.source
订单列表订单卡片:来源圆点 + 时间 + 状态标签 + 货品图条 + 汇总orders 数组 + mysteryOrders
订单详情订单信息/收货信息/物流包裹/货品明细 + 底部操作栏orders.find(id)
📐 数据口径
  • 神秘礼物订单:静态 orders 内 moc 一条(mystery:true,时间 2026-08-06 置顶)+ localStorage「mysteryOrders」数组(结构 {id,source:'shang',sourceName:'我的赏袋',time,status:'待发货',items:[{type:'神秘礼物',qty:1}],addr,pkgs:null})加载时合并(标记 mystery=true),按时间倒序
  • 无地址订单:实际业务不产生——用户不填地址时神秘礼物保持未领取(赏袋 mysteryPending 待领取),只有有收货地址才生成订单;「暂无收货地址」仅为兼容展示
  • 来源圆点:mystery 订单用金色渐变 .source-dot.mystery;普通订单按 source 颜色
  • 状态标签:待发货→pending / 备货中→preparing / 待收货→shipping / 已完成→done / 已取消→cancelled
  • 货品统计:卡牌款数(countCards)/赏品款数(countGoods)/总件数(totalQty)
🖱️ 交互行为
操作行为影响范围
切换状态/来源过滤订单列表并重新渲染;无结果显示空态「暂无订单」列表
点击订单卡片进入订单详情:订单信息/收货信息/物流/货品详情视图
神秘礼物订单金色圆点 + 礼物图 + 「神秘礼物」badge;详情页货品区显示神秘礼物图;无地址时收货信息显示「暂无收货地址」(防御性兼容,实际业务不产生无地址订单)列表卡片 + 详情
取消订单 / 修改地址 / 确认收货按状态显示对应操作按钮;神秘礼物订单为自动发货订单,不可取消(仅可修改地址)订单状态 + mystery 标记
🔲 状态说明
状态说明完成情况
待发货普通订单可取消/修改地址;神秘礼物(自动发货)不可取消,仅可修改地址✅ 已实现
备货中无操作按钮✅ 已实现
待收货可确认收货✅ 已实现
已完成/已取消无操作按钮✅ 已实现
神秘礼物无地址收货信息显示「暂无收货地址,请补充收货地址后发货」(防御性兼容)——实际不出现:用户不填地址,神秘礼物为未领取状态,不生成订单✅ v5.4 已实现
其他主 Tab空态「暂无订单」✅ 已实现
🔧 技术实现
  • 数据:静态 orders 数组(Mock,含 v5.4 新增 moc 神秘礼物订单)+ localStorage「mysteryOrders」合并
  • 神秘礼物图:../../../../../wms-images/products/mystery-gift.png(共享,与赏袋 v2.0/v2.1 同一张)
  • 图片:/wms-order-imgs/ 系列卡图 + 赏品图(nextCardImg/nextGoodsImg 轮换)
  • 字体:ChillRound / 寒蝉全圆体,后备 PingFang SC
  • 兼容:现代 Chrome;无外部依赖