大于2M的图片进行图片压缩调研

npm-shrinkwrap.json

@@ -7058,6 +7058,11 @@
 			"integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
 			"dev": true
 		},
+		"image-conversion": {
+			"version": "2.1.1",
+			"resolved": "https://registry.npmmirror.com/image-conversion/-/image-conversion-2.1.1.tgz",
+			"integrity": "sha512-hnMOmP7q2jxA+52FZ+wHNhg3fdFRlgfngsQH2JQHEQkafY7tj/8F15e6Rv/RxDegc872jvyaRHwMbkTZK1Cjbg=="
+		},
 		"image-size": {
 			"version": "0.5.5",
 			"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",

package.json

@@ -26,6 +26,7 @@
     "gulp-load-plugins": "1.5.0",
     "gulp-replace": "0.6.1",
     "gulp-shell": "0.6.5",
+    "image-conversion": "^2.1.1",
     "lodash": "4.17.5",
     "npm": "^6.9.0",
     "sass-loader": "6.0.6",

src/main.js

@@ -19,6 +19,7 @@ import {
 } from 'vue-jsonp'
 
 import axios from "axios";
+import { getCompressionQuality, compressImage } from '@/utils/compressionUtils.js';
 
 
 import Viewer from 'v-viewer'
@@ -27,16 +28,53 @@ Vue.use(VueJsonp)
 Vue.use(Viewer)
 Vue.use(Viewer, {
   defaultOptions: {
-      zIndex: 9999, // 设置图片预览组件的层级，确保能在其他组件之上
+      zIndex: 99999, // 设置图片预览组件的层级，确保能在其他组件之上
   },
 })
-Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload'//线上
-// Vue.prototype.Tupiantou ='https://www.daweilinli.com/sqx_fast/alioss/upload'//线下
+// Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload'//线上
+Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/wm-test/wm-api/sqx_fast/alioss/upload'//线下
 Vue.prototype.Tupian =function(img){
     return 'https://mxys.chuanghai-tech.com/wmfile'+img
   }//全局图片请求头
 
-  Vue.prototype.$axios = axios
+Vue.prototype.$axios = axios
+
+ //上传图片前压缩图片
+Vue.prototype.$processImage=function (that, file, isUnload) {
+  const imgType = file.type.toUpperCase();
+  const isLt30M = file.size / 1024 / 1024 < 30;
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  const isLtSize = file.size / 1024 / 1024;
+  console.log('压缩前图片size', file.size / 1024 / 1024);
+  // uploadData.isCompressed = 0
+  if (
+    imgType !== "IMAGE/JPG" &&
+    imgType !== "IMAGE/JPEG" &&
+    imgType !== "IMAGE/PNG"
+  ) {
+    that.$message.error("请上传正确格式的图片");
+    return false;
+  }
+  if (!isLt30M) {
+    that.$message.error("上传的图片不能超过30Mb");
+    return false;
+  }
+  //压缩质量
+  const quality = getCompressionQuality(isLtSize,imgType);
+  //大于2M走压缩逻辑
+  if (!isLt2M) {
+    console.log('quality', quality);
+    return compressImage(file, quality)
+      .then(compressedFile => {
+        return compressedFile;
+      })
+      .catch(err => {
+        console.error('Image compression error:', err);
+        return file;
+      });
+  }
+},
+
 Viewer.setDefaults({
   // 工具栏按钮的控制
     toolbar: {

src/utils/compressImg.js

@@ -1,61 +0,0 @@
-//base64转码（压缩完成后的图片为base64编码，这个方法可以将base64编码转回file文件）
-function dataURLtoFile(dataurl) {
-  var arr = dataurl.split(","),
-    mime = arr[0].match(/:(.*?);/)[1],
-    bstr = atob(arr[1]),
-    n = bstr.length,
-    u8arr = new Uint8Array(n);
-  while (n--) {
-    u8arr[n] = bstr.charCodeAt(n);
-  }
-  return new File([u8arr], { type: mime });
-}
-//压缩图片
-function compressImg(file) {
-  var src;
-  var files;
-  var fileSize = parseFloat(parseInt(file["size"]) / 1024 / 1024).toFixed(2);
-  var read = new FileReader();
-  read.readAsDataURL(file);
-  return new Promise(function (resolve, reject) {
-    read.onload = function (e) {
-      var img = new Image();
-      img.src = e.target.result;
-      img.onload = function () {
-        //默认按比例压缩
-        var w = this.width,
-          h = this.height;
-        //生成canvas
-        var canvas = document.createElement("canvas");
-        var ctx = canvas.getContext("2d");
-        var base64;
-        // 创建属性节点
-        canvas.setAttribute("width", w);
-        canvas.setAttribute("height", h);
-        ctx.drawImage(this, 0, 0, w, h);
-        if (fileSize < 0.2) {
-          //如果图片小于0.2兆 那么不执行压缩操作
-          base64 = canvas.toDataURL(file["type"], 1);
-        } else if (fileSize < 1) {
-          //如果图片大于1M 那么压缩0.5
-          base64 = canvas.toDataURL(file["type"], 0.5);
-        } else if (fileSize > 1 && fileSize < 2) {
-          //如果图片大于1M并且小于2M 那么压缩0.1
-          base64 = canvas.toDataURL(file["type"], 0.1);
-        } else {
-          //如果图片超过2m 那么压缩0.2
-          base64 = canvas.toDataURL(file["type"], 0.1);
-        }
-        // 回调函数返回file的值（将base64编码转成file）
-        files = dataURLtoFile(base64); //如果后台接收类型为base64的话这一步可以省略
-        console.log(files, "压缩的文件");
-
-        resolve(files);
-      };
-    };
-  });
-}
-//结尾处将该方法暴露出来供外部调用
-export default {
-  compressImg,
-};

src/utils/compressionUtils.js

@@ -0,0 +1,30 @@
+import * as imageConversion from 'image-conversion';
+//压缩质量
+export function getCompressionQuality(isLtSize,imgType) {
+  if (isLtSize < 3) {
+      return 0.93;
+    } else if (isLtSize >= 3 && isLtSize < 5) {
+      return 0.90;
+    } else if (isLtSize >= 5 && isLtSize < 10) {
+      return 0.80;
+    } else if (isLtSize >= 10 && isLtSize < 20) {
+      return 0.70;
+    } else if (isLtSize >= 20 && isLtSize < 30) {
+      return 0.60;
+    }
+  return 0.90;
+}
+//压缩逻辑
+export function compressImage(file, quality) {
+  return new Promise((resolve, reject) => {
+    imageConversion.compress(file, quality)
+      .then((res) => {
+        resolve(res);
+        console.log('压缩后体积', res.size / (1024 * 1024));
+      })
+      .catch((error) => {
+        reject(error);
+      });
+  });
+}
+

src/views/autonym/autonym.vue

@@ -368,14 +368,14 @@
               alt=""
             />
             <el-upload
-              action="#"
+              :action="Tupiantou"
               list-type="picture-card"
-              :auto-upload="false"
               :on-success="handleUploadSuccess"
               :on-change="handleChange"
               :on-remove="handleRemove"
               :before-upload="beforeAvatarUpload"
             >
+              <!-- :auto-upload="false" -->
               <i class="el-icon-plus"></i>
             </el-upload>
           </div>
@@ -394,6 +394,7 @@
               :on-success="handleUploadSuccess2"
               :on-change="handleChange2"
               :on-remove="handleRemove2"
+              :before-upload="beforeAvatarUpload"
             >
               <i class="el-icon-plus"></i>
             </el-upload>
@@ -413,6 +414,7 @@
               :on-success="handleUploadSuccess3"
               :on-change="handleChange3"
               :on-remove="handleRemove3"
+              :before-upload="beforeAvatarUpload"
               class="cardphoto"
             >
               <i class="el-icon-plus"></i>
@@ -436,7 +438,7 @@
       :close-on-click-modal="false"
       center
     >
-    <el-form
+      <el-form
         :model="infoRuleForm"
         :rules="infoRules"
         ref="infoRuleForm"
@@ -464,7 +466,6 @@
 </template>
 
 <script>
-import compressImg from "@/utils/compressImg.js";
 export default {
   data() {
     return {
@@ -760,38 +761,18 @@ export default {
     //上传成功  图片上传 start(----------------------------------------------------------)
     handleUploadSuccess(file, fileList) {
       console.log(file, "Success");
-      // this.ruleForm.frontPhoto = file.data;
+      this.ruleForm.frontPhoto = file.data;
     },
-    handleChange(file, fileList) {
-      console.log(file, "change");
-      var formData = new FormData();
-      formData.append('file', file.raw);
-      this.$axios({
-        url: this.Tupiantou,
-        method: "post",
-        data: formData
-      }).then(({data}) => {
-        console.log(data, "上传正面身份证照片");
-        this.ruleForm.frontPhoto = data.data;
-      }).catch(err=>{
-        console.log(err);
-      });
+    async handleChange(file, fileList) {
+      console.log(file, "上传的图片");
     },
+
     handleRemove(file, fileList) {
       console.log(file, "Remove");
     },
     beforeAvatarUpload(file) {
-        // const isJPG = file.type === 'image/jpeg';
-        // const isLt2M = file.size / 1024 / 1024 < 2;
-
-        // if (!isJPG) {
-        //   this.$message.error('上传头像图片只能是 JPG 格式!');
-        // }
-        // if (!isLt2M) {
-        //   this.$message.error('上传头像图片大小不能超过 2MB!');
-        // }
-        return true;
-      },
+      return this.$processImage(this, file, false);
+    },
     // 图片上传 start(----------------------------------------------------------)
 
     //上传成功  图片上传 start(----------------------------------------------------------)

src/views/coupon/coupon.vue

@@ -222,7 +222,12 @@
     </el-tabs>
 
     <!-- 添加优惠券 -->
-    <el-dialog title="查看优惠券日志" custom-class="couponLog" :visible.sync="couponLogVisible" center>
+    <el-dialog
+      title="查看优惠券日志"
+      custom-class="couponLog"
+      :visible.sync="couponLogVisible"
+      center
+    >
       <el-table v-loading="couponLogLoading" :data="couponLogTable">
         <el-table-column prop="couponId" label="编号" width="80">
         </el-table-column>
@@ -245,12 +250,9 @@
             <span v-if="scope.row.state == 2">已撤销</span>
           </template>
         </el-table-column>
-        <el-table-column prop="content" label="操作内容">
-        </el-table-column>
-        <el-table-column prop="username" label="操作人">
-        </el-table-column>
-        <el-table-column prop="createTime" label="操作时间">
-        </el-table-column>
+        <el-table-column prop="content" label="操作内容"> </el-table-column>
+        <el-table-column prop="username" label="操作人"> </el-table-column>
+        <el-table-column prop="createTime" label="操作时间"> </el-table-column>
       </el-table>
       <div style="text-align: center;margin-top: 10px;">
         <el-pagination
@@ -308,6 +310,7 @@
             :action="Tupiantou"
             :show-file-list="false"
             :on-success="handleAvatarSuccess1"
+            :before-upload="beforeAvatarUpload"
           >
             <img
               v-if="couponPicture"
@@ -405,6 +408,7 @@
               :action="Tupiantou"
               :show-file-list="false"
               :on-success="handleAvatarSuccess2"
+              :before-upload="beforeAvatarUpload"
             >
               <img
                 v-if="form.couponPicture"
@@ -714,7 +718,7 @@
 export default {
   data() {
     return {
-      userId:'',
+      userId: "",
       superAdmin: "", // 判断是否为超级管理员 1是超级管理员 0不是超级管理员
       selectState: "",
       limit: 10,
@@ -816,6 +820,9 @@ export default {
       this.page1 = val;
       this.dataSelect11();
     },
+    beforeAvatarUpload(file) {
+      return this.$processImage(this, file, false);
+    },
     handleAvatarSuccess1(file, fileList) {
       this.couponPicture = file.data;
     },
@@ -830,7 +837,7 @@ export default {
     // 查看优惠券日志
     couponLog() {
       this.couponLogVisible = true;
-      this.couponLogList()
+      this.couponLogList();
     },
     couponLogList() {
       this.couponLogLoading = true;
@@ -839,7 +846,7 @@ export default {
         method: "get",
         params: this.$http.adornParams({
           page: this.couponLogPage,
-          limit: this.couponLogLimit,
+          limit: this.couponLogLimit
         })
       }).then(({ data }) => {
         console.log(data, "查看优惠券日志");
@@ -1434,7 +1441,7 @@ export default {
   },
   created() {
     var userId = this.$cookie.get("userId");
-    this.userId=userId
+    this.userId = userId;
     this.$http({
       url: this.$http.adornUrl("sys/user/isSuperAdmin"),
       method: "get",
@@ -1466,8 +1473,8 @@ export default {
 };
 </script>
 
-<style  lang="scss">
-  .couponLog{
-    width: 60%;
-  }
+<style lang="scss">
+.couponLog {
+  width: 60%;
+}
 </style>

src/views/fitment/fitmentList.vue

@@ -531,6 +531,7 @@
 							:action="Tupiantou"
 							:show-file-list="false"
 							:on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
 							>
 							<img v-if="imageUrl" :src="imageUrl" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
 							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -556,6 +557,7 @@
 							:action="Tupiantou"
 							:show-file-list="false"
 							:on-success="handleAvatarSuccess2"
+              :before-upload="beforeAvatarUpload"
 							>
 							<img v-if="form1.imageUrl" :src="form1.imageUrl" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
 							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -587,6 +589,7 @@
 		   		:action="Tupiantou"
 		   		:show-file-list="false"
 		   		:on-success="handleAvatarSuccess3"
+          :before-upload="beforeAvatarUpload"
 		   		>
 		   		<img v-if="formcomp.imageUrl" :src="formcomp.imageUrl" class="avatar" style="border-radius: 6px;width: 86px;height: 86px;"/>
 		   		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -709,6 +712,9 @@
 			changeFun(val) {
 				this.checkBoxData = val;
 			},
+      beforeAvatarUpload(file) {
+        return this.$processImage(this, file, false);
+      },
 			handleAvatarSuccess3(file) {
 			     this.formcomp.imageUrl = file.data;
 			 },

src/views/integral/integral.vue

@@ -215,6 +215,7 @@
             :show-file-list="false"
             :on-success="handleRemove"
             :on-progress="onprogress1"
+            :before-upload="beforeAvatarUpload"
           >
             <el-progress
               v-if="percentage1 > 0 && percentage1 < 100"
@@ -447,6 +448,7 @@
               :show-file-list="false"
               :on-success="handleRemove2"
               :on-progress="onprogress1"
+              :before-upload="beforeAvatarUpload"
             >
               <el-progress
                 v-if="percentage1 > 0 && percentage1 < 100"
@@ -1352,6 +1354,9 @@ export default {
       console.log("详情图上传进度", parseInt(event.percent));
       this.percentage1 = parseInt(event.percent);
     },
+    beforeAvatarUpload(file) {
+      return this.$processImage(this, file, false);
+    },
     // 轮播图片上传
     handleRemove(file) {
       console.log(file, this.img);

src/views/materials/materialsList.vue

@@ -2,8 +2,15 @@
   <el-tabs v-model="activeName" @tab-click="handleClick">
     <el-tab-pane label="分类管理" name="first">
       <div style="float: right;margin-right:2%;">
-        <el-button style='margin: 10px 0;' :disabled="!isAuth('materialsList:add')" size="mini" type="primary"
-          icon="document" @click="addNotice">添加分类</el-button>
+        <el-button
+          style="margin: 10px 0;"
+          :disabled="!isAuth('materialsList:add')"
+          size="mini"
+          type="primary"
+          icon="document"
+          @click="addNotice"
+          >添加分类</el-button
+        >
       </div>
       <el-table v-loading="tableDataLoading" :data="tableData">
         <el-table-column fixed prop="id" label="编号" width="80">
@@ -14,15 +21,22 @@
 			 prop="remark"
 			 label="备注">
 		   </el-table-column> -->
-        <el-table-column prop="createTime" label="创建时间">
-        </el-table-column>
+        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
         <el-table-column label="操作" width="150">
           <template slot-scope="scope">
-            <el-button size="mini" type="primary" :disabled="!isAuth('materialsList:update')"
-              @click="updates(scope.$index, scope.row)">编辑
+            <el-button
+              size="mini"
+              type="primary"
+              :disabled="!isAuth('materialsList:update')"
+              @click="updates(scope.$index, scope.row)"
+              >编辑
             </el-button>
-            <el-button size="mini" type="danger" :disabled="!isAuth('materialsList:delete')"
-              @click="deletes(scope.row)">删除
+            <el-button
+              size="mini"
+              type="danger"
+              :disabled="!isAuth('materialsList:delete')"
+              @click="deletes(scope.row)"
+              >删除
             </el-button>
           </template>
         </el-table-column>
@@ -30,8 +44,14 @@
       <!-- 添加弹框 -->
       <el-dialog title="添加分类" :visible.sync="dialogFormVisible" center>
         <div style="margin-bottom: 10px;">
-          <span style="width: 200px;display: inline-block;text-align: right;">分类名称：</span>
-          <el-input style="width:50%;" v-model="classifyName" placeholder="请输入分类名称"></el-input>
+          <span style="width: 200px;display: inline-block;text-align: right;"
+            >分类名称：</span
+          >
+          <el-input
+            style="width:50%;"
+            v-model="classifyName"
+            placeholder="请输入分类名称"
+          ></el-input>
         </div>
         <!-- <div style="margin-bottom: 10px;">
 				<span style="width: 200px;display: inline-block;text-align: right;">备注：</span>
@@ -57,36 +77,58 @@
     </el-tab-pane>
     <el-tab-pane label="文章管理" name="second">
       <div style="float: right;margin-right:2%;">
-        <el-button style='margin: 10px 0;height:35px;' :disabled="!isAuth('materialsList:add')" size="mini"
-          type="primary" icon="document" @click="addNoticewz">添加文章</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
-        <el-select v-model="classifyId" placeholder="请选择类型" style="width:150px;" @change="articleSelect(classifyId)">
-          <el-option v-for="(item,index) in classifyIds" :key="item.index" :label="item.classifyName" :value="item.id">
+        <el-button
+          style="margin: 10px 0;height:35px;"
+          :disabled="!isAuth('materialsList:add')"
+          size="mini"
+          type="primary"
+          icon="document"
+          @click="addNoticewz"
+          >添加文章</el-button
+        >&nbsp;&nbsp;&nbsp;&nbsp;
+        <el-select
+          v-model="classifyId"
+          placeholder="请选择类型"
+          style="width:150px;"
+          @change="articleSelect(classifyId)"
+        >
+          <el-option
+            v-for="(item, index) in classifyIds"
+            :key="item.index"
+            :label="item.classifyName"
+            :value="item.id"
+          >
           </el-option>
         </el-select>
       </div>
       <el-table v-loading="tableDataLoading" :data="tableData">
-        <el-table-column prop="id" label="编号" width="80">
-        </el-table-column>
+        <el-table-column prop="id" label="编号" width="80"> </el-table-column>
         <el-table-column prop="title" label="标题" width="120">
         </el-table-column>
-        <el-table-column prop="articleUrl" label="链接">
-        </el-table-column>
+        <el-table-column prop="articleUrl" label="链接"> </el-table-column>
         <el-table-column prop="picture" label="图片">
           <template slot-scope="scope">
-            <img :src="scope.row.picture" alt="" width="60" height="60">
+            <img :src="scope.row.picture" alt="" width="60" height="60" />
           </template>
         </el-table-column>
-        <el-table-column prop="content" label="内容">
-        </el-table-column>
+        <el-table-column prop="content" label="内容"> </el-table-column>
         <el-table-column prop="createTime" label="创建时间" width="160">
         </el-table-column>
         <el-table-column label="操作">
           <template slot-scope="scope">
-            <el-button size="mini" type="primary" :disabled="!isAuth('materialsList:update')"
-              @click="updateswz(scope.$index, scope.row)">编辑
+            <el-button
+              size="mini"
+              type="primary"
+              :disabled="!isAuth('materialsList:update')"
+              @click="updateswz(scope.$index, scope.row)"
+              >编辑
             </el-button>
-            <el-button size="mini" type="danger" :disabled="!isAuth('materialsList:delete')"
-              @click="deleteswz(scope.row)">删除
+            <el-button
+              size="mini"
+              type="danger"
+              :disabled="!isAuth('materialsList:delete')"
+              @click="deleteswz(scope.row)"
+              >删除
             </el-button>
           </template>
         </el-table-column>
@@ -94,33 +136,68 @@
       <!-- 添加弹框 -->
       <el-dialog title="添加文章" :visible.sync="dialogFormVisible2" center>
         <div style="margin-bottom: 10px;display: flex;">
-          <span style="width: 200px;display: inline-block;text-align: right;">文章图片：</span>
+          <span style="width: 200px;display: inline-block;text-align: right;"
+            >文章图片：</span
+          >
           <div
-            style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
-            <el-upload class="avatar-uploader" v-model="picture"
-              :action="Tupiantou" :show-file-list="false"
-              :on-success="handleAvatarSuccess">
-              <img v-if="picture" :src="picture" class="avatar"
-                style="border-radius: 6px;width: 148px;height: 148px;" />
+            style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
+          >
+            <el-upload
+              class="avatar-uploader"
+              v-model="picture"
+              :action="Tupiantou"
+              :show-file-list="false"
+              :on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
+            >
+              <img
+                v-if="picture"
+                :src="picture"
+                class="avatar"
+                style="border-radius: 6px;width: 148px;height: 148px;"
+              />
               <i v-else class="el-icon-plus avatar-uploader-icon"></i>
             </el-upload>
           </div>
         </div>
         <div style="margin-bottom: 10px;">
-          <span style="width: 200px;display: inline-block;text-align: right;">文章标题：</span>
-          <el-input style="width: 50%;" v-model="title" placeholder="请输入文章标题"></el-input>
+          <span style="width: 200px;display: inline-block;text-align: right;"
+            >文章标题：</span
+          >
+          <el-input
+            style="width: 50%;"
+            v-model="title"
+            placeholder="请输入文章标题"
+          ></el-input>
         </div>
         <div style="margin-bottom: 10px;">
-          <span style="width: 200px;display: inline-block;text-align: right;">跳转链接：</span>
-          <el-input style="width: 50%;" v-model="articleUrl" placeholder="请输入跳转链接"></el-input>
+          <span style="width: 200px;display: inline-block;text-align: right;"
+            >跳转链接：</span
+          >
+          <el-input
+            style="width: 50%;"
+            v-model="articleUrl"
+            placeholder="请输入跳转链接"
+          ></el-input>
         </div>
         <div style="margin-bottom: 10px;">
-          <span style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;">文章内容：</span>
-          <el-input style="width: 50%;" type="textarea" rows="4" v-model="content" placeholder="请输入内容"></el-input>
+          <span
+            style="width: 200px;display: inline-block;text-align: right;position: relative;top: -65px;"
+            >文章内容：</span
+          >
+          <el-input
+            style="width: 50%;"
+            type="textarea"
+            rows="4"
+            v-model="content"
+            placeholder="请输入内容"
+          ></el-input>
         </div>
         <div slot="footer" class="dialog-footer">
           <el-button @click="dialogFormVisible2 = false">取 消</el-button>
-          <el-button type="primary" @click="releasNoticeTowz()">确 定</el-button>
+          <el-button type="primary" @click="releasNoticeTowz()"
+            >确 定</el-button
+          >
         </div>
       </el-dialog>
       <!-- 修改弹框 -->
@@ -128,12 +205,22 @@
         <el-form :model="form">
           <el-form-item label="文章图片：" :label-width="formLabelWidth">
             <div
-              style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
-              <el-upload class="avatar-uploader" v-model="picture"
-                :action="Tupiantou" :show-file-list="false"
-                :on-success="handleAvatarSuccess2">
-                <img v-if="formwz.picture" :src="formwz.picture" class="avatar"
-                  style="border-radius: 6px;width: 148px;height: 148px;" />
+              style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
+            >
+              <el-upload
+                class="avatar-uploader"
+                v-model="picture"
+                :action="Tupiantou"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess2"
+                :before-upload="beforeAvatarUpload"
+              >
+                <img
+                  v-if="formwz.picture"
+                  :src="formwz.picture"
+                  class="avatar"
+                  style="border-radius: 6px;width: 148px;height: 148px;"
+                />
                 <i v-else class="el-icon-plus avatar-uploader-icon"></i>
               </el-upload>
             </div>
@@ -145,7 +232,12 @@
             <el-input v-model="formwz.articleUrl" style="width:65%;"></el-input>
           </el-form-item>
           <el-form-item label="文章内容：" :label-width="formLabelWidth">
-            <el-input type="textarea" rows="4" v-model="formwz.content" style="width:65%;"></el-input>
+            <el-input
+              type="textarea"
+              rows="4"
+              v-model="formwz.content"
+              style="width:65%;"
+            ></el-input>
           </el-form-item>
         </el-form>
         <div slot="footer" class="dialog-footer">
@@ -158,350 +250,347 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        limit: 5,
-        page: 1,
-        state: 1,
-        sort: 0,
-        remark: '',
-        createTime: '',
-        classifyName: '',
-        id: '',
-        classifyId: 1,
-        classifyIds: [],
-        form: {
-          id: '',
-          state: '',
-          sort: '',
-          classifyName: '',
-          createTime: '',
-          remark: ''
-        },
-        formwz: {
-          id: '',
-          picture: '',
-          articleUrl: '',
-          content: '',
-          title: '',
-          classifyId: '',
-          createTime: ''
-        },
-        info: {
-          stockDate: this.getNowTime(), //日期
-        },
-        picture: '',
-        picture2: '',
-        articleUrl: '',
-        content: '',
-        title: '',
-        formLabelWidth: '200px',
-        activeName: 'first',
-        tableDataLoading: false,
-        dialogFormVisible1: false,
-        dialogFormVisible: false,
-        dialogFormVisible2: false,
-        dialogFormVisible3: false,
-        tableData: [],
-      }
-    },
-    methods: {
-      //处理默认选中当前日期
-      getNowTime() {
-        var now = new Date();
-        var year = now.getFullYear(); //得到年份
-        var month = now.getMonth(); //得到月份
-        var date = now.getDate(); //得到日期
-        var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
-        var mm = now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
-        var ss = now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
-        month = month + 1;
-        month = month.toString().padStart(2, "0");
-        date = date.toString().padStart(2, "0");
-        var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
-        return defaultDate;
-        this.$set(this.info, "stockDate", defaultDate);
-      },
-      handleClick(tab, event) {
-        if (tab._props.label == '分类管理') {
-          this.dataSelect()
-        }
-        if (tab._props.label == '文章管理') {
-          this.classifyId = 1
-          this.articleSelect()
-        }
+export default {
+  data() {
+    return {
+      limit: 5,
+      page: 1,
+      state: 1,
+      sort: 0,
+      remark: "",
+      createTime: "",
+      classifyName: "",
+      id: "",
+      classifyId: 1,
+      classifyIds: [],
+      form: {
+        id: "",
+        state: "",
+        sort: "",
+        classifyName: "",
+        createTime: "",
+        remark: ""
       },
-      handleAvatarSuccess(file) {
-        this.picture = file.data;
+      formwz: {
+        id: "",
+        picture: "",
+        articleUrl: "",
+        content: "",
+        title: "",
+        classifyId: "",
+        createTime: ""
       },
-      handleAvatarSuccess2(file2) {
-        this.formwz.picture = file2.data;
+      info: {
+        stockDate: this.getNowTime() //日期
       },
-      // 添加分类弹框
-      addNotice() {
-        this.dialogFormVisible = true
-      },
-      // 添加分类
-      releasNoticeTo() {
-        if (this.classifyName == '') {
-          this.$notify({
-            title: '提示',
-            duration: 1800,
-            message: '请选择分类名称',
-            type: 'warning'
-          });
-          return
-        }
-        this.$http({
-          url: this.$http.adornUrl('article/saveArticleClassify'),
-          method: 'post',
-          data: this.$http.adornData({
-            'state': this.state,
-            'sort': this.sort,
-            'remark': this.remark,
-            'classifyName': this.classifyName,
-            'createTime': this.info.stockDate,
-          })
-        }).then(({
-          data
-        }) => {
-          this.dialogFormVisible = false
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.classifyName = ''
-              this.dataSelect()
-            }
-          })
-        })
-      },
-      // 编辑分类弹框
-      updates(index, rows) {
-        this.form.state = rows.state;
-        this.form.sort = rows.state;
-        this.dialogFormVisible1 = true;
-        this.form.id = rows.id;
-        this.form.classifyName = rows.classifyName;
-        this.form.remark = rows.remark;
-        this.form.createTime = rows.createTime;
-      },
-      // 修改类别
-      amendNoticeTo() {
-        this.$http({
-          url: this.$http.adornUrl(`article/updateClassifyName/${this.form.id}/${this.form.classifyName}`),
-          method: 'post',
-          data: this.$http.adornData({})
-        }).then(({
-          data
-        }) => {
-          this.dialogFormVisible1 = false
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.dataSelect()
-            }
-          })
+      picture: "",
+      picture2: "",
+      articleUrl: "",
+      content: "",
+      title: "",
+      formLabelWidth: "200px",
+      activeName: "first",
+      tableDataLoading: false,
+      dialogFormVisible1: false,
+      dialogFormVisible: false,
+      dialogFormVisible2: false,
+      dialogFormVisible3: false,
+      tableData: []
+    };
+  },
+  methods: {
+    //处理默认选中当前日期
+    getNowTime() {
+      var now = new Date();
+      var year = now.getFullYear(); //得到年份
+      var month = now.getMonth(); //得到月份
+      var date = now.getDate(); //得到日期
+      var hh = now.getHours() < 10 ? "0" + now.getHours() : now.getHours();
+      var mm =
+        now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes();
+      var ss =
+        now.getSeconds() < 10 ? "0" + now.getSeconds() : now.getSeconds();
+      month = month + 1;
+      month = month.toString().padStart(2, "0");
+      date = date.toString().padStart(2, "0");
+      var defaultDate = `${year}-${month}-${date} ${hh}:${mm}:${ss}`;
+      return defaultDate;
+      this.$set(this.info, "stockDate", defaultDate);
+    },
+    handleClick(tab, event) {
+      if (tab._props.label == "分类管理") {
+        this.dataSelect();
+      }
+      if (tab._props.label == "文章管理") {
+        this.classifyId = 1;
+        this.articleSelect();
+      }
+    },
+    beforeAvatarUpload(file) {
+      return this.$processImage(this, file, false);
+    },
+    handleAvatarSuccess(file) {
+      this.picture = file.data;
+    },
+    handleAvatarSuccess2(file2) {
+      this.formwz.picture = file2.data;
+    },
+    // 添加分类弹框
+    addNotice() {
+      this.dialogFormVisible = true;
+    },
+    // 添加分类
+    releasNoticeTo() {
+      if (this.classifyName == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请选择分类名称",
+          type: "warning"
+        });
+        return;
+      }
+      this.$http({
+        url: this.$http.adornUrl("article/saveArticleClassify"),
+        method: "post",
+        data: this.$http.adornData({
+          state: this.state,
+          sort: this.sort,
+          remark: this.remark,
+          classifyName: this.classifyName,
+          createTime: this.info.stockDate
         })
-      },
-      // 删除分类
-      deletes(row) {
-        this.$confirm(`确定删除此条信息?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+      }).then(({ data }) => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "操作成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.classifyName = "";
+            this.dataSelect();
+          }
+        });
+      });
+    },
+    // 编辑分类弹框
+    updates(index, rows) {
+      this.form.state = rows.state;
+      this.form.sort = rows.state;
+      this.dialogFormVisible1 = true;
+      this.form.id = rows.id;
+      this.form.classifyName = rows.classifyName;
+      this.form.remark = rows.remark;
+      this.form.createTime = rows.createTime;
+    },
+    // 修改类别
+    amendNoticeTo() {
+      this.$http({
+        url: this.$http.adornUrl(
+          `article/updateClassifyName/${this.form.id}/${this.form.classifyName}`
+        ),
+        method: "post",
+        data: this.$http.adornData({})
+      }).then(({ data }) => {
+        this.dialogFormVisible1 = false;
+        this.$message({
+          message: "操作成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.dataSelect();
+          }
+        });
+      });
+    },
+    // 删除分类
+    deletes(row) {
+      this.$confirm(`确定删除此条信息?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
           this.$http({
-            url: this.$http.adornUrl(`article/deleteArticleClassifyById?articleClassifyId=${row.id}`),
-            method: 'post',
+            url: this.$http.adornUrl(
+              `article/deleteArticleClassifyById?articleClassifyId=${row.id}`
+            ),
+            method: "post",
             data: this.$http.adornData({})
-          }).then(({
-            data
-          }) => {
+          }).then(({ data }) => {
             this.$message({
-              message: '删除成功',
-              type: 'success',
+              message: "删除成功",
+              type: "success",
               duration: 1500,
               onClose: () => {
-                this.name = '';
-                this.dataSelect()
+                this.name = "";
+                this.dataSelect();
               }
-            })
-          })
-        }).catch(() => {})
-      },
-      // 添加文章弹框
-      addNoticewz() {
-        this.dialogFormVisible2 = true
-      },
-      // 添加文章
-      releasNoticeTowz() {
-        if (this.title == '') {
-          this.$notify({
-            title: '提示',
-            duration: 1800,
-            message: '请输入文章标题',
-            type: 'warning'
-          });
-          return
-        }
-        if (this.articleUrl == '') {
-          this.$notify({
-            title: '提示',
-            duration: 1800,
-            message: '请输入跳转链接',
-            type: 'warning'
+            });
           });
-          return
-        }
-        if (this.content == '') {
-          this.$notify({
-            title: '提示',
-            duration: 1800,
-            message: '请输入内容',
-            type: 'warning'
-          });
-          return
-        }
-        this.$http({
-          url: this.$http.adornUrl('article/addArticle'),
-          method: 'post',
-          data: this.$http.adornData({
-            'articleUrl': this.articleUrl,
-            'classifyId': this.classifyId,
-            'content': this.content,
-            'createTime': this.info.stockDate,
-            'picture': this.picture,
-            'state': this.state,
-            'title': this.title,
-          })
-        }).then(({
-          data
-        }) => {
-          this.dialogFormVisible2 = false
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.title = ''
-              this.articleUrl = ''
-              this.content = ''
-              this.picture = ''
-              this.articleSelect()
-            }
-          })
         })
-      },
-      // 编辑文章弹框
-      updateswz(index, rows) {
-        this.formwz.picture = rows.picture;
-        this.dialogFormVisible3 = true;
-        this.formwz.id = rows.id;
-        this.formwz.classifyId = rows.classifyId
-        this.formwz.articleUrl = rows.articleUrl;
-        this.formwz.content = rows.content;
-        this.formwz.title = rows.title;
-        this.formwz.createTime = rows.createTime;
-      },
-      // 修改文章
-      amendNoticeTowz() {
-        this.$http({
-          url: this.$http.adornUrl('article/updateArticle'),
-          method: 'post',
-          data: this.$http.adornData({
-            'id': this.formwz.id,
-            'picture': this.formwz.picture,
-            'articleUrl': this.formwz.articleUrl,
-            'content': this.formwz.content,
-            'classifyId': this.formwz.classifyId,
-            'title': this.formwz.title,
-            'createTime': this.info.stockDate,
-          })
-        }).then(({
-          data
-        }) => {
-          this.dialogFormVisible3 = false
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.articleSelect()
-            }
-          })
+        .catch(() => {});
+    },
+    // 添加文章弹框
+    addNoticewz() {
+      this.dialogFormVisible2 = true;
+    },
+    // 添加文章
+    releasNoticeTowz() {
+      if (this.title == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请输入文章标题",
+          type: "warning"
+        });
+        return;
+      }
+      if (this.articleUrl == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请输入跳转链接",
+          type: "warning"
+        });
+        return;
+      }
+      if (this.content == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请输入内容",
+          type: "warning"
+        });
+        return;
+      }
+      this.$http({
+        url: this.$http.adornUrl("article/addArticle"),
+        method: "post",
+        data: this.$http.adornData({
+          articleUrl: this.articleUrl,
+          classifyId: this.classifyId,
+          content: this.content,
+          createTime: this.info.stockDate,
+          picture: this.picture,
+          state: this.state,
+          title: this.title
         })
-      },
-      // 删除文章
-      deleteswz(row) {
-        this.$confirm(`确定删除此条信息?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+      }).then(({ data }) => {
+        this.dialogFormVisible2 = false;
+        this.$message({
+          message: "操作成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.title = "";
+            this.articleUrl = "";
+            this.content = "";
+            this.picture = "";
+            this.articleSelect();
+          }
+        });
+      });
+    },
+    // 编辑文章弹框
+    updateswz(index, rows) {
+      this.formwz.picture = rows.picture;
+      this.dialogFormVisible3 = true;
+      this.formwz.id = rows.id;
+      this.formwz.classifyId = rows.classifyId;
+      this.formwz.articleUrl = rows.articleUrl;
+      this.formwz.content = rows.content;
+      this.formwz.title = rows.title;
+      this.formwz.createTime = rows.createTime;
+    },
+    // 修改文章
+    amendNoticeTowz() {
+      this.$http({
+        url: this.$http.adornUrl("article/updateArticle"),
+        method: "post",
+        data: this.$http.adornData({
+          id: this.formwz.id,
+          picture: this.formwz.picture,
+          articleUrl: this.formwz.articleUrl,
+          content: this.formwz.content,
+          classifyId: this.formwz.classifyId,
+          title: this.formwz.title,
+          createTime: this.info.stockDate
+        })
+      }).then(({ data }) => {
+        this.dialogFormVisible3 = false;
+        this.$message({
+          message: "操作成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.articleSelect();
+          }
+        });
+      });
+    },
+    // 删除文章
+    deleteswz(row) {
+      this.$confirm(`确定删除此条信息?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
           this.$http({
-            url: this.$http.adornUrl(`article/deleteArticle?articleId=${row.id}`),
-            method: 'post',
+            url: this.$http.adornUrl(
+              `article/deleteArticle?articleId=${row.id}`
+            ),
+            method: "post",
             data: this.$http.adornData({})
-          }).then(({
-            data
-          }) => {
+          }).then(({ data }) => {
             this.$message({
-              message: '删除成功',
-              type: 'success',
+              message: "删除成功",
+              type: "success",
               duration: 1500,
               onClose: () => {
-                this.name = '';
-                this.articleSelect()
+                this.name = "";
+                this.articleSelect();
               }
-            })
-          })
-        }).catch(() => {})
-      },
-      // 获取分类管理数据
-      dataSelect() {
-        this.tableDataLoading = true
-        this.$http({
-          url: this.$http.adornUrl('article/selectArticleClassifyList'),
-          method: 'get',
-          params: this.$http.adornParams({})
-        }).then(({
-          data
-        }) => {
-          this.tableDataLoading = false
-          let returnData = data.data;
-          this.tableData = returnData
-          this.classifyIds = returnData
-        })
-      },
-      // 获取文章管理数据
-      articleSelect() {
-        this.tableDataLoading = true
-        this.$http({
-          url: this.$http.adornUrl('article/selectArticleList'),
-          method: 'get',
-          params: this.$http.adornParams({
-            'classifyId': this.classifyId
-          })
-        }).then(({
-          data
-        }) => {
-          this.tableDataLoading = false
-          let returnData = data.data;
-          this.tableData = returnData
+            });
+          });
         })
-      },
+        .catch(() => {});
     },
-    mounted() {
-      this.dataSelect()
+    // 获取分类管理数据
+    dataSelect() {
+      this.tableDataLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("article/selectArticleClassifyList"),
+        method: "get",
+        params: this.$http.adornParams({})
+      }).then(({ data }) => {
+        this.tableDataLoading = false;
+        let returnData = data.data;
+        this.tableData = returnData;
+        this.classifyIds = returnData;
+      });
+    },
+    // 获取文章管理数据
+    articleSelect() {
+      this.tableDataLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("article/selectArticleList"),
+        method: "get",
+        params: this.$http.adornParams({
+          classifyId: this.classifyId
+        })
+      }).then(({ data }) => {
+        this.tableDataLoading = false;
+        let returnData = data.data;
+        this.tableData = returnData;
+      });
     }
