This commit is contained in:
@@ -0,0 +1,302 @@
|
||||
"use client";
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { Badge } from "@workspace/ui/components/badge";
|
||||
import { Button } from "@workspace/ui/components/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@workspace/ui/components/dialog";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "@workspace/ui/components/form";
|
||||
import { Textarea } from "@workspace/ui/components/textarea";
|
||||
import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
|
||||
import {
|
||||
ProTable,
|
||||
type ProTableActions,
|
||||
} from "@workspace/ui/composed/pro-table/pro-table";
|
||||
import {
|
||||
approveWithdrawal,
|
||||
getWithdrawalList,
|
||||
rejectWithdrawal,
|
||||
} from "@workspace/ui/services/admin/withdrawal";
|
||||
import { useRef, useState } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { Display } from "@/components/display";
|
||||
import { UserDetail } from "@/sections/user/user-detail";
|
||||
import { formatDate } from "@/utils/common";
|
||||
|
||||
const rejectSchema = z.object({
|
||||
reason: z
|
||||
.string()
|
||||
.trim()
|
||||
.min(2, "请填写拒绝原因")
|
||||
.max(500, "拒绝原因不能超过 500 个字符"),
|
||||
});
|
||||
|
||||
export default function WithdrawalPage() {
|
||||
const { t } = useTranslation("user");
|
||||
const ref = useRef<ProTableActions>(null);
|
||||
const [rejectOpen, setRejectOpen] = useState(false);
|
||||
const [currentRow, setCurrentRow] = useState<API.WithdrawalLog | null>(null);
|
||||
const form = useForm<z.infer<typeof rejectSchema>>({
|
||||
resolver: zodResolver(rejectSchema),
|
||||
defaultValues: {
|
||||
reason: "",
|
||||
},
|
||||
});
|
||||
|
||||
const approveMutation = useMutation({
|
||||
mutationFn: async (withdrawalId: number) =>
|
||||
approveWithdrawal({ withdrawal_id: withdrawalId }),
|
||||
onSuccess: () => {
|
||||
toast.success("提现申请已通过");
|
||||
ref.current?.refresh();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Approve withdrawal failed", error);
|
||||
toast.error("提现通过失败");
|
||||
},
|
||||
});
|
||||
|
||||
const rejectMutation = useMutation({
|
||||
mutationFn: async (values: { withdrawal_id: number; reason: string }) =>
|
||||
rejectWithdrawal(values),
|
||||
onSuccess: () => {
|
||||
toast.success("提现申请已拒绝");
|
||||
setRejectOpen(false);
|
||||
setCurrentRow(null);
|
||||
form.reset({ reason: "" });
|
||||
ref.current?.refresh();
|
||||
},
|
||||
onError: (error) => {
|
||||
console.error("Reject withdrawal failed", error);
|
||||
toast.error("提现拒绝失败");
|
||||
},
|
||||
});
|
||||
|
||||
const statusOptions = [
|
||||
{ value: "0", label: "审核中" },
|
||||
{ value: "1", label: "已通过" },
|
||||
{ value: "2", label: "已拒绝" },
|
||||
];
|
||||
|
||||
const statusMap: Record<number, { label: string; className: string }> = {
|
||||
0: {
|
||||
label: "审核中",
|
||||
className: "bg-amber-100 text-amber-700 border-amber-200",
|
||||
},
|
||||
1: {
|
||||
label: "已通过",
|
||||
className: "bg-emerald-100 text-emerald-700 border-emerald-200",
|
||||
},
|
||||
2: {
|
||||
label: "已拒绝",
|
||||
className: "bg-rose-100 text-rose-700 border-rose-200",
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ProTable<API.WithdrawalLog, { status?: string; user_id?: string }>
|
||||
action={ref}
|
||||
actions={{
|
||||
render: (row) => {
|
||||
if (row.status !== 0) return [];
|
||||
|
||||
return [
|
||||
<ConfirmButton
|
||||
cancelText={t("cancel", "Cancel")}
|
||||
confirmText={t("confirm", "Confirm")}
|
||||
description="确认后将标记该提现为已通过，请确保线下打款流程已完成。"
|
||||
key="approve"
|
||||
onConfirm={async () => {
|
||||
await approveMutation.mutateAsync(row.id);
|
||||
}}
|
||||
title="确认通过提现吗？"
|
||||
trigger={
|
||||
<Button
|
||||
disabled={approveMutation.isPending}
|
||||
size="sm"
|
||||
variant="default"
|
||||
>
|
||||
通过
|
||||
</Button>
|
||||
}
|
||||
/>,
|
||||
<Button
|
||||
key="reject"
|
||||
onClick={() => {
|
||||
setCurrentRow(row);
|
||||
setRejectOpen(true);
|
||||
}}
|
||||
size="sm"
|
||||
variant="destructive"
|
||||
>
|
||||
拒绝
|
||||
</Button>,
|
||||
];
|
||||
},
|
||||
}}
|
||||
columns={[
|
||||
{
|
||||
accessorKey: "id",
|
||||
header: "ID",
|
||||
},
|
||||
{
|
||||
accessorKey: "user_id",
|
||||
header: t("user", "User"),
|
||||
cell: ({ row }) => <UserDetail id={row.original.user_id} />,
|
||||
},
|
||||
{
|
||||
accessorKey: "amount",
|
||||
header: "提现金额",
|
||||
cell: ({ row }) => (
|
||||
<Display type="currency" value={row.original.amount} />
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "content",
|
||||
header: "收款信息",
|
||||
cell: ({ row }) => (
|
||||
<div className="max-w-[360px] break-all text-sm">
|
||||
{row.original.content || "--"}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
accessorKey: "status",
|
||||
header: "状态",
|
||||
cell: ({ row }) => {
|
||||
const status = statusMap[row.original.status] ?? {
|
||||
label: `未知 (${row.original.status})`,
|
||||
className: "",
|
||||
};
|
||||
return (
|
||||
<Badge className={status.className} variant="outline">
|
||||
{status.label}
|
||||
</Badge>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
accessorKey: "reason",
|
||||
header: "拒绝原因",
|
||||
cell: ({ row }) => row.original.reason || "--",
|
||||
},
|
||||
{
|
||||
accessorKey: "created_at",
|
||||
header: "申请时间",
|
||||
cell: ({ row }) => formatDate(row.original.created_at),
|
||||
},
|
||||
{
|
||||
accessorKey: "updated_at",
|
||||
header: "更新时间",
|
||||
cell: ({ row }) => formatDate(row.original.updated_at),
|
||||
},
|
||||
]}
|
||||
header={{ title: "提现管理" }}
|
||||
params={[
|
||||
{
|
||||
key: "status",
|
||||
options: statusOptions,
|
||||
placeholder: "状态",
|
||||
},
|
||||
{
|
||||
key: "user_id",
|
||||
placeholder: "用户 ID",
|
||||
},
|
||||
]}
|
||||
request={async (pagination, filter) => {
|
||||
const { data } = await getWithdrawalList({
|
||||
page: pagination.page,
|
||||
size: pagination.size,
|
||||
status: filter.status ? Number(filter.status) : undefined,
|
||||
user_id: filter.user_id ? Number(filter.user_id) : undefined,
|
||||
});
|
||||
|
||||
return {
|
||||
list: data.data?.list || [],
|
||||
total: data.data?.total || 0,
|
||||
};
|
||||
}}
|
||||
/>
|
||||
|
||||
<Dialog
|
||||
onOpenChange={(open) => {
|
||||
setRejectOpen(open);
|
||||
if (!open) {
|
||||
setCurrentRow(null);
|
||||
form.reset({ reason: "" });
|
||||
}
|
||||
}}
|
||||
open={rejectOpen}
|
||||
>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<DialogTitle>拒绝提现申请</DialogTitle>
|
||||
<DialogDescription>
|
||||
为用户填写本次拒绝原因，提交后该记录会更新为已拒绝。
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<Form {...form}>
|
||||
<form
|
||||
className="space-y-4"
|
||||
onSubmit={form.handleSubmit(async (values) => {
|
||||
if (!currentRow) return;
|
||||
await rejectMutation.mutateAsync({
|
||||
withdrawal_id: currentRow.id,
|
||||
reason: values.reason.trim(),
|
||||
});
|
||||
})}
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="reason"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>拒绝原因</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
placeholder="请输入拒绝原因，用户端会看到这条说明"
|
||||
rows={5}
|
||||
{...field}
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
<DialogFooter>
|
||||
<Button
|
||||
onClick={() => setRejectOpen(false)}
|
||||
type="button"
|
||||
variant="outline"
|
||||
>
|
||||
{t("cancel", "Cancel")}
|
||||
</Button>
|
||||
<Button disabled={rejectMutation.isPending} type="submit">
|
||||
{rejectMutation.isPending ? "提交中..." : "确认拒绝"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</Form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user