【无标题】

步骤一:生成 codeUrl

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

步骤二:生成支付二维码

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

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

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

步骤四:轮询支付状态

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

javascript 复制代码
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,如果成功,将 codeUrlorderNumber 存储在组件的状态中。
    • 如果失败,显示错误信息。
  2. 生成支付二维码

    • 使用 qrcode.react 库生成二维码并显示在页面上。
  3. 判断用户是否扫描二维码

    • 设置 isScannedtrue,表示用户已扫描二维码。
  4. 轮询支付状态

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

注意事项

  1. 后端接口地址

    • 示例中使用了 https://ai.xwm1000.com/app-api/pay/createWeChatPayOrderhttps://ai.xwm1000.com/app-api/pay/checkPaymentStatus,请根据实际情况调整。
  2. 错误处理

    • 示例中简单地处理了错误信息,可以根据实际需求进行更详细的错误处理。
  3. 二维码生成库

    • 示例中使用了 qrcode.react 库来生成二维码,你需要在项目中安装该库:npm install qrcode.react
  4. 样式

    • 可以根据实际需求调整样式,使页面更加美观。
相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
小牛itbull3 小时前
ReactPress:构建高效、灵活、可扩展的开源发布平台
react.js·开源·reactpress
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄5 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser7 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la7 小时前
vue的样式知识点
前端·javascript·vue.js