我的订单

页面26-orders.html · 我的订单 · 验收见 ⑧ · 分工见 ⓪

阅读方式：每条先写界面上是什么，再写元素 ID 与接口。

展示顺序（按角色 · 章节号固定）

• 产品 / 老板：⓪ → ①～⑤ → ⑧
• 测试：⑧ → ①～⑤ → ⑦
• 研发：接口速查 → ①～⑤ → ⑥ → ⑦
• UI：①～⑤（图标路径在控件下）
• 数据 / 增长：⑨ → ⑥
• 多态页：③ 内分态 · ⑥⑦⑧⑨ 号不变

接口本页唯一 · GET /pay/orders → list_order_items · 原型 HTML 写死一行 mock · 完整字段见 ⑥

⓪ 本页做什么 · 分工速查

一句话：展示能量点充值订单记录；需退款或发票说明见「设置」。

• 产品 / 老板：⑧ · 本页只查单 · 不在订单下引导退款
• 测试：⑧ + 有订单/空态 Tab · 空态跳充值
• UI：订单卡片列表 · 禁止在支付成功卡片下写退款路径
• 前端 / 后端：GET /pay/orders → list_order_items · 详 ⑥
• 合规：发票/退款入口在 11-settings.html · 本页不上屏

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 10-me.html · index 机模 data-embed-back="shell" 回当前 Tab 壳层
• 「我的订单」 → page_title

② 订单列表 · 有订单态（#list）

• 列表容器 → list_order_items · 渲染 GET /pay/orders · 详 ⑥
• 「体验包」 · 商品名 · 「¥6.9」 · 价格 · mock 第一行
• 「2026-05-20 · 已支付 · +50 能量点」 · 元信息 · 只展示
• 「支付成功」 · 黄底胶囊 · 只展示
• 本页无订单卡片下方的退款/发票灰色说明 · 避免像引导退款

③ 空列表态 · 全屏（#empty）

• 「暂无订单」 → state_empty_orders
• 「去充值」 · 橙色主按钮 → btn_go_pay · 链 09-pay.html

④ 本页无贴底 Tab

沉浸列表页 · 空态 CTA 居中。

⑤ 本页无底部 Tab 栏

从「我的」进入 · 返回回我的。

⑥ 订单列表 · GET /pay/orders（本页唯一）

说明：左侧每一行订单均来自本接口；原型 HTML 写死一行「体验包 ¥6.9」mock。

• 何时调
  • 进页 onLoad · 我的 → 我的订单
  • 支付成功返回 · 可选 revalidate
  • 未登录 → 跳登录
• 鉴权 · 需登录 · 401 → 登录后回跳
• 响应 · items[] → list_order_items
  • id · 订单号 · 退款页带入
  • product_name · 如「体验包」
  • amount · 如 6.9 · 展示 ¥
  • status · paid / refunded / pending
  • points_granted · 如 +50 能量点
  • paid_at · ISO → 「2026-05-20 · 已支付」
• 响应示例 · { "items": [{ "id": "wx_882…", "product_name": "体验包", "amount": 6.9, "status": "paid", "points_granted": 50, "paid_at": "2026-05-20T…" }] }
• 失败与边界
  • 加载中 → 骨架屏
  • items 空 → state_empty_orders
  • 网络失败 Toast + 重试

⑦ 入口 · 出口

• 入口：我的 → 我的订单
• 出口：空态 → 09-pay.html · 退款 → 设置 → 34-refund.html

⑧ 怎么验收

1. 左右对照：有订单态「体验包」「¥6.9」「2026-05-20 · 已支付 · +50 能量点」须与 ② 一致；订单卡片下无退款/发票/版本号类说明。
2. 接口专章：滚到 ⑥ · 见 GET /pay/orders 字段与空态。
3. 打开：双击 26-orders.html · 有订单/空态 Tab 可切换。
4. 空态：切 Tab · 见「暂无订单」+「去充值」→ 充值页。
5. 返回：顶栏 → 我的页。
6. 跨页：退款页订单卡片与 mock 订单号/金额对齐。

⑨ 团队补充

• 图标资产（第二批） · app-image/ICON-CATALOG.md · 全站通用 §7 · 上传 §8 · 品牌 §9 · 本页见 §10 索引表
• 图标资产（第三批） · app-image/ICON-CATALOG.md · 状态栏 §11 · 增长/分享 §12 · 表单/附件 §13 · 法务 §14 · 订单/空态 §15 · 媒体/语音 §16 · 本页见 §10
• 图标资产（第四批） · app-image/ICON-CATALOG.md · F4 模块 §18 · 状态徽章 §19 · 弹窗/加载 §20 · 联系打码 §21 · 折叠/更多 §22 · 文件类型 §23 · 分享装饰 §24 · 账号 §25 · 本页见 §10
• 分期与排期 · 产品/研发见 launch-static-to-api · 开发说明 ②～⑦ 不写「阶段 N」
• 埋点 · orders_view · orders_go_pay
• 退款 / 发票（不上屏本页）：入口在设置 link_refund → 34-refund.html；发票说明见设置 copy_no_invoice_note（与 PRD Q1 一致 · 人工审批）
• 原型限制：静态一行 mock · 未真调 API · 正式上线 → launch-static-to-api