原型图 | React + Tailwind
C端小程序取水订单详情页,展示单个取水订单的完整信息(状态、支付、出水详情、设备信息、退款详情)。套餐订单详情已拆分至C04。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 状态标识 | 顶部仅展示订单主状态(已完成/已取消/处理中),不同状态不同颜色;退款不作为状态呈现,仅在下方退款区块展示 | 所有场景 |
| 订单信息 | 取水档位、水类型标签(纯水/矿化水)、订单金额、应付金额(仅形态①完整出水、形态③部分出水展示;形态②已取消、形态④全额退款/未出水、形态⑤处理中不展示)、支付方式(单渠道仅显示渠道名)/支付明细(多渠道逐行展示渠道与结算净额,不设合计行)、订单编号、下单时间、用户ID | 所有场景 |
| 出水详情 | 实际出水量、剩余未出、按退款渠道逐行展示退回金额(退回套餐/退回 LINE Pay/退回 IC卡);不展示暂停次数 | 仅部分出水退款场景 |
| 设备信息 | 设备编号、取水地址 | 所有场景 |
| 数据来源 | 按 ?id=订单号 从共享订单样本表 c-orders-data.js 取数;形态由订单号映射(形态①~⑤),未命中回退形态①;带 ?form=N 时强制按指定形态展示(C08 未出水跳转携带 form=4) | 所有场景 |
| 退款提示 | 按退款渠道生成的退回说明(如「套餐余额已退回套餐账户,LINE Pay 退款已原路退回」) | 仅部分出水退款场景 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击返回 | 用户点击返回按钮 | - | 跳转上一页 | - | 返回 C02 订单列表 |
| 查看出水详情 | 订单存在实际出水量(部分出水) | 订单有出水记录 | 展示实际出水量、按渠道展示退回金额(退回套餐/退回 LINE Pay) | - | 展示出水详情区块 |
| 查看退款状态 | 订单有退款记录 | 退款已发起 | 展示退款状态(已退款/退款中) | 退款失败:展示"退款失败" | 展示退款状态信息 |
| 查看设备信息 | 页面加载 | 订单已关联设备 | 展示设备编号、取水地址 | 设备信息缺失:展示"--" | 展示设备信息区块 |
| 场景 | 展示内容 |
|---|---|
| 已完成订单 | 绿色状态标识 + 订单信息 + 设备信息 |
| 已取消订单 | 灰色状态标识 + 订单信息 + 取消原因 + 设备信息;已取消仅适用支付前(未支付超时/主动取消/设备异常),不产生退款 |
| 部分出水退款 | 绿色状态标识(已完成)+ 订单信息 + 出水详情(按渠道展示退回金额)+ 退款状态(动态:退款处理中/已退款)+ 退款提示 + 设备信息 |
| 全额退款 | 绿色状态标识(已完成)+ 订单信息 + 退款详情(类型/退回套餐/退回 LINE Pay/退款状态)+ 设备信息;退款类型含人工售后发起与系统自动(支付后未出水、用户终止取水),退款状态按实际展示(退款处理中/已退款) |
| 处理中 | 黄色状态标识 + 订单信息 + 设备信息 + 处理提示(结果待确认:终值缺失或出水失败,等待设备上报;超时未收到结果转人工处理,见 C08 场景③);已发起全额退款时展示退款状态与退回渠道金额 |
C03 订单详情 ├─ 入口 → C02 订单列表(?id=订单号)/ C08 取水结果页(?id=订单号&form=4) ├─ 未命中 ?id= → 回退形态① 已完成(默认) ├─ 未出水订单(C08 场景③)→ 形态④ 全额退款(绿色已完成 + 退款详情) └─ 返回箭头 → C02 订单列表