feat: 🎨 新增加专题功能

manager/src/api/other.js

@@ -90,3 +90,12 @@ export const getMemberFeedbackDetail = (id) => {
 export const getMemberMessage = (params) => {
   return getRequest(`/other/memberMessage`, params);
 };
+
+// 弹窗广告
+export const getOpenHomeData = params => {
+  return getRequest(`/other/pageData/pageType/${params}`);
+};
+// 保存修改弹窗广告
+export const addOpenHomeData = params => {
+  return postRequest(`/other/pageData/pageType/${params}`);
+};

manager/src/components/lili-dialog/template/index.js

@@ -5,6 +5,7 @@ import marketing from './marketing.vue'
 import pages from './pages.vue'
 import goods from '../goods-dialog.vue'
 import other from './other.vue'
+import special from './special.vue'
 export default {
   pages,
   marketing,
@@ -12,4 +13,5 @@ export default {
   category,
   goods,
   other,
+  special
 }

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

@@ -0,0 +1,167 @@
+<template>
+  <div class="wrapper">
+    <div class="content">
+      <div >
+        <div class="tables">
+          <Table
+           border
+            height="350"
+            tooltip
+            :loading="loading"
+            :columns="columns"
+            :data="data"
+          >
+          </Table>
+
+          <Page
+            @on-change="
+              (val) => {
+                params.pageNumber = val;
+              }
+            "
+            :current="params.pageNumber"
+            :page-size="params.pageSize"
+            class="mt_10"
+            :total="Number(totals)"
+            size="small"
+            show-elevator
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import { getHomeList }  from "@/api/other.js";
+export default {
+  data() {
+    return {
+
+      loading: true, //表格请求数据为true
+      promotionList: "", // 活动列表
+      selectedIndex: 0, //左侧菜单选择
+      promotions: "", //选中的活动key
+      index: 999, // 已选下标
+      data:[],
+      params: {
+        sort: "createTime",
+        order: "desc",
+        pageClientType: "H5",
+        pageNumber: 1,
+        pageSize: 10,
+        pageType: "SPECIAL",
+      },
+      total: 0, // 表单数据总数
+      columns: [
+        {
+          title: "专题名称",
+          key: "name",
+          tooltip: true,
+          // slot: 'name'
+        //   width: 200,
+        },
+        {
+          title: "操作",
+          key: "action",
+          fixed: "right",
+          width: 100,
+          render: (h, params) => {
+            return h("div", [
+              h(
+                "Button",
+                {
+                  props: {
+                    type: this.index == params.index ? "primary" : "",
+                    size: "small",
+                  },
+                  on: {
+                    click: () => {
+                      this.index = params.index;
+                      params.row = {...params.row,pageType:'special'}
+                      this.$emit("selected", [params.row]);
+                    },
+                  },
+                },
+                this.index == params.index ? "已选" : "选择"
+              ),
+            ]);
+          },
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.init();
+  },
+
+  methods: {
+    // 获取话题的标题
+    async init() {
+      let res = await getHomeList(this.params);
+      if (res.success) {
+        this.loading = false;
+         this.data= res.result.records
+      } else {
+        this.loading = false;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+img {
+  max-width: 100% !important;
+}
+.search {
+  width: 300px;
+}
+.page {
+  margin-top: 2vh;
+  text-align: right;
+}
+.time {
+  font-size: 12px;
+}
+.tables {
+  height: 400px;
+  margin-top: 20px;
+  overflow: auto;
+  width: 100%;
+}
+/deep/ .ivu-table-wrapper {
+  width: 100%;
+}
+.list {
+  margin: 0 1.5%;
+  height: 400px;
+  overflow: auto;
+  > .list-item {
+    padding: 10px;
+    transition: 0.35s;
+    cursor: pointer;
+  }
+  .list-item:hover {
+    background: #ededed;
+  }
+}
+.list {
+  flex: 1;
+  width: auto;
+}
+.content {
+  overflow: hidden;
+  flex: 4;
+}
+.active {
+  background: #ededed;
+}
+.wrapper {
+  overflow: hidden;
+}
+.search-views {
+  display: flex;
+  > * {
+    margin: 0 4px;
+  }
+}
+</style>

manager/src/components/lili-dialog/wap.js

@@ -25,6 +25,11 @@ export default [
     url: "3",
     name: "pages"
   },
+  {
+    title: "专题",
+    url: "4",
+    name: "special"
+  },
   {
     title: "其他",
     url: "3",

manager/src/store/index.js

@@ -10,7 +10,8 @@ Vue.use(Vuex);
 const store = new Vuex.Store({
   state: {
     // 状态
-
+    openStyleStore: "", // 移动端楼层装修中选择风格存储
+    openStoreId:"",
     notices: "" //通知提示信息
   },
   mutations: {

manager/src/views/page-decoration/wap/advertising.vue

@@ -70,17 +70,24 @@
           </div>
         </div>
         <!-- <Button type="primary" @click="addDecorate()" ghost>添加</Button> -->
-        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+        <liliDialog ref="liliDialog"    @selectedLink="selectedLink" :types="linkType"></liliDialog>
       </div>
+      <Modal width="1200px" v-model="picModelFlag">
+         <ossManage @callback="callbackSelected" ref="ossManage" />
+      </Modal>
     </div>
   </div>
 </template>
 <script>
-
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import * as API_Other from "@/api/other.js";
 export default {
+   components: {
+    ossManage,
+  },
   data() {
     return {
-
+      picModelFlag: false, //图片选择器
       type: "full", // 是否全屏
 
       //全屏广告
@@ -91,31 +98,60 @@ export default {
           size: "750*1624",
         },
       ],
-
+      selectedLinks: {},
       linkType: "", // 选择类型
     };
+  },
+   watch: {
+    advertising: {
+      handler(val) {
+        this.$store.state.openStyleStore = val;
+        console.log(
+          "this.$store.state.openStyleStore",
+          this.$store.state.openStyleStore
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.openPage();
   },
   methods: {
+    openPage() {
+      const alertType = this.$route.query.pagetype;
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[alertType ? alertType : "INDEX"];
+
+      API_Other.getOpenHomeData(pageType).then((res) => {
+        this.$store.state.openStoreId = res.result.id;
+        res.result.pageData
+          ? this.$set(this, "advertising", [JSON.parse(res.result.pageData)])
+          : "";
+      });
+    },
     // 点击链接
     clickLink(item) {
       this.$refs.liliDialog.open('link')
     },
-    //点击图片解析成base64
+    // 回调选择的链接
-    changeFile(item, index) {
+    selectedLink(val) {
-      const file = document.getElementById("files" + index).files[0];
+      this.selectedLinks.url = val;
-      if (file == void 0) return false;
+
-      const reader = new FileReader();
+      this.advertising[0].config = val;
-      reader.readAsDataURL(file);
-      this.$nextTick((res) => {
-        reader.onload = (e) => {
-          item.img = e.target.result;
-        };
-      });
     },
     // 点击选择照片
-    handleClickFile(item, index) {
+    handleClickFile() {
-      document.getElementById("files" + index).click();
+      this.$refs.ossManage.selectImage = true;
-    },
+      this.picModelFlag = true;
+    }, // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.advertising[0].img = val.url;
+    }
   },
 };
 </script>

manager/src/views/page-decoration/wap/alertAdvertising.vue

@@ -48,7 +48,7 @@
                     @click="handleClickFile(item, index)"
                     ghost
                     type="primary"
-                    >选择照片</Button
+                    >选择链接</Button
                   >
                 </div>
               </div>
@@ -69,15 +69,28 @@
             </div>
           </div>
         </div>
-        <liliDialog ref="liliDialog" :types="linkType"></liliDialog>
+        <liliDialog
+          ref="liliDialog"
+          @selectedLink="selectedLink"
+          :types="linkType"
+        ></liliDialog>
       </div>
+      <Modal width="1200px" v-model="picModelFlag">
+      <ossManage @callback="callbackSelected" ref="ossManage" />
+    </Modal>
     </div>
   </div>
 </template>
 <script>
+import ossManage from "@/views/sys/oss-manage/ossManage";
+import * as API_Other from "@/api/other.js";
 export default {
+   components: {
+    ossManage,
+  },
   data() {
     return {
+      picModelFlag: false, //图片选择器
       type: "full", // 展示方式
       //全屏广告
       advertising: [
@@ -88,9 +101,57 @@ export default {
         },
       ],
       linkType: "", // 选择类型
+      selectedLinks: {},
     };
   },
+
+  watch: {
+    advertising: {
+      handler(val) {
+        this.$store.state.openStyleStore = val;
+        console.log(
+          "this.$store.state.openStyleStore",
+          this.$store.state.openStyleStore
+        );
+      },
+      deep: true,
+    },
+  },
+  mounted() {
+    this.openPage();
+  },
   methods: {
+    // 回调选择的链接
+    selectedLink(val) {
+      this.selectedLinks.url = val;
+
+      this.advertising[0].config = val;
+    },
+    openPage() {
+      const alertType = this.$route.query.pagetype;
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[alertType ? alertType : "INDEX"];
+
+      API_Other.getOpenHomeData(pageType).then((res) => {
+        this.$store.state.openStoreId = res.result.id;
+        res.result.pageData
+          ? this.$set(this, "advertising", [JSON.parse(res.result.pageData)])
+          : "";
+      });
+    },
+    // 图片选择器回显
+    callbackSelected(val) {
+      this.picModelFlag = false;
+      this.advertising[0].img = val.url;
+    },
+    // 点击选择图片
+    handleClickFile(item, index) {
+      this.$refs.ossManage.selectImage = true;
+      this.picModelFlag = true;
+    },
     // 点击链接
     clickLink(item) {
       this.$refs.liliDialog.open('link')
@@ -107,10 +168,7 @@ export default {
         };
       });
     },
-    // 点击选择照片
+
-    handleClickFile(item, index) {
-      document.getElementById("files" + index).click();
-    },
   },
 };
 </script>

manager/src/views/page-decoration/wap/decorate.vue

@@ -139,6 +139,20 @@
               </div>
             </div>
           </div>
+          <div class="decorate-view" v-if="res.type == 'carousel'">
+            <div class="decorate-view-title">
+              <Button
+                @click="slotBanner(res, item, index, 'up')"
+                style="margin-right: 10px"
+                size="small"
+                >上移</Button
+              ><Button
+                @click="slotBanner(res, item, index, 'down')"
+                size="small"
+                >下移</Button
+              >
+            </div>
+          </div>
           <!-- 选择照片 -->
           <div class="decorate-view" v-if="!res.notImg">
             <div class="decorate-view-title">选择照片</div>
@@ -325,9 +339,15 @@
                 {{
                   ways.find((e) => {
                     return item.url.___type == e.name;
-                  }).title
+                  }) ? ways.find((e) => {
+                    return item.url.___type == e.name;
+                  }).title : '发现'
                 }}
                 -
+                <!-- 当选择完链接之后的专题名称 -->
+                <span v-if="item.url.pageType == 'special'">
+                  {{ item.url.name }}</span
+                >
                 <!-- 当选择完链接之后的商品名称 -->
                 <span v-if="item.url.___type == 'goods'">
                   {{ item.url.goodsName }}</span
@@ -450,6 +470,32 @@ export default {
   },
   props: ["res"],
   methods: {
+     slotBanner(val, key, index, down) {
+      console.log(val);
+      if (down == "down") {
+        this.downData(val.options.list, index);
+      } else {
+        this.upData(val.options.list, index);
+      }
+    },
+    upData(arr, index) {
+      let newArr = [];
+      if (arr.length > 1 && index !== 0) {
+        newArr = this.swapItems(arr, index, index - 1);
+      }
+      return newArr;
+    },
+    swapItems(arr, index1, index2) {
+      arr[index1] = arr.splice(index2, 1, arr[index1])[0];
+      return arr;
+    },
+    downData(arr,index) {
+      let newArr = [];
+      if (arr.length > 1 && index !== arr.length - 1) {
+        newArr = this.swapItems(arr, index, index + 1);
+      }
+      return newArr;
+    },
     // 改变横纵切换title内容
     changeDirection(val, data) {
       if (val == "horizontal") {
@@ -558,7 +604,7 @@ export default {
           title: "标题",
           link: "",
           url: "",
-          size: this.res.options.list[0].size,
+          size: this.res.options.list[0] ? this.res.options.list[0].size : "",
           model: "link",
         };
         this.res.options.list.push(way);

manager/src/views/page-decoration/wap/main.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="box">
     <!-- 顶部栏 -->
-    <navbar @selected="selected" />
+    <navbar @selected="selected" :pagetype="pagetype" />
 
     <component :is="layout[name]"></component>
   </div>
@@ -17,8 +17,18 @@ export default {
     return {
       layout, // 装修模块
       name: "index", // 装修的页面
+      pagetype: "INDEX",
     };
   },
+  mounted() {
+    if (this.$route.query.pagetype == "ALERT") {
+      this.name = "alertAdvertising";
+    }
+    if (this.$route.query.pagetype == "OPEN_SCREEN_ANIMATION") {
+      this.name = "advertising";
+    }
+    this.pagetype = this.$route.query.pagetype;
+  },
   methods: {
     selected(val) { // 顶部栏点击切换
       this.name = val;

manager/src/views/page-decoration/wap/navbar.vue

@@ -66,16 +66,16 @@ export default {
           name: "index",
           selected: true,
         },
-        // {
+        {
-        //   title: "全屏广告",
+          title: "全屏广告",
-        //   name: "advertising",
+          name: "advertising",
-        //   selected: false,
+          selected: false,
-        // },
+        },
-        // {
+        {
-        //   title: "弹窗广告",
+          title: "弹窗广告",
-        //   name: "alertAdvertising",
+          name: "ALERT",
-        //   selected: false,
+          selected: false,
-        // },
+        },
       ],
 
       submitWay: {
@@ -86,7 +86,23 @@ export default {
       },
     };
   },
-  watch: {},
+  watch: {
+    pagetype: {
+      handler(val) {
+        this.way.length = 0;
+        if (val == "INDEX") {
+          this.way.push({ title: "首页", name: "index", selected: true });
+        } else if (val == "SPECIAL") {
+          this.way.push({ title: "专题", name: "special", selected: true });
+        } else if (val == "ALERT") {
+          this.way.push({ title: "开屏广告", name: "alert", selected: true });
+        }else if (val == "OPEN_SCREEN_ANIMATION") {
+          this.way.push({ title: "app开屏页面", name: "OPEN_SCREEN_ANIMATION", selected: true });
+        }
+      },
+      immediate: true,
+    },
+  },
   mounted() {},
   methods: {
     clickBtn(val) {
@@ -106,7 +122,10 @@ export default {
 
     // 填写是否发布，模板名称之后保存
     save() {
-      if (this.$store.state.styleStore == void 0) {
+       if (
+        this.$store.state.styleStore == void 0 &&
+        (this.$route.query.pagetype && this.$route.query.pagetype != 'ALERT' &&  this.$route.query.pagetype != 'OPEN_SCREEN_ANIMATION')
+      ) {
         this.$Message.error("请装修楼层");
         return false;
       }
@@ -117,18 +136,26 @@ export default {
 
       this.submitWay.pageData = JSON.stringify(this.$store.state.styleStore);
       this.submitWay.pageType = "INDEX";
+      this.submitWay.pageType =  this.$route.query.pagetype ||  "INDEX";
+      // this.submitWay.pageType = this.pagetype;
 
-      this.$route.query.id ? this.update() : this.submit(this.submitWay);
+      if (this.$route.query.pagetype == 'ALERT' || this.$route.query.pagetype == 'OPEN_SCREEN_ANIMATION') {
+        this.update(this.submitWay);
+      } else {
+        this.$route.query.id ? this.updateHome() : this.submit(this.submitWay);
+      }
+
+      // this.$route.query.id ? this.update() : this.submit(this.submitWay);
     },
 
     // 更新
-    update() {
+    updateHome() {
       this.progress = false;
       API_Other.updateHome(this.$route.query.id, {
         pageData: JSON.stringify(this.$store.state.styleStore),
         name: this.submitWay.name,
         pageShow: this.submitWay.pageShow,
-        pageType: "INDEX",
+        pageType: this.submitWay.pageType,
         pageClientType: "H5",
       })
         .then((res) => {
@@ -139,7 +166,7 @@ export default {
             setTimeout(() => {
               this.saveDialog = false;
               this.$Message.success("修改成功");
-              this.goback();
+              this.goBack();
             }, 1000);
           } else {
             this.saveDialog = false;
@@ -150,8 +177,57 @@ export default {
         .catch((error) => {});
     },
 
+
+    // 更新
+    update(submitWay) {
+      console.log(this.$store.state.openStyleStore[0], "123123123");
+      if (this.$store.state.openStyleStore == void 0) {
+        this.$Message.error("请装修楼层!");
+        return false;
+      }
+      this.progress = false;
+
+      let id = this.$route.query.id;
+      const pagetype = this.$route.query.pagetype;
+      console.log(this.$store.state.openStyleStore, submitWay);
+      const pageType = {
+        INDEX: "INDEX",
+        ALERT: "OPEN_SCREEN_PAGE",
+        OPEN_SCREEN_ANIMATION: "OPEN_SCREEN_ANIMATION",
+      }[pagetype ? pagetype : "INDEX"];
+
+      if (pagetype) {
+        submitWay.pageData = JSON.stringify(
+          this.$store.state.openStyleStore[0]
+        );
+        submitWay.pageType = pageType;
+        id = this.$store.state.openStoreId;
+      }
+
+      API_Other.updateHome(id, submitWay)
+        .then((res) => {
+          this.num = 50;
+          if (res.success) {
+            this.num = 80;
+            /**制作保存成功动画¸ */
+            setTimeout(() => {
+              this.saveDialog = false;
+              this.$Message.success("修改成功");
+              this.goBack();
+            }, 1000);
+          } else {
+            this.saveDialog = false;
+            this.$Message.error("修改失败，请稍后重试");
+          }
+          console.log(res);
+        })
+        .catch((error) => {});
+    },
+
+
+
     // 返回查询数据页面
-    goback() {
+    goBack() {
       this.$router.push({
         path: "/decoration/wap",
       });
@@ -169,7 +245,7 @@ export default {
             setTimeout(() => {
               this.saveDialog = false;
               this.$Message.success("保存成功");
-              this.goback();
+              this.goBack();
             }, 1000);
           } else {
             this.progress = true;

manager/src/views/page-decoration/wap/wapList.vue

@@ -1,8 +1,13 @@
 <template>
   <div class="wrapper">
     <Card class="category">
-      <div :class="{active:i == selectedIndex}" class="category-item" v-for="(typeItem,i) in pageTypes" :key="typeItem.type">
+      <div
-        <div @click="clickType(typeItem.type,i)">{{typeItem.title}}</div>
+        :class="{ active: i == selectedIndex }"
+        class="category-item"
+        v-for="(typeItem, i) in pageTypes"
+        :key="typeItem.type"
+      >
+        <div @click="clickType(typeItem.type, i)">{{ typeItem.title }}</div>
       </div>
     </Card>
     <Card class="content">
@@ -70,6 +75,14 @@ export default {
           type: "SPECIAL",
           title: "专题",
         },
+        //  {
+        //   type: "ALERT",
+        //   title: "开屏广告",
+        // },
+        // {
+        //   type: "OPEN_SCREEN_ANIMATION",
+        //   title: "app开屏页面",
+        // },
       ],
       params: { // 请求参数
         pageNumber: 1,
@@ -84,23 +97,38 @@ export default {
     };
   },
   watch: {
-    params: {
+    // params: {
-      handler(val) {
+    //   handler(val) {
-        // this.pageNumber++;
+    //     // this.pageNumber++;
-        this.init();
+    //     this.init();
-      },
+    //   },
-      deep: true,
+    //   deep: true,
-    },
+    // },
   },
   mounted() {
     this.init();
   },
   methods: {
     // 切换tab
-    clickType(val,index) {
+     clickType(val, index) {
-      this.params.pageNumber = 1
+      if (val == "ALERT") {
-      this.selectedIndex = index
+        this.$router.push({
-      this.params.pageType = val;
+          path: "/floorList/main",
+          query: { pagetype: val },
+        });
+        return;
+      } else if (val == "OPEN_SCREEN_ANIMATION") {
+        this.$router.push({
+          path: "/floorList/main",
+          query: { pagetype: val },
+        });
+        return;
+      } else {
+        this.params.pageNumber = 1;
+        this.selectedIndex = index;
+        this.params.pageType = val;
+        this.init();
+      }
     },
     // 是否发布
     changeSwitch(item) {
@@ -138,13 +166,19 @@ export default {
     handleEdit(val) {
       this.$router.push({
         path: "/floorList/main",
-        query: { id: val.id, name: val.name, type: val.pageShow },
+        query: {
+          id: val.id,
+          name: val.name,
+          type: val.pageShow,
+          pagetype: this.params.pageType,
+        },
       });
     },
     // 添加模板
     handleAdd() {
       this.$router.push({
         path: "/floorList/main",
+        query: { pagetype: this.params.pageType },
       });
     },
      // 分页 改变页数