修复热区移动bug

manager/src/components/hotzone/components/Hotzone.vue

@@ -91,19 +91,54 @@ export default {
     this.zones = this.zonesInit.concat();
   },
   methods: {
-    addHotzone() {
+    async addHotzone() {
       let perInfo = {
         topPer: 0.15,
-        leftPer: 0.4,
+        leftPer: 0.3,
         widthPer: 0.2,
-        heightPer: 0.05,
+        heightPer: 0.2,
         img: "",
         link: "",
         type: "",
         title: "",
       };
+      let images = await this.getImageSize(this.image);
+      if (images) {
+        if (images.height >= 1000) {
+          perInfo.heightPer = this.convertNumberToDecimal(images.height) / (images.height / 1000);
+        } else {
+          perInfo.heightPer = this.convertNumberToDecimal(images.height);
+        }
+        perInfo.widthPer = this.convertNumberToDecimal(images.width) / 2;
+      }
       this.addItem(perInfo);
     },
+    convertNumberToDecimal(num) {
+      if (num >= 10000) {
+        return num / 100000;
+      } else if (num >= 1000) {
+        return num / 10000;
+      } else if (num >= 100) {
+        return num / 1000;
+      } else if (num >= 10) {
+        return num / 100;
+      }
+    },
+    getImageSize(url) {
+      return new Promise(function (resolve, reject) {
+        let image = new Image();
+        image.onload = function () {
+          resolve({
+            width: image.width,
+            height: image.height,
+          });
+        };
+        image.onerror = function () {
+          reject(new Error("error"));
+        };
+        image.src = url;
+      });
+    },
     editZone(index) {
       this.$refs[`zone${index}`][0].showModalFn(index);
     },
@@ -111,8 +146,8 @@ export default {
       this.$refs[`zone${index}`][0].delItem(index);
     },
     showZoneText(zone) {
-      switch(zone.type) {
-        case 'goods':
+      switch (zone.type) {
+        case "goods":
           return `商品：${zone.goodsName}`;
         case "category":
           return `分类：${zone.name}`;
@@ -122,10 +157,10 @@ export default {
           return `文章：${zone.title}`;
         case "marketing":
           return `促销活动商品：${zone.goodsName}`;
-          case "other":
-            return `${zone.title}`;
+        case "other":
+          return `${zone.title}`;
         default:
-          return '请选择跳转链接';
+          return "请选择跳转链接";
       }
     },
     changeInfo(res) {

manager/src/components/hotzone/components/Zone.vue

@@ -137,10 +137,8 @@ export default {
       this.zoneWidth = this.getZoneStyle(val.widthPer);
       this.zoneHeight = this.getZoneStyle(val.heightPer);
       this.tooSmall = val.widthPer < 0.01 && val.heightPer < 0.01;
-      this.zoneForm = {
-        ...val,
-        ...this.zoneForm,
-      };
+      this.zoneForm.link = val.link;
+      this.settingZone(val);
     },
     handlehideZone(isHide = true) {
       if (this.hideZone === isHide) {
@@ -161,7 +159,6 @@ export default {
     showModalFn(index) {
       this.showModal = true;
       this.currentIndex = index;
-      console.log(this.zoneForm);
     },
     // 选择图片
     handleSelectImg() {
@@ -182,7 +179,11 @@ export default {
     // 已选链接
     selectedLink(val) {
       this.zoneForm.link = this.$options.filters.formatLinkType(val);
-      this.zoneForm.type = val.___type;
+      this.settingZone(val);
+      this.changeInfo(this.zoneForm);
+    },
+    settingZone(val) {
+      this.zoneForm.type = val.___type || val.type;
       this.zoneForm.title = val.title;
       switch (val.___type) {
         case "goods":
@@ -211,7 +212,6 @@ export default {
         default:
           break;
       }
-      this.changeInfo(this.zoneForm);
     },
     saveZone() {},
     cancelZone() {