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

2025-12-19 17:35:53 +08:00 · 2022-09-06 19:45:02 +08:00
parent 55aa57d812
commit f6ff0b8a12
11 changed files with 380 additions and 95 deletions
--- a/manager/src/views/page-decoration/wap/config.js
+++ b/manager/src/views/page-decoration/wap/config.js
@@ -21,11 +21,31 @@ export let homeData = {};
 * close:true 右侧关闭按钮
 */
 export const modelData = [
+
+  {
+    type: "flexOne",
+    name: "图片",
+    // drawer: true,
+    notAdd: true,
+    onlyImg: true,
+    img: "md-image",
+    options: {
+      list: [
+        {
+          img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
+          url: "",
+          link: "",
+          size: "750*280",
+          model: "link"
+        }
+      ]
+    }
+  },
  {
    type: "carousel",
-    name: "图片轮播",
+    name: "轮播图",
    img: "md-image",
-    onlyImg: true,
+    // onlyImg: true,
    notTitle: false,
    close: true,
    options: {
@@ -59,7 +79,7 @@ export const modelData = [
    name: "左一右二",
    notAdd: true,
    drawer: true,
-    onlyImg: true,
+    // onlyImg: true,
    view: "tpl_ad_list",
    img: "md-image",
    options: {
@@ -116,7 +136,7 @@ export const modelData = [
    name: "左二右一",
    notAdd: true,
    drawer: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
@@ -149,7 +169,7 @@ export const modelData = [
    name: "三列单行",
    drawer: true,
    notAdd: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
@@ -177,31 +197,12 @@ export const modelData = [
      ]
    }
  },
-  {
-    type: "flexOne",
-    name: "一张大图",
-    drawer: true,
-    notAdd: true,
-    onlyImg: true,
-    img: "md-image",
-    options: {
-      list: [
-        {
-          img: "https://i.loli.net/2020/12/05/8wSNWbnqujDh6HL.png",
-          url: "",
-          link: "",
-          size: "750*280",
-          model: "link"
-        }
-      ]
-    }
-  },
  {
    type: "flexTwo",
    name: "两张横图",
    drawer: true,
    notAdd: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
@@ -227,7 +228,7 @@ export const modelData = [
    name: "上一下二",
    drawer: true,
    notAdd: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
@@ -260,7 +261,7 @@ export const modelData = [
    name: "上二下一",
    drawer: true,
    notAdd: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
@@ -293,7 +294,7 @@ export const modelData = [
    name: "五列单行",
    drawer: true,
    notAdd: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
@@ -340,7 +341,7 @@ export const modelData = [
    name: "四列单行",
    drawer: true,
    notAdd: true,
-    onlyImg: true,
+    // onlyImg: true,
    img: "md-image",
    options: {
      list: [
--- a/manager/src/views/page-decoration/wap/decorate.vue
+++ b/manager/src/views/page-decoration/wap/decorate.vue
@@ -145,7 +145,7 @@
            <div>
              <img class="show-image" :src="item.img" alt />

-              <div class="tips">
+              <div class="tips" v-if="!res.onlyImg">
                建议尺寸
                <span>{{ item.size }}</span>
              </div>
@@ -302,8 +302,19 @@

          <!-- 填写链接 -->

-          <div class="decorate-view" v-if="!res.notLink">
+          <div class="decorate-view" v-if="res.onlyImg">
            <div class="decorate-view-title">选择模式</div>
+
+            <div>
+              <RadioGroup v-model="item.model" type="button">
+                <Radio value="link" label="link">链接</Radio>
+                <Radio value="hotzone" label="hotzone">热区</Radio>
+              </RadioGroup>
+            </div>
+          </div>
+
+          <div class="decorate-view" v-if="!res.notLink">
+            <div class="decorate-view-title">选择链接</div>
            <div
              v-if="item.url && item.url.length != 0"
              class="decorate-view-link"
@@ -349,34 +360,31 @@
                >
              </span>
            </div>
-
            <div>
-              <RadioGroup
-                @on-change="clickLink(item, index, res)"
-                v-model="item.model"
-                type="button"
+              <Button
+                ghost
+                size="small"
+                type="primary"
+                @click="clickLink(item, index, res)"
+              >
+                {{ item.model === "hotzone" ? "绘制热区" : "选择链接" }}</Button
              >
-                <Radio value="link" label="link">链接</Radio>
-                <Radio v-if="res.onlyImg" value="hotzone" label="hotzone"
-                  >热区</Radio
-                >
-              </RadioGroup>
            </div>
-          </div>
-          <!-- 链接地址-->
-          <div
-            class="decorate-view"
-            v-if="item.url && item.url.url && item.url.___type == 'other'"
-          >
-            <div class="decorate-view-title">外部链接</div>
-            <div>
-              <Input v-model="item.url.url" style="width: 200px" />
+            <!-- 链接地址-->
+            <div
+              class="decorate-view"
+              v-if="item.url && item.url.url && item.url.___type == 'other'"
+            >
+              <div class="decorate-view-title">外部链接</div>
+              <div>
+                <Input v-model="item.url.url" style="width: 200px" />
+              </div>
            </div>
-          </div>

-          <p v-if="item.url && item.url.url && item.url.___type == 'other'">
-            (如非同域名下，则在小程序与公众号中无效)
-          </p>
+            <p v-if="item.url && item.url.url && item.url.___type == 'other'">
+              (如非同域名下，则在小程序与公众号中无效)
+            </p>
+          </div>
        </div>
      </div>
    </div>
@@ -400,6 +408,8 @@
      @selectedGoodsData="selectedGoodsData"
    ></liliDialog>

+    <hotzone ref="hotzone" @changeZone="changeZone"></hotzone>
+
    <Modal width="1200px" v-model="picModelFlag">
      <ossManage @callback="callbackSelected" ref="ossManage" />
    </Modal>
@@ -408,10 +418,12 @@
 <script>
 import ossManage from "@/views/sys/oss-manage/ossManage";
 import { modelData } from "./config";
+import hotzone from "@/components/hotzone";
 import ways from "@/components/lili-dialog/wap.js"; // 选择链接的类型
 export default {
  components: {
    ossManage,
+    hotzone,
  },
  data() {
    return {
@@ -455,6 +467,9 @@ export default {
    },
    // 回调选择的链接
    selectedLink(val) {
+      delete val.selected;
+      delete val.intro;
+      delete val.mobileIntro;
      this.selectedLinks.url = val;
    },
    // 回调的商品信息
@@ -498,11 +513,23 @@ export default {
    },
    // 点击链接赋值一个唯一值，并将当前选择的模块赋值
    clickLink(val, index, oval) {
-      if (val.model === "link") {
-        this.selectedLinks = val;
+      this.selectedLinks = val;
+      if (val.model === "hotzone") {
+        if (!val.zoneInfo) {
+          val.zoneInfo = [];
+        }
+        this.$refs.hotzone.flag = true;
+        this.$refs.hotzone.res = val;
+      } else {
        this.liliDialogFlag(false);
      }
    },
+    addZone(zoneInfo) {
+      this.selectedLinks.zoneInfo.push(zoneInfo);
+    },
+    changeZone(zoneInfo) {
+      this.selectedLinks.zoneInfo = zoneInfo;
+    },
    //点击图片解析成base64
    changeFile(item, index) {
      const file = document.getElementById("files" + index).files[0];
--- a/manager/src/views/page-decoration/wap/navbar.vue
+++ b/manager/src/views/page-decoration/wap/navbar.vue
@@ -153,7 +153,7 @@ export default {
    // 返回查询数据页面
    goback() {
      this.$router.push({
-        path: "/wapList",
+        path: "/decoration/wap",
      });
    },

--- a/manager/src/views/page-decoration/wap/template/tpl_flex_one.vue
+++ b/manager/src/views/page-decoration/wap/template/tpl_flex_one.vue
@@ -15,7 +15,6 @@ export default {
 .flex-one{
    width: 100%;
    display: block;
-    height: 110px;
    overflow: hidden;
    >img{
        width: 100%;