指定图片压缩大小( 设置默认1.8M )

解决商户管理端选中多规格后无法修改价格bug

config/index.js

@@ -14,7 +14,7 @@ module.exports = {
     // 代理列表, 是否开启代理通过[./dev.env.js]配置
     proxyTable: devEnv.OPEN_PROXY === false ? {} : {
       '/proxyApi': {
-// target: 'http://192.168.0.128:8171/sqx_fast/',
+        // target: 'http://iyfpk3.natappfree.cc/sqx_fast',
         // target: 'https://mxys.chuanghai-tech.com/sqx_fast/',//mxys.chuanghai-tech.com
         target: 'https://mxys.chuanghai-tech.com/wm-test/wm-api',//mxys.chuanghai-tech.com
 		changeOrigin: true,

src/main.js

@@ -11,6 +11,7 @@ import httpRequest from '@/utils/httpRequest' // api: https://github.com/axios/a
 import '@/mock/modules/sys-menu.js'
 import '@/assets/styles/fonts.css' //字体样式
 
+import * as imageConversion from 'image-conversion';
 import { getCompressionQuality, compressImage } from '@/utils/compressionUtils.js';
 
 // Vue.prototype.Tupiantou ='https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload'//线上
@@ -19,18 +20,19 @@ Vue.prototype.Tupian =function(img){
 	return 'https://mxys.chuanghai-tech.com/wmfile'+img
 }//全局图片请求头
 
- //上传图片前压缩图片
- Vue.prototype.$processImage=function (that, file, isUnload) {
+//上传图片前压缩图片
+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);
+  console.log("压缩前图片size", file.size / 1024 / 1024);
   // uploadData.isCompressed = 0
   if (
     imgType !== "IMAGE/JPG" &&
     imgType !== "IMAGE/JPEG" &&
-    imgType !== "IMAGE/PNG"
+    imgType !== "IMAGE/PNG" &&
+    imgType !== "IMAGE/WEBP"
   ) {
     that.$message.error("请上传正确格式的图片");
     return false;
@@ -40,20 +42,34 @@ Vue.prototype.Tupian =function(img){
     return false;
   }
   //压缩质量
-  const quality = getCompressionQuality(isLtSize,imgType);
-  //大于2M走压缩逻辑
+  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;
+  //     });
+  // }
+  // 按指定大小压缩
   if (!isLt2M) {
-    console.log('quality', quality);
-    return compressImage(file, quality)
-      .then(compressedFile => {
-        return compressedFile;
-      })
-      .catch(err => {
-        console.error('Image compression error:', err);
-        return file;
+    // this.$message.error("上传头像图片大小不能超过2MB");
+    // return false;
+    return new Promise(resolve => {
+      // 压缩到100KB,这里的100就是要压缩的大小，可自定义
+      imageConversion.compressAccurately(file, 1800).then(res => {
+        console.log(res.size / 1024 / 1024,'压缩后图片大小');
+        resolve(res);
       });
+    });
   }
-}
+
+};
 
 import {
   isAuth

src/utils/compressionUtils.js

@@ -2,17 +2,17 @@ import * as imageConversion from 'image-conversion';
 //压缩质量
 export function getCompressionQuality(isLtSize,imgType) {
   if (isLtSize < 3) {
-      return 0.93;
+      return 0.80;
     } else if (isLtSize >= 3 && isLtSize < 5) {
-      return 0.90;
+      return 0.70;
     } else if (isLtSize >= 5 && isLtSize < 10) {
-      return 0.80;
+      return 0.60;
     } else if (isLtSize >= 10 && isLtSize < 20) {
-      return 0.70;
+      return 0.50;
     } else if (isLtSize >= 20 && isLtSize < 30) {
-      return 0.60;
+      return 0.40;
     }
-  return 0.90;
+  return 0.30;
 }
 //压缩逻辑
 export function compressImage(file, quality) {

src/utils/httpRequest.js

@@ -59,7 +59,7 @@ http.adornUrl = (actionName) => {
   // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
   // return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
 // return 'https://chtech.ncjti.edu.cn/testingServer/waiMaiAdmin/' + actionName}
-// return 'https://www.daweilinli.com/sqx_fast/' + actionName
+// return 'http://iyfpk3.natappfree.cc/sqx_fast/' + actionName
 // return 'https://mxys.chuanghai-tech.com/sqx_fast/' + actionName
 return 'https://mxys.chuanghai-tech.com/wm-test/wm-api/sqx_fast/' + actionName
 }
@@ -73,7 +73,7 @@ http.adornUrlMsg = (actionName) => {
   // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
   // return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
 // return 'https://chtech.ncjti.edu.cn/testingServer/waiMaiAdmin/' + actionName}
-// return 'https://www.daweilinli.com/sqx_fast/' + actionName
+// return 'http://iyfpk3.natappfree.cc/sqx_fast/' + actionName
 // return 'https://mxys.chuanghai-tech.com/sqx_fast/' + actionName
 return 'https://mxys.chuanghai-tech.com/wm-test/wm-api/sqx_fast/' + actionName
 }

src/views/coupon/coupon.vue

@@ -87,7 +87,7 @@
           <el-upload
             class="avatar-uploader"
             v-model="couponPicture"
-            action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+            :action="Tupiantou"
             :show-file-list="false"
             :on-success="handleAvatarSuccess1"
 :before-upload="beforeAvatarUpload"
@@ -163,7 +163,7 @@
             <el-upload
               class="avatar-uploader"
               v-model="form.couponPicture"
-              action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+              :action="Tupiantou"
               :show-file-list="false"
               :on-success="handleAvatarSuccess2"
               :before-upload="beforeAvatarUpload"

src/views/selfShop/shopAmend.vue

@@ -170,7 +170,7 @@
             <el-upload
               class="avatar-uploader"
               v-model="goodsCover"
-              action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+              :action="Tupiantou"
               :show-file-list="false"
               :on-success="handleAvatarSuccess1"
               :before-upload="beforeAvatarUpload"
@@ -212,7 +212,7 @@
           </div>
           <div>
             <el-upload
-              action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+              :action="Tupiantou"
               list-type="picture-card"
               :on-success="handleUploadSuccess"
               :on-change="handleChange"
@@ -576,7 +576,7 @@
         </div>
         <div class="imgs" style="width: 50%;">
           <el-upload
-            action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+            :action="Tupiantou"
             list-type="picture-card"
             :show-file-list="false"
             :on-success="handleUploadSuccessXq"
@@ -829,6 +829,8 @@ export default {
           // 'coverImg': this.goodsCover,
         })
       }).then(({ data }) => {
+        console.log(data,'获取单规格的sku');
+
         let returnData = data.data;
         this.valueData2 = returnData.value;
         this.headerData2 = returnData.header;
@@ -904,6 +906,8 @@ export default {
           goodsId: goodsId
         })
       }).then(({ data }) => {
+        console.log(data);
+
         let returnData = data.data;
         if (returnData.goodsPicture) {
           let imgs = returnData.goodsPicture.split(",");
@@ -1263,6 +1267,8 @@ export default {
           id: val
         })
       }).then(({ data }) => {
+        console.log(data,'查询商品规格');
+
         let returnData = data.data;
         this.ruleValue = returnData.ruleValue;
         this.attrName = returnData.ruleName;
@@ -1356,6 +1362,8 @@ export default {
           goodsId: goodsId
         })
       }).then(({ data }) => {
+        console.log(data,'初始化商品属性');
+
         let returnData = data.data;
         this.headerData = returnData.header;
         this.valueData = returnData.value;
@@ -1382,14 +1390,31 @@ export default {
       if (this.memberPrice == "") {
         this.memberPrice = "0";
       }
+      var axx = [];
+      if (Array.isArray(this.attr) && this.attr.length > 0) {
+        console.log(this.attr[0].attrValue, "ddkhg", this.attr[0]);
+        axx = this.attr[0].attrValue;
+      } else {
+        axx = [];
+      }
       this.$http({
         url: this.$http.adornUrl(
           // `admin/goods/isFormatAttr?coverImg=${this.goodsCover}&originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
-          `admin/goods/isFormatAttr?originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
+          `admin/goods/isFormatAttr` //?originalPrice=${this.originalMoney}&price=${this.goodsMoney}
         ),
         method: "post",
-        data: this.attr[0]
+        params: this.$http.adornParams({
+          originalPrice: this.originalMoney,
+          price: this.goodsMoney
+        }),
+        data: this.$http.adornData({
+          attrName: this.attr[0].attrName,
+          attrValue: axx,
+          ruleId: this.attr[0].ruleId
+        })
       }).then(({ data }) => {
+        console.log(data,'ppp');
+
         let returnData = data.data;
         this.headerData = returnData.header;
         this.valueData = returnData.value;

src/views/selfShop/shopPublish.vue

@@ -222,7 +222,7 @@
             <el-upload
               class="avatar-uploader"
               v-model="goodsCover"
-              action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+              :action="Tupiantou"
               :show-file-list="false"
               :on-success="handleAvatarSuccess1"
               :before-upload="beforeAvatarUpload"
@@ -249,7 +249,7 @@
           >
           <div>
             <el-upload
-              action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+              :action="Tupiantou"
               list-type="picture-card"
               :on-success="handleUploadSuccess"
               :on-change="handleChange"
@@ -471,7 +471,7 @@
                   <div class="imgWrap"
                     style=" width:60px;height:60px;background-color: #fbfdff; border: 1px dashed #c0ccda;border-radius: 6px;text-align: center;line-height: 60px;">
                     <el-upload style="width: 60px;height: 60px;" class="avatar-uploader" v-model="scope.row.skuImg"
-                      action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload" :show-file-list="false"
+                      :action="Tupiantou" :show-file-list="false"
                       :on-success="handleAvatarSuccess">
                       <img v-if="scope.row.skuImg" :src="scope.row.skuImg" class="avatar"
                         style="border-radius: 6px;width:60px;height: 60px;" @click="curRowIndex=scope.$index" />
@@ -658,7 +658,7 @@
         </div>
         <div class="imgs" style="width: 50%;">
           <el-upload
-            action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+            :action="Tupiantou"
             list-type="picture-card"
             :show-file-list="false"
             :on-success="handleUploadSuccessXq"
@@ -834,7 +834,7 @@ export default {
   methods: {
     beforeAvatarUpload(file) {
       return this.$processImage(this, file, false);
-    },  
+    },
     // 图标上传
     handleAvatarSuccess(file) {
       if (this.curRowIndex == 0) {
@@ -1376,14 +1376,31 @@ export default {
       if (this.memberPrice == "") {
         this.memberPrice = "0";
       }
+      var axx = [];
+      if (Array.isArray(this.attr) && this.attr.length > 0) {
+        console.log(this.attr[0].attrValue, "ddkhg", this.attr[0]);
+        axx = this.attr[0].attrValue;
+      } else {
+        axx = [];
+      }
       this.$http({
         url: this.$http.adornUrl(
           // `admin/goods/isFormatAttr?coverImg=${this.goodsCover}&originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
-          `admin/goods/isFormatAttr?originalPrice=${this.originalMoney}&price=${this.goodsMoney}`
+          `admin/goods/isFormatAttr`
         ),
         method: "post",
-        data: this.attr[0]
+        params: this.$http.adornParams({
+          originalPrice: this.originalMoney,
+          price: this.goodsMoney
+        }),
+        data: this.$http.adornData({
+          attrName: this.attr[0].attrName,
+          attrValue: axx,
+          ruleId: this.attr[0].ruleId
+        })
       }).then(({ data }) => {
+        console.log(data,'ppp');
+
         let returnData = data.data;
         this.headerData = returnData.header;
         this.valueData = returnData.value;

src/views/shopsList/merchIncome.vue

@@ -16,7 +16,7 @@
                   <el-upload
                     class="avatar-uploader"
                     v-model="logo"
-                    action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+                    :action="Tupiantou"
                     :show-file-list="false"
                     :on-success="handleAvatarSuccess"
                     :before-upload="beforeAvatarUpload"
@@ -63,7 +63,7 @@
                   </div>
                   <el-upload
                     ref="upload"
-                    action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+                    :action="Tupiantou"
                     list-type="picture-card"
                     :on-success="handleUploadSuccess"
                     :on-change="handleChange"
@@ -100,6 +100,30 @@
               <span style="color: red;" v-if="!isshow">* 请联系客服修改</span>
             </div>
             <div class="content_item">
+              <span style="width: 120px;text-align: left;display:inline-block;"
+                >商铺商户号:</span
+              >
+              <el-input
+                style="width:50%;"
+                v-if="isshow"
+                disabled
+                class="margin15"
+                placeholder="请输入商铺商户号"
+                v-model="mchId"
+                autosize
+              ></el-input>
+              <el-input
+                style="width:50%;"
+                v-if="!isshow"
+                class="margin15"
+                placeholder="请输入商铺商户号"
+                v-model="mchId"
+                disabled
+                autosize
+              ></el-input>
+              <span style="color: red;" v-if="!isshow">* 请联系客服修改</span>
+            </div>
+            <div class="content_item">
               <span>店铺地址:</span>
               <el-input
                 style="width:50%;"
@@ -728,7 +752,7 @@
           <el-upload
             class="avatar-uploader"
             v-model="tixianData.cashQrCode"
-            action="https://mxys.chuanghai-tech.com/sqx_fast/alioss/upload"
+            :action="Tupiantou"
             :show-file-list="false"
             :on-success="handleAvatarSuccess1"
             :before-upload="beforeAvatarUpload"
@@ -1074,6 +1098,7 @@ export default {
       putawayFlag: "",
       reservationOpenFlag: "",
       shopName: "",
+      mchId:'',
       businessHours: "",
       lockHours: "",
       detailedAddress: "",
@@ -1249,11 +1274,14 @@ export default {
           shopId: shopId
         })
       }).then(({ data }) => {
+        console.log(data,'店铺信息');
+
         this.tableDataLoading = false;
         let returnData = data.data;
         this.tableData = returnData;
 
         this.shopName = returnData.shopName;
+        this.mchId = returnData.mchId;
         this.businessHours = returnData.businessHours;
         this.lockHours = returnData.lockHours;
         this.detailedAddress = returnData.detailedAddress;
@@ -1337,6 +1365,7 @@ export default {
       this.img = this.imgs.join(",");
       var s = {
         shopName: this.shopName,
+        mchId:this.mchId,// 商户号
         businessHours: this.businessHours,
         lockHours: this.lockHours,
         detailedAddress: this.detailedAddress,
@@ -1364,6 +1393,7 @@ export default {
         method: "post",
         data: this.$http.adornData({
           shopName: this.shopName,
+          mchId:this.mchId,// 商户号
           businessHours: this.businessHours,
           lockHours: this.lockHours,
           detailedAddress: this.detailedAddress,