admin_home/src/layout/components/template/pages/index/sector.vue

<template>
  <div class="sectorBox">
    <!-- <div class="sectorItemBox" @click="addModule('headSector',19)">
      <div class="sectorItem">
        <img src="@/assets/template/sector/headSector.png" />
      </div>
      <div class="sectorItemTitle">页头</div>
    </div>
    <div class="sectorItemBox" @click="addModule('menuSector',2)">
      <div class="sectorItem">
        <img src="@/assets/template/sector/menuSector.png" />
      </div>
      <div class="sectorItemTitle">网站导航</div>
    </div> -->
    <div class="sectorItemBox" @click="addModule('imgTitleSector',8,imgTitleSector)" @drag="drag('imgTitleSector',8,imgTitleSector)" @dragend="dragend('imgTitleSector',8,imgTitleSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/imgTitleSector.png"/>
      </div>
      <div class="sectorItemTitle">通栏广告</div>
    </div>
    <div class="sectorItemBox" @click="addModule('bannerSector',33,bannerSector)" @drag="drag('bannerSector',33,bannerSector)" @dragend="dragend('bannerSector',33,bannerSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/bannerSector.png"/>
      </div>
      <div class="sectorItemTitle">焦点图</div>
    </div>
    <div class="sectorItemBox" @click="addModule('manyPictureSector',49,manyPictureSector)" @drag="drag('manyPictureSector',49,manyPictureSector)" @dragend="dragend('manyPictureSector',49,manyPictureSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/moreServicesSector.png"/>
      </div>
      <div class="sectorItemTitle">多图菜单</div>
    </div>
    <div class="sectorItemBox" @click="addModule('commentSector',44,commentSector)" @drag="drag('commentSector',44,commentSector)" @dragend="dragend('commentSector',44,commentSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/commentSector.png"/>
      </div>
      <div class="sectorItemTitle">文章列表带评论</div>
    </div>
    <div class="sectorItemBox" @click="addModule('listSector',33,listSector)" @drag="drag('listSector',33,listSector)" @dragend="dragend('listSector',33,listSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/newsSector.png"/>
      </div>
      <div class="sectorItemTitle">文章列表</div>
    </div>
    <div class="sectorItemBox" @click="addModule('onlyImgSector',32,onlyImgSector)" @drag="drag('onlyImgSector',32,onlyImgSector)" @dragend="dragend('onlyImgSector',32,onlyImgSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/imgSector.png"/> 
      </div>
      <div class="sectorItemTitle">纯图片组合</div>
    </div>
    <div class="sectorItemBox" @click="addModule('friendShipLinkSector',20,friendShipLinkSector)" @drag="drag('friendShipLinkSector',20,friendShipLinkSector)" @dragend="dragend('friendShipLinkSector',20,friendShipLinkSector)" >
      <div class="sectorItem">
        <img src="@/assets/template/sector/linkSector.png"/>
      </div>
      <div class="sectorItemTitle">友情链接</div>
    </div>
    <!-- <div class="sectorItemBox">
      <div class="sectorItem">
        <img src="@/assets/template/sector/footerSector.png" @click="addModule('footerSector',38)"/>
      </div>
      <div class="sectorItemTitle">页尾板块</div>
    </div> -->
  </div>
</template>

<script>

