Merge pull request '添加微信native支付页面' (#29) from feat-20240118 into main

Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_web/pulls/29
2024-02-05 21:07:49 +08:00 · 2024-02-05 21:07:49 +08:00 · 8f14d372b2
parent de5756fd65 73f1a7d023
commit 8f14d372b2
1 changed files with 93 additions and 0 deletions
--- a/app/pay/[weixin]/page.jsx
+++ b/app/pay/[weixin]/page.jsx
@ -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,
+      })
+    );
+  };
+
+  //android打开微信，ios打开微信扫一扫，0:android，1: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>
+  );
+}