C端 - 取水订单已取消

原型图 | React + Tailwind

← 返回总览 C00 首页 C01 支付页 C02 订单列表 C03 取水订单详情 C04 套餐订单详情 C05 套餐购买 C06 选档位 C07 出水 C08 取水结果 C09 取水支付结果 C10 订单已取消 C11 套餐详情 C12 我的 C13 用户服务协议
9:41

订单已取消

场景切换

页面说明

最后更新:2026-06-17

页面定位 — PRD 4.2 / 5.3

C端取水订单取消后的通知页。从C01支付页(超时未支付或用户主动返回确认)后跳转进入,告知用户订单已被取消。参考柜机端K11风格适配C端手机样式。

核心内容

模块说明
订单摘要取水量、金额(删除线)、单价,灰色调
取消图标红色叉号圆形图标
取消文案"订单已取消" + 取消原因说明
返回首页按钮返回C00首页
语言切换状态栏右侧下拉菜单,支持6种语言
自动返回30秒后自动返回C00首页

页面状态

场景展示内容
场景① 支付超时取消取消图标 + "订单已取消" + "支付超时,订单已自动取消" + 返回首页 + 30秒倒计时
场景② 用户主动取消取消图标 + "订单已取消" + "您已取消本次取水" + 返回首页 + 30秒倒计时
场景③ 设备异常/离线取消取消图标 + "订单已取消" + 具体异常原因(离线/维护/忙碌)+ 返回首页 + 30秒倒计时

跳转关系

C10 订单已取消页
├─ 返回首页 → C00 首页
├─ K11同步跳转(取消/异常两端同步)
├─ 设备异常取消 → C10文案适配具体异常原因
└─ 30秒超时 → C00 首页

业务规则

从C01支付超时或用户主动返回后跳转进入
订单无需退款(未支付状态)
参考柜机端K11订单已取消页风格
查看更新记录
2026-06-17
跳转关系修复:补充K11同步跳转、设备异常取消路径。双水类型改造:订单摘要新增水类型标签+单价。清理definePageSpec JS定义,新增页面状态section。
2026-06-02
新增场景③设备异常/离线取消(6语言文案);switchScene循环修复为1~3。
2026-05-26
新增业务规则(与K11同步跳转、设备异常文案适配);跳转关系补充K11同步路径。
2026-05-25
新建页面,从C01支付取消/超时独立出来。