23680 求职创业补贴---，详情页资预览料图片可以自由缩放大小

one_stop_public/libs/UploadComDiyForQnZy.js

@@ -4,6 +4,7 @@ import { queryApiActionPath } from "../utils/queryConfig";
 import config from "@/webPublic/one_stop_public/config";
 import styles from "./style.less";
 import { checkIsImage } from "./UploadCom";
+import Viewer from "react-viewer";
 
 
 // 为黔南职院单独写的 上传组件 用于 bug 20576 个人就业信息/求职创业补贴申报，201801010006 119242 上传图片加限制，跟签约派遣上传图片加限制一样
@@ -93,7 +94,7 @@ export default class UploadComDiyForQnZy extends React.Component {
   };
 
   render() {
-    const { files, previewVisible, previewImage } = this.state;
+    const { files, previewVisible, previewImage,previewImageName } = this.state;
     const { isMultiple, accept, btnName, disabled } = this.props;
     const props = {
       name: "file",
@@ -138,7 +139,8 @@ export default class UploadComDiyForQnZy extends React.Component {
                         // window.open(queryApiActionPath() + f.path);
                         this.setState({
                           previewVisible: true,
-                          previewImage: queryApiActionPath() + f.path
+                          previewImage: queryApiActionPath() + f.path,
+                          previewImageName: f.name,
                         });
                       }}>
                       <Icon type="eye" className={styles.icon_eye} />
@@ -170,13 +172,18 @@ export default class UploadComDiyForQnZy extends React.Component {
             );
           })}
         </ul>
-        <Modal
+        <Viewer
           visible={previewVisible}
-          footer={null}
-          width={'90vw'}
-          onCancel={() => this.setState({ previewVisible: false })}>
-          <img alt="example" style={{ width: "100%" }} src={previewImage} />
-        </Modal>
+          onClose={() => {
+            this.setState({ previewVisible: false });
+          }}
+          images={[
+            {
+              src: previewImage,
+              alt: previewImageName,
+            },
+          ]}
+        />
       </div>
     );
   }