fix: 多张图片显示

src/pages/TaskManage/Detail/TaskOrder/TaskOrder.tsx

@@ -14,9 +14,10 @@ import { Col, Row } from 'antd';
 import dayjs from 'dayjs';
 import { DefaultOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
-import ReactZmage from 'react-zmage';
 import styles from './taskOrder.less';
 
+import ReactZmage from 'react-zmage';
+
 interface IPropsType {
   userList: IUserType[];
   dispatch: (args: { type: string; payload: object }) => {};
@@ -287,24 +288,32 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
               <Row className={styles.rowMarginTop}>
                 <Col className={styles.fontS28}>任务图片：</Col>
                 <Col className={styles.fontS28} span={18}>
-                  <ReactZmage
-                    controller={{
-                      // 关闭按钮
-                      close: true,
-                      // 缩放按钮
-                      zoom: false,
-                      // 下载按钮
-                      download: false,
-                      // 翻页按钮
-                      flip: true,
-                      // 多页指示
-                      pagination: true,
-                    }}
-                    backdrop="rgba(255,255,255,0.5)"
-                    style={{ width: '350px', height: '350px' }}
-                    src={orderInfo?.MandateImages[0].src}
-                    set={orderInfo?.MandateImages}
-                  />
+                  {orderInfo?.MandateImages?.length > 0 &&
+                    orderInfo?.MandateImages?.map((item, index) => (
+                      <ReactZmage
+                        controller={{
+                          // 关闭按钮
+                          close: true,
+                          // 缩放按钮
+                          zoom: false,
+                          // 下载按钮
+                          download: false,
+                          // 翻页按钮
+                          flip: true,
+                          // 多页指示
+                          pagination: true,
+                        }}
+                        backdrop="rgba(255,255,255,0.5)"
+                        style={{
+                          maxWidth: `${Math.floor(
+                            100 / orderInfo?.MandateImages?.length,
+                          )}%`,
+                        }}
+                        src={item.src}
+                        set={orderInfo?.MandateImages}
+                        defaultPage={index}
+                      />
+                    ))}
                 </Col>
               </Row>
             )}