feat: 处理裁图高度问题

package-lock.json

@@ -6961,31 +6961,15 @@
       }
     },
     "antd-img-crop": {
-      "version": "4.11.0",
-      "resolved": "http://npmprivate.quantgroups.com/antd-img-crop/-/antd-img-crop-4.11.0.tgz",
-      "integrity": "sha512-DWf72AsFc8r2BKRfNMhUrMDh3xg2PvYB6b0gCYPrBEkVbQE1VP7Qt3HnthdeWDapSGdnmUPKFTcMgzML/FyuTA==",
+      "version": "4.12.2",
+      "resolved": "http://npmprivate.quantgroups.com/antd-img-crop/-/antd-img-crop-4.12.2.tgz",
+      "integrity": "sha512-xgxR3x2sg+tCBHMfx1gejEfhhvnIL2mpZ4OIPfQDJZTTfm9YpMqaqLF9qWbF9Nf83bXCdaQywYihcVGyw3niDg==",
       "requires": {
         "compare-versions": "6.0.0-rc.1",
         "react-easy-crop": "^4.7.4",
         "tslib": "^2.5.0"
       },
       "dependencies": {
-        "react-easy-crop": {
-          "version": "4.7.4",
-          "resolved": "http://npmprivate.quantgroups.com/react-easy-crop/-/react-easy-crop-4.7.4.tgz",
-          "integrity": "sha512-oDi1375Jo/zuPUvo3oauxnNbfy8L4wsbmHD1KB2vT55fdgu+q8/K0w/rDWzy9jz4jfQ94Q9+3Yu366sDDFVmiA==",
-          "requires": {
-            "normalize-wheel": "^1.0.1",
-            "tslib": "2.0.1"
-          },
-          "dependencies": {
-            "tslib": {
-              "version": "2.0.1",
-              "resolved": "http://npmprivate.quantgroups.com/tslib/-/tslib-2.0.1.tgz",
-              "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
-            }
-          }
-        },
         "tslib": {
           "version": "2.5.0",
           "resolved": "http://npmprivate.quantgroups.com/tslib/-/tslib-2.5.0.tgz",
@@ -22371,6 +22355,22 @@
         "scheduler": "^0.19.1"
       }
     },
+    "react-easy-crop": {
+      "version": "4.7.4",
+      "resolved": "http://npmprivate.quantgroups.com/react-easy-crop/-/react-easy-crop-4.7.4.tgz",
+      "integrity": "sha512-oDi1375Jo/zuPUvo3oauxnNbfy8L4wsbmHD1KB2vT55fdgu+q8/K0w/rDWzy9jz4jfQ94Q9+3Yu366sDDFVmiA==",
+      "requires": {
+        "normalize-wheel": "^1.0.1",
+        "tslib": "2.0.1"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.0.1",
+          "resolved": "http://npmprivate.quantgroups.com/tslib/-/tslib-2.0.1.tgz",
+          "integrity": "sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ=="
+        }
+      }
+    },
     "react-error-overlay": {
       "version": "5.1.6",
       "resolved": "http://npmprivate.quantgroups.com/react-error-overlay/-/react-error-overlay-5.1.6.tgz",

package.json

@@ -57,7 +57,7 @@
 		"@antv/data-set": "^0.10.2",
 		"@sentry/react": "^7.41.0",
 		"antd": "^4.19.3",
-		"antd-img-crop": "^4.11.0",
+		"antd-img-crop": "4.12.2",
 		"antd-virtual-select": "^1.1.2",
 		"array-move": "^4.0.0",
 		"babel-eslint": "^10.1.0",

src/pages/ServiceGoods/common.less

@@ -340,11 +340,11 @@
   background: #f8f8f8;
 }
 
-// :global {
-//   .reactEasyCrop_Container {
-//     height: 550px !important;
-//   }
-//   .reactEasyCrop_CropArea {
-//     height: 100% !important;
-//   }
-// }
+:global {
+  // .reactEasyCrop_Container {
+  //   height: 550px !important;
+  // }
+  // .reactEasyCrop_CropArea {
+  //   height: 100% !important;
+  // }
+}

src/pages/ServiceGoods/components/FormTakeaway.jsx

@@ -694,6 +694,7 @@ const TakeawayGoodsInfo = forwardRef((props, ref) => {
             limit={5}
             disabled={customer.isDisabled}
             pictures={detailImageList}
+            limitPicHeight="true"
             setPictureList={list => onCardSuccessImageList(list)}
           />
         </Form.Item>

src/pages/ServiceGoods/components/UploadCropImage.jsx

@@ -24,6 +24,7 @@ const UploadCropImage = forwardRef((props, ref) => {
     disabled,
     uploadParams,
     pictures = [],
+    limitPicHeight = false,
     setPictureList = () => {},
     ...imgOptions
   } = props;
@@ -238,8 +239,16 @@ const UploadCropImage = forwardRef((props, ref) => {
       {limit !== null && fileList.length >= limit ? (
         ''
       ) : (
-        // aspectSlider rotationSlider modalWidth={500} modalHeight={500} quality={0.5}
-        <ImgCrop showGrid rotationSlider showReset>
+        <ImgCrop
+          rotationSlider
+          modalWidth={500}
+          quality={0.5}
+          showReset
+          showGrid
+          aspect={limitPicHeight ? 100 / 1000 : 100 / 100}
+          resetText="重置"
+          aspectSlider={!!limitPicHeight}
+        >
           <Upload
             {...uploadParams}
             disabled={Boolean(disabled)}