补充个人中心页面api & 首页弹唱查看活动 & 联系客服
This commit is contained in:
Eamon
212
src/components/composites/dialogs/cashOutDialog.tsx
Normal file
212
src/components/composites/dialogs/cashOutDialog.tsx
Normal file
@@ -0,0 +1,212 @@
|
||||
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user