tiefen_space_web/app/withdrawal/page.jsx

390 lines
20 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

"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";
export default function WithDrawal() {
return (
<section className="flex flex-col mt-32 items-center">
<svg viewBox="0 0 1143 1024" width="120" height="120">
<path
d="M230.78912 431.75424c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.1968-0.2048-29.35296l14.57664-14.77632c8.04864-8.17152 21.22752-8.25344 29.35296-0.2048 8.17152 8.04864 8.24832 21.1968 0.19968 29.35296l-14.57664 14.78144C241.5104 429.68576 236.13952 431.75424 230.78912 431.75424L230.78912 431.75424zM289.09056 372.63872c-5.26848 0-10.54208-1.9968-14.59712-5.9904-8.15104-8.05888-8.22784-21.1968-0.18432-29.35296l14.59712-14.77632c8.0896-8.17152 21.20704-8.23296 29.37344-0.18432 8.15104 8.05888 8.23296 21.19168 0.18432 29.35296l-14.59712 14.77632C299.79648 370.58048 294.44096 372.63872 289.09056 372.63872L289.09056 372.63872zM347.41248 313.5232c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.1968-0.2048-29.35296l14.57664-14.78144c8.04864-8.17152 21.22752-8.24832 29.35296-0.2048 8.17152 8.04864 8.24832 21.19168 0.19968 29.35296l-14.57664 14.77632C358.13888 311.45472 352.768 313.5232 347.41248 313.5232L347.41248 313.5232zM405.71904 254.40768c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.19168-0.2048-29.35296l14.57664-14.78144c8.04864-8.17152 21.22752-8.24832 29.35296-0.2048 8.17152 8.04864 8.24832 21.19168 0.2048 29.35296l-14.57664 14.78144C416.44544 252.3392 411.06944 254.40768 405.71904 254.40768L405.71904 254.40768zM464.04096 195.28192c-5.26848 0-10.54208-1.98656-14.57664-5.98016-8.17152-8.04864-8.24832-21.19168-0.2048-29.35296l14.57664-14.78144c8.04864-8.17152 21.22752-8.24832 29.35296-0.19968 8.17152 8.04864 8.24832 21.19168 0.2048 29.35296l-14.57664 14.77632C474.76736 193.21856 469.39648 195.28192 464.04096 195.28192L464.04096 195.28192zM911.21152 431.75424c-5.3504 0-10.72128-2.06848-14.77632-6.18496l-14.57664-14.78144c-8.04864-8.16128-7.97184-21.30432 0.19968-29.35296 8.13056-8.04864 21.30944-7.96672 29.35296 0.2048l14.57664 14.77632c8.04864 8.16128 7.96672 21.30432-0.2048 29.35296C921.7536 429.76256 916.48 431.75424 911.21152 431.75424L911.21152 431.75424zM852.90496 372.63872c-5.3504 0-10.7008-2.05824-14.77632-6.17472l-14.59712-14.77632c-8.04864-8.16128-7.96672-21.29408 0.18432-29.35296 8.17152-8.04864 21.28384-7.9872 29.37344 0.18432l14.59712 14.77632c8.04864 8.16128 7.96672 21.2992-0.18432 29.35296C863.44704 370.64192 858.17856 372.63872 852.90496 372.63872L852.90496 372.63872zM794.58304 313.5232c-5.3504 0-10.7264-2.06848-14.77632-6.18496l-14.57664-14.77632c-8.04864-8.16128-7.96672-21.30432 0.2048-29.35296 8.13056-8.04864 21.30432-7.96672 29.35296 0.2048l14.57664 14.78144c8.04864 8.16128 7.96672 21.30432-0.2048 29.35296C805.12512 311.53664 799.85664 313.5232 794.58304 313.5232L794.58304 313.5232zM736.2816 254.40768c-5.3504 0-10.72128-2.06848-14.77632-6.18496l-14.57664-14.78144c-8.04864-8.16128-7.96672-21.30432 0.19968-29.35296 8.13056-8.04864 21.30944-7.96672 29.35296 0.2048l14.57664 14.78144c8.04864 8.16128 7.96672 21.30432-0.19968 29.35296C746.82368 252.42112 741.55008 254.40768 736.2816 254.40768L736.2816 254.40768zM677.95456 195.28192c-5.3504 0-10.72128-2.06848-14.77632-6.18496l-14.57664-14.77632c-8.04864-8.16128-7.97184-21.30432 0.19968-29.35296 8.13056-8.04864 21.32992-7.96672 29.35296 0.19968l14.57664 14.78144c8.04864 8.16128 7.96672 21.30432-0.19968 29.35296C688.49664 193.29536 683.22816 195.28192 677.95456 195.28192L677.95456 195.28192zM1026.84672 1024 115.19488 1024c-63.45216 0-115.06688-51.00544-115.06688-113.72544l0-364.25728c0-62.73536 51.61472-113.78176 115.06688-113.78176l911.65184 0c63.43168 0 115.02592 51.0464 115.02592 113.78176l0 364.25728C1141.87264 972.99456 1090.2784 1024 1026.84672 1024L1026.84672 1024zM115.19488 473.75872c-40.54528 0-73.5488 32.41472-73.5488 72.26368l0 364.25728c0 39.81312 33.00352 72.21248 73.5488 72.21248l911.65184 0c40.5248 0 73.50784-32.39424 73.50784-72.21248l0-364.25728c0-39.84384-32.98304-72.26368-73.50784-72.26368L115.19488 473.75872 115.19488 473.75872zM571.01824 171.76064c-47.35488 0-85.89312-38.528-85.89312-85.87264C485.12512 38.528 523.66336 0 571.01824 0s85.89312 38.528 85.89312 85.88288C656.91648 133.22752 618.37824 171.76064 571.01824 171.76064L571.01824 171.76064zM571.01824 41.51808c-24.46848 0-44.37504 19.90656-44.37504 44.3648 0 24.45824 19.90656 44.35456 44.37504 44.35456 24.46848 0 44.37504-19.89632 44.37504-44.35456C615.3984 61.42464 595.48672 41.51808 571.01824 41.51808L571.01824 41.51808z"
fill="#838284"
></path>
<path
d="M148.59776 872.96 187.32032 732.16 148.59776 872.96Z"
fill="#838284"
></path>
<path
d="M306.2016 766.47936l23.28064 5.87776c-4.87936 19.11808-13.66016 33.69984-26.3424 43.74016s-28.18048 15.05792-46.49984 15.05792c-18.95936 0-34.3808-3.86048-46.2592-11.58144s-20.92032-18.89792-27.12064-33.54112-9.29792-30.3616-9.29792-47.16032c0-18.31936 3.50208-34.29888 10.50112-47.93856s16.96256-24.00256 29.88032-31.0784 27.14112-10.61888 42.65984-10.61888c17.60256 0 32.39936 4.48 44.40064 13.44s20.36224 21.56032 25.07776 37.80096l-22.92224 5.4016c-4.08064-12.8-9.99936-22.1184-17.76128-27.96032s-17.52064-8.76032-29.28128-8.76032c-13.52192 0-24.82176 3.24096-33.89952 9.71776s-15.4624 15.1808-19.13856 26.10176-5.51936 22.17984-5.51936 33.78176c0 14.96064 2.18112 28.02176 6.53824 39.17824s11.14112 19.50208 20.34176 25.02144 19.15904 8.27904 29.88032 8.27904c13.04064 0 24.07936-3.75808 33.12128-11.27936S303.0016 781.28128 306.2016 766.47936z"
fill="#838284"
></path>
<path
d="M357.20192 828.16l0-175.91808 23.28064 0 0 155.1616 86.64064 0 0 20.7616L357.20192 828.16512z"
fill="#838284"
></path>
<path
d="M487.76192 742.48192c0-29.19936 7.83872-52.06016 23.52128-68.5824s35.92192-24.7808 60.71808-24.7808c16.24064 0 30.87872 3.88096 43.91936 11.63776s22.97856 18.58048 29.81888 32.4608 10.26048 29.6192 10.26048 47.22176c0 17.83808-3.59936 33.80224-10.79808 47.88224s-17.39776 24.73984-30.60224 31.97952-27.43808 10.85952-42.72128 10.85952c-16.55808 0-31.36-3.99872-44.40064-12.00128s-22.92224-18.9184-29.63968-32.75776S487.76192 757.91872 487.76192 742.48192zM511.75936 742.84032c0 21.20192 5.69856 37.89824 17.1008 50.0992s25.7024 18.29888 42.90048 18.29888c17.52064 0 31.93856-6.15936 43.25888-18.47808s16.97792-29.7984 16.97792-52.43904c0-14.32064-2.42176-26.81856-7.26016-37.49888s-11.91936-18.95936-21.23776-24.84224-19.77856-8.82176-31.38048-8.82176c-16.48128 0-30.65856 5.6576-42.54208 16.97792S511.75936 716.35968 511.75936 742.84032z"
fill="#838284"
></path>
<path
d="M678.08256 771.64032l21.95968-1.92c1.03936 8.80128 3.46112 16.02048 7.26016 21.6576s9.7024 10.19904 17.69984 13.68064 16.9984 5.2224 26.99776 5.2224c8.87808 0 16.72192-1.32096 23.52128-3.95776s11.85792-6.26176 15.1808-10.85952 4.98176-9.62048 4.98176-15.05792c0-5.51936-1.60256-10.3424-4.80256-14.45888s-8.47872-7.5776-15.84128-10.37824c-4.72064-1.83808-15.16032-4.70016-31.31904-8.58112s-27.47904-7.54176-33.96096-10.9824c-8.40192-4.39808-14.65856-9.86112-18.78016-16.37888s-6.17984-13.81888-6.17984-21.89824c0-8.87808 2.51904-17.1776 7.56224-24.89856s12.40064-13.57824 22.08256-17.58208 20.43904-6.00064 32.2816-6.00064c13.04064 0 24.54016 2.0992 34.49856 6.2976s17.61792 10.37824 22.97856 18.53952 8.23808 17.39776 8.64256 27.71968l-22.31808 1.67936c-1.19808-11.12064-5.25824-19.52256-12.18048-25.20064s-17.14176-8.51968-30.65856-8.51968c-14.08 0-24.34048 2.58048-30.78144 7.74144s-9.66144 11.38176-9.66144 18.6624c0 6.31808 2.2784 11.52 6.84032 15.60064 4.48 4.08064 16.1792 8.25856 35.0976 12.53888s31.8976 8.01792 38.9376 11.21792c10.24 4.72064 17.80224 10.7008 22.6816 17.94048s7.3216 15.58016 7.3216 25.02144c0 9.35936-2.67776 18.18112-8.0384 26.46016s-13.06112 14.72-23.10144 19.31776-21.34016 6.90176-33.89952 6.90176c-15.91808 0-29.2608-2.31936-40.01792-6.95808s-19.2-11.6224-25.3184-20.9408S678.4 783.40096 678.08256 771.64032z"
fill="#838284"
></path>
<path
d="M850.40128 828.16l0-175.91808 127.20128 0 0 20.7616-103.92064 0 0 53.87776 97.32096 0L971.00288 747.52l-97.32096 0 0 59.8784 108.00128 0 0 20.7616L850.40128 828.16z"
fill="#838284"
></path>
</svg>
<p className="text-secondary text-base font-medium mt-2">
提现通道1月8号开放请耐心等待
</p>
</section>
);
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,
});
return;
}
//todo:查询账户可提现钻石数量
setData({
verificationStatus:
verificationData.data.realname_authentication_api_vo.status,
});
} 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 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 handleConfirm = async () => {
//todo:提交提现申请如果出错则设置errorMessage如果成功则跳转成功页面
router.push("/withdrawal/success");
};
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.自助提现渠道每日提现上限为2000元即20000钻石若有更多提现需求请联系客服
</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
onClick={handleConfirm}
className="flex items-center justify-center bg-[#FF669E] rounded-lg py-2"
>
<p className="text-white text-base ml-1">确认提交</p>
</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>
);
}