新增部分楼层

buyer/src/components/indexDecorate/ModelFormItem.vue

@@ -86,6 +86,14 @@
     <template v-if="element.type == 'oneRowThreeColumns'">
       <oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
     </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'goodsType'">
+      <goodsAndType :paramData="element" class="mb_20 width_1200_auto"></goodsAndType>
+    </template>
+    <!-- 商品模块 -->
+    <template v-if="element.type == 'onlyGoodsModel'">
+      <onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
+    </template>
     <!-- 新品排行 -->
     <template v-if="element.type == 'newGoodsSort'">
       <new-goods-sort
@@ -132,6 +140,9 @@ import Recommend from "./modelList/Recommend.vue";
 import NotEnough from "./modelList/NotEnough.vue";
 import Seckill from "./modelList/Seckill.vue";
 import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
+import goodsAndType from "./modelList/goodsAndType.vue";
+import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
+
 
 export default {
   name: "modelFormItem",
@@ -145,7 +156,9 @@ export default {
     FirstPageAdvert,
     NotEnough,
     Seckill,
-    oneRowThreeColumns
+    oneRowThreeColumns,
+    goodsAndType,
+    onlyGoodsModel
   },
   data() {
     return {

buyer/src/components/indexDecorate/modelList/goodsAndType.vue

@@ -1,30 +1,46 @@
 <template>
   <div class="goods-type-wrapper">
     <div class="flex goods-type-line">
-      <div class="goods-type-title">{{data.options.title}}</div>
+      <div class="goods-type-title">{{ paramData.options.title }}</div>
       <div class="flex goods-type-labels">
-        <div :class="{'active':current === index}" class="goods-type-item" v-for="(item,index) in data.options.labels" :key="index">
+        <div
-          {{item.label}}
+          :class="{ active: current === item.___index }"
+          class="goods-type-item"
+          v-for="(item, index) in paramData.options.labels"
+          :key="index"
+          @click="handleClickLabel(item, index)"
+        >
+          {{ item.label }}
         </div>
       </div>
     </div>
     <!-- 商品部分 -->
-    <div class="goods-list">
+    <div class="goods-list flex-j-sb">
-      <div class="goods-list-item" v-for="(item,index) in data.options.list" :key="index">
+      <div
+        v-if="paramData.options"
+        class="goods-list-item"
+        v-for="(item, index) in paramData.options.list.filter((client) => {
+          return client.___index == current;
+        })"
+        :key="index"
+        @click="linkTo(item.url)"
+      >
         <div class="goods-img">
-          <img :src="item.img">
+          <img :src="item.img" />
         </div>
         <div>
-          <div class="goods-name wes-2">{{item.title}}</div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
-          <div class="goods-desc">{{item.desc}}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
-
         </div>
         <div class="goods-price">
-          {{item.price | unitPrice("￥")}}
+          {{ item.price | unitPrice("￥") }}
+        </div>
+        <!-- 查看 -->
+        <div class="white-shadow">
+          <div class="search">去查看</div>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
@@ -32,45 +48,96 @@
 export default {
   name: "goods",
   props: {
-    data: {
+    paramData: {
       type: Object,
-      default: {}
+      default: {},
-    }
+    },
   },
-  data(){
+  data() {
-    return{
+    return {
-      current:0
+      current: "",
-    }
+    };
   },
-  methods:{
+  watch: {},
-
+  mounted() {
-  }
+    this.current = this.paramData.options.labels[0].___index;
-}
+  },
+  methods: {
+    // 筛选出当前分类下的商品
+    handleClickLabel(val, index) {
+      this.current = index;
+    },
+  },
+};
 </script>
 
 <style scoped lang="scss">
-
+.white-shadow {
-.goods-list-item{
+  width: 287px;
+  height: 122px;
+  border-radius: 0px 0px 10px 10px;
+  opacity: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  display: flex;
+  justify-content: center;
+  transition: 0.35s;
+  align-items: center;
+  background: linear-gradient(
+    180deg,
+    rgba(252, 252, 252, 0.58) -50%,
+    #ffffff 99%
+  );
+}
+.search {
+  width: 143px;
+  height: 45px;
+  border-radius: 22.5px;
+  opacity: 1;
+  font-size: 20px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  line-height: 45px;
+  color: #ffffff;
+  background: $theme_color;
+}
+.goods-list-item {
+  padding-top: 30px;
   width: 287px;
   height: 343.7px;
   border-radius: 9.8px;
   opacity: 1;
   cursor: pointer;
-  background: #FFFFFF;
+  background: #ffffff;
-  transition: 0.35s;
+  transition: all 0.4s ease;
-  box-shadow: 0px 1px 13px 0px #E5E5E5;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
-  &:hover{
+  position: relative;
-    box-shadow: 0px 1px 14px 0px #C5C5C5;
+  &:hover {
+    transform: translateY(-5px);
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+    > .white-shadow {
+      opacity: 1;
+    }
+    > .goods-img {
+      > img {
+        opacity: 0.8 !important;
+      }
+    }
   }
 }
-.goods-img{
+.goods-img {
+  margin-bottom: 9.8px;
   text-align: center;
-  >img{
+  > img {
+    transition: all 0.4s ease;
     width: auto;
     max-height: 183px;
   }
 }
-.goods-name{
+.goods-name {
   font-size: 18px;
 
   font-weight: normal;
@@ -82,7 +149,7 @@ export default {
   color: #333333;
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-desc{
+.goods-desc {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
@@ -93,22 +160,22 @@ export default {
 
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-price{
+.goods-price {
   font-size: 25.2px;
   font-weight: normal;
   line-height: 30px;
   text-align: center;
   letter-spacing: 0px;
 
-  color: #F31947;
+  color: #f31947;
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-type-line{
+.goods-type-line {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
 }
-.goods-type-title{
+.goods-type-title {
   font-size: 31px;
   font-weight: normal;
   line-height: 37px;
@@ -116,17 +183,17 @@ export default {
 
   color: #333333;
 }
-.active{
+.active {
-  color: #F31947;
+  color: #f31947;
 }
-.goods-type-labels{
+.goods-type-labels {
+  cursor: pointer;
   font-size: 21px;
   font-weight: normal;
   line-height: 25px;
   letter-spacing: 0px;
-
 }
-.goods-type-item{
+.goods-type-item {
   margin-left: 28px;
 }
 </style>

buyer/src/components/indexDecorate/modelList/onlyGoodsModel.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="goods-type-wrapper">
+    <!-- 商品部分 -->
+    <div class="goods-list flex" >
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list"
+        :key="index"
+        @click="handleClick(item)"
+      >
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+      </div>
+    </div>
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "onlyGoodsList",
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      flag:false,
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+    };
+  },
+  mounted(){
+
+  },
+  methods: {
+    handleClick(val){
+      this.linkTo(val.url)
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  padding-top: 34.8px;
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+    transform: translateY(-2px);
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  margin-bottom: 11.9px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  margin-bottom: 30px;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 19px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>

buyer/src/pages/Index.vue

@@ -38,7 +38,7 @@
     <!-- 底部栏 -->
     <BaseFooter></BaseFooter>
     <!-- 侧边栏 -->
-    <fixedBar class="fixed-bar"></fixedBar>
+    <fixedBar class="fixed-bar" :class="{'show-fixed': topSearchShow}"></fixedBar>
   </div>
 </template>
 
@@ -217,8 +217,24 @@ export default {
   transform: translateZ(0);
   top: 0;
 }
-
+.fixed-bar{
-
+  opacity: 0 !important;
+  transform: translateY(-10px);
+  transition: .35s;
+  z-index: 999999;
+  height: 0px !important;
+  overflow: hidden;
+}
+.show-fixed{
+  height: 354px !important;
+  opacity: 1 !important;
+  transform: translateY(0);
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+}
 
 
 /* 2K */
@@ -241,12 +257,14 @@ export default {
   }
 }
 
+
+
 @media screen and (max-width: 2025px) {
   /* 样式 */
   .fixed-bar{
     position: fixed;
     right:150px;
-    top: 400px;
+    top: 300px;
   }
 }
 

manager/src/views/page-decoration/modelConfig.js

@@ -755,12 +755,106 @@ export const modelData = [{
           price: "120",
           title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
           desc:"万家宝藏好店等你来",
+          url:'',
           ___index: 0
         },
 
       ]
     },
   },
+  {
+    type: 'onlyGoodsModel',
+    name: '商品模块2',
+    icon: 'md-image',
+    options: {
+      list:[
+        {
+          img: "https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+          price: "120",
+          title:" 微软 (Microsoft) Xbox 无线控制器/手柄 湛蓝色 | 3.5mm耳机接口蓝牙连接 Xbox主机电脑平板通用",
+          desc:"万家宝藏好店等你来",
+          url:'',
+        },
+      ]
+    },
+  },
+  {
+    type: 'mixModel',
+    name: '混合模块',
+    icon: 'md-image',
+    options: {
+      left:{
+        model:'goods',
+        //数据集合
+        data:{
+          image:{
+            url:"",
+            src:require('@/assets/mix-bg1.png')
+          },
+          list:[
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              title:"商品标题",
+              price:"120",
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              title:"商品标题",
+              price:"120",
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              title:"商品标题",
+              price:"120",
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              title:"商品标题",
+              price:"120",
+              url:"",
+            },
+          ],
+          badge:"精选",
+        }
+      },
+      right:{
+        model:'brand',
+        data:{
+          image:{
+            url:"",
+            src:require('@/assets/mix-bg2.png')
+          },
+          list:[
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+
+              url:"",
+            },
+            {
+              img:"https://i.loli.net/2021/05/14/KTLSrOVJmEdX12A.png",
+              url:"",
+            },
+          ],
+          badge:"",
+        }
+      },
+    },
+  },
+
+
   {
     type: 'notEnough',
     name: '还没逛够',

manager/src/views/page-decoration/modelFormItem.vue

@@ -119,6 +119,14 @@
     <template v-if="element.type == 'goodsType'">
       <goodsType :data="element" class="mb_20 width_1200_auto"></goodsType>
     </template>
+    <!-- 商品模块2 -->
+    <template v-if="element.type == 'onlyGoodsModel'">
+      <onlyGoodsModel :data="element" class="mb_20 width_1200_auto"></onlyGoodsModel>
+    </template>
+    <!-- 混合模块 -->
+    <template v-if="element.type == 'mixModel'">
+      <mixModel :data="element" class="mb_20 width_1200_auto"></mixModel>
+    </template>
     <!-- 一行三列 -->
     <template v-if="element.type == 'oneRowThreeColumns'">
       <oneRowThreeColumns :data="element" class="mb_20 width_1200_auto"></oneRowThreeColumns>
@@ -252,6 +260,9 @@ import Seckill from "./modelList/seckill.vue";
 import goodsType from "./modelList/goodsAndType.vue";
 import ossManage from "@/views/sys/oss-manage/ossManage";
 
+import mixModel from "./modelList/mixModel.vue";
+import onlyGoodsModel from "./modelList/onlyGoodsModel.vue";
+
 import oneRowThreeColumns from "./modelList/oneRowThreeColumns.vue";
 import seckillOnlyAlbum from "./modelList/seckill-only-album.vue";
 export default {
@@ -269,7 +280,9 @@ export default {
     goodsType,
     ossManage,
     oneRowThreeColumns,
-    "seckill-only-album":seckillOnlyAlbum
+    "seckill-only-album":seckillOnlyAlbum,
+    onlyGoodsModel,
+    mixModel
   },
   data() {
     return {

manager/src/views/page-decoration/modelList/goodsAndType.vue

@@ -1,199 +1,312 @@
 <template>
-    <div class="goods-type-wrapper">
+  <div class="goods-type-wrapper">
-      <div class="flex goods-type-line">
+    <div class="flex goods-type-line">
-          <div class="goods-type-title">{{data.options.title}}</div>
+      <div class="goods-type-title">{{ data.options.title }}</div>
-          <div class="flex goods-type-labels">
+      <div class="flex goods-type-labels">
-            <div :class="{'active':current === index}" class="goods-type-item" v-for="(item,index) in data.options.labels" :key="index">
+        <div
-              {{item.label}}
+          @click="tabCurrentlyIndex = index"
-            </div>
+          :class="{ active: tabCurrentlyIndex === index }"
-          </div>
+          class="goods-type-item"
+          v-for="(item, index) in data.options.labels"
+          :key="index"
+        >
+          {{ item.label }}
+        </div>
       </div>
-      <!-- 商品部分 -->
+    </div>
-      <div class="goods-list">
-          <div class="goods-list-item" v-for="(item,index) in data.options.list" :key="index">
-              <div class="goods-img">
-                <img :src="item.img">
-              </div>
-              <div>
-                <div class="goods-name wes-2">{{item.title}}</div>
-                <div class="goods-desc">{{item.desc}}</div>
-
-              </div>
-              <div class="goods-price">
-                {{item.price | unitPrice("￥")}}
-              </div>
-          </div>
 
+    <!-- 商品部分 -->
+    <div class="goods-list flex">
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list.filter((subset) => {
+          return subset.___index == tabCurrentlyIndex;
+        })"
+        :key="index"
+      >
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-price">
+          {{ item.price | unitPrice("￥") }}
+        </div>
       </div>
       <div class="setup-box">
         <div>
           <Button
             size="small"
             @click.stop="handleSelectModel(data.options.list)"
-          >编辑</Button
+            >编辑</Button
           >
         </div>
       </div>
-      <Modal
-        v-model="showModal"
-        title="装修"
-        draggable
-        width="800"
-        :z-index="100"
-        :mask-closable="false"
-      >
-        <div class="modal-tab-bar">
-
-          <Tabs type="card" :draggable="true" @on-drag-drop="handleDragDrop">
-            <TabPane v-for="(tab, index) in data.options.labels" :key="index" :label="tab.label" :name="index">
-              
-            </TabPane>
-          </Tabs>
-
-          <div v-for="(item,index) in data.options.list" :key="index">
-            <img :src="item.img" class="column-img">
-
-            <Button
-              size="small"
-              class="ml_10"
-              type="primary"
-              @click="handleSelectImg(index)"
-            >选择图片</Button
-            >
-            <Button
-              size="small"
-              class="ml_10"
-              type="primary"
-              @click="handleSelectLink(index)"
-            >选择链接</Button
-            >
-          </div>
-
-        </div>
-      </Modal>
-
-
-      <!-- 选择商品。链接 -->
-      <liliDialog
-        ref="liliDialog"
-        @selectedLink="selectedLink"
-        @selectedGoodsData="selectedGoodsData"
-      ></liliDialog>
-      <!-- 选择图片 -->
-      <Modal width="1200px" v-model="picModelFlag" footer-hide>
-        <ossManage
-          @callback="callbackSelected"
-          :isComponent="true"
-          ref="ossManage"
-        />
-      </Modal>
     </div>
+
+    <Modal
+      v-model="showModal"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div class="modal-tab-bar">
+        <div class="tab-bar">
+          标题
+          <Input style="width: 300px" v-model="data.options.title"></Input>
+        </div>
+        <div class="tab-bar" v-if="data.options.labels[tabCurrentlyIndex]">
+          标签
+          <Input
+            style="width: 300px"
+            v-model="data.options.labels[tabCurrentlyIndex].label"
+          ></Input>
+        </div>
+        <Tabs
+          type="card"
+          @on-click="handleClickTab"
+          :value="tabIndex"
+          :draggable="true"
+
+        >
+          <Button @click="handleTabsAdd" size="small" slot="extra">增加</Button>
+          <TabPane
+            v-for="(tab,tabIndex) in data.options.labels"
+            :key="tabIndex"
+            :label="tab.label"
+            :name="tab.___index + ''"
+          >
+            <div class="flex flex-a-c">
+              <Button class="del-btn" type="primary" @click="handleContextMenuDelete(tab,tabIndex)">删除当前标签</Button>
+              <Button class="add-goods" @click="addCurrentGoods">
+                添加商品
+              </Button>
+            </div>
+
+            <div
+              v-for="(item, index) in data.options.list.filter((subset) => {
+                return subset.___index == tabCurrentlyIndex;
+              })"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="flex column-goods-config">
+                  <div class="column-config">
+                    <div>
+                      标题：
+                      <Input v-model="item.title"></Input>
+                    </div>
+                    <div>
+                      描述：
+                      <Input v-model="item.desc"></Input>
+                    </div>
+                  </div>
+                  <Button @click="delGoods(item)">删除</Button>
+                </div>
+              </div>
+            </div>
+          </TabPane>
+        </Tabs>
+      </div>
+    </Modal>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+  </div>
 </template>
 
 <script>
-import ossManage from "@/views/sys/oss-manage/ossManage";
+
 export default {
   name: "goods",
-  components:{ossManage},
+
   props: {
     data: {
       type: Object,
-      default: {}
+      default: {},
-    }
-  },
-  data(){
-    return{
-      current:0,
-      showModal:false,
-      selected: {}, // 已选数据
-      picModelFlag:false,
-    }
-  },
-  methods:{
-    handleDragDrop (name, newName, a, b, names) {
-      // names 为调整后的 name 集合
-      this.data.options.labels.splice(b,1,...this.data.options.labels.splice(a, 1 , this.data.options.labels[b]));
     },
-    // 回显图片
+  },
-    callbackSelected(val) {
+  data() {
-      this.picModelFlag = false;
+    return {
-      this.selected[this.current].img = val.url;
+      tabIndex:0,
-      console.log(this.selected)
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+      tabCurrentlyIndex: 0, // 选项卡索引
+    };
+  },
+  mounted(){
+    this.tabIndex = this.data.options.labels[0].___index
+  },
+  methods: {
+    /**
+     * 算出最大的index 然后索引叠加
+     */
+    handleTabsAdd() {
+      let findAllIndex = this.data.options.labels.map((item) => {
+        return item.___index;
+      });
+      let max = Math.max.apply(null, findAllIndex);
+
+      this.data.options.labels.push({
+        label: "标签" + (max + 1),
+        ___index: max + 1,
+      });
+    },
+    // 删除标签
+    handleContextMenuDelete(item,index) {
+      // 删除标签下关联的商品
+      this.data.options.list.forEach((lab,currently)=>{
+        if(lab.___index == item.___index){
+           this.data.options.list.splice(currently,1)
+        }
+      })
+      // 删除当前标签
+      this.data.options.labels.splice(index,1)
+    },
+    // 删除商品
+    delGoods(val) {
+      this.data.options.list.forEach((item, i) => {
+        if (
+          item.title == val.title &&
+          item.___index == this.tabCurrentlyIndex
+        ) {
+          this.data.options.list.splice(i, 1);
+        }
+      });
+    },
+    // 切换选项卡
+    handleClickTab(name) {
+      console.log(name)
+      this.tabCurrentlyIndex = name;
+    },
+    // 添加当前选项卡中的商品
+    addCurrentGoods() {
+      this.$refs.liliDialog.open("goods");
     },
     // 编辑模块
     handleSelectModel(item) {
-      console.log(item)
+      console.log(item);
       this.selected = item;
       this.showModal = true;
-
     },
     // 选择商品回调
     selectedGoodsData(val) {
-      console.log(val);
+      if (val.length) {
-      let goods = val[0];
+        val.forEach((item) => {
-      this.selected.img = goods.thumbnail;
+          const pushGoodsDetail = {
-      this.selected.price = goods.price;
+            img: item.thumbnail,
-      this.selected.name = goods.goodsName;
+            price: item.price,
-      this.selected.url = `/goodsDetail?skuId=${goods.id}&goodsId=${goods.goodsId}`;
+            title: item.goodsName,
+            desc: "",
+            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+            ___index: this.tabCurrentlyIndex,
+          };
+          this.data.options.list.push(pushGoodsDetail);
+        });
+      }
     },
     // 选择链接回调
     selectedLink(val) {
-      this.selected.url = this.$options.filters.formatLinkType(val);
+      this.selected[this.current].url =
-      this.selected.type =
+        this.$options.filters.formatLinkType(val);
+      this.selected[this.current].type =
         val.___type === "other" && val.url === "" ? "link" : "other";
+
+      console.log(this.selected[this.current]);
     },
     handleSelectLink(index) {
       // 调起选择链接弹窗
       this.$refs.liliDialog.open("link");
       this.current = index;
     },
-    handleSelectImg(index){
+  },
-      // 选择图片
+};
-      this.$refs.ossManage.selectImage = true;
-      this.picModelFlag = true;
-      this.current = index;
-    }
-  }
-}
 </script>
 
 <style scoped lang="scss">
 @import "./setup-box.scss";
-.goods-type-wrapper{
+.goods-type-wrapper {
   position: relative;
-  &:hover{
+}
-    >.setup-box{
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
       display: block;
     }
   }
 }
-.column-img{
+.column-goods-config {
-  width: 100px;
+  flex: 2;
-  height: 100px;
+  align-items: center;
+  justify-content: space-between;
 }
-.goods-list-item{
+.goods-list-item {
+  margin-bottom: 14.3px;
   width: 287px;
   height: 343.7px;
   border-radius: 9.8px;
   opacity: 1;
   cursor: pointer;
-  background: #FFFFFF;
+  background: #ffffff;
   transition: 0.35s;
-  box-shadow: 0px 1px 13px 0px #E5E5E5;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
-  &:hover{
+  &:hover {
-    box-shadow: 0px 1px 14px 0px #C5C5C5;
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
   }
 }
-.goods-img{
+.goods-img {
   text-align: center;
-  >img{
+  > img {
     width: auto;
     max-height: 183px;
   }
 }
-.goods-name{
+.goods-name {
   font-size: 18px;
-
   font-weight: normal;
   line-height: 22px;
   text-align: center;
@@ -203,7 +316,7 @@ export default {
   color: #333333;
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-desc{
+.goods-desc {
   font-size: 14px;
   font-weight: normal;
   line-height: 17px;
@@ -214,22 +327,22 @@ export default {
 
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-price{
+.goods-price {
   font-size: 25.2px;
   font-weight: normal;
   line-height: 30px;
   text-align: center;
   letter-spacing: 0px;
 
-  color: #F31947;
+  color: #f31947;
   -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
 }
-.goods-type-line{
+.goods-type-line {
   justify-content: space-between;
   align-items: center;
   margin-bottom: 25px;
 }
-.goods-type-title{
+.goods-type-title {
   font-size: 31px;
   font-weight: normal;
   line-height: 37px;
@@ -237,17 +350,16 @@ export default {
 
   color: #333333;
 }
-.active{
+.active {
-  color: #F31947;
+  color: #f31947;
 }
-.goods-type-labels{
+.goods-type-labels {
   font-size: 21px;
   font-weight: normal;
   line-height: 25px;
   letter-spacing: 0px;
-
 }
-.goods-type-item{
+.goods-type-item {
   margin-left: 28px;
 }
 </style>

manager/src/views/page-decoration/modelList/mixModel.vue

@@ -0,0 +1,52 @@
+<template>
+    <div class="mix-model">
+      <!-- 左侧 -->
+      <div class="left-card">
+        <left :data="data" />
+      </div>
+      <!-- 右侧 -->
+      <div class="right-card">
+        <right :data="data" />
+      </div>
+    </div>
+</template>
+
+<script>
+import left from './mixs/mix-goods'
+import right from './mixs/mix-brand'
+export default {
+  name: "mixModel",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {
+    left,
+    right
+  },
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.mix-model{
+  display: flex;
+  justify-content:space-between;
+}
+.left-card,.right-card{
+  width: 584px;
+  height: 344px;
+  border-radius: 10px;
+  opacity: 1;
+  background: #FFFFFF;
+  box-shadow: 0px 1px 13px 0px #E5E5E5;
+}
+</style>

manager/src/views/page-decoration/modelList/mixs/mix-brand.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="flex" v-if="data.options.right.model == 'brand'">
+    <div class="left-side" >
+      <img :src="data.options.right.data.image.src" alt="">
+    </div>
+    <div>
+      <div class="flex goods-list">
+        <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.right.data.list">
+          <div class="goods-thumbnail">
+            <img :src="item.img" alt="">
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mix-goods",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+  justify-content:right;
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  width: 173.6px;
+  height: 119px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+  &:hover{
+    box-shadow: 0px 1px 6px 0px #E5E5E5;
+  }
+
+}
+.left-side {
+  >img{
+    width: 254px;
+    height: 344px;
+    border-radius: 9.8px 0px 0px 9.8px;
+    opacity: 1;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>

manager/src/views/page-decoration/modelList/mixs/mix-goods.vue

@@ -0,0 +1,123 @@
+<template>
+    <div class="flex" v-if="data.options.left.model == 'goods'">
+      <div class="left-side" >
+        <img :src="data.options.left.data.image.src" alt="">
+      </div>
+      <div>
+          <div class="badge-box flex">
+            <div class="badge">
+              {{data.options.left.data.badge}}
+            </div>
+          </div>
+          <div class="flex goods-list">
+            <div class="goods-item flex" :key="index" v-for="(item,index) in data.options.left.data.list">
+              <div class="goods-thumbnail">
+                <img :src="item.img" alt="">
+              </div>
+              <div class="goods-detail">
+                <div class="goods-detail-title">{{item.title}}</div>
+                <div class="goods-detail-price">{{item.price | unitPrice('¥')}}</div>
+              </div>
+            </div>
+          </div>
+      </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: "mix-goods",
+  data() {
+    return {}
+  },
+  props: {
+    data: {
+      type: Object,
+      default: {}
+    }
+  },
+  components: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.goods-detail{
+
+}
+.goods-detail-title{
+  font-size: 13px;
+  font-weight: normal;
+  line-height: 16px;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #333333;
+}
+.goods-detail-price{
+  font-size: 14px;
+  font-weight: normal;
+  line-height: 17px;
+  letter-spacing: 0px;
+  color: #F31947;
+  margin-top: 8px;
+  margin-bottom:10px;
+}
+.goods-thumbnail{
+  margin-left: 7px;
+  display: flex;
+  align-items: center;
+  >img{
+    width:90px;
+    height: 90px;
+  }
+}
+.badge-box{
+  justify-content:right;
+}
+.goods-list{
+  flex-wrap: wrap;
+  justify-content:space-between;
+  padding: 0 16px;
+}
+.goods-item{
+  display: flex;
+  align-items: center;
+  width: 173.6px;
+  height: 119px;
+  border-radius: 9.8px;
+  opacity: 1;
+  transition: .35s;
+  background: #FFFFFF;
+  margin-bottom:9px;
+  &:hover{
+    box-shadow: 0px 1px 6px 0px #E5E5E5;
+  }
+
+}
+.left-side {
+  >img{
+    border-radius: 10px 0px 0px 10px;
+    display: block;
+    width: 196.7px;
+    height: 343.7px;
+  }
+}
+.badge {
+  width: 50px;
+  height: 27px;
+  line-height:27px;
+  border-radius: 13.3px 0px 0px 13.3px;
+  opacity: 1;
+  background: #F31947;
+  font-size: 12.6px;
+  font-weight: normal;
+  text-align: center;
+  letter-spacing: 0px;
+  color: #FFFFFF;
+  margin-top: 26px;
+  margin-bottom:17px;
+}
+</style>

manager/src/views/page-decoration/modelList/onlyGoodsModel.vue

@@ -0,0 +1,280 @@
+<template>
+  <div class="goods-type-wrapper">
+    <!-- 商品部分 -->
+    <div class="goods-list flex">
+      <div
+        class="goods-list-item"
+        v-for="(item, index) in data.options.list"
+        :key="index"
+      >
+        <div>
+          <div class="goods-name wes-2">{{ item.title }}</div>
+          <div class="goods-desc">{{ item.desc }}</div>
+        </div>
+        <div class="goods-img">
+          <img :src="item.img" />
+        </div>
+      </div>
+      <div class="setup-box">
+        <div>
+          <Button
+            size="small"
+            @click.stop="handleSelectModel(data.options.list)"
+          >编辑</Button
+          >
+        </div>
+      </div>
+    </div>
+
+    <Modal
+      v-model="showModal"
+      title="装修"
+      draggable
+      width="800"
+      :z-index="100"
+      :mask-closable="false"
+    >
+      <div class="modal-tab-bar">
+            <div class="flex flex-a-c">
+              <Button class="add-goods" @click="addCurrentGoods">
+                添加商品
+              </Button>
+            </div>
+
+            <div
+              v-for="(item, index) in data.options.list"
+              :key="index"
+              class="draggable"
+            >
+              <div class="flex">
+                <img :src="item.img" class="column-img" />
+                <div class="flex column-goods-config">
+                  <div class="column-config">
+                    <div>
+                      标题：
+                      <Input v-model="item.title"></Input>
+                    </div>
+                    <div>
+                      描述：
+                      <Input v-model="item.desc"></Input>
+                    </div>
+                  </div>
+                  <Button @click="delGoods(item,index)">删除</Button>
+                </div>
+              </div>
+            </div>
+
+      </div>
+    </Modal>
+
+    <!-- 选择商品。链接 -->
+    <liliDialog
+      ref="liliDialog"
+      @selectedLink="selectedLink"
+      @selectedGoodsData="selectedGoodsData"
+    ></liliDialog>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "onlyGoodsList",
+  props: {
+    data: {
+      type: Object,
+      default: {},
+    },
+  },
+  data() {
+    return {
+      flag:false,
+      tabIndex:0,
+      current: 0,
+      showModal: false,
+      selected: {}, // 已选数据
+      picModelFlag: false,
+    };
+  },
+  mounted(){
+
+  },
+  methods: {
+    // 删除商品
+    delGoods(val,i) {
+      this.data.options.list.splice(i, 1);
+    },
+    // 添加当前选项卡中的商品
+    addCurrentGoods() {
+      this.$refs.liliDialog.open("goods");
+    },
+    // 编辑模块
+    handleSelectModel(item) {
+      console.log(item);
+      this.selected = item;
+      this.showModal = true;
+    },
+    // 选择商品回调
+    selectedGoodsData(val) {
+      if (val.length) {
+        val.forEach((item) => {
+          const pushGoodsDetail = {
+            img: item.thumbnail,
+            price: item.price,
+            title: item.goodsName,
+            desc: "",
+            url: `/goodsDetail?skuId=${item.id}&goodsId=${item.goodsId}`,
+          };
+          this.data.options.list.push(pushGoodsDetail);
+        });
+      }
+    },
+    // 选择链接回调
+    selectedLink(val) {
+      this.selected[this.current].url =
+        this.$options.filters.formatLinkType(val);
+      this.selected[this.current].type =
+        val.___type === "other" && val.url === "" ? "link" : "other";
+
+      console.log(this.selected[this.current]);
+    },
+    handleSelectLink(index) {
+      // 调起选择链接弹窗
+      this.$refs.liliDialog.open("link");
+      this.current = index;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+@import "./setup-box.scss";
+.goods-type-wrapper {
+  position: relative;
+}
+.del-btn{
+  margin-left:10px;
+}
+.tab-bar {
+  margin-bottom: 20px;
+}
+.draggable {
+  padding: 10px;
+  border-bottom: 1px solid #ededed;
+  transition: 0.35s;
+
+  &:hover {
+    background-color: #ededed;
+  }
+}
+.column-config {
+  margin-left: 10px;
+  > * {
+    margin: 4px;
+  }
+}
+.column-img {
+  width: 100px;
+  height: 100px;
+}
+.add-goods {
+  margin-left: 20px;
+  margin-bottom: 10px;
+}
+.goods-list {
+  position: relative;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  &:hover {
+    > .setup-box {
+      display: block;
+    }
+  }
+}
+.column-goods-config {
+  flex: 2;
+  align-items: center;
+  justify-content: space-between;
+}
+.goods-list-item {
+  padding-top: 34.8px;
+  margin-bottom: 14.3px;
+  width: 287px;
+  height: 343.7px;
+  border-radius: 9.8px;
+  opacity: 1;
+  cursor: pointer;
+  background: #ffffff;
+  transition: 0.35s;
+  box-shadow: 0px 1px 13px 0px #e5e5e5;
+  &:hover {
+    box-shadow: 0px 1px 14px 0px #c5c5c5;
+  }
+}
+.goods-img {
+  text-align: center;
+  > img {
+    width: auto;
+    max-height: 183px;
+  }
+}
+.goods-name {
+  margin-bottom: 11.9px;
+  font-size: 25px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #333333;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-desc {
+  margin-bottom: 30px;
+  font-size: 16px;
+  font-weight: normal;
+  line-height: 19px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #666666;
+
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-price {
+  font-size: 25.2px;
+  font-weight: normal;
+  line-height: 30px;
+  text-align: center;
+  letter-spacing: 0px;
+
+  color: #f31947;
+  -webkit-text-stroke: #979797 0.7px; /* 浏览器可能不支持 */
+}
+.goods-type-line {
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 25px;
+}
+.goods-type-title {
+  font-size: 31px;
+  font-weight: normal;
+  line-height: 37px;
+  letter-spacing: 0px;
+
+  color: #333333;
+}
+.active {
+  color: #f31947;
+}
+.goods-type-labels {
+  font-size: 21px;
+  font-weight: normal;
+  line-height: 25px;
+  letter-spacing: 0px;
+}
+.goods-type-item {
+  margin-left: 28px;
+}
+</style>

manager/src/views/page-decoration/renovation.vue

@@ -108,7 +108,8 @@ export default {
 }
 .model-list {
   width: 130px;
-  height: auto;
+  height: 450px;
+  overflow-y: auto;
   padding: 10px;
   background: #fff;
   margin-top: 60px;