ImagesViewerModal.tsx
1.79 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
import { postServiceOrderViewImages } from '@/services';
import { Button, Divider, Image, Modal } from 'antd';
import { useEffect, useState } from 'react';
export default ({ setVisible, optType, onClose, orderRow }) => {
const [images, setImages] = useState<any[]>([]);
const [title, setTitle] = useState("收货凭证");
const handleOk = () => {
onClose();
setVisible(false);
};
const handleCancel = () => {
onClose();
setVisible(false);
};
async function getImages() {
const res = await postServiceOrderViewImages({
data: { subId: orderRow.id },
});
const images = res.data;
setImages(images);
}
useEffect(() => {
if (optType === 'shippingReceipt') {
setTitle("收货凭证");
getImages();
} else if (optType === 'paymentReceipt') {
let paymentReceiptsImagesList: any[] = [];
if (orderRow.paymentReceiptAnnexList) {
paymentReceiptsImagesList.push(...orderRow.paymentReceiptAnnexList);
}
//去重
paymentReceiptsImagesList = [...new Set(paymentReceiptsImagesList)];
setImages(paymentReceiptsImagesList);
}
}, []);
return (
<>
<Modal
title={title}
open
onOk={handleOk}
onCancel={handleCancel}
footer={[
<Button key="back" onClick={handleCancel}>
返回
</Button>,
]}
>
<Image.PreviewGroup
className="mr-10"
preview={{
onChange: (current, prev) =>
console.log(`current index: ${current}, prev index: ${prev}`),
}}
>
{images.map((url) => (
<>
<Image width={120} src={url} /> <Divider type="vertical" />
</>
))}
</Image.PreviewGroup>
</Modal>
</>
);
};