orderFood/oederFoodVue/PAYMENT_GUIDE.md

支付功能使用指南

功能说明

实现了真实的支付验证流程：

1. 用户点击"去结算"按钮
2. 显示支付二维码
3. 用户扫描二维码进行支付
4. 前端轮询后端验证支付状态
5. 支付成功后创建订单
6. 支付失败则提示用户

支付流程

用户下单 → 显示二维码 → 用户扫码支付 → 轮询验证支付状态 → 支付成功 → 创建订单 → 清空购物车
                                                    ↓
                                                支付失败 → 提示用户

测试方法

方法一：使用支付模拟器（推荐）

1. 启动后端服务：

   mvn spring-boot:run
   

2. 打开主页面：

   oederFoodVue/index.html
   

3. 添加菜品到购物车（满¥20起送）

4. 点击"去结算"按钮，会显示支付二维码

5. 复制二维码中的支付链接，在新标签页打开 payment-simulator.html，并在URL中添加支付信息：

   payment-simulator.html?paymentId=PAY1234567890&amount=25.00
   

6. 在模拟器页面点击"支付成功"或"支付失败"按钮

7. 主页面会自动检测到支付状态并创建订单

方法二：使用API直接模拟

使用Postman或curl调用模拟支付接口：

# 模拟支付成功
curl -X POST "http://localhost:8086/api/payment/simulate?paymentId=PAY1234567890&status=success"

# 模拟支付失败
curl -X POST "http://localhost:8086/api/payment/simulate?paymentId=PAY1234567890&status=failed"

API接口

1. 验证支付状态

• 接口: GET /api/payment/verify
• 参数: paymentId - 支付单号

• 返回:

  {
  "code": 200,
  "data": {
    "paymentId": "PAY1234567890",
    "status": "success",
    "paid": true,
    "failed": false
  }
  }
  

2. 模拟支付

• 接口: POST /api/payment/simulate
• 参数:
  • paymentId - 支付单号
  • status - 支付状态（success/failed）

• 返回:

  {
  "code": 200,
  "data": "支付模拟成功"
  }
  

3. 创建订单

• 接口: POST /api/orders

• 请求体:

  {
  "items": [
    {"dishId": "1", "quantity": 2}
  ],
  "totalAmount": 20.00,
  "deliveryFee": 5.00,
  "finalAmount": 25.00,
  "remark": ""
  }
  

前端实现细节

轮询机制

• 每2秒轮询一次支付状态
• 最多轮询60次（2分钟）
• 超时后自动停止并提示用户

支付状态

• pending: 待支付（继续轮询）
• success: 支付成功（创建订单）
• failed: 支付失败（提示用户）

关键函数

• checkout(): 准备订单数据，显示二维码
• showPaymentQRCode(): 生成二维码，开始轮询
• startPaymentPolling(): 轮询支付状态
• createOrderAfterPayment(): 支付成功后创建订单
• showPaymentSuccess(): 显示支付成功
• showPaymentFailure(): 显示支付失败

生产环境集成

在实际生产环境中，需要：

1. 集成真实支付平台（微信支付/支付宝）

   • 替换二维码生成逻辑
   • 使用支付平台提供的支付链接

2. 实现支付回调接口

   • 接收支付平台的异步通知
   • 验证签名确保安全性
   • 更新支付状态

3. 使用Redis存储支付状态

   • 替换内存存储（ConcurrentHashMap）
   • 设置过期时间（如30分钟）

4. 添加安全措施

   • 验证支付金额
   • 防止重复支付
   • 记录支付日志

注意事项

1. 当前实现使用内存存储支付状态，重启后端会丢失
2. 支付单号使用时间戳生成，实际应使用更安全的算法
3. 二维码链接指向本地，实际应指向支付平台
4. 未实现支付超时自动取消订单功能