-  };
+  },
+  mounted() {
+    this.dataSelect();
+  }
+};
 </script>
 
-<style>
-
-</style>
+<style></style>

src/views/members/vipPrivilege.vue

@@ -1,60 +1,103 @@
 <template>
   <div>
     <div style="float: right;margin-right:2%;">
-      <el-button style='margin: 10px 0;' :disabled="!isAuth('bannerList:add')" size="mini" type="primary"
-        icon="document" @click="addNotice">添加会员特权</el-button>
+      <el-button
+        style="margin: 10px 0;"
+        :disabled="!isAuth('bannerList:add')"
+        size="mini"
+        type="primary"
+        icon="document"
+        @click="addNotice"
+        >添加会员特权</el-button
+      >
     </div>
     <el-table v-loading="tableDataLoading" :data="tableData.list">
-
       <el-table-column fixed prop="memberId" label="编号" width="50">
       </el-table-column>
       <el-table-column prop="memberImg" label="图片">
         <template slot-scope="scope">
-          　　<img :src="scope.row.memberImg" width="60" height="60" />
+          <img :src="scope.row.memberImg" width="60" height="60" />
         </template>
       </el-table-column>
-      <el-table-column prop="memberName" label="特权名称">
-      </el-table-column>
-      <el-table-column prop="sort" label="排序">
-      </el-table-column>
+      <el-table-column prop="memberName" label="特权名称"> </el-table-column>
+      <el-table-column prop="sort" label="排序"> </el-table-column>
       <el-table-column label="操作" width="180">
         <template slot-scope="scope">
-          <el-button size="mini" type="primary" :disabled="!isAuth('bannerList:update')"
-            @click="amendBanner(scope.$index, scope.row)">修改
+          <el-button
+            size="mini"
+            type="primary"
+            :disabled="!isAuth('bannerList:update')"
+            @click="amendBanner(scope.$index, scope.row)"
+            >修改
           </el-button>
-          <el-button size="mini" type="danger" :disabled="!isAuth('bannerList:delete')" @click="deletes(scope.row)">删除
+          <el-button
+            size="mini"
+            type="danger"
+            :disabled="!isAuth('bannerList:delete')"
+            @click="deletes(scope.row)"
+            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <div style="text-align: center;margin-top: 10px;">
-      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
-        :page-sizes="[10, 20, 30, 50, 100]" :page-size="limit" :current-page="page"
-        layout="total,sizes, prev, pager, next,jumper" :total="tableData.totalCount">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :page-sizes="[10, 20, 30, 50, 100]"
+        :page-size="limit"
+        :current-page="page"
+        layout="total,sizes, prev, pager, next,jumper"
+        :total="tableData.totalCount"
+      >
       </el-pagination>
     </div>
     <el-dialog :title="title" :visible.sync="dialogFormVisible" center>
       <div style="margin-bottom: 10px;display: flex;">
