From b99db4c6733ca5360b608210b31860c7e8f650ec Mon Sep 17 00:00:00 2001
From: paulGao <paulgao0831@gmail.com>
Date: Wed, 7 Sep 2022 15:17:34 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=83=AD=E5=8C=BA=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/hotzone/components/Hotzone.vue | 51 ++++++++++++++++---
 .../components/hotzone/components/Zone.vue    | 14 ++---
 2 files changed, 50 insertions(+), 15 deletions(-)

diff --git a/manager/src/components/hotzone/components/Hotzone.vue b/manager/src/components/hotzone/components/Hotzone.vue
index 614e8488..68168df3 100644
--- a/manager/src/components/hotzone/components/Hotzone.vue
+++ b/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) {
diff --git a/manager/src/components/hotzone/components/Zone.vue b/manager/src/components/hotzone/components/Zone.vue
index 113458b4..d9d2df9e 100644
--- a/manager/src/components/hotzone/components/Zone.vue
+++ b/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() {