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

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

确认后将无法撤回

取消订单

确定要取消该订单吗?

取消后将无法恢复

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

一句话:我的订单页 = 查看「我的赏袋 / 积分商城」两个来源的发货订单,支持状态筛选、订单详情、取消/修改地址/确认收货,以及限购商品排队号展示。

查看来自「我的赏袋」「积分商城」的发货订单:按状态筛选(待发货/备货中/待收货/已完成/已取消)与按来源切换,点击订单卡片查看详情(订单信息/收货信息/物流/货品),支持取消订单、修改地址、确认收货;赏袋销毁满 5,000 张自动生成的神秘礼物订单在此展示(金色标识、自动发货、无售后);积分商城限购商品订单展示每品独立的排队号(v5.16 起,v5.17 改为卡片头部 + 详情订单信息区展示)。当前版本 v5.17(2026-08-10)。

版本演进:v5.3 神秘礼物联动 → v5.5 自动发货不可取消 → v5.9 设计规范整改 → v5.10 状态流转会话持久化 → v5.13 滚动条隐藏 → v5.14 无售后提示 → v5.15 提示条吸底 → v5.16 限购商品发货顺序 → v5.17 排队号文案与位置优化

🧱 页面结构
模块内容数据来源
顶部导航返回 + 「我的订单」标题 + 微信胶囊固定
主 Tab发货订单 / 支付订单 / 兑换订单 / 订货订单仅发货订单有数据,其余空态
状态筛选全部/待发货/备货中/待收货/已完成/已取消订单状态
来源 Tab我的赏袋 / 积分商城订单来源
订单列表订单卡片:来源圆点 + 时间 + 状态标签 + 货品图条 + 汇总;积分商城限购商品订单卡片头部带「排队号 X」浅粉标签(v5.17)订单列表数据 + 本地缓存的礼物订单
订单详情订单信息/收货信息/物流包裹/货品明细 + 底部操作栏当前订单数据
📋 功能说明(需求)
我的赏袋订单

查看来自「我的赏袋」的卡牌/赏品发货订单:卡牌订单展示卡牌款式数,赏品订单展示赏品款式数,汇总总件数;神秘礼物为赏袋销毁满 5,000 张自动生成的赠品订单(金色标识),多个待领取神秘礼物合并一张订单,自动发货不可取消,无售后。

积分商城订单

查看积分兑换生成的发货订单:货品名 + 单价 + 数量 + 实付积分;待发货订单可取消/修改地址,待收货可确认收货。

限购商品排队号(v5.16 起,v5.17 优化)

限购商品用户下单后每个品按下单时间独立自增分配排队号(每品各自从 1 开始,互不干涉);同单同品多件共用一个号;下单即锁定,取消订单空号不补、后面不前移;号终身绑定订单,全状态显示(含已取消);非限购商品订单不显示。展示位置(v5.17):① 订单卡片头部(来源圆点/时间行,状态标签旁)「排队号 X」浅粉标签;② 订单详情订单信息区(与订单编号/下单时间并列)「发货顺序:排队号 X」;商品信息区不再展示。

神秘礼物订单(v5.3 起)

赏袋销毁累计满 5,000 张触发生成;用户不填地址则保持未领取状态、不生成订单;不可取消(自动发货),仅可修改地址;无售后——「神秘礼物为活动赠品,不支持退换货及售后」提示条吸在底栏上方。

状态流转

确认收货/取消订单为二次确认弹窗;操作结果会话内持久化,刷新页面状态保留。

📐 数据口径
  • 订单来源:我的赏袋(卡牌/赏品发货订单)、积分商城(积分兑换发货订单);礼物订单为赏袋销毁满 5,000 张自动生成,与本地缓存的礼物订单合并展示
  • 无地址订单:实际业务不产生——用户不填地址时神秘礼物保持未领取状态,只有有收货地址才生成订单;「暂无收货地址」仅为兼容展示
  • 来源圆点:礼物订单金色渐变圆点;普通订单按来源配色(我的赏袋 / 积分商城)
  • 状态标签:待发货 / 备货中 / 待收货 / 已完成 / 已取消 五色区分
  • 货品统计:卡牌款数 / 赏品款数 / 总件数
  • 排队号(v5.16 起):限购商品每品独立从 1 自增(按下单时间排序);同单同品多件共用一个号;下单即锁定、取消空号不补;全状态保留显示;非限购商品订单不显示。v5.17 展示位置:卡片头部标签 + 详情订单信息区字段
  • 演示数据:积分商城 7 单覆盖全场景——梦境爱丽丝2 号 1/2(待发货)、聊斋志异 号 1(备货中)、伊索寓言 号 1 已取消 + 号 2(空号不补演示)、一千零一夜2 / 成何体统2 非限购无号
❌ 错误提示清单
页面按钮/操作场景提示
修改地址弹窗保存收货人/手机号/所在地区/详细地址任一为空toast「请填写完整信息」
订单列表/详情复制订单编号/物流单号点击复制toast「已复制」
确认收货弹窗确认收货二次确认「确认已收到该订单的所有商品?确认后将无法撤回」→ 确认toast「已确认收货」
取消订单弹窗取消订单二次确认「确定要取消该订单吗?取消后将无法恢复」→ 确认toast「订单已取消」
订单列表状态/来源筛选无匹配订单空态「暂无订单」
神秘礼物订单取消订单自动发货订单不可取消不展示取消按钮(仅修改地址)
🖱️ 交互行为
操作行为影响范围
切换状态/来源过滤订单列表并重新渲染;无结果显示空态「暂无订单」列表
点击订单卡片进入订单详情:订单信息/收货信息/物流/货品详情视图
神秘礼物订单金色圆点 + 礼物图 + 「神秘礼物」badge;详情页货品区显示神秘礼物图;无地址时收货信息显示「暂无收货地址」(防御性兼容,实际业务不产生无地址订单)列表卡片 + 详情
取消订单 / 修改地址 / 确认收货按状态显示对应操作按钮;神秘礼物订单为自动发货订单,不可取消(仅可修改地址)订单状态 + 礼物订单标记
排队号展示(限购商品)订单卡片头部「排队号 X」浅粉标签 + 详情订单信息区「发货顺序:排队号 X」;非限购商品订单不显示限购商品订单(含号)
🔲 状态说明
状态说明完成情况
待发货普通订单可取消/修改地址;神秘礼物(自动发货)不可取消,仅可修改地址✅ 已实现
备货中无操作按钮✅ 已实现
待收货可确认收货✅ 已实现
已完成/已取消无操作按钮;已取消订单保留排队号(空号不补,号终身绑定)✅ 已实现
神秘礼物无地址收货信息显示「暂无收货地址,请补充收货地址后发货」(防御性兼容)——实际不出现:用户不填地址,神秘礼物为未领取状态,不生成订单✅ v5.4 已实现
其他主 Tab空态「暂无订单」✅ 已实现