export default {
  props: {
    type: {
     
    },
  },
  data() {
    return {
      //添加通栏广告模块 start---------------------------------------->
      imgTitleSector:{
        sectorName:"imgTitleSector",//板块名称
        componentList:[
          {
            component_type:3,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
            component_style:1,//该组件使用哪个展示样式
            component_name:"",
            sort:1,
            componentData:{
              ad_id:"",//广告位id
              text:"通栏广告", //广告位名称
              width:1200, //广告位宽度
              height:60, //广告位高度
            }//该组件不请求指定类型的数据，但是后端需要返回imgUrl
          }
        ]
      },
      //添加通栏广告模块 start---------------------------------------->

      //添加banner模块 start---------------------------------------->
      bannerSector:{
        sectorName:"bannerSector",//板块名称
        componentList:[
          {
            component_type:1,//组件类型 1=新闻(单个) 2=新闻(多个) 3=广告 4=友情链接 5=底部导航 6=静态html组件 7=文字 8=评论
            component_style:1,//该组件使用哪个展示样式
            component_name:"mainTitle",//组件名称
            sort:1,//组件排序
            componentData:{//该组件请求的数据
              category_id:[],//请求的导航id 如果上面的component_type是1，这里只会有1个[[1]],如果是2，这里就会有多个[[1,3],[1,4,8]]
              page:1,//请求第几页
              pageSize:1,//请求的条数
              listType:[//请求的数据应该包含哪些字段
                "title",//标题
                //"created_time",//创建时间
                //"author",//作者
                //"imgUrl",//缩略图片
                //"introduce",//描述
              ]
            }
          },
          {
            component_type:1,
            component_style:1,
            component_name:"banner",
            sort:2,
            componentData:{
              category_id:[],
              page:1,
              pageSize:3,
              listType:[
                "title",//标题
                "imgUrl"//缩略图片
              ]
            }
          },
          {
            component_type:1,
            component_style:1,
            component_name:"tabsNews",
            sort:3,
            componentData:{
              category_id:[],
              page:1,
              pageSize:5,
              listType:[
                "title",//标题
                "created_time",//创建时间
                "introduce",//描述
              ]
            }
          },
        ]
      },
      //添加banner模块 end---------------------------------------->

      //添加多图板块 start---------------------------------------->
      manyPictureSector:{
        sectorName:"manyPictureSector",//板块名称
        componentList:[
          {
            component_type:7, //纯文本
            component_style:1,
            component_name:"styleTitle",
            sort:1,
            componentData:{
              text:"板块标题"
            }
          },
          {
            component_type:6, //静态组件无需传递数据
            component_style:1,//该组件使用哪个展示样式
            component_name:"fivePicture",
            sort:2,
            componentData:{}
          },
          {
            component_type:1,
            component_style:1,//该组件使用哪个展示样式
            component_name:"tabsNews",
            sort:3,
            componentData:{
              category_id:[],
              page:1,
              pageSize:3,
              listType:[
                "title",//标题
                "created_time",//创建时间
              ]
            }
          },
          {
            component_type:1,
            component_style:1,//该组件使用哪个展示样式
            component_name:"tabsNews",
            sort:4,
            componentData:{
              category_id:[],
              page:1,
              pageSize:3,
              listType:[
                "title",//标题
                "created_time",//创建时间
              ]
            }
          },
        ]
      },
      //添加多图板块 end---------------------------------------->

      //文章列表带评论板块 end---------------------------------------->
      commentSector:{
        sectorName:"commentSector",//板块名称
        componentList:[
          {
            component_type:7, //纯文本
            component_style:1,//该组件使用哪个展示样式
            component_name:"styleTitle",
            sort:1,
            componentData:{
              text:"板块标题"
            }
          },
          {
            component_type:1,
            component_style:2,//该组件使用哪个展示样式
            component_name:"tabsCalendarNews",
            sort:2,
            componentData:{
              category_id:[],
              page:1,
              pageSize:6,
              listType:[
                "title",
                "created_time",
                "introduce"
              ]
            }
          },
          {
            component_type:8,
            component_style:1,//该组件使用哪个展示样式
            component_name:"calendar", //评论组件无需提交数据
            sort:3,
            componentData:{}
          },
        ]
      },
      //文章列表带评论板块 end---------------------------------------->

      //文章列表板块 start---------------------------------------->
      listSector:{
        sectorName:"listSector",//板块名称
        componentList:[
          {
            component_type:7,//纯文本
            component_style:1,//该组件使用哪个展示样式
            component_name:"styleTitle",
            sort:1,
            componentData:{
              text:"板块标题"
            }
          },
          {
            component_type:1,
            component_style:1,//该组件使用哪个展示样式
            component_name:"listNews",
            sort:2,
            componentData:{
              category_id:[],
              page:1,
              pageSize:5,
              listType:[
                "title",
                "created_time"
              ]
            }
          },
          {
            component_type:1,
            component_style:1,//该组件使用哪个展示样式
            component_name:"listNews",
            sort:3,
            componentData:{
              category_id:[],
              page:1,
              pageSize:5,
              listType:[
                "title",
                "created_time"
              ]
            }
          },
        ]
      },
      //文章列表板块 end---------------------------------------->

      //纯图片组合 start---------------------------------------->
      onlyImgSector:{
        sectorName:"onlyImgSector",//板块名称
        componentList:[
          {
            component_type:1,
            component_style:1,//该组件使用哪个展示样式
            component_name:"",
            sort:1,
            componentData:{
              category_id:[],
              page:1,
              pageSize:7,
              listType:[
                "title",
                "imgUrl"
              ]
            }
          }
        ]
      },
      //纯图片组合 end---------------------------------------->

      //友情链接板块 start---------------------------------------->
      friendShipLinkSector:{
        sectorName:"friendShipLinkSector",//友情链接无需提交数据
        componentList:[
          {
            component_type:7, //纯文本
            component_style:1,//该组件使用哪个展示样式
            component_name:"styleTitle",
            sort:1,
            componentData:{
              text:"板块标题"
            }
          },
          {
            component_type:4,
            component_style:1,//该组件使用哪个展示样式
            component_name:"",
            sort:1,
            componentData:{}
          }
        ]
      }
      //友情链接板块 end---------------------------------------->

    }
  },
  methods: {
    //添加模块
    addModule(type,h,jsonData){
      let data = {
        source:"click",//添加方式为点击
        type: type,
        h: h,
        jsonData: jsonData
      }
      console.log(data);
      this.$store.commit('template/addModule',data);
    },
    //拖拽开始
    drag(type,h,jsonData){
      let data = {
        type: type,
        h: h,
        jsonData: jsonData
      }
      this.$store.commit('template/drag',data);
    },
    //拖拽结束
    dragend(type,h,jsonData){
      let data = {
        type: type,
        h: h,
        jsonData: jsonData
      }
      this.$store.commit('template/dragend',data);
    }
  }
}
</script>

<style scoped lang="less">
  .sectorBox {
    height: 100%;
    .sectorItemBox {
      box-sizing: border-box;
      padding: 0 20px 40px 20px;
      height: 130px;
      cursor: pointer;
      .sectorItem {
        border: 1px solid #333644;
        padding: 10px;
        border-radius: 8px;
        &:hover {
          background: #333644;
          transform: scale(1.1);
          transition: all 0.2s ease-in-out;
        }
        img {
          display: block;
          width: 100%;
        }
      }
      .sectorItemTitle {
        color: #fff;
        font-size: 14px;
        padding: 10px 0 0 0;
        text-align: center;
      }
    }
  }
</style>