优化楼层装修

manager/src/views/lili-dialog/link-dialog.vue

@@ -1,16 +1,24 @@
 <template>
   <div class="wrapper">
-
     <Tabs :value="wap[0].title" class="tabs">
-      <TabPane :label="item.title" :name="item.title" @click="clickTag(item, i)" v-for="(item, i) in wap" :key="i">
+      <TabPane
-        <component ref="lili-component" :is="templateWay[item.name]" @selected="
+        :label="item.title"
+        :name="item.title"
+        @click="clickTag(item, i)"
+        v-for="(item, i) in wap"
+        :key="i"
+      >
+        <component
+          ref="lili-component"
+          :is="templateWay[item.name]"
+          @selected="
             (val) => {
               changed = val;
             }
-        " />
+          "
+        />
       </TabPane>
     </Tabs>
-
   </div>
 </template>
 <script>
@@ -27,7 +35,7 @@ export default {
       changed: "", // 变更模板
       selected: 0, // 已选数据
       selectedLink: "", //选中的链接
-      wap  // tab标签
+      wap, // tab标签
     };
   },
   watch: {
@@ -44,7 +52,9 @@ export default {
     });
 
     this.wap.forEach((item) => {
+      if (item) {
         item.selected = false;
+      }
     });
   },
   methods: {},

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

@@ -1,9 +1,14 @@
 <template>
   <div class="wrapper">
     <div class="list">
-
+      <div
-      <div class="list-item" @click="clickPromotion(item,index)" v-for="(item,index) in Object.keys(promotionList)" :key="index" :class="{active:selectedIndex == index}">
+        class="list-item"
-        {{ typeOption[item].title}}
+        v-for="(item, index) in Object.keys(promotionList)"
+        :key="index"
+        @click="clickPromotion(item, index)"
+        :class="{ active: selectedIndex == index }"
+      >
+        {{ typeOption(item).title }}
       </div>
 
       <!-- <div class="list-item" >暂无活动</div> -->
@@ -19,15 +24,30 @@
         </div> -->
 
         <div class="tables">
+          <Table
+            height="350"
+            border
+            tooltip
+            :loading="loading"
+            :columns="activeColumns"
+            :data="showPromotionList"
+          ></Table>
 
