test: swiper

package.json

@@ -19,7 +19,8 @@
     "md5": "^2.3.0",
     "qs": "^6.11.2",
     "react-photo-view": "^1.2.3",
-    "react-zmage": "^0.8.5"
+    "react-zmage": "^0.8.5",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
     "@types/react": "^18.0.33",

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

@@ -17,10 +17,12 @@ import { Col, Row, Steps } from 'antd';
 import dayjs from 'dayjs';
 import { DefaultOptionType } from 'rc-select/es/Select';
 import React, { useEffect, useState } from 'react';
+
 import 'react-photo-view/dist/react-photo-view.css';
 import styles from './taskOrder.less';
 
-import { PhotoProvider, PhotoView } from 'react-photo-view';
+import 'swiper/css';
+import { Swiper, SwiperSlide } from 'swiper/react';
 
 interface IPropsType {
   userList: IUserType[];
@@ -292,10 +294,10 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
 
   const renderImg = () => {
     return (
-      <PhotoProvider maskOpacity={0.5} maskClosable pullClosable>
-        <Col className={styles.fontS28} span={18}>
+      <div style={{ width: '100%' }}>
+        <Swiper spaceBetween={50}>
           {orderInfo?.MandateImages?.map((photo, index) => (
-            <PhotoView key={index} src={photo.src}>
+            <SwiperSlide key={index}>
               <img
                 style={{
                   maxWidth: `${Math.floor(
@@ -305,10 +307,10 @@ const TaskOrder: React.FC<IPropsType> = (props) => {
                 src={photo.src}
                 alt=""
               />
-            </PhotoView>
+            </SwiperSlide>
           ))}
-        </Col>
-      </PhotoProvider>
+        </Swiper>
+      </div>
     );
   };
 

yarn.lock

@@ -9103,6 +9103,11 @@ svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+swiper@^11.0.5:
+  version "11.0.5"
+  resolved "https://registry.npmmirror.com/swiper/-/swiper-11.0.5.tgz#6ed1ad06e6906ba42fd4b93d4988f0626a49046e"
+  integrity sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==
+
 swr@^2.0.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/swr/-/swr-2.2.1.tgz#19b89a9034a62a73c30dbf06857a0a31981cd60a"