pay is ok
This commit is contained in:
xiaoma
@@ -1,26 +1,65 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useParams, useNavigate } from 'react-router-dom';
|
||||
import { Button, message, Result, Spin, QRCode } from 'antd';
|
||||
import { useParams, useNavigate, useLocation } from 'react-router-dom';
|
||||
import { Button, message, Result, Spin } from 'antd';
|
||||
import { WechatOutlined, AlipayCircleOutlined, CheckCircleOutlined } from '@ant-design/icons';
|
||||
import { getOrder, initiatePayment, confirmPayment } from '../api';
|
||||
import { QRCodeSVG } from 'qrcode.react';
|
||||
import { getOrder, initiatePayment, confirmPayment, nativePay, queryOrderStatus } from '../api';
|
||||
import './Payment.css';
|
||||
|
||||
const Payment = () => {
|
||||
const { orderId } = useParams();
|
||||
const { orderId: initialOrderId } = useParams();
|
||||
const navigate = useNavigate();
|
||||
const [order, setOrder] = useState(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [paying, setPaying] = useState(false);
|
||||
const location = useLocation();
|
||||
const [currentOrderId, setCurrentOrderId] = useState(location.state?.order_id || initialOrderId);
|
||||
const [order, setOrder] = useState(location.state?.orderInfo || null);
|
||||
const [codeUrl, setCodeUrl] = useState(location.state?.codeUrl || null);
|
||||
const [loading, setLoading] = useState(!location.state?.orderInfo && !location.state?.codeUrl);
|
||||
const [paying, setPaying] = useState(!!location.state?.codeUrl);
|
||||
const [paySuccess, setPaySuccess] = useState(false);
|
||||
const [paymentMethod, setPaymentMethod] = useState('wechat');
|
||||
|
||||
useEffect(() => {
|
||||
fetchOrder();
|
||||
}, [orderId]);
|
||||
if (codeUrl && !paying) {
|
||||
setPaying(true);
|
||||
}
|
||||
}, [codeUrl]);
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Payment page state:', { currentOrderId, order, codeUrl, paying });
|
||||
if (!order && !codeUrl) {
|
||||
fetchOrder();
|
||||
}
|
||||
}, [currentOrderId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (paying && !codeUrl && order) {
|
||||
handlePay();
|
||||
}
|
||||
}, [paying, codeUrl, order]);
|
||||
|
||||
// 轮询订单状态
|
||||
useEffect(() => {
|
||||
let timer;
|
||||
if (paying && !paySuccess) {
|
||||
timer = setInterval(async () => {
|
||||
try {
|
||||
const response = await queryOrderStatus(currentOrderId);
|
||||
if (response.data.status === 'paid') {
|
||||
setPaySuccess(true);
|
||||
setPaying(false);
|
||||
clearInterval(timer);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Check payment status failed:', error);
|
||||
}
|
||||
}, 3000);
|
||||
}
|
||||
return () => clearInterval(timer);
|
||||
}, [paying, paySuccess, currentOrderId]);
|
||||
|
||||
const fetchOrder = async () => {
|
||||
try {
|
||||
const response = await getOrder(orderId);
|
||||
const response = await getOrder(currentOrderId);
|
||||
setOrder(response.data);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch order:', error);
|
||||
@@ -38,69 +77,41 @@ const Payment = () => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (codeUrl) {
|
||||
setPaying(true);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!order) {
|
||||
message.error('正在加载订单信息，请稍后...');
|
||||
return;
|
||||
}
|
||||
|
||||
setPaying(true);
|
||||
try {
|
||||
// 1. 获取微信支付参数
|
||||
const response = await initiatePayment(orderId);
|
||||
const payData = response.data;
|
||||
|
||||
if (typeof WeixinJSBridge === 'undefined') {
|
||||
message.warning('请在微信内置浏览器中打开以完成支付');
|
||||
setPaying(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 调用微信支付
|
||||
const onBridgeReady = () => {
|
||||
window.WeixinJSBridge.invoke(
|
||||
'getBrandWCPayRequest', {
|
||||
"appId": payData.appId, // 公众号名称，由商户传入
|
||||
"timeStamp": payData.timeStamp, // 时间戳，自1970年以来的秒数
|
||||
"nonceStr": payData.nonceStr, // 随机串
|
||||
"package": payData.package,
|
||||
"signType": payData.signType, // 微信签名方式：
|
||||
"paySign": payData.paySign // 微信签名
|
||||
},
|
||||
function(res) {
|
||||
setPaying(false);
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
message.success('支付成功！');
|
||||
setPaySuccess(true);
|
||||
// 这里可以再次调用后端查询接口确认状态，但通常 JSAPI 回调 ok 即可认为成功
|
||||
// 为了保险，可以去轮询一下后端状态，或者直接展示成功页
|
||||
} else if (res.err_msg == "get_brand_wcpay_request:cancel") {
|
||||
message.info('支付已取消');
|
||||
} else {
|
||||
message.error('支付失败，请重试');
|
||||
console.error('WeChat Pay Error:', res);
|
||||
}
|
||||
}
|
||||
);
|
||||
const orderData = {
|
||||
goodid: order.config || order.goodid,
|
||||
quantity: order.quantity,
|
||||
customer_name: order.customer_name,
|
||||
phone_number: order.phone_number,
|
||||
shipping_address: order.shipping_address,
|
||||
ref_code: order.ref_code
|
||||
};
|
||||
|
||||
if (typeof window.WeixinJSBridge == "undefined") {
|
||||
if (document.addEventListener) {
|
||||
document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
|
||||
} else if (document.attachEvent) {
|
||||
document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
|
||||
document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
|
||||
}
|
||||
} else {
|
||||
onBridgeReady();
|
||||
|
||||
const response = await nativePay(orderData);
|
||||
setCodeUrl(response.data.code_url);
|
||||
if (response.data.order_id) {
|
||||
setCurrentOrderId(response.data.order_id);
|
||||
}
|
||||
|
||||
message.success('支付二维码已生成');
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
if (error.response && error.response.data && error.response.data.error) {
|
||||
message.error(error.response.data.error);
|
||||
} else {
|
||||
message.error('支付发起失败，请稍后重试');
|
||||
}
|
||||
message.error('生成支付二维码失败，请重试');
|
||||
setPaying(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" /></div>;
|
||||
if (loading) return <div style={{ padding: 50, textAlign: 'center' }}><Spin size="large" tip="正在加载订单信息..." /></div>;
|
||||
|
||||
if (paySuccess) {
|
||||
return (
|
||||
@@ -109,7 +120,7 @@ const Payment = () => {
|
||||
status="success"
|
||||
icon={<CheckCircleOutlined style={{ color: '#00b96b' }} />}
|
||||
title={<span style={{ color: '#fff' }}>支付成功</span>}
|
||||
subTitle={<span style={{ color: '#888' }}>订单 {orderId} 已完成支付，我们将尽快为您发货。</span>}
|
||||
subTitle={<span style={{ color: '#888' }}>订单 {currentOrderId} 已完成支付，我们将尽快为您发货。</span>}
|
||||
extra={[
|
||||
<Button type="primary" key="home" onClick={() => navigate('/')}>
|
||||
返回首页
|
||||
@@ -135,7 +146,7 @@ const Payment = () => {
|
||||
</>
|
||||
) : (
|
||||
<div className="payment-info">
|
||||
<p>订单 ID: {orderId}</p>
|
||||
<p>订单 ID: {currentOrderId}</p>
|
||||
<p>无法加载详情，但您可以尝试支付。</p>
|
||||
</div>
|
||||
)}
|
||||
@@ -159,9 +170,20 @@ const Payment = () => {
|
||||
</div>
|
||||
|
||||
{paying && (
|
||||
<div style={{ margin: '20px 0', padding: 20, background: '#fff', borderRadius: 8, display: 'inline-block' }}>
|
||||
<QRCode value={`mock-payment-${orderId}`} bordered={false} />
|
||||
<p style={{ color: '#000', marginTop: 10 }}>请扫码支付 (模拟)</p>
|
||||
<div style={{ margin: '20px 0', padding: 20, background: '#fff', borderRadius: 8, display: 'inline-block', minWidth: 240, minHeight: 280 }}>
|
||||
{codeUrl ? (
|
||||
<>
|
||||
<div style={{ background: '#fff', padding: '10px', borderRadius: '4px', display: 'inline-block' }}>
|
||||
<QRCodeSVG value={codeUrl} size={200} />
|
||||
</div>
|
||||
<p style={{ color: '#000', marginTop: 15, fontWeight: 'bold', fontSize: 18 }}>请使用微信扫码支付</p>
|
||||
<p style={{ color: '#666', fontSize: 14 }}>支付完成后将自动跳转</p>
|
||||
</>
|
||||
) : (
|
||||
<div style={{ padding: '40px 0' }}>
|
||||
<Spin tip="正在生成支付二维码..." />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user