Blame view

src/pages/Order/OrderList/ImagesViewerModal.tsx 1.78 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
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>
    </>
  );
};