原型图 | React + Tailwind
倒计时跨场景①②连续；归零自动跳转 C10 场景②并释放设备。
C端扫码取水的第一个页面。用户通过LINE扫描柜机取水二维码后进入，先选择取水档位，再选择水类型（纯水/矿化水）。支持3种场景：普通用户选档位、套餐用户选档位（含套餐余额泰铢）、异常提示（设备忙/离线/维护/低水位/二维码过期/未登录/进行中订单）。异常场景统一展示设备摘要信息卡片。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 步骤进度条 | 4步：选档位+水类型→支付→出水→结果，当前步骤高亮 | 场景①②展示，场景③不展示 |
| 柜机信息区 | 设备编号优先双排（上：设备编号：DEV-… / 下：柜机位置：地址），保留定位图标，去「柜机位置」标题 | 场景①②展示 |
| 设备名称口径 | 设备名称不做多语言，展示录入原文，不随终端语言切换；设备识别以设备编号 + 投放位置为准 | 所有场景 |
| 倒计时提示条 | 倒计时数字（5:00 递减）+ 提示文案「请在柜机前备好水桶 / 超时将自动取消订单」+ 底部进度条；最后 60 秒整条变红警示；倒计时固定不重置，归零自动跳转 C10（场景②文案）并释放设备 | 场景①②展示，场景③不展示 |
| 套餐余额 | 套餐余额（泰铢）内联展示在「选择取水档位」标题右侧，不再独立卡片 | 仅场景②展示 |
| 档位选择区 | 3 个档位并排一行（1L/3L/5L），含水量和泰铢价格（纯水 ฿3/L / 矿化水 ฿5/L）；场景②套餐余额内联于标题右侧，档位不再逐条展示"套餐可抵扣"，仅余额不足时显示"需补差" | 场景①②展示 |
| 水类型选择区 | 纯水/矿化水两个选项卡，切换时档位价格实时更新 | 场景①②展示，场景③不展示 |
| 异常提示区 | 设备忙/离线/维护/低水位/过期/未登录/进行中订单提示，含异常图标+标题+描述+按钮 | 仅场景③展示，按异常类型动态切换 |
| 设备摘要信息卡片 | 设备编号、名称、投放位置、运行状态、当前水位 | 仅场景③展示，所有异常子场景统一展示 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 选择档位 | 用户点击档位按钮 | 设备正常可售水 | 高亮选中档位，价格随水类型变化 | — | 记录选中档位 |
| 选择水类型 | 用户点击纯水/矿化水选项卡 | 设备正常可售水 | 高亮选中水类型，所有档位价格实时更新 | — | 记录水类型，传递给c01 |
| 开始取水 | 用户选好档位+水类型后点击 | 已选档位+水类型 | 跳转c01支付页 | — | 生成取水订单，跳转支付 |
| 倒计时超时 | 进入 C06 满 5 分钟未点击开始取水（任何操作不重置） | — | 自动跳转 C10 场景②（「您已取消本次取水订单」） | 归零瞬间点击开始取水以系统判定为准、超时优先 | 取消扫码会话并释放设备，其他用户可重新扫码 |
| 返回 | 用户点击状态栏返回箭头 | — | 弹出确认弹窗 | — | 确认后释放设备，跳转 C10 场景②（用户主动取消） |
| 场景 | 展示内容 |
|---|---|
| 场景① 普通用户选档位 | 步骤进度条 + 柜机信息 + 倒计时提示条 + 档位选择 + 水类型选择 + 开始取水按钮 |
| 场景② 套餐用户选档位 | 同上 + 套餐余额（泰铢，内联于「选择取水档位」标题右侧） |
| 场景③ 异常提示 | 异常提示区（设备忙/离线/维护/低水位/二维码过期/未登录/进行中订单） |
C端扫码 → C06 选档位页（5分钟倒计时开始，固定不重置） ├─ 选择档位+水类型 → C01 支付页（柜机同步跳转K02，倒计时终止） ├─ C端停留在C06时 → 柜机保持K01待机页 ├─ 倒计时归零（5分钟未开始取水）→ C10 订单已取消（场景②文案），设备释放 ├─ 取消/返回 → C10 订单已取消（K11同步跳转） └─ 异常提示 → C00 首页（返回）