fix

src/pages/Center/MyTask/Detail/WorkOrderDetail.js

@@ -15,10 +15,9 @@ import { connect, useRequest } from '@umijs/max';
 import { Col, Row, Steps } from 'antd';
 import dayjs from 'dayjs';
 import { useEffect, useState } from 'react';
-import 'react-photo-view/dist/react-photo-view.css';
 import styles from './workOrderDetail.less';
-
-import { PhotoProvider, PhotoView } from 'react-photo-view';
+// @ts-ignore
+import ReactZmage from 'react-zmage';
 
 const WorkOrderDetail = (props) => {
   const { userList, dispatch } = props;
@@ -263,23 +262,32 @@ const WorkOrderDetail = (props) => {
 
   const renderImg = () => {
     return (
-      <PhotoProvider>
-        <Col className={styles.fontS28} span={18}>
-          {orderInfo?.MandateImages?.map((photo, index) => (
-            <PhotoView key={index} src={photo.src}>
-              <img
+      <Col span={18}>
+        {orderInfo?.MandateImages?.length > 0 &&
+          orderInfo?.MandateImages?.map((item, index) => {
+            return (
+              <ReactZmage
+                key={index}
+                controller={{
+                  close: true,
+                  flip: true,
+                  zoom: true,
+                  pagination: true,
+                  download: false,
+                }}
+                backdrop="rgba(255,255,255,0.5)"
                 style={{
                   maxWidth: `${Math.floor(
-                    100 / (orderInfo?.MandateImages?.length || 1),
+                    100 / orderInfo?.MandateImages?.length,
                   )}%`,
                 }}
-                src={photo.src}
-                alt=""
+                src={item.src}
+                set={orderInfo?.MandateImages}
+                defaultPage={index}
               />
-            </PhotoView>
-          ))}
-        </Col>
-      </PhotoProvider>
+            );
+          })}
+      </Col>
     );
   };