原型图 | React + Tailwind
放桶倒计时期间设备离线，自动退款并转已完成·未出水
C端支付成功后的结果确认页。从C01支付页（LINE Pay支付成功或套餐全额抵扣确认）后跳转进入，告知用户支付已成功，引导准备取水。用户可在C端点击"开始取水"或在柜机按绿色实体按钮触发出水；放桶倒计时期间点击返回可确认结束本次取水（订单转 已完成·未出水 并全额退款）。参考柜机端K08风格适配C端手机样式。
| 模块 | 说明 |
|---|---|
| 支付成功图标 | 绿色勾号圆形图标 |
| 成功文案 | "支付成功"标题 + "请放好水桶，准备取水"副标题 |
| 取水量（合并卡） | 合并卡内「取水量 + 纯水/矿化水胶囊」为 hero（取水量、水类型均取订单数据），下方「支付成功」状态；原「请放好水桶，准备取水」副标题已移除 |
| 水类型标识 | 合并卡取水量右侧展示纯水/矿化水小胶囊（仅类型标识，去单价） |
| 订单信息 | 订单金额（本页为支付完成、出水前的订单金额；套餐全额抵扣时仍为订单总额，不置 0）、支付方式（单渠道显示渠道名）、订单编号、支付时间；全部取共享订单样本表；本页不展示应付金额 |
| 放桶倒计时 | 琥珀色框，5分钟倒计时 + "请在倒计时内放好水桶" |
| 超时退款提示 | "超时未取水订单将自动退款"（中文去「（未出水）」，其余 5 语种不变） |
| 开始取水按钮 | 蓝色主按钮，跳转C07出水页 |
| 语言切换 | 文案随 ?lang 入参切换（六语种），页面内不设切换入口 |
| 返回按钮 | 状态栏左侧返回箭头，点击弹出「确认结束本次取水」确认框；确认后跳 C08 取水结果页·未出水，取消则停留本页 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 进入页面 | 支付成功跳转 | — | 展示支付成功确认页 | — | 页面加载，启动5分钟倒计时 |
| 点击开始取水 | 用户已放好水桶 | 无 | 跳转C07出水页 | — | 携带lang参数跳转C07 |
| 超时未取水 | 300秒倒计时归零 | — | 自动转 已完成·未出水 并全额退款，跳转C08 取水结果页·未出水 | 退款失败：后台自动重试 | 携带 id、source=timeout、lang 跳转C08 |
| 返回 | 用户点击返回箭头 | — | 弹出「确认结束本次取水」确认框 | 弹窗期间倒计时不暂停，归零仍跳 C08 | 取消=关闭弹窗停留本页；确认=携带 id、source=cancel、lang 跳转C08 未出水 |
| 切换语言 | URL 携带 ?lang 进入 | - | 页面文本与弹窗文案切换语言 | - | 六语种文案，页面内无切换入口 |
| 场景 | 展示内容 |
|---|---|
| 场景① LINE Pay支付结果 | 合并卡（取水量+纯水胶囊 + 支付成功）→ 放桶倒计时 → 订单信息(LINE Pay，DR20260512001) → 开始取水；返回可结束取水 |
| 场景② 套餐支付结果 | 合并卡（取水量+纯水胶囊+支付成功）→ 放桶倒计时 → 订单信息（支付方式「套餐余额」，DR20260512003）→ 开始取水；返回可结束取水 |
两场景均可点击返回箭头弹出「确认结束本次取水」，确认后订单转 已完成·未出水 并全额退款。
C09 取水支付结果 ├─ 开始取水 → C07 出水页 ├─ 返回箭头 → 确认弹窗 → C08 取水结果页·未出水（?id=当前订单&source=cancel） ├─ 取消弹窗 → 停留本页（倒计时继续） ├─ K08放桶倒计时同步（共享同一倒计时） ├─ 5分钟超时 → C08 取水结果页·未出水（?id=当前订单&source=timeout；K10同步跳转） ├─ 设备离线 → C08 取水结果页·未出水（?id=当前订单&source=offline；K10同步跳转） └─ 语言 → 随 ?lang 入参切换