213 lines
6.7 KiB
TypeScript
213 lines
6.7 KiB
TypeScript
|
import { useEffect, useState } from "react"
|
|||
|
|
import { toast } from "sonner"
|
|||
|
|
import { submitCashOut } from "@/api/cashOut"
|
|||
|
|
import { Button } from "@/components/ui/button"
|
|||
|
|
import {
|
|||
|
|
Dialog,
|
|||
|
|
DialogContent,
|
|||
|
|
DialogHeader,
|
|||
|
|
DialogTitle,
|
|||
|
|
} from "@/components/ui/dialog"
|
|||
|
|
import { Input } from "@/components/ui/input"
|
|||
|
|
import { Label } from "@/components/ui/label"
|
|||
|
|
|
|||
|
|
const ALIPAY_ACCOUNT_RE =
|
|||
|
|
/^(?:1[3-9]\d{9}|[a-zA-Z\d._-]*@[a-zA-Z\d.-]{1,10}\.[a-zA-Z\d]{1,20})$/
|
|||
|
|
|
|||
|
|
|
|||
|
|
const CUSTOMER_SERVICE_URL =
|
|||
|
|
"https://admin.qidian.qq.com/template/blue/mp/menu/qr-code-jump.html?linkType=0&env=ol&kfuin=2852138148&fid=299&key=f377ec024ca45115a03a7632c7bda230&cate=1&source=&isLBS=&isCustomEntry=&type=16&ftype=1&_type=wpa&qidian=true"
|
|||
|
|
|
|||
|
|
interface CashOutDialogProps {
|
|||
|
|
open: boolean
|
|||
|
|
onOpenChange: (open: boolean) => void
|
|||
|
|
balance: number
|
|||
|
|
onSubmitted?: () => void
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export function CashOutDialog({
|
|||
|
|
open,
|
|||
|
|
onOpenChange,
|
|||
|
|
balance,
|
|||
|
|
onSubmitted,
|
|||
|
|
}: CashOutDialogProps) {
|
|||
|
|
const [step, setStep] = useState<"notice" | "form">("notice")
|
|||
|
|
const [money, setMoney] = useState("")
|
|||
|
|
const [reason, setReason] = useState("")
|
|||
|
|
const [alipayAccount, setAlipayAccount] = useState("")
|
|||
|
|
const [realName, setRealName] = useState("")
|
|||
|
|
const [submitting, setSubmitting] = useState(false)
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!open) {
|
|||
|
|
setSubmitting(false)
|
|||
|
|
// setStep("notice")
|
|||
|
|
}
|
|||
|
|
}, [open])
|
|||
|
|
|
|||
|
|
const handleSubmit = async () => {
|
|||
|
|
const cashOutMoney = Number(money)
|
|||
|
|
if (!Number.isFinite(cashOutMoney) || cashOutMoney <= 0) {
|
|||
|
|
toast.error("抱歉！请重新输入提现金额！")
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (cashOutMoney > balance) {
|
|||
|
|
toast.error("抱歉！您提现的额度大于余额，请重新输入提现金额！")
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!realName.trim()) {
|
|||
|
|
toast.error("抱歉！请重新输入姓名！")
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (
|
|||
|
|
!alipayAccount.trim() ||
|
|||
|
|
!ALIPAY_ACCOUNT_RE.test(alipayAccount.trim())
|
|||
|
|
) {
|
|||
|
|
toast.error("抱歉！请重新输入支付宝账号！")
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setSubmitting(true)
|
|||
|
|
const res = await submitCashOut({
|
|||
|
|
cash_out_money: money,
|
|||
|
|
reason: reason.trim(),
|
|||
|
|
alipay_account: alipayAccount.trim(),
|
|||
|
|
real_name: realName.trim(),
|
|||
|
|
})
|
|||
|
|
setSubmitting(false)
|
|||
|
|
|
|||
|
|
if (!res.success) {
|
|||
|
|
toast.error(res.message || "提现异常！请重试或联系客服。")
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
if (!res.data) {
|
|||
|
|
toast.error("提现异常！请重试或联系客服。")
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
toast.success(
|
|||
|
|
"提现请求发送成功，我们会在5到7个工作日进行处理，请注意查看资金明细。",
|
|||
|
|
)
|
|||
|
|
setMoney("")
|
|||
|
|
setReason("")
|
|||
|
|
setAlipayAccount("")
|
|||
|
|
setRealName("")
|
|||
|
|
onOpenChange(false)
|
|||
|
|
onSubmitted?.()
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Dialog open={open} onOpenChange={onOpenChange}>
|
|||
|
|
<DialogContent className="max-h-[85dvh] overflow-y-auto sm:max-w-sm p-6">
|
|||
|
|
{step === "notice" ? (
|
|||
|
|
<>
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle className="text-xl font-semibold text-center">
|
|||
|
|
余额提现
|
|||
|
|
</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
<div className="mt-3 space-y-2 text-sm text-gray-600">
|
|||
|
|
<p>聚IP涵盖十余种全网知名旗舰产品，总有一款适合您！</p>
|
|||
|
|
<p>联系客服帮您推荐合适的产品，我们将最大努力满足您的需求！</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="mt-4 flex gap-3">
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
className="flex-1 bg-blue-600 hover:bg-blue-700 text-white"
|
|||
|
|
onClick={() =>
|
|||
|
|
window.open(
|
|||
|
|
CUSTOMER_SERVICE_URL,
|
|||
|
|
"_blank",
|
|||
|
|
"noopener,noreferrer",
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
>
|
|||
|
|
联系客服
|
|||
|
|
</Button>
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
variant="outline"
|
|||
|
|
className="flex-1"
|
|||
|
|
onClick={() => setStep("form")}
|
|||
|
|
>
|
|||
|
|
我不需要
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
) : (
|
|||
|
|
<>
|
|||
|
|
<DialogHeader>
|
|||
|
|
<DialogTitle className="text-xl font-semibold text-center">
|
|||
|
|
余额提现
|
|||
|
|
</DialogTitle>
|
|||
|
|
</DialogHeader>
|
|||
|
|
|
|||
|
|
<div className="space-y-4 mt-2">
|
|||
|
|
<p className="text-xs text-muted-foreground">
|
|||
|
|
当前可用余额：
|
|||
|
|
<span className="font-bold text-orange-500">
|
|||
|
|
¥{balance.toFixed(2)}
|
|||
|
|
</span>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label className="text-sm text-gray-600">提现金额</Label>
|
|||
|
|
<Input
|
|||
|
|
type="number"
|
|||
|
|
min={0}
|
|||
|
|
value={money}
|
|||
|
|
onChange={e => setMoney(e.target.value)}
|
|||
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|||
|
|
placeholder="请输入提现金额"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label className="text-sm text-gray-600">提现理由</Label>
|
|||
|
|
<Input
|
|||
|
|
value={reason}
|
|||
|
|
onChange={e => setReason(e.target.value)}
|
|||
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|||
|
|
placeholder="请输入提现理由"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label className="text-sm text-gray-600">
|
|||
|
|
提现支付宝账号（目前仅支持支付宝）
|
|||
|
|
</Label>
|
|||
|
|
<Input
|
|||
|
|
value={alipayAccount}
|
|||
|
|
onChange={e => setAlipayAccount(e.target.value)}
|
|||
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|||
|
|
placeholder="请输入支付宝账号"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="space-y-1.5">
|
|||
|
|
<Label className="text-sm text-gray-600">支付宝真实姓名</Label>
|
|||
|
|
<Input
|
|||
|
|
value={realName}
|
|||
|
|
onChange={e => setRealName(e.target.value)}
|
|||
|
|
className="h-11 bg-gray-50 border-gray-200"
|
|||
|
|
placeholder="请输入与支付宝关联的真实姓名"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<Button
|
|||
|
|
type="button"
|
|||
|
|
disabled={submitting}
|
|||
|
|
onClick={() => void handleSubmit()}
|
|||
|
|
className="w-full h-11 mt-2 bg-blue-600 hover:bg-blue-700 text-white font-medium"
|
|||
|
|
>
|
|||
|
|
{submitting ? "提交中..." : "确认提现"}
|
|||
|
|
</Button>
|
|||
|
|
</div>
|
|||
|
|
</>
|
|||
|
|
)}
|
|||
|
|
</DialogContent>
|
|||
|
|
</Dialog>
|
|||
|
|
)
|
|||
|
|
}
|