douyintest/app/iqtest/pay/page.jsx

"use client";

import React, { useState, useEffect } from "react";
import { Checkbox, Toast } from "antd-mobile";
import { useSearchParams } from "next/navigation";
import { useRouter } from "next/navigation";
import { getCookie } from "cookies-next";

export default function Pay() {
  const searchParams = useSearchParams();
  const router = useRouter();

  const [time, setTime] = useState(30 * 60 * 100);

  useEffect(() => {
    const interval = setInterval(() => {
      setTime((prevTime) => {
        if (prevTime <= 1) {
          clearInterval(interval);
          return 0;
        }
        return prevTime - 1;
      });
    }, 10);

    return () => clearInterval(interval);
  }, []);

  const formatTime = (time) => {
    const minutes = String(Math.floor((time / (100 * 60)) % 60)).padStart(
      2,
      "0"
    );
    const seconds = String(Math.floor((time / 100) % 60)).padStart(2, "0");
    const centiseconds = String(time % 100).padStart(2, "0");
    return {
      minutes: minutes,
      seconds: seconds,
      centiseconds: centiseconds,
    };
  };

  const [payType, setPayType] = useState("alipay_h5");

  const createOreder = async (tpye) => {
    const clickId = getCookie("clickid");
    const id = searchParams.get("id");
    const b_did = localStorage.getItem("b_did");

    // 获取当前URL
    var currentUrl = window.location.href;
    // 解析URL
    var url = new URL(currentUrl);
    // 获取根目录
    var rootDirectory = url.protocol + "//" + url.hostname + "/";

    const response = await fetch("/outer/vas/create_order", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        b_did: b_did,
        raven_qid: parseInt(id, 10),
        product_id: "outer_raven",
        pay_type: tpye,
        from: "outer_raven",
        raven_callback: clickId,
        return_url: `${rootDirectory}iqtest/result?id=${id}`,
      }),
    });
    const data = await response.json();
    if (data.ret === -1) {
      Toast.show({
        content: data.msg,
      });
      return;
    }
    router.push(data.data.alipay_h5_param_str);
  };

  return (
    <section className="flex flex-col flex-1 bg-[url('/svg/background.svg')] max-w-screen-sm w-full p-4">
      <div className="flex flex-col items-center bg-white rounded-2xl overflow-hidden">
        <div className="flex items-center justify-center py-4 bg-yellow-200 w-full border-b-2 border-dashed border-black">
          <h1 className="text-2xl text-black font-bold">
            恭喜，您的智商报告已生成
          </h1>
        </div>
        <div className="flex flex-col p-4">
          <div className="flex flex-row flex-wrap gap-y-2 mt-2 mb-4">
            {[
              "综合智力分数",
              "针对性智力指导",
              "多维度智力分析",
              "职业发展方向",
              "智力潜能和缺陷",
            ].map((item) => (
              <div key={item} className="flex flex-row items-center basis-1/2">
                <img className="w-6" src="/svg/checked.svg" alt="" />
                <p className="text-base font-semibold">{item}</p>
              </div>
            ))}
          </div>
          <p className="text-base">
            本测评由<span className="text-purple-400">专业心理测评团队</span>
            倾心打造，一人仅此一份，内容涵盖智力分析方方面面，已有
            <span className="text-purple-400">256399</span>
            人测试，好评率高达
            <span className="text-purple-400">95.68%！</span>
          </p>
          <hr className="my-4 w-full" />
          <div className="flex flex-row justify-between">
            <p className="line-through text-gray-400 text-base">原价：¥30</p>
            <p className="font-semibold text-base">限时优惠倒计时</p>
          </div>
          <div className="flex flex-row justify-between">
            <div className="flex flex-row gap-2 items-center">
              <p className="bg-purple-500 p-1 rounded text-white text-xs">
                优惠价
              </p>
              <p className="text-purple-500 text-lg font-bold">¥19.9</p>
            </div>
            <p className="font-semibold text-base text-purple-500">
              <span className="inline-block min-w-6 text-center">
                {formatTime(time).minutes}
              </span>
              <span className="w-4">:</span>
              <span className="inline-block min-w-6 text-center">
                {formatTime(time).seconds}
              </span>
              <span className="w-4">:</span>
              <span className="inline-block min-w-6 text-center">
                {formatTime(time).centiseconds}
              </span>
            </p>
          </div>
          <hr className="my-4 w-full" />
          <div className="flex flex-col gap-4">
            {/* <div
              onClick={() => setPayType("wechat_pay")}
              className="flex flex-row justify-between items-center"
            >
              <div className="flex flex-row gap-4">
                <img className="w-6" src="/svg/wechatpay.svg" alt="" />
                <p className="text-base">微信支付</p>
              </div>
              <Checkbox checked={payType === "wechat_pay"} />
            </div> */}
            <div
              onClick={() => setPayType("alipay_h5")}
              className="flex flex-row justify-between items-center"
            >
              <div className="flex flex-row gap-4">
                <img className="w-6" src="/svg/alipay.svg" alt="" />
                <p className="text-base">支付宝</p>
              </div>
              <Checkbox checked={payType === "alipay_h5"} />
            </div>
          </div>
          <div
            onClick={() => createOreder("alipay_h5")}
            className="cursor-pointer flex items-center justify-center w-full py-2 border-2 border-black rounded-full bg-yellow-200 mt-8"
          >
            <p className="text-2xl font-bold">立即解锁您的智商报告</p>
          </div>
        </div>
      </div>
      <div className="flex flex-col mt-8 gap-8">
        <img src="/images/unlock.png" alt="" />
        <img src="/images/safty.png" alt="" />
      </div>
    </section>
  );
}