瀏覽代碼

商品分类新增类型图片

caojunjie 3 年之前
父節點
當前提交
8555d395ab

+ 15 - 0
src/views/mallManagement/commodity/classification/configuration/mainList.json

@@ -100,6 +100,21 @@
           "trigger": "blur"
         }
       ]
+    },
+    {
+      "label": "分类图片",
+      "prop": "picture",
+      "type": "upload",
+      "listType": "picture-img",
+      "dataType": "string",
+      "tip": "只能上传jpg/png/jpeg文件,且不超过1M,宽高为1比1",
+      "action": "/api/blade-resource/oss/endpoint/put-file",
+      "propsHttp": {
+        "res": "data",
+        "url": "link"
+      },
+      "hide": true,
+      "span": 24
     }
   ]
 }

+ 40 - 0
src/views/mallManagement/commodity/classification/index.vue

@@ -13,6 +13,7 @@
                @row-save="rowSave"
                @search-change="searchChange"
                @search-reset="searchReset"
+               :upload-before="uploadBefore"
                @selection-change="selectionChange"
                @current-change="currentChange"
                @size-change="sizeChange"
@@ -57,6 +58,45 @@ export default {
 
   },
   methods: {
+    // 上传前
+    uploadBefore(file, done, loading, column) {
+      const is2M = file.size / 1024 / 1024 < 2;
+      const isType =
+          file.type === "image/jpeg" ||
+          file.type === "image/png" ||
+          file.type === "image/jpg";
+      if (!isType) {
+        this.$message.error("图片只能是JPG、JPEG、PNG格式");
+        loading();
+      }
+      if (!is2M) {
+        this.$message.error("图片大小不能超过2M");
+        loading();
+      }
+      const img = new Image();
+      const _URL = window.URL || window.webkitURL;
+      let isSize = null;
+      img.onload = () => {
+        if (column.label == "图片") {
+          isSize = img.width === img.height;
+          if (!isSize) {
+            this.$message.error("图片宽高限制比例为1:1");
+          }
+        } else {
+          console.log(img.width,img.height)
+          isSize = img.width === img.height
+          if (!isSize) {
+            this.$message.error("图宽为"+img.width+"高为"+img.height+",高不能超过"+img.width+"或小于"+img.width);
+          }
+        }
+        if (is2M && isType && isSize) {
+          done();
+        } else {
+          loading();
+        }
+      };
+      img.src = _URL.createObjectURL(file);
+    },
     //删除列表后面的删除按钮触发触发(row, index, done)
     rowDel(row, index, done) {
       this.$confirm("确定将选择数据删除?", {

+ 1 - 1
src/views/mallManagement/commodity/productList/configuration/imgUploadList.json

@@ -50,7 +50,7 @@
         "url": "link"
       },
       "span": 24,
-      "listType": "picture-card",
+      "listType": "picture-img",
       "tip": "只能上传jpg/png/jpeg文件,且不超过2M,宽为750,高不大于1000",
       "action": "/api/blade-resource/oss/endpoint/put-file",
       "rules": [