4.1 KiB
4.1 KiB
完整支付流程使用指南
流程概述
本系统实现了完整的模拟支付和设备启动流程，提供真实的用户体验。
详细流程步骤
1. 待机界面
- 系统启动后显示待机界面
- 显示硬件状态和实时数据
- 点击"点击开始"按钮进入套餐选择
2. 套餐选择界面
- 显示所有可用的洗护套餐
- 每个套餐显示：
- 套餐名称
- 详细描述
- 洗护时长
- 价格
- 点击任意套餐卡片进入支付界面
3. 二维码支付界面
- 显示订单信息：
- 套餐名称
- 支付金额（红色醒目显示）
- 订单号
- 显示模拟二维码图案
- 提示"请使用微信或支付宝扫描二维码完成支付"
- 两个操作按钮：
- "模拟支付成功"：模拟用户扫码支付成功
- "取消支付"：返回套餐选择界面
4. 支付成功
- 点击"模拟支付成功"后：
- 显示"正在处理支付..."状态（1.5秒）
- 调用后端API确认支付
- 自动打开设备门
- 弹出提示："支付成功！设备门已自动打开，请将宠物放入设备后关闭门开始洗护"
- 返回待机界面
5. 放入宠物
- 待机界面显示：
- 橙色警告框："⚠ 设备门已打开"
- 提示："请将宠物放入设备后点击下方按钮关门"
- "关闭门并开始洗护"按钮（替代原来的"点击开始"按钮）
6. 关门启动
- 点击"关闭门并开始洗护"按钮：
- 通过MQTT发送关门状态
- 更新订单状态为"门已关闭"
- 自动切换到洗护进度界面
- 开始模拟洗护流程
7. 洗护进行中
- 显示实时信息：
- 当前步骤名称（大字显示）
- 剩余时间（倒计时）
- 总体进度百分比
- 进度条动画
- 流程步骤列表（显示已完成、进行中、等待中）
- 底部显示实时数据：
- 水温：40.0°C
- 水位：85%
- 门状态：已锁定
- 提供"紧急停止"按钮
8. 洗护完成
- 所有步骤完成后：
- 通过MQTT发送完成状态
- 更新订单状态为"已完成"
- 自动打开设备门
- 弹出提示："清洗完成！感谢使用无人自动洗宠机"
- 返回待机界面，准备下一次服务
洗护流程步骤
系统模拟以下7个洗护步骤：
- 第一次冲水 - 120秒
- 沐浴露喷洒 - 30秒
- 第二次冲水 - 180秒
- 香波喷洒 - 30秒
- 第三次冲水 - 180秒
- 热风吹毛 - 300秒
- 冷热风混合 - 120秒
总计约16分钟（模拟时加速100倍，实际演示约10秒）
技术特点
用户体验
- 完整的支付流程模拟
- 清晰的视觉反馈
- 实时状态更新
- 友好的提示信息
界面切换
- 待机界面 → 套餐选择 → 二维码支付 → 待机（门已打开）→ 洗护进度 → 待机
状态管理
- 门状态（打开/关闭）
- 订单状态（待支付/已支付/门已关闭/进行中/已完成）
- 洗护进度（当前步骤、剩余时间、完成百分比）
后端集成
- 创建订单API
- 确认支付API
- 更新订单状态API
- MQTT消息通信
测试建议
-
正常流程测试
- 完整走一遍从开始到完成的流程
- 验证每个界面切换是否正确
- 检查状态更新是否及时
-
取消流程测试
- 在支付界面点击"取消支付"
- 验证是否正确返回套餐选择界面
- 检查订单是否被正确清理
-
异常处理测试
- 后端服务未启动时的错误提示
- 网络异常时的处理
- 重复点击按钮的防护
注意事项
- 确保后端API服务已启动（PetWash.Api）
- 确保MQTT服务器正常运行
- 洗护流程使用加速模拟（100倍速度）
- 所有金额、时间、状态都是模拟数据
- 二维码图案为简单模拟，实际应用需要真实二维码生成
下一步优化建议
- 添加真实的二维码生成（使用QRCoder库）
- 实现支付超时自动取消
- 添加支付状态轮询（模拟扫码后的状态变化）
- 增加音效反馈
- 添加动画效果（门开关动画、水流动画等）
- 实现多语言支持
- 添加用户评价功能