添加微信native支付页面

This commit is contained in:
yezian 2024-02-05 21:07:26 +08:00
parent f7d6d7767a
commit 73f1a7d023
1 changed files with 93 additions and 0 deletions

93
app/pay/[weixin]/page.jsx Normal file
View File

@ -0,0 +1,93 @@
"use client";
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);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
var QRCode = require("qrcode");
const weixinUrl = decodeURIComponent(params.weixin);
QRCode.toDataURL(weixinUrl, function (err, url) {
setQrcodeUrl(url);
});
//
const base = webviewBaseRequest();
if (base?.b_dt === 1) setDevice(1);
setIsLoading(false);
}, []);
//
const saveQrcode = async () => {
window.ReactNativeWebView.postMessage(
JSON.stringify({
type: "SAVE_IMAGE",
data: qrcodeUrl,
})
);
};
//androidios0:android1:ios
const openWechat = () => {
if (device === 0) {
router.push("weixin://");
return;
}
router.push("weixin://scanqrcode");
};
if (isLoading) {
return (
<section className="flex flex-1 justify-center container">
<span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
</section>
);
}
return (
<section className="flex flex-1 flex-col container py-4">
<div className="flex flex-col gap-2">
<h1 className="text-white text-2xl font-semibold text-center">
请保存二维码到相册后
<br />
打开微信扫码支付
</h1>
<p className="text-white text-base text-center">
支付成功后返回APP关闭页面即可
</p>
</div>
<div className="flex flex-col gap-4 px-4 mt-4">
<button
onClick={saveQrcode}
className="btn btn-primary text-white text-base"
>
点此保存二维码
</button>
<button
onClick={openWechat}
className="btn btn-primary text-white text-base"
>
{device === 0 ? "② 点此打开微信" : "② 点此打开微信扫一扫"}
</button>
</div>
<div className="mt-4 flex justify-center">
{qrcodeUrl && (
<Image
className="aspect-square object-contain rounded-xl"
src={qrcodeUrl}
width={120}
height={120}
alt=""
></Image>
)}
</div>
</section>
);
}