原型图 | React + Tailwind
C端小程序套餐订单详情页，用户从订单列表（C02）的套餐订单Tab点击进入，展示套餐购买订单的详细信息。支持自助申请退款：系统自动计算可退金额（为该订单尚未使用的实付金额），可退自动执行；该订单实付用尽时不再展示"申请退款"入口；该订单被未结算取水订单占用时暂不可发起退款。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 状态标识 | 顶部展示订单状态（已完成/已退款/退款处理中/退款失败） | 所有场景 |
| 套餐信息 | 套餐名称、套餐额度（总获得金额）、赠送金额 | 所有场景 |
| 套餐名称口径 | 按用户当前语言展示下单时快照的套餐名称，该语言未录入时回退快照的泰文名；套餐改名或多语言补录不影响历史订单展示 | 所有场景 |
| 支付信息 | 支付方式、实付金额 | 所有场景 |
| 订单信息 | 订单号、支付时间、用户ID | 所有场景 |
| 退款信息 | 实付金额、可退金额、退款金额、赠送扣除提示 | 已退款/退款弹窗 |
| 退款中冻结 | 退款发起即冻结出队（额度不再参与消耗）；成功后退剩余赠送失效；失败按原购买时间恢复整组入队 | 退款处理中/退款失败 |
| 退款前置拦截 | 该订单被未结算取水订单占用时，页面常驻拦截提示，"申请退款"按钮置灰不可点 | 被未结算取水订单占用 |
| 退款进度 | 退款金额、退款方式、申请时间 | 退款处理中 |
| 退款失败 | 失败原因 + 重新退款按钮 | 退款失败 |
| 退款规则说明 | 页面底部展示退款公式和限制条件 | 所有场景 |
| 数据来源 | 按 ?id=订单号 从共享订单样本表 c-orders-data.js 取数；形态由订单号映射（已完成/已退款/退款处理中/退款失败/可退金额为 0/被未结算取水订单占用），未命中回退「已完成」 | 所有场景 |
| 提示 | 余额累加提示/到账提示 | 所有场景 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 进入详情 | 用户在C02点击套餐订单卡片 | 订单存在 | 展示套餐订单详情 | - | 加载订单详情数据 |
| 申请退款 | 用户点击"申请退款"按钮（已完成场景） | 套餐已完成 + 可退金额 > 0 + 该订单未被未结算取水订单占用 | 弹窗展示实付金额、可退金额；被占用时入口置灰不可点（拦截提示已在页面常驻展示） | 网络异常提示重试 | 可退→自动执行退款；无可退金额→不展示退款入口；被占用→页面常驻提示"当前暂时无法发起售后，请等待取水订单完成结算后再发起。"，退款入口不可点 |
| 重新退款 | 用户点击"重新退款"按钮（退款失败场景） | 上次退款失败 | 系统重新发起退款，跳转退款处理中 | 仍失败则保持当前页面 | 重新发起LINE Pay退款请求 |
| 可退金额为 0 | 该订单剩余未消耗实付为 0 | - | 不展示"申请退款"入口 | - | 无可退金额时不提供退款入口 |
| 点击返回 | 用户点击左上角返回箭头 | - | 返回C02订单列表 | - | 返回C02订单列表 |
| 场景 | 展示内容 |
|---|---|
| ①已完成 | 绿色状态 + 套餐信息 + 支付信息 + 订单信息 + 申请退款按钮（无可退金额时不展示） |
| ②已退款 | 灰色状态 + 套餐信息 + 退款信息（实付金额/退款金额/退款方式/退款时间）+ 支付信息 + 订单信息 |
| ③退款处理中 | 蓝色状态（脉冲动画）+ 套餐信息 + 退款进度 + 支付信息 + 订单信息 + 到账提示 |
| ④退款失败 | 红色状态 + 失败原因 + 套餐信息 + 退款信息 + 支付信息 + 订单信息 + 重新退款按钮 |
| ⑤可退金额为 0 | 绿色状态（已完成）+ 套餐信息 + 支付信息 + 订单信息；该订单实付用尽、无可退金额，不展示"申请退款"入口 |
| ⑥被未结算取水订单占用 | 绿色状态（已完成）+ 套餐信息 + 支付信息 + 订单信息 + 常驻拦截提示；"申请退款"按钮置灰不可点 |
C04 套餐订单详情 ├─ 入口 → C02 订单列表套餐订单Tab（?id=订单号） ├─ 未命中 ?id= → 回退「已完成」形态（默认） ├─ 场景①已完成：套餐信息 + 支付信息 + 申请退款按钮（无可退金额时不展示） ├─ 场景②已退款：套餐信息 + 退款信息（实付金额/退款金额/退款方式/退款时间） ├─ 场景③退款处理中：套餐信息 + 退款进度 + 到账提示 ├─ 场景④退款失败：失败原因 + 退款信息 + 重新退款按钮 ├─ 场景⑤可退金额为 0：无可退金额，不展示"申请退款"入口 ├─ 场景⑥被未结算取水订单占用：完成态 + 常驻拦截提示 + "申请退款"按钮置灰不可点 ├─ 申请退款 → 弹窗（系统自动计算） │ └─ 可退 → 展示实付金额 + 可退金额 + 确认退款 → 场景③退款处理中 ├─ 重新退款 → 场景③退款处理中 └─ 返回箭头 → C02 订单列表