原型图 | React + Tailwind
C端小程序套餐订单详情页，用户从订单列表（C02）的套餐订单Tab点击进入，展示套餐购买订单的详细信息。支持自助申请退款：系统自动按公式计算退款金额（退款 = 剩余实付金额，赠送清零），可退自动执行，不可退在弹窗中展示计算明细和原因。余额全部用完后屏蔽退款按钮。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 状态标识 | 顶部展示订单状态（已完成/已退款/退款处理中/退款失败） | 所有场景 |
| 套餐信息 | 套餐名称、套餐额度（总获得金额）、赠送金额、已消费金额（部分场景） | 所有场景 |
| 支付信息 | 支付方式、实付金额 | 所有场景 |
| 订单信息 | 订单号、支付时间、用户ID | 所有场景 |
| 退款计算明细 | 套餐金额、赠送金额、已消费金额、剩余实付金额、退款金额、赠送额度清零提示 | 已退款/退款弹窗 |
| 退款进度 | 退款金额、退款方式、申请时间 | 退款处理中 |
| 退款失败 | 失败原因 + 重新退款按钮 | 退款失败 |
| 退款规则说明 | 页面底部展示退款公式和限制条件 | 所有场景 |
| 提示 | 余额累加提示/退款说明/到账提示 | 所有场景 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 进入详情 | 用户在C02点击套餐订单卡片 | 订单存在 | 展示套餐订单详情 | - | 加载订单详情数据 |
| 申请退款 | 用户点击"申请退款"按钮（已完成场景） | 套餐已完成 + 套餐金额未全部消耗 | 弹窗展示退款计算明细（套餐金额/赠送金额/已消费金额/剩余实付金额/退款金额） | 网络异常提示重试 | 可退→自动执行退款；不可退→展示原因，仅可关闭 |
| 重新退款 | 用户点击"重新退款"按钮（退款失败场景） | 上次退款失败 | 系统重新发起退款，跳转退款处理中 | 仍失败则保持当前页面 | 重新发起LINE Pay退款请求 |
| 额度用完 | 套餐金额全部消耗 | - | "申请退款"按钮置灰不可点击 | - | 屏蔽退款入口 |
| 点击返回 | 用户点击左上角返回箭头 | - | 返回C02订单列表 | - | 返回C02订单列表 |
| 场景 | 展示内容 |
|---|---|
| ①已完成 | 绿色状态 + 套餐信息 + 支付信息 + 订单信息 + 额度提示 + 申请退款按钮（额度用完置灰） |
| ②已退款 | 灰色状态 + 套餐信息 + 退款计算明细（套餐金额/赠送金额/已消费金额/剩余实付金额/退款金额）+ 赠送额度清零提示 + 支付信息 + 订单信息 |
| ③退款处理中 | 蓝色状态（脉冲动画）+ 套餐信息 + 退款进度 + 支付信息 + 订单信息 + 到账提示 |
| ④退款失败 | 红色状态 + 失败原因 + 套餐信息 + 支付信息 + 订单信息 + 重新退款按钮 |
C04 套餐订单详情 ├─ 来源：C02 订单列表套餐订单Tab点击 ├─ 场景①已完成：套餐信息 + 支付信息 + 申请退款按钮（额度用完置灰） ├─ 场景②已退款：套餐信息 + 退款计算明细 + 赠送额度清零提示 ├─ 场景③退款处理中：套餐信息 + 退款进度 + 到账提示 ├─ 场景④退款失败：失败原因 + 重新退款按钮 ├─ 申请退款 → 弹窗（系统自动计算） │ ├─ 可退 → 展示计算明细 + 确认退款 → 场景③退款处理中 │ └─ 不可退 → 展示计算明细 + 原因 → 仅可关闭 ├─ 重新退款 → 场景③退款处理中 └─ 返回箭头 → C02 订单列表