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

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>