原型图 | React + Tailwind
放桶倒计时期间设备离线，自动取消订单并退款
C端支付成功后的结果确认页。从C01支付页（LINE Pay支付成功或套餐全额抵扣确认）后跳转进入，告知用户支付已成功，引导准备取水。用户可在C端点击"开始取水"或在柜机按绿色实体按钮触发出水。参考柜机端K08风格适配C端手机样式。
| 模块 | 说明 |
|---|---|
| 支付成功图标 | 绿色勾号圆形图标 |
| 成功文案 | "支付成功"标题 + "请放好水桶，准备取水"副标题 |
| 取水量 | 大字展示取水量（如 10L） |
| 水类型标签 | 纯水/矿化水标签 + 单价（纯水 ฿3/L / 矿化水 ฿5/L） |
| 订单信息 | 订单金额、实付金额（按水类型单价计算）、支付方式、订单编号、支付时间 |
| 放桶倒计时 | 琥珀色框，5分钟倒计时 + "请在倒计时内放好水桶" |
| 超时退款提示 | "超时未取水订单将自动取消并退款" |
| 开始取水按钮 | 蓝色主按钮，跳转C07出水页 |
| 语言切换 | 状态栏标题右侧下拉菜单，支持6种语言 |
| 返回按钮 | 状态栏左侧返回箭头，返回C00首页（scene=5 进行中取水） |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 进入页面 | 支付成功跳转 | — | 展示支付成功确认页 | — | 页面加载，启动5分钟倒计时 |
| 点击开始取水 | 用户已放好水桶 | 无 | 跳转C07出水页 | — | 携带lang参数跳转C07 |
| 超时未取水 | 300秒倒计时归零 | — | 自动取消订单并退款，跳转C00首页 | 退款失败：后台自动重试 | 携带lang参数跳转C00 |
| 返回 | 用户点击返回箭头 | — | 跳转C00首页（scene=5） | — | 携带lang参数，C00展示进行中取水卡片 |
| 切换语言 | 用户点击语言切换按钮 | - | 页面文本切换语言 | - | 切换当前页面显示语言 |
| 场景 | 展示内容 |
|---|---|
| 场景① LINE Pay支付结果 | 支付成功 + 取水量 + 金额 + LINE Pay + 订单号 + 倒计时 + 开始取水 |
| 场景② 套餐抵扣结果 | 支付成功 + 取水量 + 套餐余额抵扣 + 订单号 + 倒计时 + 开始取水 |
C09 取水支付结果 ├─ 开始取水 → C07 出水页 ├─ 返回箭头 → C00 首页（scene=5） ├─ K08放桶倒计时同步（共享同一倒计时） ├─ 5分钟超时 → C10 订单已取消（K11同步跳转） ├─ 设备异常 → C10 订单已取消（K11同步跳转） └─ 语言切换 → 当前页面刷新显示语言