原型图 | React + Tailwind
C端扫码取水的出水过程页面。用户支付成功后进入，展示出水进度。支持2种场景：出水进行中、出水暂停。出水完成或停止后自动跳转c08结果页。柜机实体按钮（绿色继续/红色暂停）触发的状态变更实时同步至本页。
| 模块 | 说明 |
|---|---|
| 步骤进度条 | 4步进度，"出水"步骤高亮 |
| 进度环 | 圆形进度环，展示已出水量/目标水量 |
| 实时水量 | 实时显示已出水量（升数），大字号居中 |
| 水类型标签 | 纯水（蓝）/矿化水（青）标签，展示当前出水类型，控制面板可切换 |
| 操作按钮 | 暂停+停止（进行中）/ 继续+停止（暂停） |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 暂停出水 | 点击暂停按钮 | 出水进行中 | 按钮变"继续"+暂停态 | 暂停次数达上限（10次）→按钮不可用 | 暂停出水，展示3分钟倒计时 |
| 继续出水 | 点击继续按钮 | 出水已暂停 | 按钮恢复"暂停" | 3分钟倒计时归零→自动停止 | 继续出水 |
| 停止出水 | 点击停止按钮 | 二次确认弹窗 | 确认弹窗→跳转结果页 | — | 停止出水，跳转C08结果页 |
| 柜机按红色实体按钮 | 柜机端用户按下红色按钮 | 出水进行中 | 页面同步切换暂停态 | 暂停次数正常累计 | C端同步展示"柜机端已暂停出水"提示条 + 暂停状态 |
| 柜机按绿色实体按钮 | 柜机端用户按下绿色按钮 | 出水已暂停 | 页面同步恢复出水态 | — | C端同步恢复出水状态，消除暂停提示 |
| 退出页面 | 用户关闭/返回 | — | 无阻断 | — | 柜机继续出水不受影响 |
| 场景 | 展示内容 |
|---|---|
| 场景① 出水进行中 | 步骤进度条 + 进度环（动画） + 实时水量（大字） + 水类型标签 + 暂停/停止按钮 |
| 场景② 出水暂停 | 步骤进度条 + 进度环（暂停态） + 实时水量 + 水类型标签 + 继续/停止按钮 + 3分钟倒计时 |
C07 出水页 ├─ 出水完成 → C08 结果页（自动跳转） ├─ 停止出水（二次确认）→ C08 结果页 ├─ K09实时双向同步（暂停/继续/停止/已出水量/剩余量） ├─ 设备故障 → C08 结果页（系统自动退款） └─ 返回/退出 → C00 首页（柜机继续出水）