feat():learning后台管理前端页面初始化
This commit is contained in:
yuj
165
src/pages/FinancePaymentRecords.tsx
Normal file
165
src/pages/FinancePaymentRecords.tsx
Normal file
@@ -0,0 +1,165 @@
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import { Card, Table, Typography, Form, Input, DatePicker, Button, Space, Select, Popconfirm, message } from 'antd';
|
||||
import type { ColumnsType } from 'antd/es/table';
|
||||
import { FinanceApiService } from '../services/api';
|
||||
|
||||
const FinancePaymentRecords: React.FC = () => {
|
||||
const [data, setData] = useState<any[]>([]);
|
||||
const [total, setTotal] = useState(0);
|
||||
const [page, setPage] = useState(1);
|
||||
const [size, setSize] = useState(20);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [form] = Form.useForm();
|
||||
|
||||
const buildParams = (p = page, s = size) => {
|
||||
const vals = form.getFieldsValue();
|
||||
const range = vals.range as any[] | undefined;
|
||||
const start = range?.[0]?.format?.('YYYY-MM-DD') || undefined;
|
||||
const end = range?.[1]?.format?.('YYYY-MM-DD') || undefined;
|
||||
return {
|
||||
page: p,
|
||||
size: s,
|
||||
user_id: vals.user_id,
|
||||
order_id: vals.order_id,
|
||||
paypal_order_id: vals.paypal_order_id,
|
||||
status: vals.status,
|
||||
refund_status: vals.refund_status,
|
||||
payer_email: vals.payer_email,
|
||||
start,
|
||||
end,
|
||||
} as any;
|
||||
};
|
||||
|
||||
const fetchList = async (p = page, s = size) => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await FinanceApiService.listPaymentRecords(buildParams(p, s));
|
||||
setData(res?.data || res?.list || []);
|
||||
setTotal(res?.total || 0);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => { fetchList(); }, []);
|
||||
|
||||
const columns: ColumnsType<any> = useMemo(() => ([
|
||||
{ title: 'ID', dataIndex: 'id', key: 'id', width: 80 },
|
||||
{ title: '用户ID', dataIndex: 'user_id', key: 'user_id', width: 120 },
|
||||
{ title: '订单ID', dataIndex: 'order_id', key: 'order_id', width: 150 },
|
||||
{ title: 'PayPal订单ID', dataIndex: 'paypal_order_id', key: 'paypal_order_id', width: 180 },
|
||||
{ title: 'PayPal捕获ID', dataIndex: 'paypal_capture_id', key: 'paypal_capture_id', width: 180 },
|
||||
{ title: '状态', dataIndex: 'status', key: 'status', width: 100 },
|
||||
{
|
||||
title: '支付金额',
|
||||
dataIndex: 'amount',
|
||||
key: 'amount',
|
||||
width: 120,
|
||||
render: (amount: number, record: any) => {
|
||||
if (amount === null || amount === undefined) return '-';
|
||||
const currency = record.currency || 'USD';
|
||||
// amount 是最小货币单位，如美分，需要转换为实际金额
|
||||
const actualAmount = amount / 100;
|
||||
return `${actualAmount.toFixed(2)} ${currency}`;
|
||||
}
|
||||
},
|
||||
{ title: '货币', dataIndex: 'currency', key: 'currency', width: 80 },
|
||||
{ title: '付款人邮箱', dataIndex: 'payer_email', key: 'payer_email', width: 200 },
|
||||
{ title: '付款人姓名', dataIndex: 'payer_name', key: 'payer_name', width: 150 },
|
||||
{ title: '付款人ID', dataIndex: 'payer_id', key: 'payer_id', width: 150 },
|
||||
{ title: '退款状态', dataIndex: 'refund_status', key: 'refund_status', width: 100 },
|
||||
{
|
||||
title: '已退款金额',
|
||||
dataIndex: 'refunded_amount',
|
||||
key: 'refunded_amount',
|
||||
width: 120,
|
||||
render: (amount: number, record: any) => {
|
||||
if (amount === null || amount === undefined || amount === 0) return '-';
|
||||
const currency = record.currency || 'USD';
|
||||
const actualAmount = amount / 100;
|
||||
return `${actualAmount.toFixed(2)} ${currency}`;
|
||||
}
|
||||
},
|
||||
{ title: '创建时间', dataIndex: 'created_at', key: 'created_at', width: 180 },
|
||||
{ title: '更新时间', dataIndex: 'updated_at', key: 'updated_at', width: 180 },
|
||||
{
|
||||
title: '操作', key: 'actions', fixed: 'right', width: 140,
|
||||
render: (_: any, record: any) => {
|
||||
const canRefund = record?.status === 'COMPLETED' && record?.refund_status !== 'full';
|
||||
if (!canRefund) return null;
|
||||
const onRefund = async () => {
|
||||
try {
|
||||
message.loading({ content: '正在发起退款...', key: 'refund' });
|
||||
await FinanceApiService.refundPaymentRecord({ order_id: record.order_id, paypal_capture_id: record.paypal_capture_id });
|
||||
message.success({ content: '退款已提交', key: 'refund', duration: 2 });
|
||||
fetchList(page, size);
|
||||
} catch (e: any) {
|
||||
const errorMsg = e?.response?.data?.message || e?.message || '退款失败';
|
||||
message.error({ content: errorMsg, key: 'refund' });
|
||||
}
|
||||
};
|
||||
return (
|
||||
<Popconfirm title="确认对该订单发起退款？" onConfirm={onRefund} okText="确认" cancelText="取消">
|
||||
<Button danger size="small">退款</Button>
|
||||
</Popconfirm>
|
||||
);
|
||||
}
|
||||
}
|
||||
]), []);
|
||||
|
||||
return (
|
||||
<Card bordered={false} title={<Typography.Title level={4} style={{ margin: 0 }}>充值记录</Typography.Title>}>
|
||||
<Form form={form} layout="inline" onFinish={() => fetchList(1, size)} style={{ marginBottom: 12 }}>
|
||||
<Form.Item name="user_id" label="用户ID">
|
||||
<Input allowClear placeholder="用户ID" style={{ width: 180 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="order_id" label="订单ID">
|
||||
<Input allowClear placeholder="订单ID" style={{ width: 180 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="paypal_order_id" label="PayPal订单ID">
|
||||
<Input allowClear placeholder="PayPal订单ID" style={{ width: 200 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="status" label="订单状态">
|
||||
<Select allowClear placeholder="订单状态" style={{ width: 150 }}
|
||||
options={[
|
||||
{ label: 'CREATED', value: 'CREATED' },
|
||||
{ label: 'COMPLETED', value: 'COMPLETED' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="refund_status" label="退款状态">
|
||||
<Select allowClear placeholder="退款状态" style={{ width: 150 }}
|
||||
options={[
|
||||
{ label: 'none', value: 'none' },
|
||||
{ label: 'partial', value: 'partial' },
|
||||
{ label: 'full', value: 'full' },
|
||||
]}
|
||||
/>
|
||||
</Form.Item>
|
||||
<Form.Item name="payer_email" label="付款人邮箱">
|
||||
<Input allowClear placeholder="付款人邮箱" style={{ width: 200 }} />
|
||||
</Form.Item>
|
||||
<Form.Item name="range" label="时间范围">
|
||||
<DatePicker.RangePicker />
|
||||
</Form.Item>
|
||||
<Form.Item>
|
||||
<Space>
|
||||
<Button type="primary" htmlType="submit" onClick={() => { setPage(1); }}>查询</Button>
|
||||
<Button onClick={() => { form.resetFields(); fetchList(1, size); setPage(1); }}>重置</Button>
|
||||
</Space>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
<Table
|
||||
rowKey={(r) => r.id}
|
||||
columns={columns}
|
||||
dataSource={data}
|
||||
loading={loading}
|
||||
pagination={{ current: page, pageSize: size, total, onChange: (p, s) => { setPage(p); setSize(s); fetchList(p, s); } }}
|
||||
scroll={{ x: 1800 }}
|
||||
/>
|
||||
</Card>
|
||||
);
|
||||
};
|
||||
|
||||
export default FinancePaymentRecords;
|
||||
|
||||
Reference in New Issue
Block a user