Merge pull request '微信支付测试' (#59) from feat-20240218 into main

Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_web/pulls/59

app/pay/[weixin]/page.jsx

@@ -15,7 +15,7 @@ export default function Weixin({ params }) {
   useEffect(() => {
     var QRCode = require("qrcode");
     QRCode.toDataURL(
-      `https://tiefen.fun/pay/inweixin/${params.weixin}`,
+      `https://tiefen.fun/pay/jsapi/${params.weixin}`,
       function (err, url) {
         setQrcodeUrl(url);
       }

app/pay/inweixin/[body]/page.jsx

@@ -0,0 +1,77 @@
+"use client";
+
+import React, { useState, useEffect } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+
+export default function InWeixin({ params }) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+
+  const [code, setCode] = useState("no code");
+  const [body, setBody] = useState({});
+  const [info, setInfo] = useState("no data");
+  useEffect(() => {
+    // //获取code
+    // const temCode = searchParams.get("code");
+    // setCode(temCode);
+
+    // //获取支付body
+    // const strBody = decodeURIComponent(params.body);
+    // const temBody = JSON.parse(strBody);
+    // setBody(temBody);
+
+    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") {
+            // 使用以上方式判断前端返回,微信团队郑重提示：
+            //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
+            setInfo("success");
+          }
+        }
+      );
+    }
+    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();
+    }
+  }, []);
+
+  return (
+    <section className="flex flex-1 flex-col container 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]">正在跳转...</p>
+      </div>
+      <p className="text-sm text-black">{code}</p>
+      <p className="text-sm text-black">{info}</p>
+    </section>
+  );
+}

app/pay/inweixin/[weixin]/page.jsx

@@ -1,36 +0,0 @@
-"use client";
-
-import React, { useState, useEffect } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-
-export default function InWeixin({ params }) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-
-  const [code, setCode] = useState("no code");
-  useEffect(() => {
-    const temcode = searchParams.get("code");
-    setCode(temcode);
-  }, []);
-
-  return (
-    <section className="flex flex-1 flex-col container 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]">正在跳转...</p>
-      </div>
-      <p className="text-base text-black">{code}</p>
-    </section>
-  );
-}

app/pay/jsapi/[body]/page.jsx

@@ -6,12 +6,10 @@ import { useRouter } from "next/navigation";
 export default function JsApi({ params }) {
   const router = useRouter();
   useEffect(() => {
-    const redirect_uri = `https://tiefen.fun/pay/inweixin/${encodeURIComponent(
+    const redirect_uri = `https://tiefen.fun/pay/inweixin/${params.body}`;
-      params.body
-    )}`;
     router.replace(
       `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxc28fd8aaf31984b6&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`
     );
   }, []);
-  return <section>JsApi</section>;
+  return <section className="bg-white"></section>;
 }