原型图 | React + Tailwind
支付前校验设备在线状态，离线时阻断支付并跳转取消页
C端小程序支付页，用户从柜机扫码进入后选择支付方式并完成支付。支付页含4种场景：全额LINE Pay、套餐全额抵扣、套餐+LINE Pay补差、IC卡+LINE Pay补差；另有独立拦截态场景⑤「进行中订单阻断」（进入支付前校验触发）。场景①~④含5分钟支付倒计时，支付前校验设备在线状态，离线时阻断支付并跳转C10场景③。支付成功后跳转C09。
| 模块 | 说明 | 场景差异 |
|---|---|---|
| 订单信息区 | 取水档位、水类型标签、单价（纯水 ฿3/L / 矿化水 ฿5/L）、订单金额、套餐余额；支付前不展示应付金额 | 场景①~④展示，场景⑤不展示 |
| 支付方式区 | LINE Pay/微信支付/支付宝可选 | 场景①②④仅LINE Pay，场景③⑤无 |
| 操作按钮 | 支付/确认/返回/查看详情 | 场景①②④支付，场景③确认，场景⑤阻断 |
| 套餐余额 | 以泰铢为单位展示，不按水类型折算升数 | 场景③④展示 |
| IC卡补差 | 余额不足时自动计算差额，用户扫码补差 | 场景②展示 |
| 阻断提示 | 存在进行中取水订单时阻断，展示订单详情和倒计时 | 仅场景⑤展示 |
| 支付倒计时 | 5分钟倒计时条 + "超时未支付将自动取消本次订单"，超时跳回C00 | 场景①~④展示 |
| 语言切换 | 状态栏标题右侧下拉菜单，支持6种语言 | 所有场景 |
| 返回按钮 | 状态栏左侧返回箭头，场景①~④弹确认弹窗（返回将取消订单），场景⑤直接返回 | 所有场景 |
| 操作 | 触发条件 | 前置校验 | 反馈形式 | 异常处理 | 行为 |
|---|---|---|---|---|---|
| 选择支付方式（场景④） | 用户点击支付方式选项 | 补差金额 > 0 | 高亮选中项，其他置灰 | - | 切换选中的支付方式 |
| 确认支付（场景①） | 用户点击按钮 | 已选择支付方式 | 按钮loading，跳转支付渠道，成功后跳转C09 | 支付渠道不可用：提示"支付方式暂不可用" | 调起 LINE Pay 支付 |
| IC卡补差（场景②） | 用户扫码进入，IC卡余额不足 | IC卡已绑定，余额 < 订单金额 | 自动计算差额，展示补差金额 | IC卡未绑定：提示绑定；余额查询失败：提示重试 | 自动扣IC卡余额，剩余走在线支付 |
| 套餐补差（场景④） | 用户扫码进入，套餐余额不足 | 套餐生效中，额度 < 取水量 | 自动扣减套餐余额，展示补差金额 | 套餐已过期：走全额支付流程 | 套餐余额扣完，剩余走在线支付 |
| 确认使用套餐（场景③） | 用户点击按钮 | 套餐余额 ≥ 取水量 | 按钮loading，扣减套餐余额后跳转C09 | 额度变更（并发）：提示"额度已变更，请重试" | 直接扣减套餐余额，无需支付 |
| 补差支付（场景②④） | 用户点击按钮 | 已选择补差支付方式 | 按钮loading，跳转支付渠道 | 支付失败：提示"支付失败，请重试"；超时：提示"支付超时，请重新扫码" | 调起选中的在线支付渠道 |
| 阻断检测（场景⑤） | 用户扫码进入支付页 | 用户已登录 | 存在进行中订单则展示阻断页 | 检测接口超时：提示"网络异常，请重试" | 查询用户是否有进行中取水订单 |
| 等待倒计时（场景⑤） | 页面加载后自动启动 | 进行中订单存在 | 实时展示已用时间（每秒刷新） | 倒计时异常：展示"--:--:--" | 计算从订单开始时间到当前的时长 |
| 返回（场景①~④） | 用户点击状态栏返回箭头 | 支付未完成 | 弹出确认弹窗：退出将取消订单 | - | 确认后跳转C00首页（携带lang参数） |
| 返回（场景⑤） | 用户点击状态栏返回箭头 | - | 直接跳转C00首页 | - | 携带lang参数跳转 |
| 切换语言 | 用户点击语言切换按钮 | - | 页面文本、确认弹窗、页面标题切换语言 | - | 切换当前页面显示语言 |
| 场景 | 展示内容 |
|---|---|
| 场景① 全额LINE Pay | 订单信息 + LINE Pay选项 + 支付按钮 |
| 场景② IC卡+LINE Pay补差 | 订单信息 + IC卡扣减 + LINE Pay补差 + 补差按钮 |
| 场景③ 套餐余额全额抵扣 | 订单信息 + 套餐余额提示 + 确认按钮 |
| 场景④ 套餐+在线支付补差 | 订单信息 + 套餐余额 + 仅LINE Pay补差 + 补差按钮 |
| 独立拦截态 · 存在进行中订单（进入支付前触发） | 阻断提示 + 进行中订单详情 + 已用时间倒计时 |
C01 支付页 ├─ 确认支付（场景①②④）→ 第三方支付 → C09 取水支付结果 ├─ 确认使用套餐（场景③）→ C09 取水支付结果（套餐余额） ├─ 返回箭头（场景①~④）→ 确认弹窗 → C10 订单已取消 ├─ 返回箭头（场景⑤）→ C00 首页 ├─ 5分钟倒计时超时（场景①~④）→ C10 订单已取消（超时） ├─ K02同步等待（柜机发起支付时C01等待） ├─ K02支付成功 → C10 同步跳转取消页 ├─ K07补差 → C01同步刷新到补差场景（场景④） ├─ 设备异常 → C10 订单已取消（文案适配异常原因） └─ 语言切换 → 当前页面刷新显示语言