原型图 | React + Tailwind
C端扫码取水的第一个页面。用户通过LINE扫描柜机取水二维码后进入，先选择取水档位，再选择水类型（纯水/矿化水）。支持3种场景：普通用户选档位、套餐用户选档位（含套餐余额泰铢）、异常提示（设备忙/离线/维护/低水位/二维码过期/未登录/进行中订单）。异常场景统一展示设备摘要信息卡片。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 步骤进度条 | 4步：选档位+水类型→支付→出水→结果，当前步骤高亮 | 场景①②展示，场景③不展示 |
| 柜机信息区 | 柜机位置（文字地址+设备编号） | 场景①②展示 |
| 操作提示 | 提示用户在柜机前准备好容器，选择档位和水类型后开始取水 | 场景①②展示 |
| 套餐余额 | 展示用户当前套餐余额（泰铢），如 ฿50.00 | 仅场景②展示 |
| 档位选择区 | 多个档位按钮，含水量和泰铢价格（纯水 ฿3/L / 矿化水 ฿5/L），场景②显示"套餐可抵扣"或"需补差"提示 | 场景①②展示 |
| 水类型选择区 | 纯水/矿化水两个选项卡，切换时档位价格实时更新 | 场景①②展示，场景③不展示 |
| 异常提示区 | 设备忙/离线/维护/低水位/过期/未登录/进行中订单提示，含异常图标+标题+描述+按钮 | 仅场景③展示，按异常类型动态切换 |
| 设备摘要信息卡片 | 设备编号、名称、投放位置、运行状态、当前水位 | 仅场景③展示，所有异常子场景统一展示 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 选择档位 | 用户点击档位按钮 | 设备正常可售水 | 高亮选中档位，价格随水类型变化 | — | 记录选中档位 |
| 选择水类型 | 用户点击纯水/矿化水选项卡 | 设备正常可售水 | 高亮选中水类型，所有档位价格实时更新 | — | 记录水类型，传递给c01 |
| 开始取水 | 用户选好档位+水类型后点击 | 已选档位+水类型 | 跳转c01支付页 | — | 生成取水订单，跳转支付 |
| 返回 | 用户点击状态栏返回箭头 | — | 弹出确认弹窗 | — | 确认后释放设备，返回首页 |
| 场景 | 展示内容 |
|---|---|
| 场景① 普通用户选档位 | 步骤进度条 + 柜机信息 + 档位选择 + 水类型选择 + 开始取水按钮 |
| 场景② 套餐用户选档位 | 同上 + 套餐余额卡片（泰铢） |
| 场景③ 异常提示 | 异常提示区（设备忙/离线/维护/低水位/二维码过期/未登录/进行中订单） |
C端扫码 → C06 选档位页 ├─ 选择档位+水类型 → C01 支付页（柜机同步跳转K02） ├─ C端停留在C06时 → 柜机保持K01待机页 ├─ 取消/返回 → C10 订单已取消（K11同步跳转） └─ 异常提示 → C00 首页（返回）