后端实现方式见此链接
import React, { Component } from 'react';
import { Button, Image, message } from 'antd';
import router from 'next/router';
import { UndoOutlined } from '@ant-design/icons';
import { getPublicPath } from "@/utils";
import QRCode from 'qrcode.react';
import { wxNativePay, getOrderState } from "@/services/request";
import './style/WechartPayment.less'
class WechartPayment extends Component {
constructor(props) {
super(props)
this.state = {
qrUrl: null,//二维码
second: null,//倒计时-时间
overdue: false// 是否支付成功
}
this.intervalWx = null //倒计时
this.throttle = false //节流
}
//通过后端提供的接口获取微信支付二维码
getWxNativePay = async () => {
// 节流
if (this.throttle) {
return
}
this.throttle = true
setTimeout(() => {
this.throttle = false
}, 1000)
const { orderNumber } = this.props;
const { code, data } = await wxNativePay({ orderNumber })
if (code === "0") {
this.setState({
qrUrl: data.result,
overdue: false
})
this.countDown(61);// 倒计时时间可随意调整，且可读性强
clearInterval(this.intervalWx)
this.intervalWx = setInterval(() => {
this.paySuccess()
}, 3000)
} else {
this.setState({
qrUrl: null
})
}
}
//二维码倒计时，例如:自定义设置1分钟之内失效，需用户手动刷新二维码
countDown = (waitTime) => {
if (waitTime > 0) {
waitTime--;
this.setState({
second: waitTime
})
} else {
this.setState({
overdue: true
})
return;
}
setTimeout(() => {
this.countDown(waitTime);
}, 1000);
}
//轮询获取支付状态,这里通过后端提供的接口获取订单状态，从而获取支付状态
paySuccess = async () => {
const { orderNumber } = this.props;
const { code, data } = await getOrderState({ orderNumber });
// 获取订单状态
if (code === "0" && data !== "UNPAID") {
clearInterval(this.intervalWx)
this.intervalWx = null
//支付成功回调
this.props.success()
}
}
componentWillUnmount() {
clearInterval(this.intervalWx)
}
componentDidMount() {
this.getWxNativePay()
}
render() {
const { qrUrl, second, overdue } = this.state;
return (
微信支付
{second !== null &&
距离二维码过期还剩 {second} 秒 过期后请刷新二维码
}{qrUrl ?
<>
<QRCode
value={qrUrl} // value参数为生成二维码的链接
size={260} // 二维码的宽高尺寸
fgColor="#000000" // 二维码的颜色
/>
{overdue &&
获取二维码失败
点击重新获取二维码
</>
:
<Image
preview={false}
width={260}
height={260}
src="error"
fallback="获取失败默认图片"
/>
}
扫描二维码支付
刷新
<Image preview={false} width={310} className="wp-component-content-phone" src={getPublicPath("/images/phoneEn.png")} />
);
}
}
export default WechartPayment
