438 lines
14 KiB
JavaScript
438 lines
14 KiB
JavaScript
"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>
|
||
);
|
||
}
|