能量点充值

页面09-pay.html · 能量点充值 · 验收见 ⑧ · 分工见 ⓪

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

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

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

接口本页共 2 个 · GET /pay/packages · POST /pay/orders · 余额读 GET /wallet/balance · 完整见 ⑥

⓪ 本页做什么 · 分工速查

一句话：选择能量点套餐并完成微信支付，成功后余额增加。

• 产品 / 老板：⑧ · SKU 后台可配 · 五态 Tab 对照
• 测试：套餐选择 · 支付中/成功/取消/额度用尽各态
• UI：三档 SKU 卡片 + 贴底微信支付按钮
• 前端 / 后端：套餐 + 下单 + 微信 JSAPI · 详 ⑥

① 顶栏 · 屏幕最上方

• 「←」返回箭头 · 顶栏左侧 · 可点击 → btn_nav_back · history.back()
• 「能量点充值」 · 顶栏标题 → page_title
• 「余额 0」 · 顶栏黄底胶囊 → label_wallet_balance · 读 GET /wallet/balance

② 套餐列表 · 默认 #packages 态

• 灰字「SKU 后台可配 · 建议默认值」· 只展示
• 「体验包」 · 推荐 SKU · ¥6.9 / 50 能量点 · 可点击 → sku_trial
• 「求职月卡」 · ¥15.9 / 150 点 · 30 天 → sku_monthly
• 「冲刺季卡」 · ¥39.9 / 500 点 · 90 天 → sku_season
• 「微信支付 ¥6.9」 · 橙色主按钮 · 可点击 → btn_wechat_pay（价格随选中 SKU 变）

③ 支付流程态 · 顶栏 Tab 可切换

• 「调起微信支付…」 · 支付中态 → state_paying
• 「支付成功」 · +50 点 · 成功态 → state_pay_success · btn_pay_continue 返回来源页
• 「支付已取消」 · 取消态 → state_pay_cancel
• 「今日免费次数已用完」 · 额度态 → state_quota_exhausted

④ 顶栏余额 · 与套餐联动

• 「余额 0」 · 黄底胶囊 → label_wallet_balance · 进页读 GET /wallet/balance · 支付成功后 revalidate

⑤ 本页布局说明

• 沉浸充值页 · 无底部 Tab 栏 · 主 CTA「微信支付」在套餐列表下方

⑥ 支付 · GET /pay/packages · POST /pay/orders

• GET /pay/packages
  • 何时调：进页 onLoad · 渲染三档 SKU
  • 鉴权：需登录
  • 响应 · packages[] → sku_* · 字段 sku_id · name · price · points · duration_days · is_recommended
  • 响应示例：{ "packages": [{ "sku_id": "trial", "name": "体验包", "price": 6.9, "points": 50, "is_recommended": true }, …] }
• POST /pay/orders
  • 何时调：点 btn_wechat_pay · 请求体 { "sku_id": "trial" }
  • 成功：返回微信 prepay 参数 → 调起支付 → 展示 state_paying
  • 回调：Webhook 入账 · 前端轮询或事件 · 刷新 GET /wallet/balance → state_pay_success
  • 失败/取消：用户取消 → state_pay_cancel · 不扣款
• GET /wallet/balance（顶栏胶囊）· balance → label_wallet_balance
• 失败与边界：下单失败 Toast · 重复点击防抖 · 额度用尽 → state_quota_exhausted

⑦ 入口 · 出口

• 入口：首页/我的页能量余额 · 10-me card_wallet / btn_recharge · F1 额度不足引导
• 出口：支付成功「返回继续」→ 来源页 · 订单见 26-orders.html · ← 返回上一页

⑧ 怎么验收

1. 左右对照：默认态三档 SKU「体验包 ¥6.9」「求职月卡」「冲刺季卡」+ 「微信支付 ¥6.9」须与 ② 一致。
2. 接口专章：打开说明滚到 ⑥，可见套餐/下单接口与余额刷新链。
3. 打开：Finder 双击 09-pay.html。
4. 支付：选 SKU 高亮 · 点「微信支付」→ 支付中 → 成功 · 余额变 50。
5. Tab：切换支付中 / 成功 / 取消 / 额度用尽 · 各态文案正确。
6. 跨页：从 10-me「充值」进入 · 返回应回到我的页。

⑨ 团队补充

• 图标资产（第二批） · 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」
• 埋点 · pay_page_view · pay_sku_select · pay_wechat_click · pay_success · pay_cancel
• 原型限制：支付流程 mock · _pay-prototype.js · 未真调微信 · 正式上线 联调 → launch-static-to-api · 价格见 open-items