原型图 | React + Tailwind
C端取水订单取消后的通知页。从C01支付页(超时未支付或用户主动返回确认)后跳转进入,告知用户订单已被取消。参考柜机端K11风格适配C端手机样式。
| 模块 | 说明 |
|---|---|
| 订单摘要 | 取水量、金额(删除线)、单价,灰色调 |
| 取消图标 | 红色叉号圆形图标 |
| 取消文案 | "订单已取消" + 取消原因说明 |
| 返回首页按钮 | 返回C00首页 |
| 语言切换 | 状态栏右侧下拉菜单,支持6种语言 |
| 自动返回 | 30秒后自动返回C00首页 |
| 场景 | 展示内容 |
|---|---|
| 场景① 支付超时取消 | 取消图标 + "订单已取消" + "支付超时,订单已自动取消" + 返回首页 + 30秒倒计时 |
| 场景② 用户主动取消 | 取消图标 + "订单已取消" + "您已取消本次取水" + 返回首页 + 30秒倒计时 |
| 场景③ 设备异常/离线取消 | 取消图标 + "订单已取消" + 具体异常原因(离线/维护/忙碌)+ 返回首页 + 30秒倒计时 |
C10 订单已取消页 ├─ 返回首页 → C00 首页 ├─ K11同步跳转(取消/异常两端同步) ├─ 设备异常取消 → C10文案适配具体异常原因 └─ 30秒超时 → C00 首页