goalfylearning-admin-web/src/pages/FinancePaymentRecords.tsx

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;