PaymentRecordModal.tsx
3.7 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
import { postServiceOrderRefundHistory } from '@/services';
import { Button, Empty, Image, Modal } from 'antd';
import React, { useEffect, useState } from 'react';
interface PaymentRecordModalProps {
visible: boolean;
mainOrderId: number;
onClose: () => void;
}
interface PaymentRecord {
id: number;
mainOrderId: number;
refundMoney: number;
createTime: string;
annex: string;
isAudit: number;
isDel: number;
updateTime: string | null;
paymentReceiptAnnexPartial: string | null;
}
const PaymentRecordModal: React.FC<PaymentRecordModalProps> = ({
visible,
mainOrderId,
onClose,
}) => {
const [paymentRecords, setPaymentRecords] = useState<PaymentRecord[]>([]);
const fetchPaymentRecords = async () => {
if (!mainOrderId) return;
try {
const response = await postServiceOrderRefundHistory({
data: { mainOrderId },
});
if (response.result === 0 && response.data) {
setPaymentRecords(response.data);
} else {
setPaymentRecords([]);
}
} catch (error) {
console.error('Failed to fetch payment records:', error);
setPaymentRecords([]);
}
};
useEffect(() => {
if (visible && mainOrderId) {
fetchPaymentRecords();
}
}, [visible, mainOrderId]);
const parseAnnex = (annexString: string): string[] => {
try {
const parsed = JSON.parse(annexString);
return parsed.map((item: { url: string }) => item.url);
} catch (e) {
console.error('Failed to parse annex:', e);
return [];
}
};
return (
<Modal
title="付款记录"
open={visible}
onCancel={onClose}
footer={[
<Button key="close" onClick={onClose}>
关闭
</Button>,
]}
width={500}
>
<div className="payment-record-container">
{paymentRecords.length > 0 ? (
paymentRecords.map((record, index) => {
const imageUrls = record.annex ? parseAnnex(record.annex) : [];
return (
<div key={record.id} className="payment-record-item">
<div className="payment-record-header">
{index < paymentRecords.length - 1 && (
<div className="payment-record-line" />
)}
<div className="payment-record-circle" />
</div>
<div className="payment-record-content">
<div className="payment-record-info">
<p>
<strong>提交时间：</strong> {record.createTime}
</p>
<p>
<strong>付款金额：</strong>{' '}
{record.refundMoney.toFixed(2)}
</p>
{imageUrls.length > 0 && (
<p>
<strong>付款凭证：</strong>
</p>
)}
</div>
{imageUrls.length > 0 && (
<div className="payment-record-images">
<Image.PreviewGroup>
{imageUrls.map((url, imgIndex) => (
<Image
key={imgIndex}
width={120}
src={url}
className="payment-record-image"
/>
))}
</Image.PreviewGroup>
</div>
)}
</div>
</div>
);
})
) : (
<Empty description="暂无付款记录" className="payment-record-empty" />
)}
</div>
</Modal>
);
};
export default PaymentRecordModal;