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

"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>
  );
}