原型图 | React + Tailwind
C端小程序取水订单详情页，展示单个取水订单的完整信息（状态、支付、出水详情、设备信息、退款详情）。套餐订单详情已拆分至C04。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 状态标识 | 顶部展示订单状态，不同状态不同颜色 | 所有场景 |
| 订单信息 | 取水档位、水类型标签（纯水/矿化水）、订单金额、实付金额、支付方式、订单编号、下单时间、用户ID | 所有场景 |
| 出水详情 | 实际出水量、剩余未出、退回套餐余额（泰铢，条件展示）、退款金额、暂停次数 | 仅部分出水退款场景 |
| 设备信息 | 设备编号、取水地址 | 所有场景 |
| 退款提示 | 退款退回方式说明 | 仅部分出水退款场景 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 点击返回 | 用户点击返回按钮 | - | 跳转上一页 | - | 返回 C02 订单列表 |
| 查看出水详情 | 订单状态为"部分出水退款" | 订单有出水记录 | 展示实际出水量、退款金额、退回套餐余额 | - | 展示出水详情区块 |
| 查看退款状态 | 订单有退款记录 | 退款已发起 | 展示退款状态（已退款/退款中） | 退款失败：展示"退款失败"+ 联系客服入口 | 展示退款状态信息 |
| 查看设备信息 | 页面加载 | 订单已关联设备 | 展示设备编号、取水地址 | 设备信息缺失：展示"--" | 展示设备信息区块 |
| 场景 | 展示内容 |
|---|---|
| 已完成订单 | 绿色状态标识 + 订单信息 + 设备信息 |
| 已取消订单 | 灰色状态标识 + 订单信息 + 设备信息 |
| 部分出水退款 | 橙色状态标识 + 订单信息 + 出水详情 + 退款状态（动态：退款处理中/已退款）+ 退款提示 + 设备信息 |
| 取水订单已退款 | 蓝色状态标识 + 订单信息 + 退款详情（类型/退回额度/退回金额/退款路径/退款状态）+ 设备信息 + 退款提示 |
| 订单处理中 | 黄色状态标识 + 订单信息 + 设备信息 + 处理提示（等待设备上报） |
C03 订单详情 ├─ 返回箭头 → C02 订单列表 └─ 底部导航 → 首页 / 订单 / 我的