# 完整支付流程使用指南

## 流程概述

本系统实现了完整的模拟支付和设备启动流程，提供真实的用户体验。

## 详细流程步骤

### 1. 待机界面
- 系统启动后显示待机界面
- 显示硬件状态和实时数据
- 点击"点击开始"按钮进入套餐选择

### 2. 套餐选择界面
- 显示所有可用的洗护套餐
- 每个套餐显示：
  - 套餐名称
  - 详细描述
  - 洗护时长
  - 价格
- 点击任意套餐卡片进入支付界面

### 3. 二维码支付界面
- 显示订单信息：
  - 套餐名称
  - 支付金额（红色醒目显示）
  - 订单号
- 显示模拟二维码图案
- 提示"请使用微信或支付宝扫描二维码完成支付"
- 两个操作按钮：
  - "模拟支付成功"：模拟用户扫码支付成功
  - "取消支付"：返回套餐选择界面

### 4. 支付成功
- 点击"模拟支付成功"后：
  - 显示"正在处理支付..."状态（1.5秒）
  - 调用后端API确认支付
  - 自动打开设备门
  - 弹出提示："支付成功！设备门已自动打开，请将宠物放入设备后关闭门开始洗护"
  - 返回待机界面

### 5. 放入宠物
- 待机界面显示：
  - 橙色警告框："⚠ 设备门已打开"
  - 提示："请将宠物放入设备后点击下方按钮关门"
  - "关闭门并开始洗护"按钮（替代原来的"点击开始"按钮）

### 6. 关门启动
- 点击"关闭门并开始洗护"按钮：
  - 通过MQTT发送关门状态
  - 更新订单状态为"门已关闭"
  - 自动切换到洗护进度界面
  - 开始模拟洗护流程

### 7. 洗护进行中
- 显示实时信息：
  - 当前步骤名称（大字显示）
  - 剩余时间（倒计时）
  - 总体进度百分比
  - 进度条动画
  - 流程步骤列表（显示已完成、进行中、等待中）
- 底部显示实时数据：
  - 水温：40.0°C
  - 水位：85%
  - 门状态：已锁定
- 提供"紧急停止"按钮

### 8. 洗护完成
- 所有步骤完成后：
  - 通过MQTT发送完成状态
  - 更新订单状态为"已完成"
  - 自动打开设备门
  - 弹出提示："清洗完成！感谢使用无人自动洗宠机"
  - 返回待机界面，准备下一次服务

## 洗护流程步骤

系统模拟以下7个洗护步骤：

1. **第一次冲水** - 120秒
2. **沐浴露喷洒** - 30秒
3. **第二次冲水** - 180秒
4. **香波喷洒** - 30秒
5. **第三次冲水** - 180秒
6. **热风吹毛** - 300秒
7. **冷热风混合** - 120秒

总计约16分钟（模拟时加速100倍，实际演示约10秒）

## 技术特点

### 用户体验
- 完整的支付流程模拟
- 清晰的视觉反馈
- 实时状态更新
- 友好的提示信息

### 界面切换
- 待机界面 → 套餐选择 → 二维码支付 → 待机（门已打开）→ 洗护进度 → 待机

### 状态管理
- 门状态（打开/关闭）
- 订单状态（待支付/已支付/门已关闭/进行中/已完成）
- 洗护进度（当前步骤、剩余时间、完成百分比）

### 后端集成
- 创建订单API
- 确认支付API
- 更新订单状态API
- MQTT消息通信

## 测试建议

1. **正常流程测试**
   - 完整走一遍从开始到完成的流程
   - 验证每个界面切换是否正确
   - 检查状态更新是否及时

2. **取消流程测试**
   - 在支付界面点击"取消支付"
   - 验证是否正确返回套餐选择界面
   - 检查订单是否被正确清理

3. **异常处理测试**
   - 后端服务未启动时的错误提示
   - 网络异常时的处理
   - 重复点击按钮的防护

## 注意事项

1. 确保后端API服务已启动（PetWash.Api）
2. 确保MQTT服务器正常运行
3. 洗护流程使用加速模拟（100倍速度）
4. 所有金额、时间、状态都是模拟数据
5. 二维码图案为简单模拟，实际应用需要真实二维码生成

## 下一步优化建议

1. 添加真实的二维码生成（使用QRCoder库）
2. 实现支付超时自动取消
3. 添加支付状态轮询（模拟扫码后的状态变化）
4. 增加音效反馈
5. 添加动画效果（门开关动画、水流动画等）
6. 实现多语言支持
7. 添加用户评价功能