Compare commits

..

1 Commits

Author SHA1 Message Date
shanshanzhong147 a42ce53abe 修复(#22): 收口后台订单状态6退款入口 2026-06-10 00:48:39 -07:00
11 changed files with 714 additions and 435 deletions
@@ -16,10 +16,11 @@
"0": "Status",
"1": "Pending",
"2": "Paid",
"3": "Cancelled",
"4": "Closed",
"5": "Completed",
"6": "Refunded"
"3": "Closed",
"4": "Failed",
"5": "Finished",
"6": "Claimed",
"7": "Refunded"
},
"subscribe": "Subscribe",
"subscribePrice": "Subscription Price",
@@ -33,5 +34,8 @@
"4": "Recharge"
},
"updateTime": "Update Time",
"user": "User"
"user": "User",
"refundFailed": "Refund failed. Please try again.",
"statusClaimedBlocked": "Claimed and refunded states must use the dedicated processing flow.",
"statusUpdateFailed": "Status update failed. Please try again."
}
@@ -16,10 +16,11 @@
"0": "状态",
"1": "待支付",
"2": "已支付",
"3": "已取消",
"4": "已关闭",
"3": "已关闭",
"4": "失败",
"5": "已完成",
"6": "已退费"
"6": "处理中",
"7": "已退费"
},
"subscribe": "订阅",
"subscribePrice": "订阅价格",
@@ -33,5 +34,8 @@
"4": "充值"
},
"updateTime": "更新时间",
"user": "用户"
"user": "用户",
"refundFailed": "退费失败,请重试。",
"statusClaimedBlocked": "处理中和已退费状态必须走专用流程,不能通过通用改状态提交。",
"statusUpdateFailed": "状态更新失败,请重试。"
}
@@ -0,0 +1,466 @@
/**
* @vitest-environment jsdom
*/
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import {
cleanup,
fireEvent,
render,
screen,
waitFor,
} from "@testing-library/react";
import {
activateOrder,
getOrderList,
refundOrder,
updateOrderStatus,
} from "@workspace/ui/services/admin/order";
import type { AxiosResponse } from "axios";
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
import Order, { canManuallyUpdateOrderStatus, canRefundOrderStatus } from ".";
vi.mock("react-i18next", () => ({
useTranslation: () => ({
t: (_key: string, fallback: string): string => fallback,
}),
}));
vi.mock("@tanstack/react-router", () => ({
useSearch: () => ({}),
}));
vi.mock("@/stores/global", () => ({
useGlobalStore: (
selector?: (state: {
user: { is_admin: boolean };
common: { currency: { currency_symbol: string } };
}) => unknown
) => {
const state = {
user: {
is_admin: true,
},
common: {
currency: {
currency_symbol: "$",
},
},
};
return typeof selector === "function" ? selector(state) : state;
},
}));
vi.mock("@/stores/subscribe", () => ({
useSubscribe: () => ({
subscribes: [
{
id: 9,
name: "Pro Plan",
},
],
getSubscribeName: (id?: number) => (id === 9 ? "Pro Plan" : "--"),
}),
}));
vi.mock("@/utils/common", () => ({
formatDate: (timestamp: number) => `date-${timestamp}`,
}));
vi.mock("../user/user-detail", () => ({
UserDetail: ({ id }: { id: number }) => <span>User #{id}</span>,
}));
vi.mock("@/components/display", () => ({
Display: ({ value }: { value: number }) => <span>{value}</span>,
}));
const toastSuccess = vi.fn();
const toastError = vi.fn();
vi.mock("sonner", () => ({
toast: {
success: (...args: unknown[]) => toastSuccess(...args),
error: (...args: unknown[]) => toastError(...args),
},
}));
vi.mock("@workspace/ui/services/admin/order", () => ({
activateOrder: vi.fn(),
getOrderList: vi.fn(),
refundOrder: vi.fn(),
updateOrderStatus: vi.fn(),
}));
vi.mock("@workspace/ui/components/alert-dialog", () => ({
AlertDialog: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogTrigger: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogContent: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogHeader: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogTitle: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogDescription: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogFooter: ({ children }: { children: React.ReactNode }) => (
<div>{children}</div>
),
AlertDialogCancel: ({
children,
...props
}: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
AlertDialogAction: ({
children,
...props
}: React.ComponentProps<"button">) => <button {...props}>{children}</button>,
}));
vi.mock("@workspace/ui/composed/combobox", () => ({
Combobox: ({
options = [],
value,
onChange,
placeholder,
}: {
options?: Array<{ label: string; value: number | string }>;
value?: number | string;
onChange: (value: number) => void;
placeholder?: string;
}) => (
<label>
<span>{placeholder}</span>
<select
aria-label={placeholder}
onChange={(event) => onChange(Number(event.target.value))}
value={String(value ?? "")}
>
{options.map((option) => (
<option key={String(option.value)} value={String(option.value)}>
{option.label}
</option>
))}
</select>
</label>
),
}));
vi.mock("@workspace/ui/composed/pro-table/pro-table", async () => {
const React = await import("react");
type Column = {
accessorKey?: string;
cell?: (props: {
row: {
original: Record<string, unknown>;
getValue: (key: string) => unknown;
};
}) => React.ReactNode;
};
return {
ProTable: ({
columns,
request,
actions,
}: {
columns: Column[];
request: (
pagination: { page: number; size: number },
filter: Record<string, unknown>
) => Promise<{ list: Record<string, unknown>[]; total: number }>;
actions?: {
render?: (row: Record<string, unknown>) => React.ReactNode[];
};
}) => {
const [state, setState] = React.useState<{
data: Record<string, unknown>[];
error: boolean;
loading: boolean;
}>({
data: [],
error: false,
loading: true,
});
React.useEffect(() => {
let cancelled = false;
request({ page: 1, size: 200 }, {})
.then((response) => {
if (cancelled) return;
setState({
data: response.list,
error: false,
loading: false,
});
})
.catch(() => {
if (cancelled) return;
setState({
data: [],
error: true,
loading: false,
});
});
return () => {
cancelled = true;
};
}, [request]);
if (state.loading) {
return <div aria-label="Loading data" role="status" />;
}
if (state.error) {
return <div>Failed to load orders</div>;
}
if (state.data.length === 0) {
return <div>No orders</div>;
}
return (
<div>
{state.data.map((row) => (
<article key={String(row.id)}>
{columns.map((column, index) => {
const value = column.accessorKey
? row[column.accessorKey]
: undefined;
const rowApi = {
original: row,
getValue: (key: string) => row[key],
};
return (
<div key={`${row.id}-${index}`}>
{column.cell
? column.cell({ row: rowApi })
: typeof value === "object"
? JSON.stringify(value)
: String(value ?? "")}
</div>
);
})}
<div>{actions?.render?.(row)}</div>
</article>
))}
</div>
);
},
};
});
const mockedGetOrderList = vi.mocked(getOrderList);
const mockedRefundOrder = vi.mocked(refundOrder);
const mockedUpdateOrderStatus = vi.mocked(updateOrderStatus);
const mockedActivateOrder = vi.mocked(activateOrder);
function createOrderListResponse(
list: API.Order[]
): AxiosResponse<API.Response & { data?: API.GetOrderListResponse }> {
return {
data: {
code: 200,
data: {
list,
total: list.length,
},
},
status: 200,
statusText: "OK",
headers: {},
config: {
headers: {} as AxiosResponse["config"]["headers"],
},
};
}
function createSuccessResponse(): AxiosResponse<
API.Response & { data?: unknown }
> {
return {
data: {
code: 200,
},
status: 200,
statusText: "OK",
headers: {},
config: {
headers: {} as AxiosResponse["config"]["headers"],
},
};
}
function createOrder(status: number): API.Order {
return {
id: status,
amount: 1999,
coupon_discount: 0,
discount: 0,
fee_amount: 0,
order_no: `ORDER-${status}`,
payment: {
name: "Stripe",
platform: "stripe",
},
price: 1999,
quantity: 1,
status,
status_name:
status === 6 ? "claimed" : status === 7 ? "refunded" : "pending",
subscribe_id: 9,
trade_no: `TRADE-${status}`,
type: 1,
updated_at: 1_716_800_000,
user_id: 88,
} as API.Order;
}
function renderOrderPage() {
const queryClient = new QueryClient({
defaultOptions: {
queries: {
retry: false,
},
},
});
return render(
<QueryClientProvider client={queryClient}>
<Order />
</QueryClientProvider>
);
}
beforeEach(() => {
localStorage.setItem("timezone", "UTC");
});
afterEach(() => {
cleanup();
vi.clearAllMocks();
});
describe("Order", () => {
it("uses the dedicated refund endpoint for refundable orders", async () => {
mockedGetOrderList.mockResolvedValue(
createOrderListResponse([createOrder(2)])
);
mockedRefundOrder.mockResolvedValue(createSuccessResponse());
renderOrderPage();
expect(await screen.findByText("ORDER-2")).not.toBeNull();
fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
await waitFor(() =>
expect(mockedRefundOrder).toHaveBeenCalledWith(
{ id: 2 },
{ skipErrorHandler: true }
)
);
expect(toastSuccess).toHaveBeenCalledWith("Refund completed.");
});
it("blocks status 6 and 7 from the generic status editor", async () => {
mockedGetOrderList.mockResolvedValue(
createOrderListResponse([createOrder(1)])
);
mockedUpdateOrderStatus.mockResolvedValue(createSuccessResponse());
renderOrderPage();
const statusSelect = await screen.findByLabelText("Status");
const optionValues = Array.from(
statusSelect.querySelectorAll("option")
).map((option) => option.textContent);
expect(optionValues).not.toContain("Claimed");
expect(optionValues).not.toContain("Refunded");
expect(canManuallyUpdateOrderStatus(6)).toBe(false);
expect(canManuallyUpdateOrderStatus(7)).toBe(false);
fireEvent.change(statusSelect, { target: { value: "2" } });
await waitFor(() =>
expect(mockedUpdateOrderStatus).toHaveBeenCalledWith(
{ id: 1, status: 2 },
{ skipErrorHandler: true }
)
);
});
it("renders loading state while orders are being fetched", () => {
mockedGetOrderList.mockReturnValue(
new Promise(() => {
// Keep the request pending so the loading UI remains visible.
}) as ReturnType<typeof getOrderList>
);
renderOrderPage();
expect(screen.getByRole("status", { name: "Loading data" })).not.toBeNull();
});
it("renders the empty state when there are no orders", async () => {
mockedGetOrderList.mockResolvedValue(createOrderListResponse([]));
renderOrderPage();
expect(await screen.findByText("No orders")).not.toBeNull();
});
it("shows an error toast when refund fails", async () => {
mockedGetOrderList.mockResolvedValue(
createOrderListResponse([createOrder(5)])
);
mockedRefundOrder.mockRejectedValue(new Error("refund failed"));
renderOrderPage();
expect(await screen.findByText("ORDER-5")).not.toBeNull();
fireEvent.click(screen.getByRole("button", { name: "Confirm refund" }));
await waitFor(() =>
expect(toastError).toHaveBeenCalledWith(
"Refund failed. Please try again."
)
);
});
it("renders the error state when the order list request fails", async () => {
mockedGetOrderList.mockRejectedValue(new Error("network failed"));
renderOrderPage();
expect(await screen.findByText("Failed to load orders")).not.toBeNull();
});
it("keeps the order actions visible on a narrow viewport", async () => {
window.innerWidth = 375;
window.dispatchEvent(new Event("resize"));
mockedGetOrderList.mockResolvedValue(
createOrderListResponse([createOrder(2), createOrder(6), createOrder(7)])
);
renderOrderPage();
expect(await screen.findByText("ORDER-2")).not.toBeNull();
expect(screen.getByText("Claimed")).not.toBeNull();
expect(screen.getAllByText("Refund").length).toBe(1);
expect(canRefundOrderStatus(2)).toBe(true);
expect(canRefundOrderStatus(6)).toBe(false);
expect(canRefundOrderStatus(7)).toBe(false);
expect(mockedActivateOrder).not.toHaveBeenCalled();
});
});
+112 -32
View File
@@ -40,7 +40,31 @@ import { useSubscribe } from "@/stores/subscribe";
import { formatDate } from "@/utils/common";
import { UserDetail } from "../user/user-detail";
const REFUNDED_ORDER_STATUS = 6;
const ORDER_STATUS_PENDING = 1;
const ORDER_STATUS_PAID = 2;
const ORDER_STATUS_CLOSED = 3;
const ORDER_STATUS_FAILED = 4;
const ORDER_STATUS_FINISHED = 5;
const ORDER_STATUS_CLAIMED = 6;
const ORDER_STATUS_REFUNDED = 7;
const MANUALLY_EDITABLE_ORDER_STATUSES = [
ORDER_STATUS_PENDING,
ORDER_STATUS_PAID,
ORDER_STATUS_CLOSED,
ORDER_STATUS_FAILED,
ORDER_STATUS_FINISHED,
] as const;
export function canManuallyUpdateOrderStatus(status: number) {
return MANUALLY_EDITABLE_ORDER_STATUSES.includes(
status as (typeof MANUALLY_EDITABLE_ORDER_STATUSES)[number]
);
}
export function canRefundOrderStatus(status: number) {
return [ORDER_STATUS_PAID, ORDER_STATUS_FINISHED].includes(status);
}
export default function Order() {
const { t } = useTranslation("order");
@@ -56,30 +80,46 @@ export default function Order() {
subscribe_id: sp.subscribe_id || undefined,
};
const statusOptions = [
const displayStatusOptions = [
{
value: 1,
value: ORDER_STATUS_PENDING,
label: t("status.1", "Pending"),
className: "bg-orange-500",
},
{ value: 2, label: t("status.2", "Paid"), className: "bg-green-500" },
{
value: 3,
label: t("status.3", "Cancelled"),
className: "bg-gray-500",
},
{ value: 4, label: t("status.4", "Closed"), className: "bg-red-500" },
{
value: 5,
label: t("status.5", "Completed"),
value: ORDER_STATUS_PAID,
label: t("status.2", "Paid"),
className: "bg-green-500",
},
{
value: REFUNDED_ORDER_STATUS,
label: t("status.6", "Refunded"),
value: ORDER_STATUS_CLOSED,
label: t("status.3", "Closed"),
className: "bg-gray-500",
},
{
value: ORDER_STATUS_FAILED,
label: t("status.4", "Failed"),
className: "bg-red-500",
},
{
value: ORDER_STATUS_FINISHED,
label: t("status.5", "Finished"),
className: "bg-green-500",
},
{
value: ORDER_STATUS_CLAIMED,
label: t("status.6", "Claimed"),
className: "bg-amber-500",
},
{
value: ORDER_STATUS_REFUNDED,
label: t("status.7", "Refunded"),
className: "bg-red-500",
},
];
const editableStatusOptions = displayStatusOptions.filter((option) =>
canManuallyUpdateOrderStatus(option.value)
);
const typeOptions = [
{ value: 1, label: t("type.1", "New Purchase") },
@@ -95,29 +135,36 @@ export default function Order() {
const refundMutation = useMutation({
mutationFn: async (order: API.Order) => {
await refundOrder({ id: order.id });
await refundOrder(
{ id: order.id },
{
skipErrorHandler: true,
}
);
},
onSuccess: () => {
toast.success(t("refundSuccess", "Refund completed."));
setConfirmingOrderId(null);
ref.current?.refresh();
},
onError: (error) => {
console.error("Refund order failed", error);
onError: () => {
toast.error(t("refundFailed", "Refund failed. Please try again."));
setConfirmingOrderId(null);
},
});
const isRefundedOrder = (order: API.Order) =>
order.status === REFUNDED_ORDER_STATUS ||
order.status_name === t("status.6", "Refunded") ||
order.status === ORDER_STATUS_REFUNDED ||
order.status_name === t("status.7", "Refunded") ||
order.status_name?.toLowerCase() === "refunded";
const canRefundOrder = (order: API.Order) =>
canRefundOrders && !isRefundedOrder(order);
canRefundOrders &&
canRefundOrderStatus(order.status) &&
!isRefundedOrder(order);
return (
<ProTable<API.Order, any>
<ProTable<API.Order, Record<string, unknown>>
action={ref}
actions={{
render: (order) => {
@@ -173,7 +220,11 @@ export default function Order() {
onClick={async (event) => {
event.preventDefault();
if (isPending) return;
await refundMutation.mutateAsync(order);
try {
await refundMutation.mutateAsync(order);
} catch {
// Errors are surfaced through the mutation onError handler.
}
}}
>
{isPending
@@ -335,26 +386,55 @@ export default function Order() {
header: t("status.0", "Status"),
cell: ({ row }) => {
const order = row.original as API.Order;
const option = statusOptions.find(
const option = displayStatusOptions.find(
(opt) => opt.value === order.status
);
if ([1, 3, 4].includes(row.getValue("status"))) {
if (
[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED, ORDER_STATUS_FAILED]
.map(String)
.includes(String(row.getValue("status")))
) {
return (
<div className="flex items-center gap-1">
<Combobox<number, false>
className={cn(option?.className)}
onChange={async (value) => {
await updateOrderStatus({
id: order.id,
status: value,
});
ref.current?.refresh();
if (!canManuallyUpdateOrderStatus(value)) {
toast.error(
t(
"statusClaimedBlocked",
"Claimed and refunded states must use the dedicated processing flow."
)
);
return;
}
try {
await updateOrderStatus(
{
id: order.id,
status: value,
},
{
skipErrorHandler: true,
}
);
ref.current?.refresh();
} catch {
toast.error(
t(
"statusUpdateFailed",
"Status update failed. Please try again."
)
);
}
}}
options={statusOptions}
options={editableStatusOptions}
placeholder={t("status.0", "Status")}
value={order.status}
/>
{[1, 3].includes(order.status) && (
{[ORDER_STATUS_PENDING, ORDER_STATUS_CLOSED].includes(
order.status
) && (
<Button
onClick={async () => {
await activateOrder({ order_no: order.order_no });
@@ -387,7 +467,7 @@ export default function Order() {
{
key: "status",
placeholder: t("status.0", "Status"),
options: statusOptions.map((item) => ({
options: displayStatusOptions.map((item) => ({
label: item.label,
value: String(item.value),
})),
@@ -16,10 +16,6 @@
"inviteCode": "Invite Code",
"inviteRecords": "Invite Records",
"noReason": "None",
"recordsTabs": {
"withdrawal": "Withdrawal Records",
"refund": "Refund Records"
},
"rejectReason": "Reject Reason",
"registrationTime": "Registration Time",
"submitWithdraw": "Submit Request",
@@ -32,27 +28,10 @@
"withdrawDescription": "Submit the withdrawal amount and payout details, then wait for review.",
"withdrawError": "Failed to submit withdrawal request",
"withdrawRecords": "Withdrawal Records",
"withdrawalRecordsDescription": "Review your withdrawal requests, statuses, and payout details.",
"withdrawalEmpty": "No withdrawal records yet",
"withdrawStatus": {
"approved": "Approved",
"pending": "Pending Review",
"rejected": "Rejected"
},
"withdrawSuccess": "Withdrawal request submitted",
"commissionReturn": {
"description": "Review order refunds and returned withdrawal commissions.",
"empty": "No refund records yet",
"eventType": {
"orderRefund": "Order Refund",
"withdrawRejectReturn": "Withdrawal Rejected Return",
"withdrawCancelReturn": "Withdrawal Cancel Return",
"unknown": "Commission Return"
},
"fields": {
"eventType": "Type",
"orderNo": "Order No.",
"createdAt": "Created At"
}
}
"withdrawSuccess": "Withdrawal request submitted"
}
@@ -16,10 +16,6 @@
"inviteCode": "邀请码",
"inviteRecords": "邀请记录",
"noReason": "无",
"recordsTabs": {
"withdrawal": "提现记录",
"refund": "退款记录"
},
"rejectReason": "拒绝原因",
"registrationTime": "注册时间",
"submitWithdraw": "提交申请",
@@ -32,27 +28,10 @@
"withdrawDescription": "填写提现金额和收款信息后提交申请,等待后台审核。",
"withdrawError": "提现申请提交失败",
"withdrawRecords": "提现记录",
"withdrawalRecordsDescription": "查看你的提现申请、审核状态和收款信息。",
"withdrawalEmpty": "暂无提现记录",
"withdrawStatus": {
"approved": "已通过",
"pending": "审核中",
"rejected": "已拒绝"
},
"withdrawSuccess": "提现申请已提交",
"commissionReturn": {
"description": "查看订单退款和提现退回记录。",
"empty": "暂无退款记录",
"eventType": {
"orderRefund": "订单退款",
"withdrawRejectReturn": "提现拒绝退回",
"withdrawCancelReturn": "用户取消提现退回",
"unknown": "佣金返回"
},
"fields": {
"eventType": "类型",
"orderNo": "订单号",
"createdAt": "创建时间"
}
}
"withdrawSuccess": "提现申请已提交"
}
@@ -1,37 +0,0 @@
import { describe, expect, it, vi } from "vitest";
import { getCommissionReturnEventLabel } from "./commission-return";
const translations = {
"commissionReturn.eventType.orderRefund": "订单退款",
"commissionReturn.eventType.withdrawRejectReturn": "提现拒绝退回",
"commissionReturn.eventType.withdrawCancelReturn": "用户取消提现退回",
"commissionReturn.eventType.unknown": "佣金返回",
} as const;
describe("getCommissionReturnEventLabel", () => {
const t = (key: string, defaultValue: string) =>
translations[key as keyof typeof translations] ?? defaultValue ?? key;
it("maps 333 to order refund", () => {
expect(getCommissionReturnEventLabel(333, t)).toBe("订单退款");
});
it("maps 337 to withdraw reject return", () => {
expect(getCommissionReturnEventLabel(337, t)).toBe("提现拒绝退回");
});
it("maps 338 to withdraw cancel return", () => {
expect(getCommissionReturnEventLabel(338, t)).toBe("用户取消提现退回");
});
it("falls back for unknown event types and warns", () => {
const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {
/* intentional noop */
});
expect(getCommissionReturnEventLabel(999, t)).toBe("佣金返回");
expect(warnSpy).toHaveBeenCalledWith(999);
warnSpy.mockRestore();
});
});
@@ -1,27 +0,0 @@
export type AffiliateTranslation = (
key: string,
defaultValue: string
) => string;
export function getCommissionReturnEventLabel(
eventType: number,
t: AffiliateTranslation
) {
switch (eventType) {
case 333:
return t("commissionReturn.eventType.orderRefund", "Order Refund");
case 337:
return t(
"commissionReturn.eventType.withdrawRejectReturn",
"Withdrawal Rejected Return"
);
case 338:
return t(
"commissionReturn.eventType.withdrawCancelReturn",
"Withdrawal Cancel Return"
);
default:
console.warn(eventType);
return t("commissionReturn.eventType.unknown", "Commission Return");
}
}
+116 -241
View File
@@ -35,21 +35,13 @@ import {
SelectTrigger,
SelectValue,
} from "@workspace/ui/components/select";
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@workspace/ui/components/tabs";
import { Textarea } from "@workspace/ui/components/textarea";
import { ConfirmButton } from "@workspace/ui/composed/confirm-button";
import Empty from "@workspace/ui/composed/empty";
import type { ProListActions } from "@workspace/ui/composed/pro-list/pro-list";
import { ProList } from "@workspace/ui/composed/pro-list/pro-list";
import { UploadImage } from "@workspace/ui/composed/upload-image";
import {
commissionWithdraw,
queryCommissionReturnLog,
queryUserAffiliate,
queryUserAffiliateList,
queryWithdrawalLog,
@@ -67,7 +59,6 @@ import { toast } from "sonner";
import { z } from "zod";
import { Display } from "@/components/display";
import { useGlobalStore } from "@/stores/global";
import { getCommissionReturnEventLabel } from "./commission-return";
const WITHDRAWAL_METHODS = [
{ value: 1, label: "支付宝" },
@@ -120,21 +111,13 @@ function QrCodeView({ url }: { url: string }) {
<img
alt="收款码"
className="h-16 w-16 cursor-zoom-in object-cover"
height={64}
src={url}
width={64}
/>
</button>
{zoomOpen && (
<Dialog onOpenChange={setZoomOpen} open={zoomOpen}>
<DialogContent className="max-w-sm">
<img
alt="收款码"
className="w-full"
height={512}
src={url}
width={512}
/>
<img alt="收款码" className="w-full" src={url} />
</DialogContent>
</Dialog>
)}
@@ -174,12 +157,14 @@ const withdrawalFormSchema = z
path: ["account"],
});
}
} else if (data.method === 0 && !(data.account || data.content)) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "收款账号和备注至少填一项",
path: ["account"],
});
} else if (data.method === 0) {
if (!data.account && !data.content) {
ctx.addIssue({
code: z.ZodIssueCode.custom,
message: "收款账号和备注至少填一项",
path: ["account"],
});
}
}
});
@@ -188,7 +173,6 @@ type WithdrawalFormValues = z.infer<typeof withdrawalFormSchema>;
export default function Affiliate() {
const { t } = useTranslation("affiliate");
const { user, common, getUserInfo } = useGlobalStore();
const [activeRecordTab, setActiveRecordTab] = useState("withdrawal");
const [withdrawalOpen, setWithdrawalOpen] = useState(false);
const [submitting, startTransition] = useTransition();
const [qrUploading, setQrUploading] = useState(false);
@@ -437,7 +421,9 @@ export default function Affiliate() {
<FormItem>
<FormLabel>
<span className="ml-1 text-destructive">*</span>
<span className="ml-1 text-destructive">
*
</span>
</FormLabel>
{watchedQrCodeUrl ? (
<div className="relative inline-block">
@@ -460,9 +446,7 @@ export default function Affiliate() {
returnType="file"
>
<div className="flex h-24 w-24 flex-col items-center justify-center rounded border-2 border-dashed text-muted-foreground text-xs">
{qrUploading
? "上传中..."
: "点击上传\n收款码"}
{qrUploading ? "上传中..." : "点击上传\n收款码"}
</div>
</UploadImage>
)}
@@ -535,7 +519,9 @@ export default function Affiliate() {
</Button>
<Button
disabled={
submitting || qrUploading || availableCommission <= 0
submitting ||
qrUploading ||
availableCommission <= 0
}
form="withdrawal-form"
type="submit"
@@ -578,218 +564,107 @@ export default function Affiliate() {
</div>
</CardContent>
</Card>
<Card>
<CardHeader className="gap-3">
<CardTitle>{t("withdrawRecords", "Withdrawal Records")}</CardTitle>
<CardDescription>
{activeRecordTab === "withdrawal"
? t(
"withdrawalRecordsDescription",
"Review your withdrawal requests, statuses, and payout details."
)
: t(
"commissionReturn.description",
"Review order refunds and returned withdrawal commissions."
)}
</CardDescription>
<Tabs
defaultValue="withdrawal"
onValueChange={setActiveRecordTab}
value={activeRecordTab}
>
<TabsList className="grid w-full grid-cols-2 md:w-fit">
<TabsTrigger value="withdrawal">
{t("recordsTabs.withdrawal", "Withdrawal Records")}
</TabsTrigger>
<TabsTrigger value="refund">
{t("recordsTabs.refund", "Refund Records")}
</TabsTrigger>
</TabsList>
<TabsContent className="mt-4" value="withdrawal">
<ProList<API.WithdrawalLog, Record<string, unknown>>
action={withdrawalListActionRef}
empty={
<Empty
description={t(
"withdrawalEmpty",
"No withdrawal records yet"
<ProList<API.WithdrawalLog, Record<string, unknown>>
action={withdrawalListActionRef}
header={{
title: t("withdrawal.records", "Withdrawal Records"),
}}
renderItem={(item) => {
const statusMeta = getWithdrawalStatusMeta(item.status, t);
return (
<Card className="overflow-hidden">
<CardContent className="space-y-3 p-4 text-sm">
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="font-semibold text-lg">
<Display type="currency" value={item.amount} />
</div>
<div className="flex items-center gap-2">
<span
className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
>
{statusMeta.label}
</span>
{item.status === 0 && (
<ConfirmButton
cancelText="取消"
confirmText="确认取消"
description="取消后该提现申请将关闭,佣金不会退还。确定取消吗?"
onConfirm={async () => {
await cancelMutation.mutateAsync(item.id);
}}
title="取消提现申请"
trigger={
<Button
disabled={cancelMutation.isPending}
size="sm"
variant="outline"
>
</Button>
}
/>
)}
/>
}
renderItem={(item) => {
const statusMeta = getWithdrawalStatusMeta(item.status, t);
return (
<Card className="overflow-hidden">
<CardContent className="space-y-3 p-4 text-sm">
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="font-semibold text-lg">
<Display type="currency" value={item.amount} />
</div>
<div className="flex items-center gap-2">
<span
className={`inline-flex rounded-full px-3 py-1 font-medium text-xs ${statusMeta.className}`}
>
{statusMeta.label}
</span>
{item.status === 0 && (
<ConfirmButton
cancelText="取消"
confirmText="确认取消"
description="取消后该提现申请将关闭,佣金不会退还。确定取消吗?"
onConfirm={async () => {
await cancelMutation.mutateAsync(item.id);
}}
title="取消提现申请"
trigger={
<Button
disabled={cancelMutation.isPending}
size="sm"
variant="outline"
>
</Button>
}
/>
)}
</div>
</div>
<ul className="grid gap-3 md:grid-cols-2">
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
</span>
<span>{getWithdrawalMethodLabel(item.method)}</span>
</li>
{item.account && (
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
</span>
<span className="break-all">{item.account}</span>
</li>
)}
{item.qr_code_url && (
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
</span>
<QrCodeView url={item.qr_code_url} />
</li>
)}
{item.content && (
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t(
"withdrawal.record.content",
"Payout Information"
)}
</span>
<span className="whitespace-pre-wrap break-words">
{item.content}
</span>
</li>
)}
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t("withdrawal.record.createdAt", "Created At")}
</span>
<time>{formatDate(item.created_at)}</time>
</li>
{item.reason && (
<li className="flex flex-col gap-1 md:col-span-2">
<span className="text-muted-foreground">
{t("withdrawal.record.reason", "Reject Reason")}
</span>
<span className="whitespace-pre-wrap break-words text-destructive">
{item.reason}
</span>
</li>
)}
</ul>
</CardContent>
</Card>
);
}}
request={async (pagination) => {
const response = await queryWithdrawalLog({
page: pagination.page,
size: pagination.size,
});
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
/>
</TabsContent>
<TabsContent className="mt-4" value="refund">
<ProList<API.CommissionReturnLog, Record<string, unknown>>
empty={
<Empty
description={t(
"commissionReturn.empty",
"No refund records yet"
)}
/>
}
renderItem={(item) => (
<Card className="overflow-hidden">
<CardContent className="space-y-3 p-4 text-sm">
<div className="flex flex-wrap items-center justify-between gap-2">
<div className="font-semibold text-lg">
<Display type="currency" value={item.amount} />
</div>
<span className="inline-flex rounded-full bg-primary/10 px-3 py-1 font-medium text-primary text-xs">
{getCommissionReturnEventLabel(item.event_type, t)}
</span>
</div>
<ul className="grid gap-3 md:grid-cols-2">
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t("commissionReturn.fields.eventType", "Type")}
</span>
<span>
{getCommissionReturnEventLabel(item.event_type, t)}
</span>
</li>
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t("commissionReturn.fields.orderNo", "Order No.")}
</span>
<span className="break-all">
{item.order_no || "-"}
</span>
</li>
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t(
"commissionReturn.fields.createdAt",
"Created At"
)}
</span>
<time>{formatDate(item.created_at)}</time>
</li>
</ul>
</CardContent>
</Card>
)}
request={async (pagination) => {
const response = await queryCommissionReturnLog({
page: pagination.page,
size: pagination.size,
});
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
/>
</TabsContent>
</Tabs>
</CardHeader>
</Card>
</div>
</div>
<ul className="grid gap-3 md:grid-cols-2">
<li className="flex flex-col gap-1">
<span className="text-muted-foreground"></span>
<span>{getWithdrawalMethodLabel(item.method)}</span>
</li>
{item.account && (
<li className="flex flex-col gap-1">
<span className="text-muted-foreground"></span>
<span className="break-all">{item.account}</span>
</li>
)}
{item.qr_code_url && (
<li className="flex flex-col gap-1">
<span className="text-muted-foreground"></span>
<QrCodeView url={item.qr_code_url} />
</li>
)}
{item.content && (
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t("withdrawal.record.content", "Payout Information")}
</span>
<span className="whitespace-pre-wrap break-words">
{item.content}
</span>
</li>
)}
<li className="flex flex-col gap-1">
<span className="text-muted-foreground">
{t("withdrawal.record.createdAt", "Created At")}
</span>
<time>{formatDate(item.created_at)}</time>
</li>
{item.reason && (
<li className="flex flex-col gap-1 md:col-span-2">
<span className="text-muted-foreground">
{t("withdrawal.record.reason", "Reject Reason")}
</span>
<span className="whitespace-pre-wrap break-words text-destructive">
{item.reason}
</span>
</li>
)}
</ul>
</CardContent>
</Card>
);
}}
request={async (pagination) => {
const response = await queryWithdrawalLog({
page: pagination.page,
size: pagination.size,
});
return {
list: response.data.data?.list || [],
total: response.data.data?.total || 0,
};
}}
/>
<ProList<API.UserAffiliate, Record<string, unknown>>
header={{
title: t("inviteRecords", "Invite Records"),
-26
View File
@@ -170,17 +170,6 @@ declare namespace API {
timestamp: number;
};
type CommissionReturnLog = {
id: number;
user_id: number;
amount: number;
event_type: number;
order_no?: string;
content?: string;
created_at: number;
updated_at: number;
};
type CommissionWithdrawRequest = {
amount: number;
method: number;
@@ -832,21 +821,6 @@ declare namespace API {
size: number;
};
type QueryCommissionReturnLogListRequest = {
page: number;
size: number;
};
type QueryCommissionReturnLogListResponse = {
list: CommissionReturnLog[];
total: number;
};
type QueryCommissionReturnLogParams = {
page: number;
size: number;
};
type QueryUserSubscribeListResponse = {
list: UserSubscribe[];
total: number;
+1 -19
View File
@@ -1,3 +1,4 @@
// @ts-expect-error
/* eslint-disable */
import request from "@workspace/ui/lib/request";
@@ -470,25 +471,6 @@ export async function queryWithdrawalLog(
);
}
/** Query Commission Return Log GET /v1/public/user/commission_return_log */
export async function queryCommissionReturnLog(
params: API.QueryCommissionReturnLogParams,
options?: { [key: string]: any }
) {
return request<
API.Response & { data?: API.QueryCommissionReturnLogListResponse }
>(
`${import.meta.env.VITE_API_PREFIX || ""}/v1/public/user/commission_return_log`,
{
method: "GET",
params: {
...params,
},
...(options || {}),
}
);
}
/** Cancel Withdrawal POST /v1/public/user/withdrawal_cancel */
export async function withdrawalCancel(
body: API.WithdrawalCancelRequest,