退款申请

页面34-refund.html · 退款申请 · 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页唯一 · POST /pay/refunds · 提交 btn_submit_refund · 完整字段见 ⑥

⓪ 本页做什么 · 分工速查

一句话：选择可退订单与原因提交退款，后台人工审批原路退回。

• 产品 / 老板：⑧；§9 Q1 人工审批 · 1.0 无发票
• 测试：⑧ + 申请/审核中/拒绝/通过四态 Tab
• UI：订单卡 + 原因表单 + 结果全屏态
• 前端 / 后端：POST /pay/refunds · 详 ⑥
• 合规：拒绝理由运营维护 · 原路退回说明

① 顶栏 · 屏幕最上方

• 返回箭头 → btn_nav_back · 优先 history.back() · fallback 11-settings.html
• 「退款申请」 → page_title
• 「提交后人工审核 · 原路退回 · 暂不支持发票」 · 灰色小字 → copy_refund_hint

② 申请表单 · 主内容（#apply）

• 表单容器 → form_refund_apply
• 「体验包 · ¥6.9」 · 订单卡片 → card_refund_order · mock 来自订单列表
• 「2026-05-20 · 订单号 wx_882…」 · 订单元信息 · 只展示
• 「退款原因」 · 标签 · 下拉 → select_refund_reason（未使用能量点/服务不满意/重复支付/其他）
• 补充说明 · 多行选填 → input_refund_note
  • 长度：0～500 字 · maxlength="500" · 可不填
  • 格式：纯文本 · 提交前 trim · 不解析 HTML
  • 选填：未填不影响提交 · 无红框 · 有内容随 note 字段提交
  • 非空提交后：点「提交申请」且原因已选 → Toast「退款申请已提交」→ 切 审核中态（#pending）· 表单保留（原型）
• 「提交申请」 · 贴底橙色主按钮 → btn_submit_refund · 调 POST /pay/refunds

③ 审核中态 · 全屏（#pending）

• 「退款审核中」 → state_refund_pending
• 「预计 1～3 个工作日 · 通过后原路退回」 · 副文案 · 只展示

④ 已拒绝态 · 主内容（#rejected）

• 「退款申请失败」 → state_refund_rejected
• 「能量点已部分使用，不符合全额退款条件」 · 失败原因 · 运营可配
• 「审核结果会通过消息通知你」 · 灰色小字

⑤ 已通过态 · 全屏（#approved）

• 「退款已通过」 → state_refund_approved
• 「¥6.9 将原路退回微信零钱」 · 金额说明 · 只展示

⑥ 退款提交 · POST /pay/refunds（本页唯一）

说明：用户选定订单与原因后提交；审批结果由后台更新，前端轮询或推送切换 #pending/#rejected/#approved。

• 何时调 · 点击 btn_submit_refund · 原因必选
• 鉴权 · 需登录 · 订单须属于当前用户
• 请求体
  • order_id · 来自 card_refund_order
  • reason · select_refund_reason enum
  • note · input_refund_note 可选
• 响应 · { "refund_id": "…", "status": "pending" } → 切 state_refund_pending
• 失败与边界
  • 能量已使用 → 拒绝 · 展示 state_refund_rejected + 运营理由
  • 重复申请 → Toast
  • 网络失败 Toast · 保留表单

⑦ 入口 · 出口

• 入口：设置 → 申请退款
• 出口：审批结果留页 · 返回设置

⑧ 怎么验收

1. 左右对照：申请态「体验包 · ¥6.9」、原因下拉四项须与 ② 一致。
2. 接口专章：滚到 ⑥ · 见 POST /pay/refunds 请求体与状态流转。
3. 提交：点「提交申请」→ Toast → 自动切审核中态（原型 mock）。
4. 拒绝：切 Tab · 见「能量点已部分使用…」运营理由。
5. 通过：切 Tab · 见「¥6.9 将原路退回微信零钱」。
6. 跨页：订单卡片与 26-orders.html 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」
• 埋点 · refund_apply_view · refund_submit · refund_result（附 status）
• 原型限制：四态 Tab + 提交 mock · _refund-prototype.js · 正式上线 → launch-static-to-api