tiefen_space_web/app/withdrawal/page.jsx

"use client";
import React, { useState, useEffect } from "react";
import { useSearchParams } from "next/navigation";
import { setCookie, getCookie } from "cookies-next";
import { useRouter } from "next/navigation";
import { Checkbox } from "antd-mobile";
import Link from "next/link";
import baseRequest from "@/utils/baseRequest";
import Divider from "@/components/Divider";
import { Toast } from "antd-mobile";
import { generateSignature } from "@/utils/crypto";
import { JSEncrypt } from "jsencrypt";

export default function WithDrawal() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const mid = searchParams.get("mid");
  const token = searchParams.get("token");
  const mobile_phone = searchParams.get("mobile_phone");

  //将searchParams中的mid和token写入cookie，并重定向到没有searchParams的路由
  useEffect(() => {
    if (mid && token && mobile_phone) {
      setCookie("mid", mid);
      setCookie("token", token);
      setCookie("mobile_phone", mobile_phone);
      router.replace("/withdrawal");
    }
  }, [mid, token, mobile_phone]);

  //查看主播实名认证情况
  const [data, setData] = useState({});
  useEffect(() => {
    const getData = async () => {
      const mid = getCookie("mid");
      if (!mid) return;
      try {
        const base = baseRequest();
        const signature = generateSignature({
          mid: parseInt(mid, 10),
          ...base,
        });
        const verificationResponse = await fetch(
          `/api/realname_authentication/list_by_mid?signature=${signature}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              mid: parseInt(mid, 10),
              ...base,
            }),
          }
        );
        const verificationData = await verificationResponse.json();
        if (verificationData.ret === -1) {
          Toast.show({
            content: verificationData.msg,
          });
        }
        const signature2 = generateSignature({
          ...base,
        });
        const withdrawalResponse = await fetch(
          `/api/vas/withdraw_page?signature=${signature2}`,
          {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({
              ...base,
            }),
          }
        );
        const withdrawalData = await withdrawalResponse.json();
        if (withdrawalData.ret === -1) {
          Toast.show({
            content: withdrawalData.msg,
          });
          return;
        }
        setData({
          verificationStatus:
            verificationData.data?.realname_authentication_api_vo?.status,
          withdrawal_diamond: withdrawalData.data.withdraw_diamonds,
        });
      } catch (error) {
        console.error(error);
      }
    };
    getData();
  }, []);

  const [withdrawalNum, setWithdrawalNum] = useState("");
  const [alipayAccount, setAlipayAccount] = useState("");
  const [payee, setPayee] = useState("");
  const [maskedMobilePhone, setMaskedMobilePhone] = useState("");
  const [veriCode, setVeriCode] = useState("");

  //设置checkbox
  const [checked, setChecked] = useState(false);

  //从cookie中读取mobile_phone并做脱敏处理
  useEffect(() => {
    const mobilePhoneCache = getCookie("mobile_phone");
    const maskedNumber = mobilePhoneCache?.replace(
      /(\d{3})\d{4}(\d{4})/,
      "$1****$2"
    );
    setMaskedMobilePhone(maskedNumber);
  }, []);

  //这是提现钻石的数量
  const handleChangeWithdrawalNum = (e) => {
    let newValue = parseInt(e.target.value, 10);
    // 确保输入的值在最小值和最大值范围内
    if (
      newValue >= 0 &&
      newValue <= Math.min(data?.withdrawal_diamond, 20000)
    ) {
      setWithdrawalNum(newValue);
    } else if (isNaN(newValue)) {
      setWithdrawalNum(0);
    } else if (newValue > Math.min(data?.withdrawal_diamond, 20000)) {
      setWithdrawalNum(Math.min(data?.withdrawal_diamond, 20000));
    }
  };

  //重新获取验证码的计时器
  const [isCounting, setIsCounting] = useState(false);
  const [seconds, setSeconds] = useState(60);
  useEffect(() => {
    let interval;
    if (isCounting && seconds > 0) {
      interval = setInterval(() => {
        setSeconds(seconds - 1);
      }, 1000);
    } else {
      setIsCounting(false);
      setSeconds(60);
      clearInterval(interval);
    }
    return () => {
      clearInterval(interval);
    };
  }, [isCounting, seconds]);

  //点击获取验证码
  const handleVerification = async () => {
    //开始倒计时
    setIsCounting(true);
    //发送短信验证码
    const base = baseRequest();
    const signature = generateSignature({
      ...base,
    });
    try {
      await fetch(`/api/vas/withdraw_send_verifycode?signature=${signature}`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...base,
        }),
      });
    } catch (error) {
      console.error(error);
    }
  };

  //点击提交申请按钮
  const handleSubmit = async () => {
    if (!withdrawalNum || withdrawalNum < 2000) {
      Toast.show({
        content: "提现最低金额为200元（即2000钻石）",
      });
      return;
    }
    if (!alipayAccount || !payee) {
      Toast.show({
        content: "请完善收款信息",
      });
      return;
    }
    if (!veriCode) {
      Toast.show({
        content: "请输入验证码",
      });
      return;
    }
    if (!checked) {
      Toast.show({
        content: "请先同意《用户提现协议》",
      });
      return;
    }
    document.getElementById("comfirm_modal").showModal();
  };

  //点击二次确认按钮
  const [errorMessage, setErrorMessage] = useState("");
  const [isSubmitting, setIsSubmitting] = useState(false);
  const handleConfirm = async () => {
    try {
      setIsSubmitting(true);
      //对支付宝账号和真实姓名进行RSA加密
      const encrypt = new JSEncrypt();
      encrypt.setPublicKey(process.env.NEXT_PUBLIC_WITHDRAW_RSA_KEY);
      const auth_alipay_id = encrypt.encrypt(alipayAccount);
      const auth_alipay_name = encrypt.encrypt(payee);
      const base = baseRequest();
      const signature = generateSignature({
        diamonds: parseInt(withdrawalNum, 10),
        auth_alipay_id: auth_alipay_id,
        auth_alipay_name: auth_alipay_name,
        verify_code: veriCode,
        ...base,
      });
      const applyResponse = await fetch(
        `/api/vas/withdraw_apply?signature=${signature}`,
        {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({
            diamonds: parseInt(withdrawalNum, 10),
            auth_alipay_id: auth_alipay_id,
            auth_alipay_name: auth_alipay_name,
            verify_code: veriCode,
            ...base,
          }),
        }
      );
      const applyData = await applyResponse.json();
      if (applyData.ret === -1) {
        setErrorMessage(applyData.msg);
        setIsSubmitting(false);
        return;
      }
      router.push("/withdrawal/success");
    } catch (error) {
      console.error(error);
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <section className="container flex flex-col flex-1 p-4">
      <div className="flex flex-col items-center justify-around w-full h-32 rounded-2xl bg-gradient-to-r from-[#FF668B] to-[#FF66F0]">
        <p className="text-base text-white font-medium">可提现钻石：</p>
        <div className="flex flex-col items-center">
          <p className="text-2xl text-white font-medium">
            {data?.withdrawal_diamond}
          </p>
          <p className="text-xs text-white font-medium">
            （新入帐钻石需等待7日才能提现哦）
          </p>
        </div>
        <p className="text-base text-white font-medium">
          兑换比例：10钻石=1RMB
        </p>
      </div>
      <p className="text-white text-base mt-2">
        <span className="text-error">*</span>提现数量
      </p>
      <input
        type="number"
        placeholder={`可提现${data?.withdrawal_diamond}钻石`}
        value={withdrawalNum.toString()}
        onChange={handleChangeWithdrawalNum}
        className="input input-bordered input-md input-primary w-full"
      />
      <p className="text-secondary text-base">
        预计提现金额：{withdrawalNum ? withdrawalNum / 10 + "元" : "自动计算"}
      </p>
      <p className="text-white text-base mt-2">
        <span className="text-error">*</span>支付宝账号
      </p>
      {data?.verificationStatus === 0 ? (
        <input
          type="text"
          placeholder="请输入本人支付宝账号"
          value={alipayAccount}
          onChange={(e) => setAlipayAccount(e.target.value)}
          className="input input-bordered input-md input-primary w-full"
        />
      ) : (
        <button
          onClick={() => router.push("/verification")}
          className="btn btn-info text-white w-full"
        >
          {data?.verificationStatus === 1
            ? "您已提交实名认证，请等待审核"
            : "您还未通过实名认证，请点击此处进行认证"}
        </button>
      )}
      <p className="text-white text-base mt-2">
        <span className="text-error">*</span>收款人姓名
      </p>
      {data?.verificationStatus === 0 ? (
        <input
          type="text"
          placeholder="请输入收款人姓名"
          value={payee}
          onChange={(e) => setPayee(e.target.value)}
          className="input input-bordered input-md input-primary w-full"
        />
      ) : (
        <button
          onClick={() => router.push("/verification")}
          className="btn btn-info text-white w-full"
        >
          {data?.verificationStatus === 1
            ? "您已提交实名认证，请等待审核"
            : "您还未通过实名认证，请点击此处进行认证"}
        </button>
      )}
      <p className="text-white text-base mt-2">
        <span className="text-error">*</span>绑定手机
      </p>
      <p className="text-secondary text-base">{maskedMobilePhone}</p>
      <p className="text-white text-base mt-2">
        <span className="text-error">*</span>验证码
      </p>
      {data?.verificationStatus === 0 ? (
        <div className="flex flex-row">
          <input
            type="number"
            placeholder="请输入正确验证码"
            value={veriCode}
            onChange={(e) => setVeriCode(e.target.value)}
            className="input input-bordered input-md input-primary w-full"
          />
          <button
            disabled={isCounting}
            onClick={handleVerification}
            className="btn btn-primary text-white ml-2"
          >
            {isCounting ? `(${seconds})重新发送` : "获取验证码"}
          </button>
        </div>
      ) : (
        <button
          onClick={() => router.push("/verification")}
          className="btn btn-info text-white w-full"
        >
          {data?.verificationStatus === 1
            ? "您已提交实名认证，请等待审核"
            : "您还未通过实名认证，请点击此处进行认证"}
        </button>
      )}
      <div className="flex justify-center mt-8 mb-4">
        <Checkbox
          style={{
            "--icon-size": "18px",
            "--font-size": "14px",
            "--gap": "6px",
          }}
          checked={checked}
          onChange={() => setChecked(!checked)}
        >
          <p className="text-gray-400 text-sm">
            同意
            <Link className="link text-primary" href="/doc/withdrawalagreement">
              《用户提现协议》
            </Link>
          </p>
        </Checkbox>
      </div>
      <button
        onClick={handleSubmit}
        className="btn btn-md btn-primary text-white rounded-full w-full mb-4"
      >
        提交申请
      </button>
      <Divider />
      <p className="text-error text-base mt-2">注意事项：</p>
      <p className="text-error text-sm">
        1.需实名认证后方可提现，详情请点击
        <Link className="link text-info" href="/verification">
          “实名认证”
        </Link>
        ；
      </p>
      <p className="text-error text-sm">
        2.请确保输入信息准确无误，并且支付宝收款人与实名认证本人保持一致，以防提现失败，由输入错误带来的损失与平台方无关；
      </p>
      <p className="text-error text-sm">
        3.单笔最低提现金额为200元（即2000钻石），若提现金额大于2000元（即20000钻石）请联系客服；
      </p>
      <p className="text-error text-sm">
        4.自助提现渠道每日只能提现一次，若有更多提现需求，请联系客服。
      </p>
      <dialog id="comfirm_modal" className="modal">
        <div className="modal-box bg-[#13121F]">
          <p className="text-white text-base font-medium">
            提现金额：
            <span className="text-secondary">¥{withdrawalNum / 10}</span>
          </p>
          <p className="text-white text-base font-medium">
            收款人姓名：<span className="text-secondary">{payee}</span>
          </p>
          <p className="text-white text-base font-medium">
            收款支付宝：<span className="text-secondary">{alipayAccount}</span>
          </p>
          {errorMessage && (
            <p className="text-error text-base font-medium mt-2">
              提现失败：{errorMessage}
            </p>
          )}
          <div className="flex flex-col mt-4">
            <button
              disabled={isSubmitting}
              onClick={handleConfirm}
              className="flex items-center justify-center bg-[#FF669E] rounded-lg py-2"
            >
              {isSubmitting && (
                <span className="loading loading-spinner"></span>
              )}
              {isSubmitting ? "提交中..." : "确认提交"}
            </button>
            <form method="dialog" className="flex mt-2">
              <button className="flex flex-row flex-1 items-center justify-center border border-secondary rounded-lg py-2">
                <p className="text-secondary text-base ml-1">返回修改</p>
              </button>
            </form>
          </div>
        </div>
      </dialog>
    </section>
  );
}