管理端楼层装修增加热区功能

manager/src/components/hotzone/assets/styles/main.css

@@ -8,7 +8,7 @@
   width: 100%;
   max-width: 100%;
   height: auto;
-  max-height: 100%;
+  /* max-height: 100%; */
   user-select: none;
 }
 

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

@@ -1,17 +1,65 @@
 <template>
-  <div ref="content" class="hz-m-wrap">
-    <img class="hz-u-img" :src="image" />
-    <ul class="hz-m-area" v-add-item>
-      <zone
-        class="hz-m-item"
-        v-for="(zone, index) in zones"
-        :key="index"
-        :index="index"
-        :setting="zone"
-        @delItem="removeItem($event)"
-        @changeInfo="changeInfo($event)"
-      ></zone>
-    </ul>
+  <div class="hotzone-box">
+    <div class="hotzone-item">
+      <div ref="content" class="hz-m-wrap">
+        <img class="hz-u-img" :src="image" />
+        <ul class="hz-m-area" v-add-item>
+          <zone
+            class="hz-m-item"
+            v-for="(zone, index) in zones"
+            :key="index"
+            :index="index"
+            :setting="zone"
+            :ref="`zone${index}`"
+            @delItem="removeItem($event)"
+            @changeInfo="changeInfo($event)"
+          ></zone>
+        </ul>
+      </div>
+    </div>
+    <div>
+      <div class="hotzone-add-box-body">
+        <div
+          v-for="(zone, index) in zones"
+          :key="index"
+          class="hotzone-box-item-main"
+        >
+          <div class="hotzone-box-item wes-2">
+            <div>{{ index + 1 }}</div>
+            <div @click="editZone(index)">
+              <div class="hotzone-box-item-text">
+                {{ showZoneText(zone) }}
+              </div>
+            </div>
+            <div class="flex">
+              <div class="hotzone-btn" @click="editZone(index)">修改</div>
+              &nbsp;&nbsp;&nbsp;&nbsp;
+              <div class="hotzone-btn" @click="delZone(index)">删除</div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="hotzone-add-box-footer" @click="addHotzone">
+        <svg
+          viewBox="64 64 896 896"
+          focusable="false"
+          class=""
+          data-icon="plus"
+          width="1em"
+          height="1em"
+          fill="currentColor"
+          aria-hidden="true"
+        >
+          <path
+            d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+          ></path>
+          <path
+            d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+          ></path>
+        </svg>
+        <div class="hotzone-add-box-text">添加热区</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -43,6 +91,43 @@ export default {
     this.zones = this.zonesInit.concat();
   },
   methods: {
+    addHotzone() {
+      let perInfo = {
+        topPer: 0.15,
+        leftPer: 0.4,
+        widthPer: 0.2,
+        heightPer: 0.05,
+        img: "",
+        link: "",
+        type: "",
+        title: "",
+      };
+      this.addItem(perInfo);
+    },
+    editZone(index) {
+      this.$refs[`zone${index}`][0].showModalFn(index);
+    },
+    delZone(index) {
+      this.$refs[`zone${index}`][0].delItem(index);
+    },
+    showZoneText(zone) {
+      switch(zone.type) {
+        case 'goods':
+          return `商品：${zone.goodsName}`;
+        case "category":
+          return `分类：${zone.name}`;
+        case "shops":
+          return `店铺：${zone.storeName}`;
+        case "pages":
+          return `文章：${zone.title}`;
+        case "marketing":
+          return `促销活动商品：${zone.goodsName}`;
+          case "other":
+            return `${zone.title}`;
+        default:
+          return '请选择跳转链接';
+      }
+    },
     changeInfo(res) {
       let { info, index, zoneInfo } = res;
       info = { ...zoneInfo, ...info };
@@ -96,6 +181,77 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 @import "../assets/styles/main.css";
+.hotzone-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 468px;
+  > div {
+    margin: 6px;
+    padding: 12px;
+    border-radius: 10px;
+    height: 100%;
+  }
+  > div:nth-of-type(1) {
+    // display: flex;
+    width: 50%;
+    overflow: auto;
+    // justify-content: center;
+    background: #ededed;
+  }
+  > div:nth-of-type(2) {
+    width: 50%;
+    background: #f7f7f7;
+  }
+}
+
+.hotzone-add-box-body {
+  height: 90%;
+  overflow-y: auto;
+}
+
+.hotzone-box-item-main {
+  margin-top: 10px;
+  margin-bottom: 20px;
+}
+
+.hotzone-box-item {
+  align-items: center;
+  display: flex;
+  border-bottom: 1px solid #ededed;
+  font-size: 12px;
+  justify-content: space-between;
+  padding: 5px 10px 0;
+  width: 100%;
+}
+
+.hotzone-add-box-footer {
+  align-items: center;
+  background: #fff;
+  border: none;
+  border-radius: 5px;
+  color: #ff5c58;
+  display: flex;
+  height: 40px;
+  justify-content: center;
+  margin-top: 10px;
+  cursor: pointer;
+}
+
+.hotzone-btn {
+  cursor: pointer;
+}
+
+.hotzone-box-item-text {
+  width: 200px;
+  cursor: pointer;
+}
+
+.hotzone-add-box-text {
+  font-size: 12px;
+  line-height: 20px;
+  margin: 0 0 0 4px;
+}
 </style>

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

@@ -50,6 +50,7 @@
       <li class="hz-u-square hz-u-square-bc" data-pointer="dealBC"></li>
       <li class="hz-u-square hz-u-square-br" data-pointer="dealBR"></li>
     </ul>
+   
     <Modal
       v-model="showModal"
       title="编辑热区"
@@ -58,11 +59,7 @@
       :mask="false"
       ok-text="保存"
       @on-ok="saveZone"
-      @on-cancel="
-        () => {
-          showModal = false;
-        }
-      "
+      @on-cancel="cancelZone"
     >
       <div>
         <div class="hz-edit-img">
@@ -70,14 +67,15 @@
         </div>
 
         <Form :model="zoneForm" :label-width="80">
-          <FormItem label="图片链接：">
+          <!-- <FormItem label="图片链接：">
             <Input v-model="zoneForm.img"></Input>
             <Button size="small" type="primary" @click="handleSelectImg"
               >选择图片</Button
             >
-          </FormItem>
+            :v-model="zoneForm.type === 'goods' ? zoneForm.goodsName : zoneForm.link"
+          </FormItem> -->
           <FormItem label="跳转链接：">
-            <Input v-model="zoneForm.link"></Input>
+            <Input type="textarea" v-if="zoneForm.type === 'other' && zoneForm.title === '外部链接'" v-model="zoneForm.link" ></Input>
             <Button size="small" type="primary" @click="handleSelectLink"
               >选择链接</Button
             >
@@ -108,6 +106,7 @@ export default {
   components: {
     ossManage,
   },
+
   data() {
     return {
       zoneTop: "",
@@ -119,6 +118,7 @@ export default {
       showModal: false,
       picModelFlag: false,
       currentIndex: 0,
+      currentShowIndex: -1,
       zoneForm: {
         img: "",
         link: "",
@@ -126,10 +126,8 @@ export default {
       },
     };
   },
-
   props: ["index", "setting"],
   mounted() {
-    console.log(this.setting);
     this.setZoneInfo(this.setting);
   },
   methods: {
@@ -139,9 +137,10 @@ 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.img = val.img;
-      this.zoneForm.link = val.link;
-      this.zoneForm.type = val.type;
+      this.zoneForm = {
+        ...val,
+        ...this.zoneForm,
+      };
     },
     handlehideZone(isHide = true) {
       if (this.hideZone === isHide) {
@@ -162,6 +161,7 @@ export default {
     showModalFn(index) {
       this.showModal = true;
       this.currentIndex = index;
+      console.log(this.zoneForm);
     },
     // 选择图片
     handleSelectImg() {
@@ -183,8 +183,40 @@ export default {
     selectedLink(val) {
       this.zoneForm.link = this.$options.filters.formatLinkType(val);
       this.zoneForm.type = val.___type;
+      this.zoneForm.title = val.title;
+      switch (val.___type) {
+        case "goods":
+          this.zoneForm.id = val.id;
+          this.zoneForm.goodsId = val.goodsId;
+          this.zoneForm.goodsName = val.goodsName;
+          break;
+        case "category":
+          this.zoneForm.id = val.allId;
+          this.zoneForm.name = val.name;
+          break;
+        case "shops":
+          this.zoneForm.id = val.id;
+          this.zoneForm.storeName = val.storeName;
+          break;
+        case "pages":
+          this.zoneForm.id = val.id;
+          this.zoneForm.___path = val.___path;
+          this.zoneForm.title = val.title;
+          break;
+        case "marketing":
+          this.zoneForm.id = val.id;
+          this.zoneForm.goodsId = val.goodsId;
+          this.zoneForm.goodsName = val.goodsName;
+          break;
+        default:
+          break;
+      }
+      this.changeInfo(this.zoneForm);
     },
     saveZone() {},
+    cancelZone() {
+      this.showModal = false;
+    },
     delZone() {
       this.delItem(this.currentIndex);
     },

manager/src/components/hotzone/directives/addItem.js

@@ -4,10 +4,10 @@ export default {
   bind: function (el, binding, vnode) {
     const MIN_LIMIT = _.MIN_LIMIT
 
-    el.addEventListener('mousedown', handleMouseDown,{ passive: false })
+    el.addEventListener('mousedown', handleMouseDown, { passive: false })
 
-    function handleMouseDown (e) {
-      console.log('additem', e)
+    function handleMouseDown(e) {
+      // console.log('additem', e)
       e && e.preventDefault()
 
       let itemInfo = {
@@ -30,10 +30,10 @@ export default {
 
       vnode.context.addItem(setting)// 这里去添加并发送了add通知，不应该发送通知
 
-      window.addEventListener('mousemove', handleChange,{ passive: false })
-      window.addEventListener('mouseup', handleMouseUp,{ passive: false })
+      window.addEventListener('mousemove', handleChange, { passive: false })
+      window.addEventListener('mouseup', handleMouseUp, { passive: false })
 
-      function handleChange (e) {
+      function handleChange(e) {
         e && e.preventDefault()
 
         let moveX = _.getPageX(e) - preX
@@ -57,7 +57,7 @@ export default {
         })
       }
 
-      function handleMouseUp () {
+      function handleMouseUp() {
         let perInfo = {
           topPer: _.decimalPoint(itemInfo.top / container.height),
           leftPer: _.decimalPoint(itemInfo.left / container.width),
@@ -66,6 +66,7 @@ export default {
           img: "",
           link: "",
           type: "",
+          title: ""
         }
 
         if (vnode.context.isOverRange()) {

manager/src/components/hotzone/index.js

@@ -1,4 +1,4 @@
-import hotzone from './components/Hotzone.vue'
+import hotzone from './index.vue'
 
 hotzone.install = (Vue) => {
   Vue.component(hotzone.name, hotzone)

manager/src/components/hotzone/index.vue

@@ -0,0 +1,69 @@
+<template>
+  <Modal
+    :styles="{ top: '120px' }"
+    width="800"
+    @on-cancel="clickClose"
+    @on-ok="clickOK"
+    v-model="flag"
+    :mask-closable="false"
+    title="绘制热区"
+    scrollable
+  >
+    <template v-if="flag">
+      <hotzone
+        ref="hotzone"
+        @change="changeHotzone"
+        :zonesInit="res.zoneInfo"
+        :image="res.img"
+      ></hotzone>
+    </template>
+  </Modal>
+</template>
+<script>
+import hotzone from "./components/Hotzone.vue";
+
+export default {
+  components: {
+    hotzone,
+  },
+  data() {
+    return {
+      flag: false, // modal显隐
+    };
+  },
+  props: ["res"],
+  mounted() {},
+  methods: {
+    changeHotzone(info) {
+      this.$emit("changeZone", info);
+    },
+    // 关闭弹窗
+    clickClose() {
+      this.$emit("closeFlag", false);
+    },
+    // 点击确认
+    clickOK() {
+      this.clickClose();
+    },
+    // 打开组件方法
+    open(type, mutiple) {
+      this.flag = true;
+    },
+    // 关闭组件
+    close() {
+      this.flag = false;
+    },
+  },
+};
+</script>
+<style scoped lang="scss">
+/deep/ .ivu-modal {
+  overflow: hidden;
+  height: 650px !important;
+}
+/deep/ .ivu-modal-body {
+  width: 100%;
+  height: 500px;
+  overflow: hidden;
+}
+</style>

manager/src/components/lili-dialog/template/marketing.vue

@@ -380,7 +380,7 @@ export default {
     getPromotion(res) {
       if (res.result) {
         this.promotionList = res.result;
-        this.typeOption(Object.keys(res.result)[0]).methodsed();
+        Object.keys(res.result)[0] && this.typeOption(Object.keys(res.result)[0]).methodsed();
       }
 
       // if (Object.keys(res.result).length) {