-          <Table height="350" border tooltip :loading="loading" :columns="activeColumns" :data="showPromotionList"></Table>
+          <Page
-
+            @on-change="
-          <Page @on-change="(val) => {params.pageNumber = val; } " :current="params.pageNumber" :page-size="params.pageSize" class="mt_10" :total="Number(totals)" size="small" show-elevator />
+              (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>
@@ -47,11 +67,13 @@ export default {
       selectedIndex: 0, //左侧菜单选择
       promotions: "", //选中的活动key
       index: 999, // 已选下标
-      params: { // 请求参数
+      params: {
+        // 请求参数
         pageNumber: 1,
         pageSize: 10,
       },
-      pintuanColumns: [ // 表头
+      pintuanColumns: [
+        // 表头
         {
           title: "活动标题",
           key: "title",
@@ -89,7 +111,7 @@ export default {
                 "Button",
                 {
                   props: {
-                    type: this.index == params.index ? "primary" : "",
+                    // type: this.index == params.index ? "primary" : "",
                     size: "small",
                   },
                   on: {
@@ -147,7 +169,7 @@ export default {
               {
                 style: {},
               },
-              this.$options.filters.unitPrice(params.row.price, '￥')
+              this.$options.filters.unitPrice(params.row.price, "￥")
             );
           },
         },
@@ -181,13 +203,12 @@ export default {
                 "Button",
                 {
                   props: {
-                    type: this.index == params.index ? "primary" : "",
+                    // type: this.index == params.index ? "primary" : "",
                     size: "small",
                   },
                   on: {
                     click: () => {
                       this.selectedPromotion(params);
-                      console.log(this.index)
                     },
                   },
                 },
@@ -233,7 +254,7 @@ export default {
                 "Button",
                 {
                   props: {
-                    type: this.index == params.index ? "primary" : "",
+                    // type: this.index == params.index ? "primary" : "",
                     size: "small",
                   },
                   on: {
@@ -252,62 +273,6 @@ export default {
       promotionData: "", //商品集合
 
       showPromotionList: [], //显示当前促销的商品
-      typeOption: { // 活动选项
-        FULL_DISCOUNT: {
-          title: "满减",
-          methodsed: () => {
-            this.showPromotionList = [];
-            this.activeColumns = this.pintuanColumns;
-            this.params.promotionType = "FULL_DISCOUNT";
-
-            this.sortGoods("FULL_DISCOUNT");
-          },
-        },
-        PINTUAN: {
-          title: "拼团",
-          methodsed: (id) => {
-            this.showPromotionList = [];
-            this.activeColumns = this.pintuanColumns;
-            this.params.promotionType = "PINTUAN";
-            this.sortGoods("PINTUAN");
-          },
-        },
-        SECKILL: {
-          title: "秒杀",
-          methodsed: () => {
-            this.showPromotionList = [];
-            this.activeColumns = this.seckillColumns;
-            this.params.seckillId = this.promotionList["SECKILL"].id;
-            delete this.params.promotionType;
-
-            getPromotionSeckill(this.params).then((res) => {
-              delete this.params.seckillId;
-              this.showPromotionList = this.showPromotionList.concat(
-                res.result.records
-              );
-
-              this.totals = res.result.total;
-              console.log(this.totals);
-            });
-          },
-        },
-        COUPON: {
-          title: "优惠券",
-          methodsed: () => {
-            this.showPromotionList = [];
-            this.params.promotionType = "COUPON";
-            this.sortGoods("COUPON");
-          },
-        },
-        POINTS_GOODS: {
-          title: "积分商品",
-          methodsed: () => {
-            this.showPromotionList = [];
-            this.params.promotionType = "POINTS_GOODS";
-            this.sortGoods("POINTS_GOODS");
-          },
-        },
-      },
     };
   },
   mounted() {
@@ -317,8 +282,8 @@ export default {
     params: {
       handler() {
         this.index = 999;
-        this.typeOption[this.promotions] &&
+        this.typeOption(this.promotions) &&
-          this.typeOption[this.promotions].methodsed();
+          this.typeOption(this.promotions).methodsed();
       },
       deep: true,
     },
@@ -326,30 +291,76 @@ export default {
 
   methods: {
     sortGoods(type) {
-      this.loading = true;
-      this.params.pageNumber - 1;
-      getPromotionGoods(this.promotionList[type].id, this.params).then(
-        (res) => {
       this.loading = false;
-          if (res.result) {
+      this.params.pageNumber - 1;
-            this.$nextTick(() => {
+      this.showPromotionList = this.promotionList[type];
-              this.showPromotionList = this.showPromotionList.concat(
+    },
-                res.result.records
+    typeOption(type) {
-              );
+      // 活动选项
-              console.log(this.totals);
+      switch (type) {
-              this.totals = res.result.total;
+        case "FULL_DISCOUNT":
-            });
+          return {
+            title: "满减",
+            methodsed: () => {
+              this.showPromotionList = [];
+              this.activeColumns = this.pintuanColumns;
+
+              this.sortGoods("FULL_DISCOUNT");
+            },
+          };
+        case "PINTUAN":
+          return {
+            title: "拼团",
+            methodsed: (id) => {
+              this.showPromotionList = [];
+              this.activeColumns = this.pintuanColumns;
+              this.sortGoods("PINTUAN");
+            },
+          };
+
+        case "KANJIA":
+          return {
+            title: "砍价",
+            methodsed: (id) => {
+              this.showPromotionList = [];
+              this.activeColumns = this.pintuanColumns;
+              this.sortGoods("KANJIA");
+            },
+          };
+        case "SECKILL":
+          return {
+            title: "秒杀",
+            methodsed: () => {
+              this.showPromotionList = [];
+              this.activeColumns = this.seckillColumns;
+              this.sortGoods("SECKILL");
+            },
+          };
+        case "COUPON":
+          return {
+            title: "优惠券",
+            methodsed: () => {
+              this.showPromotionList = [];
+              this.sortGoods("COUPON");
+            },
+          };
+        case "POINTS_GOODS":
+          return {
+            title: "积分商品",
+            methodsed: () => {
+              this.showPromotionList = [];
+              this.sortGoods("POINTS_GOODS");
+            },
+          };
+        default:
+          return {};
       }
-        }
-      );
     },
     // 选择活动
     selectedPromotion(val) {
-      console.log(val);
       val.row.___type = "marketing";
       val.row.___promotion = this.promotions;
       this.$emit("selected", [val.row]);
-      console.log([val.row]);
 
       this.index = val.index;
     },
@@ -359,19 +370,22 @@ export default {
       if (res.success) {
         this.loading = false;
         this.getPromotion(res);
-        this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
+        // this.clickPromotion(this.typeOption[Object.keys(res.result)[0]], 0);
       } else {
         this.loading = false;
       }
     },
     getPromotion(res) {
+      if (res.result) {
         this.promotionList = res.result;
-
+        this.typeOption(Object.keys(res.result)[0]).methodsed();
-      if (Object.keys(res.result).length) {
-        this.typeOption[Object.keys(res.result)[0]].methodsed(
-          this.promotionList[Object.keys(res.result)[0]].id
-        );
       }
+
+      // if (Object.keys(res.result).length) {
+      //   this.typeOption[Object.keys(res.result)[0]].methodsed(
+      //     this.promotionList[Object.keys(res.result)[0]].id
+      //   );
+      // }
     },
 
     // 点击某个活动查询活动列表
@@ -379,8 +393,8 @@ export default {
       this.promotions = val;
       this.selectedIndex = i;
       this.params.pageNumber = 1;
-      this.typeOption[val] &&
+      this.typeOption(val) &&
-        this.typeOption[val].methodsed(this.promotionList[val].id);
+        this.typeOption(val).methodsed(this.promotionList[val].id);
     },
   },
 };

manager/src/views/lili-dialog/template/other.vue

@@ -1,24 +1,33 @@
 <template>
   <div>
     <Row :gutter="30">
-      <Col span="6" v-for="(item,index) in linkList" :key="index" v-if="(item.title !== '拼团频道' && item.title !== '签到') || $route.name !== 'renovation'">
+      <Col
-        <div class="card" :class="{'active':selectedIndex == index}" @click="handleLink(item,index)">
+        span="4"
+        v-for="(item, index) in linkList"
+        :key="index"
+        v-if="
+          (item.title !== '拼团频道' && item.title !== '签到') ||
+          $route.name !== 'renovation'
+        "
+      >
+        <div
+          class="card"
+          :class="{ active: selectedIndex == index }"
+          @click="handleLink(item, index)"
+        >
           <Icon size="24" :type="item.icon" />
-          <p>{{item.title}}</p>
+          <p>{{ item.title }}</p>
         </div>
       </Col>
       <!-- 外部链接，只有pc端跳转 -->
-      <Col span="6" v-if="$route.name === 'renovation'">
+      <Col span="4">
-        <div class="card" :class="{'active':selectedIndex == linkList.length}" @click="handleLink(linkItem,linkList.length)">
+        <div
-          <Poptip v-model="linkVisible">
+          class="card"
+          :class="{ active: selectedIndex == linkList.length }"
+          @click="handleLink(linkItem, linkList.length)"
+        >
           <Icon size="24" :type="linkItem.icon" />
-              <p>{{linkItem.title}}</p>
+          <p>{{ linkItem.title }}</p>
-              <div slot="title">链接地址</div>
-              <div slot="content">
-                  <Input type="text" @keyup="handleLink(linkItem,linkList.length)" v-model="linkItem.url" placeholder="https://"></Input>
-              </div>
-          </Poptip>
-
         </div>
       </Col>
     </Row>
@@ -28,7 +37,8 @@
 export default {
   data() {
     return {
-      linkList: [ // 链接列表
+      linkList: [
+        // 链接列表
         {
           title: "首页",
           icon: "md-home",
@@ -89,13 +99,12 @@ export default {
           icon: "ios-basket",
           ___type: "point",
         },
-
       ],
       linkItem: {
         title: "外部链接",
         icon: "ios-link",
         ___type: "link",
-        url: ''
+        url: "",
       },
       linkVisible: false, // 是否显示外部链接
       selectedIndex: 9999999, // 已选index
@@ -103,14 +112,9 @@ export default {
   },
   methods: {
     handleLink(val, index) {
-      val = {...val,___type:'other'}
+      val = { ...val, ___type: "other" };
       this.selectedIndex = index;
-      if (index === this.linkList.length) {
+      this.$emit("selected", [val]);
-        this.linkVisible = true
-      } else {
-        this.linkVisible = false
-      }
-      this.$emit("selected",[val])
     },
   },
 };
@@ -132,7 +136,7 @@ export default {
   }
   border: 1px solid #ededed;
 }
-.card:hover{
+.card:hover {
   background: #ededed;
 }
 .active {

manager/src/views/lili-floor-renovation/wap/config.js

@@ -3,7 +3,9 @@ import * as API_Other from "@/api/other";
 // 获取楼层装修信息
 export function initData(id) {
   API_Other.getHomeData(id).then(res => {
+    debugger
     homeData = res;
+    console.log(res)
   });
 }
 
@@ -11,9 +13,10 @@ export let homeData = {};
 
 /**
  * drawer:true   广告右侧打开抽屉中显示
+ * drawerPromotions:true   广告右侧打开抽屉中显示
  * ad_drawer:true 活动魔方右侧显示
  * notAdd: true 没有添加按钮
- * notLink: true 没有连接功能
+ * notLink: true 没有链接功能
  * notImg: true 没有选择图片功能
  * close:true 右侧关闭按钮
  */
@@ -81,14 +84,20 @@ export const modelData = [
     type: "title",
     name: "标题栏",
     img: "md-image",
+    // notTitle:true,
     notAdd: true,
-    notLink: true,
     notImg: true,
     options: {
       list: [
         {
           title: "标题",
-          color: "#000000"
+          color: "#fff",
+          title1: '领取',
+          color1: "#fff",
+          bk_color: "#FF0000",
+          textAlign: "center",
+          link: "",
+          url: ''
         }
       ]
     }
@@ -469,22 +478,22 @@ export const modelData = [
             {
               title: "精选",
               desc: "电子推荐",
-              ___index:0,
+              ___index: 0,
             },
             {
               title: "实惠",
               desc: "便宜好货",
-              ___index:1,
+              ___index: 1,
             },
             {
               title: "进口",
               desc: "国际自营",
-              ___index:2,
+              ___index: 2,
             },
             {
               title: "推荐",
               desc: "喂奶推荐",
-              ___index:3,
+              ___index: 3,
             }
           ],
           listWay: [
@@ -494,7 +503,7 @@ export const modelData = [
               title:
                 " 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
               type: "精选",
-              ___index:0
+              ___index: 0
             },
             {
               img: "https://i.loli.net/2020/12/05/c9mptI5Pg8qJ6ny.png",
@@ -502,69 +511,88 @@ export const modelData = [
                 "宏碁(acer) DP高清线1.2版 2K*4KDisplayPort公对公接线笔记本电脑显卡连接显示器视频线1.5米",
               price: "190",
               type: "精选",
-              ___index:0
+              ___index: 0
             },
 
           ]
         }
       ]
     }
+  },
+  {
+    type: "promotions",
+    name: "促销活动",
+    img: "md-image",
+    notAdd: true,
+    notLink: true,
+    notImg: true,
+    close: true,
+    options: {
+      list: []
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    notLink: true,
+    drawerPromotions: true,
+    type: "promotionDetail",
+    promotionsType: "PINTUAN",
+    name: "拼团活动",
+    subBkColor: "#e1212b",
+    subName: "惊喜折扣",
+    subColor: "#fff",
+    img: "md-image",
+    options: {
+      list: []
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    notLink: true,
+    drawerPromotions: true,
+    type: "promotionDetail",
+    promotionsType: "LIVE",
+    name: "直播活动",
+    subBkColor: "#e1212b",
+    subName: "优惠好价",
+    subColor: "#fff",
+    img: "md-image",
+    options: {
+      list: []
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    notLink: true,
+    drawerPromotions: true,
+    type: "promotionDetail",
+    promotionsType: "SECKILL",
+    name: "秒杀活动",
+    subBkColor: "#e1212b",
+    subName: "x点场",
+    subColor: "#fff",
+    img: "md-image",
+    options: {
+      list: []
+    }
+  },
+  {
+    notAdd: true,
+    notImg: true,
+    notLink: true,
+    drawerPromotions: true,
+    type: "promotionDetail",
+    promotionsType: "KANJIA",
+    name: "砍价活动",
+    subBkColor: "#e1212b",
+    subName: "超值好物",
+    subColor: "#fff",
+    img: "md-image",
+    options: {
+      list: []
+    }
   }
-  // TODO 第一版本隐藏暂无此功能
-  // {
-  //   notAdd: true,
-  //   notImg: true,
-  //   type: "joinGroup",
-  //   name: "拼团活动",
-  //   img: "md-image",
-  //   options: {
-  //     list: [
-  //       {
-  //         title: "测试拼团"
-  //       }
-  //     ]
-  //   }
-  // },
-  // {
-  //   notAdd: true,
-  //   notImg: true,
-  //   type: "integral",
-  //   name: "积分活动",
-  //   img: "md-image",
-  //   options: {
-  //     list: [
-  //       {
-  //         title: "测试积分"
-  //       }
-  //     ]
-  //   }
-  // },
-  // {
-  //   notAdd: true,
-  //   notImg: true,
-  //   type: "spike",
-  //   name: "秒杀活动",
-  //   img: "md-image",
-  //   options: {
-  //     list: [
-  //       {
-  //         title: "测试秒杀"
-  //       }
-  //     ]
-  //   }
-  // },
-  // {
-  //   notAdd: true,
-  //   notImg: true,
-  //   type: "group",
-  //   name: "团购活动",
-  //   img: "md-image",
-  //   options: {
-  //     list: [
-  //       {
-  //         title: "测试团购"
-  //       }
-  //     ]
-  //   }
-  // }
 ];

manager/src/views/lili-floor-renovation/wap/decorate.scss

@@ -1,12 +1,14 @@
-
+/deep/ .ivu-modal-mask,
-/deep/ .ivu-modal-mask,.ivu-modal-wrap{
+.ivu-modal-wrap {
   z-index: 800;
 }
-.decorate-view-link{
+
+.decorate-view-link {
   font-size: 12px;
   margin: 0 4px;
   color: #999;
 }
+
 .decorate-view-style {
   border: 1px solid #ededed;
   background: #f7f7fa;
@@ -15,22 +17,26 @@
   padding: 30px 0 0 0;
   margin-bottom: 20px;
   cursor: pointer;
-    > .select-style {
+
+  >.select-style {
     background: #ededed;
     padding: 15px 0;
     font-size: 15px;
   }
-  }
+}
-  .decorate-border {
+
+.decorate-border {
   border: 1px solid #ededed;
   margin: 10px 0;
   padding: 0 10px;
-  }
+}
-  .drawer {
+
+.drawer {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
-    > .drawer-item {
+
+  >.drawer-item {
     cursor: pointer;
     border: 1px solid #ededed;
     background: #f9f0ff;
@@ -45,73 +51,111 @@
     flex-direction: column;
     justify-content: center;
   }
-  }
+}
-  .hidden-input {
+
+.hidden-input {
   display: none;
-  }
+}
-  .decorate {
+
+.decorate {
   padding: 0 20px;
   height: calc(100vh - 120px);
   overflow-y: auto;
   padding-bottom: 120px;
-  }
+}
-  .decorate-title {
+
+.decorate-title {
   height: 50px;
   line-height: 50px;
   font-weight: bold;
-  }
+}
-  .decorate-list {
+
+.decorate-list {
   overflow: hidden;
-  }
+}
-  .decorate-view {
+
+.decorate-view {
   display: flex;
-    margin: 20px 0;
+  margin: 12px 0;
   align-items: center;
-  }
+}
-  .decorate-item-box {
+
+.decorate-item-box {
   background: #fff;
   padding: 10px;
   border: 1px solid #ededed;
-  }
+}
-  .decorate-item-title {
+
+.decorate-item-title {
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   line-height: 40px;
   padding: 0 10px;
-  }
+}
-  .decorate-view-title {
+
+.decorate-view-title {
   margin-right: 10px;
-  }
+}
-  .decorate-item {
+
+.decorate-item {
   background: #ededed;
   border-top-left-radius: 0.4em;
   margin-bottom: 20px;
   border-top-right-radius: 0.4em;
-  }
+}
-  .show-image {
+
+.show-image {
   max-width: 50px;
-  }
+}
-  .tips {
+
+.tips {
   font-size: 12px;
   color: #999;
-    > span {
+
+  >span {
     color: $theme_color;
   }
-  }
+}
-  .selectBtn {
+
+.selectBtn {
   margin-left: 10px;
-  }
+}
-  .bing-goods-list {
+
+.bing-goods-list {
   display: flex;
-    > .bing-goods-item {
+
+  >.bing-goods-item {
     width: 50px;
     height: 50px;
-      > img {
+
+    >img {
       width: 100%;
       height: 100%;
       display: block;
     }
   }
-  }
+}
+
+.align-text {
+  width: 30px;
+  height: 30px;
+  display: block;
+}
+
+.card-box {
+  display: flex;
+}
+
+.decorate-notice {}
+
+.card {}
+
+.card:hover {
+  background: #ededed;
+}
+
+.active {
+  background: #ededed;
+}

manager/src/views/lili-floor-renovation/wap/decorate.vue

@@ -6,11 +6,24 @@
         style="margin-left: 20px"
         size="small"
         ghost
-        v-if="res.type == 'tpl_ad_list' || res.type == 'tpl_activity_list' || res.drawer"
+        v-if="
+          res.type == 'tpl_ad_list' ||
+          res.type == 'tpl_activity_list' ||
+          res.drawer
+        "
         type="primary"
         @click="selectStyle()"
         >选择风格</Button
       >
+      <Button
+        style="margin-left: 20px"
+        size="small"
+        ghost
+        v-if="res.type == 'promotions' || res.drawerPromotions"
+        type="primary"
+        @click="selectPromotions()"
+        >选择促销活动</Button
+      >
     </div>
 
     <!-- 右侧显示抽屉 -->
@@ -29,17 +42,48 @@
       </div>
     </Drawer>
 
+    <!-- 右侧显示抽屉 -->
+    <Drawer
+      title="选择促销活动(最多只能展示两个活动)"
+      :closable="false"
+      width="400"
+      v-model="promotionsFlag"
+    >
+      <div class="drawer">
+        <div
+          class="drawer-item"
+          @click="clickDrawer(item, index)"
+          v-for="(item, index) in modelData"
+          :key="index"
+          v-if="item.drawerPromotions"
+        >
+          <img src alt />
+          <span>{{ item.name }}</span>
+        </div>
+      </div>
+    </Drawer>
+
     <!-- 卡片集合 -->
     <div
       class="decorate-list"
-      v-if="(res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list') || res.drawer"
+      v-if="
+        (res.type != 'tpl_ad_list' &&
+          res.type != 'tpl_activity_list' &&
+          res.type != 'promotions') ||
+        res.drawer ||
+        res.drawerPromotions
+      "
+    >
+      <div
+        class="decorate-item"
+        v-for="(item, index) in res.options.list"
+        :key="index"
       >
-      <div class="decorate-item" v-for="(item, index) in res.options.list" :key="index">
         <div class="decorate-item-title">
           <div>卡片</div>
           <Icon
             @click="closeDecorate(index)"
-            v-if="res.close"
+            v-if="res.close || res.type == 'promotionDetail'"
             size="20"
             color="#e1251b"
             type="md-close-circle"
@@ -77,14 +121,19 @@
                     title_item.___index == bindGoods.___index ||
                     title_item.title == bindGoods.type
                   "
-                  v-for="(bindGoods, bindGoodsIndex) in res.options.list[0].listWay"
+                  v-for="(bindGoods, bindGoodsIndex) in res.options.list[0]
+                    .listWay"
                   :key="bindGoodsIndex"
                 >
                   {{ bindGoods.title }},
                 </div>
               </div>
               <div>
-                <Button @click="bindGoodsId(title_item)" size="small" ghost type="primary"
+                <Button
+                  @click="bindGoodsId(title_item)"
+                  size="small"
+                  ghost
+                  type="primary"
                   >选择商品</Button
                 >
               </div>
@@ -111,18 +160,132 @@
               >
             </div>
           </div>
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type == 'title'"
+          >
+            <div class="decorate-view-title">文字对齐方式</div>
+            <div class="card-box">
+              <div
+                class="card"
+                :class="{ active: textAlign == 'left' }"
+                @click="changeTextAlign('left')"
+              >
+                <img
+                  :src="require('@/assets/align-text-left.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div>
+              <div
+                class="card"
+                :class="{ active: textAlign == 'center' }"
+                @click="changeTextAlign('center')"
+              >
+                <img
+                  :src="require('@/assets/align-text-center.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div>
+              <!-- <div
+                class="card"
+                :class="{ active: textAlign == 'right' }"
+                @click="changeTextAlign('right')"
+              >
+                <img
+                  :src="require('@/assets/align-text-right.png')"
+                  class="align-text"
+                  alt=""
+                />
+              </div> -->
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="
+              item.title != void 0 &&
+              !res.notTitle &&
+              (res.type == 'title' ||
+                res.type == 'notice' ||
+                res.type == 'promotionDetail')
+            "
+          >
+            <div class="decorate-view-title">背景颜色</div>
+            <div class="decorate-view">
+              <ColorPicker v-model="item.bk_color" />
+              <Input v-model="item.bk_color" />
+            </div>
+          </div>
+
           <!-- 填写标题 -->
-          <div class="decorate-view" v-if="item.title != void 0 && !res.notTitle">
+          <div
+            class="decorate-view"
+            v-if="item.title != void 0 && !res.notTitle && res.type != 'notice'"
+          >
             <div class="decorate-view-title">菜单标题</div>
             <div>
               <Input v-model="item.title" style="width: 200px" />
             </div>
           </div>
+          <div
+            class="decorate-view"
+            v-if="
+              item.title != void 0 &&
+              !res.notTitle &&
+              (res.type == 'title' || res.type == 'notice')
+            "
+          >
+            <div class="decorate-view-title">标题颜色</div>
+            <div class="decorate-view">
+              <ColorPicker v-model="item.color" />
+              <Input v-model="item.color" />
+            </div>
+          </div>
+          <!-- 填写小标题 -->
+          <div
+            class="decorate-view"
+            v-if="item.title1 != void 0 && !res.notTitle"
+          >
+            <div class="decorate-view-title">小标题</div>
+            <div>
+              <Input v-model="item.title1" style="width: 200px" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="item.title1 != void 0 && !res.notTitle"
+          >
+            <div class="decorate-view-title">小标题颜色</div>
+            <div class="decorate-view">
+              <ColorPicker v-model="item.color1" />
+              <Input v-model="item.color1" />
+            </div>
+          </div>
+          <div
+            class="decorate-view"
+            v-if="res.type === 'notice' && !res.notTitle"
+          >
+            <div class="decorate-view-title">公告内容</div>
+            <div>
+              <div
+                v-for="(t, tindex) in item.title"
+                :key="tindex"
+                class="decorate-notice"
+              >
+                <Input v-model="t.context" style="width: 200px" />
+              </div>
+            </div>
+          </div>
+
           <!-- 填写链接 -->
 
           <div class="decorate-view" v-if="!res.notLink">
             <div class="decorate-view-title">选择链接</div>
-            <div v-if="item.url.length != 0" class="decorate-view-link">
+            <div
+              v-if="item.url && item.url.length != 0"
+              class="decorate-view-link"
+            >
               已选链接：
 
               <span>
@@ -133,38 +296,73 @@
                 }}
                 -
                 <!-- 当选择完链接之后的商品名称 -->
-                <span v-if="item.url.___type == 'goods'"> {{ item.url.goodsName }}</span>
+                <span v-if="item.url.___type == 'goods'">
+                  {{ item.url.goodsName }}</span
+                >
                 <!-- 当选择完链接之后的分类回调 -->
-                <span v-if="item.url.___type == 'category'"> {{ item.url.name }}</span>
+                <span v-if="item.url.___type == 'category'">
+                  {{ item.url.name }}</span
+                >
                 <!-- 当选择完链接之后的店铺回调 -->
-                <span v-if="item.url.___type == 'shops'"> {{ item.url.memberName }}</span>
+                <span v-if="item.url.___type == 'shops'">
+                  {{ item.url.memberName }}</span
+                >
                 <!-- 当选择完链接之后的其他回调 -->
-                <span v-if="item.url.___type == 'other'"> {{ item.url.title }}</span>
+                <span v-if="item.url.___type == 'other'">
+                  {{ item.url.title }}</span
+                >
                 <!-- 当选择完活动之后的其他回调 -->
                 <span v-if="item.url.___type == 'marketing'">
                   <span v-if="item.url.___promotion == 'SECKILL'"> 秒杀 </span>
-                  <span v-if="item.url.___promotion == 'FULL_DISCOUNT'"> 满减 </span>
+                  <span v-if="item.url.___promotion == 'FULL_DISCOUNT'">
+                    满减
+                  </span>
                   <span v-if="item.url.___promotion == 'PINTUAN'"> 拼团 </span>
                   {{ item.url.title || item.url.goodsName }}
                 </span>
                 <!-- 当选择完活动之后的其他回调 -->
-                <span v-if="item.url.___type == 'pages'"> {{ item.url.title }}</span>
+                <span v-if="item.url.___type == 'pages'">
+                  {{ item.url.title }}</span
+                >
               </span>
             </div>
+
             <div>
-              <Button ghost size="small" type="primary" @click="clickLink(item, index)"
+              <Button
+                ghost
+                size="small"
+                type="primary"
+                @click="clickLink(item, index)"
                 >选择链接</Button
               >
             </div>
           </div>
+          <!-- 链接地址-->
+          <div
+            class="decorate-view"
+            v-if="item.url && item.url.___type == 'other'"
+          >
+            <div class="decorate-view-title">外部链接</div>
+            <div>
+              <Input v-model="item.url.url" style="width: 200px" />
+            </div>
+          </div>
+
+          <p v-if="item.url && item.url.___type == 'other'">
+            (如非同域名下，则在小程序与公众号中无效)
+          </p>
         </div>
       </div>
     </div>
 
     <Button
-      v-if="res.type != 'tpl_ad_list' && res.type != 'tpl_activity_list' && !res.notAdd"
+      v-if="
+        res.type != 'tpl_ad_list' &&
+        res.type != 'tpl_activity_list' &&
+        !res.notAdd
+      "
       type="primary"
-      @click="addDecorate()"
+      @click="addDecorate(res.type)"
       ghost
       >添加</Button
     >
@@ -194,6 +392,8 @@ export default {
       picModelFlag: false, //图片选择器
       linkType: "goods", // dialog弹窗口类型
       styleFlag: false, //广告魔方开关
+      textAlign: this.res.options.list[0].textAlign || "center", //文字对齐方式
+      promotionsFlag: false, //广告魔方开关
       selectedLinkIndex: "", //选择链接的索引
       modelData, // 装修数据
       selectedGoods: "", // 已选商品
@@ -213,15 +413,12 @@ export default {
     selectStyle() {
       this.styleFlag = !this.styleFlag;
     },
+    selectPromotions() {
+      this.promotionsFlag = !this.promotionsFlag;
+    },
     // 回调选择的链接
     selectedLink(val) {
-      // 防止楼层添加的时候商品详情添加转义符号导致添加不成功问题
-      if (val) {
-        delete val.intro;
-        delete val.mobileIntro;
-      }
       this.selectedLinks.url = val;
-
     },
     // 回调的商品信息
     selectedGoodsData(val) {
@@ -257,6 +454,10 @@ export default {
       this.$refs.liliDialog.flag = true;
     },
 
+    changeTextAlign(val) {
+      this.res.options.list[0].textAlign = val;
+      this.textAlign = val;
+    },
     // 点击链接赋值一个唯一值，并将当前选择的模块赋值
     clickLink(val, index) {
       this.selectedLinks = val;
@@ -275,7 +476,12 @@ export default {
       });
     },
     //添加设置
-    addDecorate() {
+    addDecorate(type) {
+      if (type === "notice") {
+        this.res.options.list[0].title.push({
+          content: "",
+        });
+      } else {
         let way = {
           img: "https://picsum.photos/id/264/200/200",
           title: "标题",
@@ -284,6 +490,7 @@ export default {
           size: this.res.options.list[0]?.size,
         };
         this.res.options.list.push(way);
+      }
     },
     // 图片选择器回显
     callbackSelected(val) {

manager/src/views/lili-floor-renovation/wap/template/index.js

@@ -12,20 +12,24 @@ import tpl_flex_four from "./tpl_flex_four";
 import tpl_text_picture from "./tpl_text_picture";
 import tpl_menu from "./tpl_menu";
 import tpl_search from "./tpl_search";
-import tpl_join_group from "./tpl_join_group";
+import tpl_promotion_detail from "./tpl_promotion_detail";
 import tpl_integral from "./tpl_integral";
 import tpl_spike from "./tpl_spike";
 import tpl_group from "./tpl_group";
 import tpl_ad_list from "./tpl_view_list";
 import tpl_activity_list from './tpl_view_list'
 import tpl_goods from "./tpl_goods";
+import tpl_notice from "./tpl_notice";
+import tpl_promotions from "./tpl_promotions";
+
 export default {
+  notice: tpl_notice,
   carousel: tpl_banner,
   title: tpl_title,
   leftOneRightTwo: tpl_left_one_right_two,
   leftTwoRightOne: tpl_left_two_right_one,
-  topOneBottomTwo:tpl_top_one_bottom_two,
+  topOneBottomTwo: tpl_top_one_bottom_two,
-  topTwoBottomOne:tpl_top_two_bottom_one,
+  topTwoBottomOne: tpl_top_two_bottom_one,
   flexThree: tpl_flex_three,
   flexFive: tpl_flex_five,
   flexFour: tpl_flex_four,
@@ -33,12 +37,14 @@ export default {
   textPicture: tpl_text_picture,
   menu: tpl_menu,
   search: tpl_search,
-  joinGroup: tpl_join_group,
+  promotionDetail: tpl_promotion_detail,
   flexOne: tpl_flex_one,
   goods: tpl_goods,
-  integral:tpl_integral,
+  integral: tpl_integral,
-  spike:tpl_spike,
+  spike: tpl_spike,
-  group:tpl_group,
+  group: tpl_group,
   tpl_ad_list,
-  tpl_activity_list
+  promotions: tpl_promotions,
+  tpl_activity_list,
+  tpl_adv
 };

manager/src/views/lili-floor-renovation/wap/template/tpl_notice.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="layout">
+    <div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
+      <img :src="res.list[0].img" alt="" style="float:left;width: 20px;height: 20px;margin-top: 10px;margin-left: 10px;margin-right: 10px">
+      <div class="title" :style="{ color: res.list[0].color }">
+        {{ context }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    title: "公告",
+    props: ["res"],
+    data() {
+      return {
+        index: 0,
+        context:  "",
+      }
+    },
+    mounted() {
+      this.context = this.res.list[0].title[this.index].context;
+      setInterval(() => {
+        this.context = this.res.list[0].title[this.index].context;
+        if (this.index < this.res.list[0].title.length - 1) {
+          this.index++;
+        } else {
+          this.index = 0;
+        }
+      }, 3000);
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  @import "./tpl.scss";
+  .background {
+    position: absolute;
+    z-index: 2;
+    width: 100%;
+    height: 42px;
+    text-align: left;
+    font-size: 10px;
+    background-size: cover;
+  }
+  .layout {
+    text-align: center;
+    position: relative;
+    height: 42px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    background: #ffffff;
+  }
+  .title {
+    line-height: 42px;
+    font-size: 10px;
+    font-weight: bold;
+  }
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_promotion_detail.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="layout">
+    <div class="join-list">
+      <div
+        v-for="(item, index) in res.list"
+        :key="index"
+        class="join-list-item"
+      >
+        <div>
+          <div class="join-title">
+            <div>{{ item.title }}</div>
+            <div
+              class="sub"
+              :style="{
+                backgroundColor: item.bk_color,
+                color: item.color1,
+                borderColor: item.bk_color,
+              }"
+            >
+              {{ item.title1 }}
+            </div>
+          </div>
+          <div class="join-box">
+            <div
+              class="join-item"
+              v-for="(i, _index) in item.data"
+              :key="_index"
+            >
+              <div class="item-img-box">
+                <img
+                  class="item-img"
+                  :src="i.thumbnail ? i.thumbnail : i.goodsImage"
+                  alt
+                />
+              </div>
+              <div
+                class="ellipsis"
+                :class="{ 'max-width': res.list.length <= 1 }"
+              >
+                {{ i.goodsName ? i.goodsName : i.name }}
+              </div>
+              <div class="item-price">
+                <span>￥{{ i.price ? i.price : i.originalPrice }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.join-box {
+  display: flex;
+}
+.join-list {
+  width: 100%;
+  display: flex;
+  overflow: hidden;
+}
+.join-list-item {
+  flex: 1;
+}
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 54px; // 大于1个活动
+  font-size: 11px;
+}
+.max-width {
+  width: 158px !important;
+}
+.item-price {
+  > span {
+    font-size: 14px;
+    font-weight: 500;
+    color: #e1212b;
+  }
+}
+.join-item {
+  flex: 1;
+}
+.item-img {
+  width: 75px;
+  height: 75px;
+  margin: 0 auto;
+  display: block;
+}
+.item-img-box {
+  position: relative;
+}
+.item-line-through {
+  > span {
+    font-size: 10px;
+    font-weight: 400;
+    text-decoration: line-through;
+    color: #999;
+  }
+}
+.item-position-tips {
+  position: absolute;
+  right: 0;
+  color: #fff;
+  font-size: 12px;
+  bottom: 0;
+}
+.join-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background: #fff;
+  height: 50px;
+  > div:nth-of-type(1) {
+    font-size: 15px;
+    font-weight: bold;
+  }
+  > div:nth-of-type(2) {
+    font-size: 10px;
+    color: #fff;
+    border: 2px solid;
+    border-radius: 8px;
+    text-align: center;
+    width: 30%;
+  }
+  .sub {
+    background-color: #e1212b;
+    margin-right: 40px;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_promotions.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="layout">
+    <div class="flex-two">
+      请选择促销活动(最多只能展示两个活动)
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  title: "两张横图",
+  props: ["res"],
+};
+</script>
+<style lang="scss" scoped>
+@import "./tpl.scss";
+.flex-two {
+  width: 100%;
+  display: flex;
+  height: 110px;
+  overflow: hidden;
+}
+.flex-item {
+  width: 50%;
+  > img {
+    display: block;
+    max-width: 100%;
+    height: 100%;
+  }
+}
+</style>

manager/src/views/lili-floor-renovation/wap/template/tpl_title.vue

@@ -1,9 +1,26 @@
 <template>
-  <div class="layout">
+  <div class="layout" :style="{ textAlign: res.list[0].textAlign }">
-    <div class="background">
+    <div class="background" :style="{ backgroundColor: res.list[0].bk_color }">
       <div class="title" :style="{ color: res.list[0].color }">
         {{ res.list[0].title }}
       </div>
+      <div
+        style="
+          position: absolute;
+          right: 10px;
+          top: 2px;
+          color: #fff;
+          line-height: 42px;
+          font-size: 10px;
+        "
+      >
+        <a
+          :href="res.list[0].url"
+          :style="{ color: res.list[0].color1 }"
+          style="text-decoration: none"
+          >{{ res.list[0].title1 }}</a
+        >
+      </div>
     </div>
   </div>
 </template>
@@ -11,13 +28,14 @@
 <script>
 export default {
   title: "标题栏",
-  props: ["res"]
+  props: ["res"],
 };
 </script>
 <style lang="scss" scoped>
 @import "./tpl.scss";
 .background {
-  background: url("../../../../assets/title.png") no-repeat;
+  background-color: rgb(255, 87, 62);
+  /*background: url("../../../../assets/title.png") no-repeat;*/
   position: absolute;
   z-index: 2;
   width: 100%;
@@ -37,7 +55,8 @@ export default {
 }
 .title {
   line-height: 42px;
-  font-size: 15px;
+  font-size: 18px;
   font-weight: bold;
+  margin-left: 4px;
 }
 </style>