-        <span style="width: 200px;display: inline-block;text-align: right;">图片：</span>
+        <span style="width: 200px;display: inline-block;text-align: right;"
+          >图片：</span
+        >
         <div
-          style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;">
-          <el-upload class="avatar-uploader" v-model="memberImg"
-            :action="Tupiantou" :show-file-list="false"
-            :on-success="handleAvatarSuccess">
-            <img v-if="memberImg" :src="memberImg" class="avatar"
-              style="border-radius: 6px;width: 148px;height: 148px;" />
+          style=" width:148px;height:148px;border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 148px;"
+        >
+          <el-upload
+            class="avatar-uploader"
+            v-model="memberImg"
+            :action="Tupiantou"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <img
+              v-if="memberImg"
+              :src="memberImg"
+              class="avatar"
+              style="border-radius: 6px;width: 148px;height: 148px;"
+            />
             <i v-else class="el-icon-plus avatar-uploader-icon"></i>
           </el-upload>
         </div>
       </div>
       <div style="margin-bottom: 10px;">
-        <span style="width: 200px;display: inline-block;text-align: right;">名称：</span>
-        <el-input style="width:50%;" v-model="memberName" placeholder="请输入名称"></el-input>
+        <span style="width: 200px;display: inline-block;text-align: right;"
+          >名称：</span
+        >
+        <el-input
+          style="width:50%;"
+          v-model="memberName"
+          placeholder="请输入名称"
+        ></el-input>
       </div>
       <div style="margin-bottom: 10px;">
-        <span style="width: 200px;display: inline-block;text-align: right;">排序：</span>
-        <el-input style="width:50%;" v-model="sort" placeholder="请输入排序"
-          onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"></el-input>
+        <span style="width: 200px;display: inline-block;text-align: right;"
+          >排序：</span
+        >
+        <el-input
+          style="width:50%;"
+          v-model="sort"
+          placeholder="请输入排序"
+          onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')"
+        ></el-input>
       </div>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
@@ -65,182 +108,179 @@
 </template>
 
 <script>
-  export default {
-    data() {
-      return {
-        page: 1,
-        limit: 10,
-        tableDataLoading: true,
-        dialogFormVisible: false,
-        tableData: [],
-        memberName: '',
-        memberImg: '',
-        memberId: '',
-        sort: '',
-        title: '添加'
-      }
-    },
-    methods: {
-      // 获取数据列表
-      dataSelect() {
-        this.tableDataLoading = true
-        this.$http({
-          url: this.$http.adornUrl('member/selectMemberPage'),
-          method: 'get',
-          params: this.$http.adornParams({
-            'page': this.page,
-            'limit': this.limit
-          })
-        }).then(({
-          data
-        }) => {
-          if (data && data.code === 0) {
-            console.log('会员列表', data)
-            this.tableDataLoading = false
-            let returnData = data.data;
-            this.tableData = returnData;
-          }
-
+export default {
+  data() {
+    return {
+      page: 1,
+      limit: 10,
+      tableDataLoading: true,
+      dialogFormVisible: false,
+      tableData: [],
+      memberName: "",
+      memberImg: "",
+      memberId: "",
+      sort: "",
+      title: "添加"
+    };
+  },
+  methods: {
+    // 获取数据列表
+    dataSelect() {
+      this.tableDataLoading = true;
+      this.$http({
+        url: this.$http.adornUrl("member/selectMemberPage"),
+        method: "get",
+        params: this.$http.adornParams({
+          page: this.page,
+          limit: this.limit
         })
-      },
-      //上传成功
-      handleAvatarSuccess(file) {
-        this.memberImg = file.data
-      },
-      addNotice() {
-        this.dialogFormVisible = true
-      },
-      handleCurrentChange(val) {
-        this.page = val
-        this.dataSelect()
-      },
-      handleSizeChange(val) {
-        this.limit = val
-        this.dataSelect()
-      },
-      // 添加banner图
-      addNoticeTo() {
-        if (this.memberImg == '') {
-          this.$notify({
-            title: '提示',
-            duration: 1800,
-            message: '请上传图片',
-            type: 'warning'
-          });
-          return
+      }).then(({ data }) => {
+        if (data && data.code === 0) {
+          console.log("会员列表", data);
+          this.tableDataLoading = false;
+          let returnData = data.data;
+          this.tableData = returnData;
         }
-        if (this.memberName == '') {
-          this.$notify({
-            title: '提示',
-            duration: 1800,
-            message: '请输入名称',
-            type: 'warning'
-          });
-          return
-        }
-        this.classify = 1
-        if (this.title == '添加') {
-          var url = 'member/insertMember'
-        } else {
-          var url = 'member/updateMember'
-        }
-        this.$http({
-          url: this.$http.adornUrl(url),
-          method: 'post',
-          data: this.$http.adornData({
-            'memberImg': this.memberImg,
-            'memberId': this.memberId,
-            'memberName': this.memberName,
-            'sort': this.sort
-          })
-        }).then(({
-          data
-        }) => {
-          this.dialogFormVisible = false
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.memberImg = ''
-              this.memberId = ''
-              this.memberName = ''
-              this.sort = ''
-              this.title = '添加'
-              this.dataSelect()
-            }
-          })
-        })
-      },
-      // 修改
-      amendBanner(index, rows, a) {
-        if (a == 1) {
-          this.pl = 1
-        } else {
-          this.pl = 0
-        }
-        this.dialogFormVisible = true
-        this.id = rows.id
-        this.memberImg = rows.memberImg
-        this.memberId = rows.memberId
-        this.sort = rows.sort
-        this.memberName = rows.memberName
-        this.title = '修改'
-      },
-      // 修改
-      amendNoticeTo() {
-        this.$http({
-          url: this.$http.adornUrl(
-            `?memberId=${this.memberId}&memberImg=${this.memberImg}&sort=${this.sort}&memberName=${this.memberName}`
-            ),
-          method: 'post',
-          data: this.$http.adornData({})
-        }).then(({
-          data
-        }) => {
-          this.dialogFormVisible = false
-          this.$message({
-            message: '操作成功',
-            type: 'success',
-            duration: 1500,
-            onClose: () => {
-              this.dataSelect()
-            }
-          })
+      });
+    },
+    beforeAvatarUpload(file) {
+      return this.$processImage(this, file, false);
+    },
+    //上传成功
+    handleAvatarSuccess(file) {
+      this.memberImg = file.data;
+    },
+    addNotice() {
+      this.dialogFormVisible = true;
+    },
+    handleCurrentChange(val) {
+      this.page = val;
+      this.dataSelect();
+    },
+    handleSizeChange(val) {
+      this.limit = val;
+      this.dataSelect();
+    },
+    // 添加banner图
+    addNoticeTo() {
+      if (this.memberImg == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请上传图片",
+          type: "warning"
+        });
+        return;
+      }
+      if (this.memberName == "") {
+        this.$notify({
+          title: "提示",
+          duration: 1800,
+          message: "请输入名称",
+          type: "warning"
+        });
+        return;
+      }
+      this.classify = 1;
+      if (this.title == "添加") {
+        var url = "member/insertMember";
+      } else {
+        var url = "member/updateMember";
+      }
+      this.$http({
+        url: this.$http.adornUrl(url),
+        method: "post",
+        data: this.$http.adornData({
+          memberImg: this.memberImg,
+          memberId: this.memberId,
+          memberName: this.memberName,
+          sort: this.sort
         })
-      },
-      //删除一级
-      deletes(row) {
-        let delid = row.memberId
-        this.$confirm(`确定删除此条信息?`, '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
+      }).then(({ data }) => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "操作成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.memberImg = "";
+            this.memberId = "";
+            this.memberName = "";
+            this.sort = "";
+            this.title = "添加";
+            this.dataSelect();
+          }
+        });
+      });
+    },
+    // 修改
+    amendBanner(index, rows, a) {
+      if (a == 1) {
+        this.pl = 1;
+      } else {
+        this.pl = 0;
+      }
+      this.dialogFormVisible = true;
+      this.id = rows.id;
+      this.memberImg = rows.memberImg;
+      this.memberId = rows.memberId;
+      this.sort = rows.sort;
+      this.memberName = rows.memberName;
+      this.title = "修改";
+    },
+    // 修改
+    amendNoticeTo() {
+      this.$http({
+        url: this.$http.adornUrl(
+          `?memberId=${this.memberId}&memberImg=${this.memberImg}&sort=${this.sort}&memberName=${this.memberName}`
+        ),
+        method: "post",
+        data: this.$http.adornData({})
+      }).then(({ data }) => {
+        this.dialogFormVisible = false;
+        this.$message({
+          message: "操作成功",
+          type: "success",
+          duration: 1500,
+          onClose: () => {
+            this.dataSelect();
+          }
+        });
+      });
+    },
+    //删除一级
+    deletes(row) {
+      let delid = row.memberId;
+      this.$confirm(`确定删除此条信息?`, "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
           this.$http({
-            url: this.$http.adornUrl(`member/deleteMemberById/?memberId=${delid}`),
-            method: 'post',
+            url: this.$http.adornUrl(
+              `member/deleteMemberById/?memberId=${delid}`
+            ),
+            method: "post",
             data: this.$http.adornData({})
-          }).then(({
-            data
-          }) => {
+          }).then(({ data }) => {
             this.$message({
-              message: '删除成功',
-              type: 'success',
+              message: "删除成功",
+              type: "success",
               duration: 1500,
               onClose: () => {
-                this.dataSelect()
+                this.dataSelect();
               }
-            })
-          })
-        }).catch(() => {})
-      },
-    },
-    mounted() {
-      this.dataSelect()
+            });
+          });
+        })
+        .catch(() => {});
     }
+  },
+  mounted() {
+    this.dataSelect();
   }
+};
 </script>
 
-<style>
-</style>
+<style></style>

src/views/mission/system.vue

@@ -571,6 +571,7 @@
 							:action="Tupiantou"
 							:show-file-list="false"
 							:on-success="handleAvatarSuccess"
+              :before-upload="beforeAvatarUpload"
 							>
 							<img v-if="item.picture" :src="item.picture" class="avatar" style="width: 148px;height:137px;"/>
 							<i v-else class="el-icon-plus avatar-uploader-icon" @click="curRowIndex=index"></i>
@@ -655,6 +656,7 @@
 					:action="Tupiantou"
 					:show-file-list="false"
 					:on-success="handleAvatarSuccess1"
+          :before-upload="beforeAvatarUpload"
 					>
 					<img v-if="imageUrl" :src="imageUrl" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
 					<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -689,6 +691,7 @@
 		    		:action="Tupiantou"
 		    		:show-file-list="false"
 		    		:on-success="handleAvatarSuccess2"
+            :before-upload="beforeAvatarUpload"
 		    		>
 		    		<img v-if="form.imageUrl" :src="form.imageUrl" class="avatar" style="border-radius: 6px;width: 148px;height: 148px;"/>
 		    		<i v-else class="el-icon-plus avatar-uploader-icon"></i>
@@ -961,6 +964,9 @@
 			}
 		},
 		methods: {
+      beforeAvatarUpload(file) {
+        return this.$processImage(this, file, false);
+      },
 			// 图片上传
 			handleAvatarSuccess1(file) {
 			     this.imageUrl = file.data;

src/views/modules/oss/oss-upload.vue

@@ -1,71 +1,82 @@
-<template>
-  <el-dialog
-    title="上传文件"
-    :close-on-click-modal="false"
-    @close="closeHandle"
-    :visible.sync="visible">
-    <el-upload
-      drag
-      :action="url"
-      :before-upload="beforeUploadHandle"
-      :on-success="successHandle"
-      multiple
-      :file-list="fileList"
-      style="text-align: center;">
-      <i class="el-icon-upload"></i>
-      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
-      <div class="el-upload__tip" slot="tip">只支持jpg、png、gif格式的图片！</div>
-    </el-upload>
-  </el-dialog>
-</template>
-
-<script>
-  export default {
-    data () {
-      return {
-        visible: false,
-        url: '',
-        num: 0,
-        successNum: 0,
-        fileList: []
-      }
-    },
-    methods: {
-      init (id) {
-        this.url = this.$http.adornUrl(`/sys/oss/upload?token=${this.$cookie.get('token')}`)
-        this.visible = true
-      },
-      // 上传之前
-      beforeUploadHandle (file) {
-        if (file.type !== 'image/jpg' && file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
-          this.$message.error('只支持jpg、png、gif格式的图片！')
-          return false
-        }
-        this.num++
-      },
-      // 上传成功
-      successHandle (response, file, fileList) {
-        this.fileList = fileList
-        this.successNum++
-        if (response && response.code === 0) {
-          if (this.num === this.successNum) {
-            this.$confirm('操作成功, 是否继续操作?', '提示', {
-              confirmButtonText: '确定',
-              cancelButtonText: '取消',
-              type: 'warning'
-            }).catch(() => {
-              this.visible = false
-            })
-          }
-        } else {
-          this.$message.error(response.msg)
-        }
-      },
-      // 弹窗关闭时
-      closeHandle () {
-        this.fileList = []
-        this.$emit('refreshDataList')
-      }
-    }
-  }
-</script>
+<template>
+  <el-dialog
+    title="上传文件"
+    :close-on-click-modal="false"
+    @close="closeHandle"
+    :visible.sync="visible"
+  >
+    <el-upload
+      drag
+      :action="url"
+      :before-upload="beforeUploadHandle"
+      :on-success="successHandle"
+      multiple
+      :file-list="fileList"
+      style="text-align: center;"
+    >
+      <i class="el-icon-upload"></i>
+      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+      <div class="el-upload__tip" slot="tip">
+        只支持jpg、png、gif格式的图片！
+      </div>
+    </el-upload>
+  </el-dialog>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visible: false,
+      url: "",
+      num: 0,
+      successNum: 0,
+      fileList: []
+    };
+  },
+  methods: {
+    init(id) {
+      this.url = this.$http.adornUrl(
+        `/sys/oss/upload?token=${this.$cookie.get("token")}`
+      );
+      this.visible = true;
+    },
+    // 上传之前
+    beforeUploadHandle(file) {
+      if (
+        file.type !== "image/jpg" &&
+        file.type !== "image/jpeg" &&
+        file.type !== "image/png" &&
+        file.type !== "image/gif"
+      ) {
+        this.$message.error("只支持jpg、png、gif格式的图片！");
+        return false;
+      }
+      this.num++;
+    },
+    // 上传成功
+    successHandle(response, file, fileList) {
+      this.fileList = fileList;
+      this.successNum++;
+      if (response && response.code === 0) {
+        if (this.num === this.successNum) {
+          this.$confirm("操作成功, 是否继续操作?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning"
+          }).catch(() => {
+            this.visible = false;
+          });
+        }
+      } else {
+        this.$message.error(response.msg);
+      }
+    },
+    // 弹窗关闭时
+    closeHandle() {
+      this.fileList = [];
+      this.$emit("refreshDataList");
+    }
+  }
+};
+</script>

src/views/shopsList/shopsList.vue

@@ -334,7 +334,7 @@
               >修改密码
             </el-button>
             <el-button
-            :disabled="!isAuth('shopsList:update')"
+              :disabled="!isAuth('shopsList:update')"
               size="mini"
               type="primary"
               @click="shopsListOrder(scope.row)"
@@ -351,7 +351,7 @@
               >修改信息
             </el-button>
             <el-button
-            :disabled="!isAuth('shopsList:update')"
+              :disabled="!isAuth('shopsList:update')"
               size="mini"
               type="primary"
               @click="shopsListSr(scope.row)"
@@ -359,7 +359,7 @@
               >收入统计
             </el-button>
             <el-button
-            :disabled="!isAuth('shopsList:update')"
+              :disabled="!isAuth('shopsList:update')"
               size="mini"
               type="primary"
               @click="shopsListQb(scope.row)"
@@ -367,7 +367,7 @@
               >商铺钱包
             </el-button>
             <el-button
-            :disabled="!isAuth('shopsList:update')"
+              :disabled="!isAuth('shopsList:update')"
               size="mini"
               type="primary"
               @click="shopsListBzj(scope.row)"
@@ -383,7 +383,7 @@
               >评价明细
             </el-button>
             <el-button
-            :disabled="!isAuth('shopsList:update')"
+              :disabled="!isAuth('shopsList:update')"
               size="mini"
               type="primary"
               @click="shopsListYhq(scope.row)"
@@ -553,6 +553,7 @@
             :action="Tupiantou"
             :show-file-list="false"
             :on-success="handleAvatarSuccess1"
+            :before-upload="beforeAvatarUpload"
           >
             <img
               v-if="shopCover"
@@ -585,6 +586,7 @@
             :show-file-list="false"
             :on-success="handleRemove"
             :on-progress="onprogress1"
+            :before-upload="beforeAvatarUpload"
           >
             <el-progress
               v-if="percentage1 > 0 && percentage1 < 100"
@@ -1625,7 +1627,7 @@ export default {
       enableFullReductionFlag: 1,
       autoSendOrder: 1,
       autoAcceptOrder: 1,
-      reservationOpenFlag:0,
+      reservationOpenFlag: 0,
       sort: 1,
       putawayFlag: 1,
       distributionDistance: 3000,
@@ -1762,16 +1764,16 @@ export default {
       this.enableFullReductionFlag = 1;
       this.autoSendOrder = 1;
       this.autoAcceptOrder = 1;
-      this.reservationOpenFlag=0
+      this.reservationOpenFlag = 0;
       this.sort = 1;
       this.putawayFlag = 1;
       this.labels = [];
       this.shopPhone = "";
       this.shopUserId = "";
-      this.shopUserName = ""
-        this.storeAddress = []
-        this.storeAddre = "请选择城市"
-        this.dialogFormVisible = true;
+      this.shopUserName = "";
+      this.storeAddress = [];
+      this.storeAddre = "请选择城市";
+      this.dialogFormVisible = true;
       this.getMyLocation();
     },
 
@@ -1928,7 +1930,7 @@ export default {
       datas.enableFullReductionFlag = this.enableFullReductionFlag;
       datas.autoSendOrder = this.autoSendOrder;
       datas.autoAcceptOrder = this.autoAcceptOrder;
-      datas.reservationOpenFlag=this.reservationOpenFlag
+      datas.reservationOpenFlag = this.reservationOpenFlag;
       datas.sort = this.sort;
       datas.putawayFlag = this.putawayFlag;
       datas.shopLng = this.longitude;
@@ -2028,7 +2030,7 @@ export default {
       if (rows.facility) {
         this.facility = rows.facility;
       }
-      console.log(rows,'mmm')
+      console.log(rows, "mmm");
       this.snCode = rows.snCode;
       this.value = rows.value;
       if (rows.exemptErrandFlag) {
@@ -2273,7 +2275,7 @@ export default {
         }
         let returnData = data.data;
         this.typeDatas = returnData;
-        console.log(this.typeDatas,'ll')
+        console.log(this.typeDatas, "ll");
       });
     },
     //定位获得当前位置信息
@@ -2427,6 +2429,9 @@ export default {
       console.log("详情图上传进度", parseInt(event.percent));
       this.percentage1 = parseInt(event.percent);
     },
+    beforeAvatarUpload(file) {
+      return this.$processImage(this, file, false);
+    },
     // 封面图
     handleAvatarSuccess1(file, fileList) {
       this.shopCover = file.data;
@@ -3322,8 +3327,8 @@ export default {
         data: this.$http.adornData({
           isRecommend: row.isRecommend,
           shopId: row.shopId,
-          isSupplier:row.isSupplier,
-          messageConfiguration:row.messageConfiguration
+          isSupplier: row.isSupplier,
+          messageConfiguration: row.messageConfiguration
         })
       }).then(({ data }) => {
         if (data.code == 0) {

src/views/vueMchat/vueMchat.vue

@@ -93,8 +93,7 @@
               <div class="left-item-info">
                 <div class="left-item-info_title">
                   {{ item.userName }}
-                  <span v-if="item.isShop == 1" style="color: red;"
-                    >(商家)</span
+                  <span v-if="item.isShop == 1" style="color: red;">(商家)</span
                   >{{ item.phone }}
                 </div>
                 <div class="left-item-info_content">{{ item.content }}</div>
@@ -383,9 +382,9 @@ export default {
       center_wrapper_center_item_reserve: "center_wrapper_center_item_reserve"
     };
   },
-    created() {
-      this.loadEmojis();
-    },
+  created() {
+    this.loadEmojis();
+  },
   watch: {
     $route: function(to, from) {
       if (to.name == "vueMchat") {
@@ -462,9 +461,9 @@ export default {
       // 连接建立之后执行send方法发送数据，这个和自己的后端沟通好需要传什么数据，我的是要进行token验证
       console.log("WebSocket连接成功");
       this.timer = setInterval(() => {
-        const data = {message: 'heartbeat' }
-        this.websock.send(JSON.stringify(data))
-      }, 55000)
+        const data = { message: "heartbeat" };
+        this.websock.send(JSON.stringify(data));
+      }, 55000);
     },
     websocketonerror() {
       //连接错误
@@ -710,6 +709,8 @@ export default {
     // 验证只能上传音频
     beforeAvatarUpload(file) {
       var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
+      console.log(testmsg);
+
       var extension;
       if (
         testmsg == "png" ||
@@ -718,6 +719,7 @@ export default {
         testmsg == "gif"
       ) {
         extension = testmsg;
+        return this.$processImage(this, file, false);
       }
       // const extension = testmsg==='png'
       if (!extension) {
@@ -726,6 +728,7 @@ export default {
           type: "error"
         });
       }
+
       return extension;
     }
   },
@@ -741,12 +744,11 @@ export default {
     // },55000)
   },
   destroyed() {
-    console.log('destroyed销毁websock');
+    console.log("destroyed销毁websock");
     window.clearInterval(this.timer);
     if (this.websock) {
       this.websock.close(); // 页面销毁后断开websocket连接
     }
-
   }
 };
 </script>