原型图 | React + Tailwind
C端小程序套餐购买页，用户通过柜机套餐购买二维码或LINE小程序入口进入，展示在售套餐列表并完成购买。支付方式仅支持LINE Pay。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 套餐余额卡片 | 当前累计套餐余额(L) | 仅已有套餐用户 |
| 无套餐引导 | 提示"您还没有套餐" + 引导购买 | 仅无套餐用户 |
| 余额累加提示 | 醒目位置展示"买得越多越划算，多次购买余额自动累加" | 所有场景 |
| 套餐卡片 | 渐变色头部宣传区 + 套餐名称 + 套餐金额 + 赠送金额 | 在售列表（仅展示后台已上架套餐） |
| 支付方式 | 仅 LINE Pay | 购买确认时 |
| 购买成功 | 套餐信息 + 本次额度 + 累计套餐余额 + 余额累加提示 | 购买成功 |
| 支付失败 | 失败提示 + 重新购买按钮 | 支付失败/取消 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 选择套餐 | 用户点击套餐卡片 | 套餐在上架销售期内 | 高亮选中，展示确认购买按钮 | - | 选中套餐 |
| 确认购买 | 用户点击确认购买按钮 | 用户已登录，已选择套餐 | 跳转LINE Pay支付 | 未登录：引导登录 | 生成套餐购买订单，发起LINE Pay支付 |
| 支付成功 | LINE Pay支付完成 | 支付回调成功 | 展示购买成功页，含额度汇总 | - | 生成套餐余额，更新累计套餐余额 |
| 支付失败/取消 | LINE Pay支付失败、取消或超时 | - | 展示失败提示和重新购买按钮 | - | 关闭本次购买订单，不生成额度 |
| 返回首页 | 用户点击返回或完成按钮 | - | 跳转首页 | - | 跳转 C00 首页 |
| 场景 | 展示内容 |
|---|---|
| 有套餐用户 | 套餐余额卡片 + 余额累加提示 + 在售套餐卡片列表 + 确认购买按钮 |
| 无套餐用户 | 无套餐引导 + 余额累加提示 + 在售套餐卡片列表 + 确认购买按钮 |
| 购买成功 | 成功标识 + 套餐信息 + 本次额度 + 累计套餐余额 + 余额累加提示 + 返回首页按钮 |
| 支付失败/取消 | 失败标识 + 提示文案 + 重新购买按钮 + 返回首页按钮 |
C05 套餐购买 ├─ 来源：C00 首页"购买套餐" / "立即购买" / 柜机套餐购买二维码 ├─ 确认购买 → LINE Pay 支付 ├─ 购买成功 → 展示额度汇总 → 返回 C00 首页 ├─ 支付失败 → 展示失败提示 → 重新购买 / 返回 C00 首页 └─ 返回箭头 → C00 首页