为vip添加微信支付，完善ui
This commit is contained in:
parent
5ace6f149e
commit
a23288f815
|
|
@ -2,12 +2,9 @@
|
|||
|
||||
import React, { useState, useEffect } from "react";
|
||||
import Image from "next/image";
|
||||
import { useRouter } from "next/navigation";
|
||||
import webviewBaseRequest from "@/utils/webviewBaseRequest";
|
||||
|
||||
export default function Weixin({ params }) {
|
||||
const router = useRouter();
|
||||
|
||||
//生成二维码
|
||||
const [qrcodeUrl, setQrcodeUrl] = useState("");
|
||||
const [device, setDevice] = useState(0);
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@ export default function InWeixin({ params }) {
|
|||
//微信支付jsapi支付参数
|
||||
const [jsapiParams, setJsapiParams] = useState();
|
||||
|
||||
//用户支付成功
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
//获取微信支付jsapi支付参数
|
||||
useEffect(() => {
|
||||
const createOrder = async () => {
|
||||
|
|
@ -48,36 +51,6 @@ export default function InWeixin({ params }) {
|
|||
}
|
||||
};
|
||||
createOrder();
|
||||
|
||||
// function onBridgeReady() {
|
||||
// WeixinJSBridge.invoke(
|
||||
// "getBrandWCPayRequest",
|
||||
// {
|
||||
// appId: "wxc28fd8aaf31984b6", //公众号ID，由商户传入
|
||||
// timeStamp: "1708438397", //时间戳，自1970年以来的秒数
|
||||
// nonceStr: "jXEwa7uEExqFjjlByZivG623Akbzg3Cv", //随机串
|
||||
// package: "prepay_id=wx2022131953635431d27a15e2c95e460000",
|
||||
// signType: "RSA", //微信签名方式：
|
||||
// paySign:
|
||||
// "0rODbhGbNidvOcdyC3+JW5pP6DEd+DZZs0Zg3oMvbQ1pC857YvISgrS8QM2yEZpJFWCnjmUmjyQijp3ZxfV5kqr4x8+l+cmNlc87sDtkXhn/pUNMSKtdt+X9KmOrykBjsLj7hztaPoFSwkGYpxHUrxwiooW+y3to5QqD550CaER7XhAAK5knItPy6pa8rGtYPpEpCn8OkcHHVkuGAcawej1a6MGw2byEv2eRusr1VbUVWENgu557qBdGA2NHoOHfRL3n/goOvt1KXTYRtb+BkwsssHJQb8gyuz0qBR/aNFcSUBb4eSBenWAm1L+Wp/ndxLMkxr1ixQblwEJ9I2NPZw==", //微信签名
|
||||
// },
|
||||
// function (res) {
|
||||
// if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// );
|
||||
// }
|
||||
// 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();
|
||||
// }
|
||||
}, []);
|
||||
|
||||
//调起收银台
|
||||
|
|
@ -96,7 +69,7 @@ export default function InWeixin({ params }) {
|
|||
},
|
||||
function (res) {
|
||||
if (res.err_msg == "get_brand_wcpay_request:ok") {
|
||||
return;
|
||||
setSuccess(true);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
|
@ -128,7 +101,9 @@ export default function InWeixin({ params }) {
|
|||
fill="#5fc157"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-sm text-[#5fc157]">正在跳转...</p>
|
||||
<p className="text-sm text-[#5fc157]">
|
||||
{success ? "充值成功，请返回APP查看结果" : "正在跳转..."}
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -132,11 +132,6 @@ export default function Pay() {
|
|||
case "alipay_h5":
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
case "wxpay_native":
|
||||
router.push(
|
||||
`/pay/${encodeURIComponent(data.data.wxpay_native_param_str)}`
|
||||
);
|
||||
break;
|
||||
default:
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
|
|
@ -290,7 +285,7 @@ export default function Pay() {
|
|||
<div className="basis-1/2 px-2">
|
||||
<button
|
||||
onClick={() => createOrder("wxpay_jsapi")}
|
||||
className="flex flex-row h-12 w-full items-center justify-center bg-[#2E2E2E] rounded-full py-2"
|
||||
className="flex flex-row h-12 w-full items-center justify-center bg-primary rounded-full py-2"
|
||||
>
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
|
|
|
|||
|
|
@ -79,7 +79,6 @@ export default function Vip() {
|
|||
//创建充值订单
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const createOrder = async (type = "alipay_h5") => {
|
||||
setIsLoading(true);
|
||||
const base = webviewBaseRequest();
|
||||
const body = {
|
||||
...base,
|
||||
|
|
@ -87,6 +86,15 @@ export default function Vip() {
|
|||
pay_type: type,
|
||||
from: "app",
|
||||
};
|
||||
|
||||
//如果是微信jsapi支付直接跳转到中间页
|
||||
if (type === "wxpay_jsapi") {
|
||||
router.push(`/pay/${encodeURIComponent(JSON.stringify(body))}`);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
const signature = generateSignature(body);
|
||||
try {
|
||||
const response = await fetch(
|
||||
|
|
@ -110,11 +118,6 @@ export default function Vip() {
|
|||
case "alipay_h5":
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
case "wxpay_native":
|
||||
router.push(
|
||||
`/pay/${encodeURIComponent(data.data.wxpay_native_param_str)}`
|
||||
);
|
||||
break;
|
||||
default:
|
||||
router.push(`${data.data.alipay_h5_param_str}`);
|
||||
break;
|
||||
|
|
@ -126,27 +129,6 @@ export default function Vip() {
|
|||
}
|
||||
};
|
||||
|
||||
//跳转联系客服
|
||||
const handleContact = () => {
|
||||
if (navigator.userAgent.includes("FromWebview")) {
|
||||
window.ReactNativeWebView.postMessage(
|
||||
JSON.stringify({
|
||||
type: "NAVIGATE",
|
||||
data: {
|
||||
page: "MessageDetail",
|
||||
params: {
|
||||
mid: 1,
|
||||
},
|
||||
},
|
||||
})
|
||||
);
|
||||
} else {
|
||||
Toast.show({
|
||||
content: "请下载app联系客服充值",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
if (isFetching) {
|
||||
return (
|
||||
<section className="flex flex-1 justify-center container">
|
||||
|
|
@ -265,12 +247,17 @@ export default function Vip() {
|
|||
</div>
|
||||
<div className="basis-1/2 pl-2">
|
||||
<div
|
||||
onClick={handleContact}
|
||||
onClick={() => createOrder("wxpay_jsapi")}
|
||||
className="flex flex-row cursor-pointer gap-1.5 h-11 items-center justify-center bg-[#2E2E2E] rounded-full"
|
||||
>
|
||||
<Image src={contact} width={22} alt="" />
|
||||
<svg viewBox="0 0 1228 1024" width="18" height="18">
|
||||
<path
|
||||
d="M530.8928 703.1296a41.472 41.472 0 0 1-35.7376-19.8144l-2.7136-5.5808L278.272 394.752a18.7392 18.7392 0 0 1-2.048-8.1408 19.968 19.968 0 0 1 20.48-19.3536c4.608 0 8.8576 1.4336 12.288 3.84l234.3936 139.9296a64.4096 64.4096 0 0 0 54.528 5.9392L1116.2624 204.8C1004.9536 80.896 821.76 0 614.4 0 275.0464 0 0 216.576 0 483.6352c0 145.7152 82.7392 276.8896 212.2752 365.5168a38.1952 38.1952 0 0 1 17.2032 31.488 44.4928 44.4928 0 0 1-2.1504 12.3904l-27.6992 97.4848c-1.3312 4.608-3.328 9.3696-3.328 14.1312 0 10.752 9.216 19.3536 20.48 19.3536 4.4032 0 8.0384-1.536 11.776-3.584l134.5536-73.3184c10.1376-5.5296 20.7872-8.96 32.6144-8.96 6.2976 0 12.288 0.9216 18.0736 2.5088 62.72 17.0496 130.4576 26.5728 200.5504 26.5728C953.7024 967.168 1228.8 750.592 1228.8 483.6352c0-80.9472-25.4464-157.1328-70.0416-224.1024l-604.9792 436.992-4.4544 2.4064a42.1376 42.1376 0 0 1-18.432 4.1984z"
|
||||
fill="#FFFFFF"
|
||||
></path>
|
||||
</svg>
|
||||
<p className="text-white text-base font-medium whitespace-nowrap">
|
||||
联系人工充值
|
||||
微信支付
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue