111 lines
3.5 KiB
JavaScript
111 lines
3.5 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import { useRouter, useSearchParams } from "next/navigation";
|
||
import { Toast } from "antd-mobile";
|
||
import { generateSignature } from "@/utils/crypto";
|
||
|
||
export default function InWeixin({ params }) {
|
||
const router = useRouter();
|
||
const searchParams = useSearchParams();
|
||
|
||
//微信支付jsapi支付参数
|
||
const [jsapiParams, setJsapiParams] = useState();
|
||
|
||
//用户支付成功
|
||
const [success, setSuccess] = useState(false);
|
||
|
||
//获取微信支付jsapi支付参数
|
||
useEffect(() => {
|
||
const createOrder = async () => {
|
||
//获取code
|
||
const code = searchParams.get("code");
|
||
|
||
//构建body
|
||
const strBody = decodeURIComponent(params.body);
|
||
const temBody = JSON.parse(strBody);
|
||
const body = { ...temBody, wechat_auth_code: code };
|
||
const signature = generateSignature(body);
|
||
|
||
try {
|
||
const response = await fetch(
|
||
`/api/vas/create_order?signature=${signature}`,
|
||
{
|
||
method: "POST",
|
||
headers: {
|
||
"Content-Type": "application/json",
|
||
},
|
||
body: JSON.stringify(body),
|
||
}
|
||
);
|
||
const data = await response.json();
|
||
if (data.ret === -1) {
|
||
Toast.show({
|
||
content: data.msg,
|
||
});
|
||
return;
|
||
}
|
||
setJsapiParams(data.data.wxpay_jsapi_param_obj);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
createOrder();
|
||
}, []);
|
||
|
||
//调起收银台
|
||
useEffect(() => {
|
||
if (!jsapiParams) return;
|
||
function onBridgeReady() {
|
||
WeixinJSBridge.invoke(
|
||
"getBrandWCPayRequest",
|
||
{
|
||
appId: jsapiParams.appId, //公众号ID，由商户传入
|
||
timeStamp: jsapiParams.timeStamp, //时间戳，自1970年以来的秒数
|
||
nonceStr: jsapiParams.nonceStr, //随机串
|
||
package: jsapiParams.package,
|
||
signType: jsapiParams.signType, //微信签名方式：
|
||
paySign: jsapiParams.paySign, //微信签名
|
||
},
|
||
function (res) {
|
||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||
setSuccess(true);
|
||
}
|
||
}
|
||
);
|
||
}
|
||
if (typeof WeixinJSBridge == "undefined") {
|
||
if (document.addEventListener) {
|
||
document.addEventListener("WeixinJSBridgeReady", onBridgeReady, false);
|
||
} else if (document.attachEvent) {
|
||
document.attachEvent("WeixinJSBridgeReady", onBridgeReady);
|
||
document.attachEvent("onWeixinJSBridgeReady", onBridgeReady);
|
||
}
|
||
} else {
|
||
onBridgeReady();
|
||
}
|
||
}, [jsapiParams]);
|
||
|
||
return (
|
||
<section className="flex flex-1 flex-col bg-white">
|
||
<div className="flex flex-col">
|
||
<p className="text-center text-black text-lg font-medium py-2">
|
||
微信安全支付
|
||
</p>
|
||
<hr className="bg-secondary" />
|
||
</div>
|
||
<div className="flex flex-col items-center">
|
||
<svg viewBox="0 0 1024 1024" width="100" height="100">
|
||
<path
|
||
d="M512 85.333333a426.666667 426.666667 0 1 0 426.666667 426.666667A426.666667 426.666667 0 0 0 512 85.333333z m42.666667 597.333334a42.666667 42.666667 0 0 1-85.333334 0v-213.333334a42.666667 42.666667 0 0 1 85.333334 0z m-42.666667-298.666667a42.666667 42.666667 0 1 1 42.666667-42.666667 42.666667 42.666667 0 0 1-42.666667 42.666667z"
|
||
fill="#5fc157"
|
||
></path>
|
||
</svg>
|
||
<p className="text-sm text-[#5fc157]">
|
||
{success ? "充值成功，请返回APP查看结果" : "正在跳转..."}
|
||
</p>
|
||
</div>
|
||
</section>
|
||
);
|
||
}
|