【无标题】

步骤一：生成 codeUrl

首先，我们需要调用后端接口生成 codeUrl。如果生成失败，给用户提示稍后重试。

步骤二：生成支付二维码

通过获取到的 codeUrl 生成支付二维码。

步骤三：判断用户是否扫描二维码

判断用户是否扫描二维码，并调用后端接口判断支付是否成功。

步骤四：轮询支付状态

如果用户已扫描二维码，轮询后端接口判断支付是否成功。如果返回的 code 为 201，则每隔 2 秒重新请求一次，最多请求 10 次。

import React, { useState } from 'react';
import axios from 'axios';
import QRCode from 'qrcode.react';

const WeChatPay = () => {
  const [codeUrl, setCodeUrl] = useState(null);
  const [orderNumber, setOrderNumber] = useState(null);
  const [isScanned, setIsScanned] = useState(false);
  const [errorMessage, setErrorMessage] = useState('');
  const [pollCount, setPollCount] = useState(0);
  const maxPollCount = 10;

  const generateCodeUrl = async () => {
    try {
      const response = await axios.post('https://ai.xwm1000.com/app-api/pay/createWeChatPayOrder', {
        total: 100, // 充值金额
      });
      if (response.data.code === 200) {
        setCodeUrl(response.data.data.codeUrl);
        setOrderNumber(response.data.data.orderNumber);
        setIsScanned(true);
        startPolling();
      } else {
        setErrorMessage('生成支付二维码失败，请稍后重试。');
      }
    } catch (error) {
      setErrorMessage('生成支付二维码失败，请稍后重试。');
    }
  };

  const startPolling = () => {
    setPollCount(0);
    pollPaymentStatus();
  };

  const pollPaymentStatus = async () => {
    if (pollCount >= maxPollCount) {
      setErrorMessage('充值服务异常，请联系管理员。');
      return;
    }
    try {
      const response = await axios.post('https://ai.xwm1000.com/app-api/pay/checkPaymentStatus', {
        orderNumber: orderNumber,
      });
      if (response.data.code === 200) {
        alert('支付成功！');
      } else if (response.data.code === 201) {
        setPollCount(pollCount + 1);
        setTimeout(pollPaymentStatus, 2000);
      } else {
        alert(response.data.message);
      }
    } catch (error) {
      setErrorMessage('支付状态查询失败，请稍后重试。');
    }
  };

  return (
    <div>
      {errorMessage && <div className="error">{errorMessage}</div>}
      {!codeUrl ? (
        <button onClick={generateCodeUrl}>生成支付二维码</button>
      ) : (
        <div>
          <QRCode value={codeUrl} />
          {!isScanned ? (
            <div>请扫描二维码进行支付</div>
          ) : (
            <div>正在确认支付状态，请稍候...</div>
          )}
        </div>
      )}
    </div>
  );
};

export default WeChatPay;

解释

1. 生成 codeUrl：

   • 调用后端接口生成 codeUrl，如果成功，将 codeUrl 和 orderNumber 存储在组件的状态中。
   • 如果失败，显示错误信息。

2. 生成支付二维码：

   • 使用 qrcode.react 库生成二维码并显示在页面上。

3. 判断用户是否扫描二维码：

   • 设置 isScanned 为 true，表示用户已扫描二维码。

4. 轮询支付状态：

   • 调用后端接口检查支付状态，如果返回 code 为 200，表示支付成功。
   • 如果返回 code 为 201，每隔 2 秒重新请求一次，最多请求 10 次。
   • 如果请求次数达到上限，显示错误信息。

注意事项

1. 后端接口地址：

   • 示例中使用了 https://ai.xwm1000.com/app-api/pay/createWeChatPayOrder 和 https://ai.xwm1000.com/app-api/pay/checkPaymentStatus，请根据实际情况调整。

2. 错误处理：

   • 示例中简单地处理了错误信息，可以根据实际需求进行更详细的错误处理。

3. 二维码生成库：

   • 示例中使用了 qrcode.react 库来生成二维码，你需要在项目中安装该库：npm install qrcode.react。

4. 样式：

   • 可以根据实际需求调整样式，使页面更加美观。