【无标题】

步骤一:生成 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. 样式

    • 可以根据实际需求调整样式,使页面更加美观。
相关推荐
endingCode3 分钟前
45.坑王驾到第九期:Mac安装typescript后tsc命令无效的问题
javascript·macos·typescript
m512710 分钟前
LinuxC语言
java·服务器·前端
Myli_ing1 小时前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_2 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~2 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ2 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z2 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript