baiqiu-cms-decoration-dg 0.0.22 → 0.0.24

package/src/components/cms/singleLayout/singleLayout.js

@@ -0,0 +1,69 @@
+// import draggable from "vuedraggable";
+import textItem from "../textItem";
+import imgNav from "../imgNav/";
+import videoItem from '../videoItem/';
+import swiperItem from '../swiperItem/';
+import buttonItem from '../buttonItem/';
+import productItem from "../productItem/";
+
+export default {
+  name: "singleLayout",
+  inheritAttrs: false,
+  components: {
+    textItem,
+    imgNav,
+    videoItem,
+    swiperItem,
+    buttonItem,
+    productItem,
+  },
+  props: {
+    layOutData: {
+      type: Object,
+      default: () => { }
+    },
+    ratio: {
+      type: Number,
+      default: 1
+    },
+    // 是否可拖拽进入
+    canDragInc: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      vLine: [],
+      hLine: [],
+      componentName:''
+    };
+  },
+  computed: {
+    layoutStyle:function () {
+      if(this.layOutData.layoutStyle){
+        return {
+          backgroundImage:this.layOutData.layoutStyle.bgStyle.type === 2 && this.layOutData.layoutStyle.bgStyle.picList.length != 0 && `url(${this.layOutData.layoutStyle.bgStyle.picList[0].resourcePath})`,
+          backgroundColor:this.layOutData.layoutStyle.bgStyle.type === 1 && this.layOutData.layoutStyle.bgStyle.backgroundColor
+        }
+      }else{
+        return {}
+      }
+    }
+  },
+  methods: {
+    getCustom() {
+      let list = this.layOutData.componentList.filter(item=>{
+        return item.type>100
+      })
+      return list
+    },
+    reportData(h) {
+      let refs = this.$refs.singleComponent
+      refs&&refs.forEach(item => {
+        item.reportData(h)
+      });
+    }
+  }
+};
+1

package/src/components/cms/singleLayout/singleLayout.scss

@@ -0,0 +1,21 @@
+.single-layout {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+  background-size: cover;
+  background-repeat: no-repeat;
+
+  .lay-tip {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    color: #1890FF;
+    font-size: 18px;
+
+    .el-icon-plus {
+      margin-right: 13px;
+    }
+  }
+}

package/src/components/cms/singleLayout/singleLayout.vue

@@ -0,0 +1,39 @@
+<template>
+  <div
+    class="single-layout"
+    :style="layoutStyle"
+  >
+    <div
+      style="width: 100%; height: 100%"
+    >
+      <div v-for="(item, index) in layOutData.componentList.filter(item=>{return item.type<=100})" :key="index">
+        <component
+          ref="singleComponent"
+          :is="item.component"
+          :ratio="ratio"
+          :attributeJson="item.attributeJson"
+          :sortId="item.sort"
+          :key="item.sort"
+          v-bind="$attrs"
+          v-on="$listeners"
+          v-if="item.displayType == 1"
+          :style="{zIndex: index + 1}"
+        >
+        </component>
+      </div>
+       <div>
+          <slot name="dgCustomComponent" :attributeJson="getCustom()"></slot>
+        </div>
+      <!--辅助线END-->
+    </div>
+  </div>
+</template>
+
+<script>
+import singleLayoutJs from "./singleLayout.js";
+export default singleLayoutJs;
+</script>
+
+<style lang="scss" scoped>
+@import "singleLayout";
+</style>

package/src/components/cms/slideLayout/index.js

@@ -0,0 +1,2 @@
+import slideLayout from './slideLayout.vue';
+export default slideLayout;

package/src/components/cms/slideLayout/slideLayout.js

@@ -0,0 +1,248 @@
+import Swiper from 'swiper/js/swiper.js'
+import singleLayout from '../singleLayout/'
+export default {
+  name: 'slideLayout',
+  components: {
+    singleLayout
+  },
+  props: {
+    layOutData: {
+      type: Object,
+      default: () => {},
+    },
+    ratio: {
+      type: Number,
+      default: 1,
+    },
+    mode: {
+      type: String,
+      default: 'pc',
+    },
+    recordId: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      swiper: '',
+      slideIndex: 0, // 当前轮播项
+      layWidth: 1920,
+      isInit: false, // 是否已初始化轮播图
+      slideList:[]
+    }
+  },
+  watch: {
+    layoutStyle: {
+      handler(val) {
+        this.layWidth = (this.mode == 'pc' ? 1920 : 750) * (val.widthStyle.width / 100)
+      },
+      deep: true,
+      immediate: true,
+    },
+    slideLen: {
+      handler() {
+        this.calculateWidth()
+      },
+      immediate: true,
+    },
+  },
+  computed: {
+    layoutStyle() {
+      return this.layOutData.layoutStyle
+    },
+    // 分页器，导航按钮样式
+    paginationStyle() {
+      return this.layOutData.paginationStyle
+    },
+    // 背景设置
+    bgStyle() {
+      return this.layOutData.bgStyle
+    },
+    // 轮播列表
+    list() {
+      return this.layOutData.list
+    },
+    // 样式type
+    styleType() {
+      return this.layOutData.styleType
+    },
+    // 指示器type
+    indicatorType() {
+      return this.layOutData.indicatorType
+    },
+    // 宽度设置 1：自适应宽度 2：等宽设置
+    widthStyle() {
+      return this.layOutData.widthStyle
+    },
+    // 是否有左右轮播箭头
+    hasSwiperButton() {
+      return this.indicatorType == 2
+    },
+    // 分页器样式
+    pageStyle() {
+      return {
+        color: this.layOutData.paginationStyle.color,
+      }
+    },
+    // 背景样式
+    backStyle() {
+      let {bgStyle, layoutStyle, styleType, mode } = this
+      return  function(index){
+        let item = this.list[index]
+        let backgroundColor = ''
+        let backgroundImage = ''
+        if(bgStyle.status == 1){
+          //整体
+          if(bgStyle.type == 1){
+            backgroundColor = bgStyle.backgroundColor || ''
+          }else{
+            backgroundImage = bgStyle.picList.length != 0? `url(${bgStyle.picList[0].resourcePath})`:''
+          }
+        }else{
+          //单个
+          if(item.bgStyle.type == 1){
+            backgroundColor = item.bgStyle.backgroundColor || ''
+          }else{
+            backgroundImage = item.bgStyle.picList.length != 0? `url(${item.bgStyle.picList[0].resourcePath})`:''
+          }
+        }
+        let hasCenteredSlides = mode == 'mobile' || (mode == 'pc' && styleType == 2)
+
+        let allWidth = hasCenteredSlides ? this.layWidth - (this.layOutData.lineSlideNum + 1) * 0 - (mode=='mobile' ? 20 : 556) : this.layWidth
+        // 样式二 原始宽度 - slide间隙 - 两边露出的间距
+        return {
+          width: allWidth / this.layOutData.lineSlideNum * this.ratio + 'px',
+          height: `${Math.ceil(layoutStyle.height * this.ratio)}px`, // 向上取整，避免部分机型白线
+          backgroundColor: backgroundColor,
+          backgroundImage: backgroundImage,
+        }
+      }
+    },
+    slideLen() {
+      return this.layOutData.list.length
+    },
+    centeredSlides() {
+      return this.mode == 'mobile' || (this.mode == 'pc' && this.styleType == 2)
+    }
+  },
+  methods: {
+    calculateWidth:function () {
+      let {list} = this
+      list.forEach((item, index)=>{
+        item.i = index
+      })
+      // 前后各增加相同数目的滑动容器，为了自行实现loop
+      let item = JSON.parse(JSON.stringify(list))
+      // 增加判断是否为复制出来的元素，防止影响数据上报
+      item.forEach(ele=>{
+        ele.isCopy = true
+      })
+      this.slideList = list.concat(JSON.parse(JSON.stringify(item)))
+      this.slideList = item.concat(this.slideList)
+      this.$nextTick(()=> {
+        // type: 1 自适应宽度 计算每个模块的宽度
+        if (this.layOutData.widthStyle.type == 2 ) {
+          this.initSwiper()
+          return
+        }
+        let { layWidth } = this
+        this.slideList.forEach((item) => {
+          let ele = item.componentList[0]
+          let slideWidth = 0
+          if (ele) {
+            let attr = ele.attributeJson
+            if (ele.type == 2) {
+              // 图片
+              let hasPic = attr.list.some((item) => {
+                return item.picList.length != 0
+              })
+              slideWidth = !hasPic ? layWidth : attr.baseStyle.w + attr.baseStyle.l
+            } else if (ele.type == 3) {
+              // 视频
+              let hasPic = attr.videoInfo.list.length != 0
+              slideWidth = !hasPic ? layWidth : attr.baseStyle.w + attr.baseStyle.l
+            } else {
+              slideWidth = attr.baseStyle.w + attr.baseStyle.l
+            }
+          } else {
+            // 若slide内暂无元素，默认使用父级slide的宽
+            slideWidth = layWidth
+          }
+          this.$set(item, 'slideWidth', slideWidth)
+        })
+        this.$nextTick(()=> {
+          this.initSwiper()
+        })
+      })
+    },
+    // 初始化轮播图
+    initSwiper() {
+      this.$nextTick(() => {
+        if (this.swiper) {
+          this.swiper.destroy(true, true)
+          this.swiper = null
+        }
+        let { layOutData, widthStyle, ratio, slideLen } = this
+        this.options = {
+          effect: 'slide',
+          observer: true, //开启动态检查器，监测swiper和slide
+          observeParents: true,
+          slidesPerView: (this.centeredSlides || widthStyle.type == 1) ? 'auto' : layOutData.lineSlideNum,
+          preventInteractionOnTransition: true,
+          slidesPerGroup: 1,
+          slidesPerGroupAuto: true,
+          centeredSlides: (this.centeredSlides || widthStyle.type == 1),
+          // loop: layOutData.lineSlideNum < layOutData.slideNum ,
+          spaceBetween: this.centeredSlides ? 0 * ratio : 0,
+          autoplay:
+            layOutData.autoPlay && this.list.length > 1
+              ? {
+                  delay: layOutData.interval * 1000,
+                  disableOnInteraction: true,
+                  stopOnLastSlide: false,
+                }
+              : false,
+        }
+
+        if(widthStyle.type == 1) {
+          this.options.loopedSlides = 4
+          this.options.loopAdditionalSlides = 2
+        }
+
+        let that = this
+        this.options.on = {
+          slideNextTransitionEnd: function () {
+            if(this.activeIndex == slideLen *2 ) {
+              this.slideTo(slideLen, 0)
+            }
+            that.slideIndex = this.activeIndex
+          },
+          slidePrevTransitionEnd: function() {
+            if(this.activeIndex == slideLen - 1 ) {
+              this.slideTo(slideLen *2 - 1, 0)
+            }
+          }
+        }
+
+        // 导航按钮定义
+        if (this.hasSwiperButton) {
+          this.options.navigation = {
+            nextEl: `.swiper-button-next-${this.recordId}`,
+            prevEl: `.swiper-button-prev-${this.recordId}`,
+          }
+        }
+
+        this.swiper = new Swiper(`.swiper-container-${this.recordId}`, this.options)
+        this.swiper.slideTo(slideLen, 0)
+        console.log('\x1B[32m%s\x1B[0m', '初始化轮播图', this.swiper)
+      })
+    },
+    reportData(h) {
+      let refs = this.$refs.slideSingle
+      refs&&refs.forEach(item=>{
+        item.reportData(h)
+      })
+    }
+  },
+}

package/src/components/cms/slideLayout/slideLayout.scss

@@ -0,0 +1,18 @@
+.slide-wrap {
+  overflow: hidden;
+  height: 100%;
+  .swiper-container {
+    height: 100%;
+    .swiper-slide {
+      &.slide-auto {
+        width: auto!important;
+      }
+      .slide-con {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        background-size: cover;
+      }
+    }
+  }
+}

package/src/components/cms/slideLayout/slideLayout.vue

@@ -0,0 +1,44 @@
+<template>
+  <div
+    class="slide-wrap"
+    :style="{ '--hoverColor': paginationStyle.hoverColor || paginationStyle.color, '--activeColor': paginationStyle.activeColor, '--color': paginationStyle.color }">
+    <div
+      :class="[`swiper-container swiper-container-${recordId} swiper-container-${indicatorType}`]"
+      :id="`mySwiper-${recordId}`"
+      :key="indicatorType">
+      <div class="swiper-wrapper">
+        <div
+          :class="['swiper-slide', {'slide-auto': widthStyle.type == 1 || centeredSlides}]"
+          v-for="(carousel, index) in slideList"
+          :key="index">
+          <div 
+            class="slide-con" 
+            :style="[backStyle(carousel.i), {
+              width: widthStyle.type == 1 ? `${carousel.slideWidth * ratio}px` : backStyle(carousel.i).width
+            }]">
+            <singleLayout :ref="carousel.isCopy ? '':'slideSingle'" v-bind="$attrs" v-on="$listeners" :layOutData="carousel" :ratio="ratio" :recordId="recordId" :mode="mode"></singleLayout>
+          </div>
+        </div>
+      </div>
+
+      <!-- 如果需要导航按钮 -->
+      <div :class="['swiper-button-prev', `swiper-button-prev-${recordId}`]" v-if="hasSwiperButton">
+        <slot name="swiper-button-prev">
+          <div class="arrow"><span :style="pageStyle" class="cms2iconfont iconarrow-left"></span></div>
+        </slot>
+      </div>
+      <div :class="['swiper-button-next', `swiper-button-next-${recordId}`]" v-if="hasSwiperButton">
+        <slot name="swiper-button-next">
+          <div class="arrow"><span :style="pageStyle" class="cms2iconfont iconarrow-right"></span></div>
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import slideLayoutJs from './slideLayout.js';
+export default slideLayoutJs;
+</script>
+<style lang="scss" scoped>
+@import 'slideLayout';
+</style>

package/src/components/cms/swiperItem/index.js

@@ -0,0 +1,2 @@
+import swiperItem from './swiperItem.vue'
+export default swiperItem

package/src/components/cms/swiperItem/swiperItem.js

@@ -0,0 +1,228 @@
+import Swiper from 'swiper/js/swiper.js'
+import 'swiper/css/swiper.css'
+import hotspot from '../hotspot/'
+import { cmsMixin } from '../mixin'
+import videoPlayer from '../videoPlayer/'
+import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils'
+
+export default {
+  name: 'swiperItem',
+  mixins: [cmsMixin],
+  components: {
+    hotspot,
+    myVideoPlayer: videoPlayer
+  },
+  props: {
+    sortId: {
+      type: Number
+    }
+  },
+  data() {
+    return {
+      hasSwiperItem: false,
+      swiper: '',
+      activeIndex: 0, 
+      slideIndex: 0,
+      hasInitSwiper: false,
+      positionList: [],
+      positionTotal: [], // 当前组件之前的坑位和
+    }
+  },
+  computed: {
+    bgStyle() {
+      return this.attributeJson.bgStyle
+    },
+    list() {
+      return this.attributeJson.list
+    },
+    styleType() {
+      return this.attributeJson.styleType
+    },
+    indicatorType() {
+      return this.attributeJson.indicatorType
+    },
+    // 分页器颜色
+    paginationStyle() {
+      return this.attributeJson.paginationStyle
+    },
+    pageStyle() {
+      return {
+        color: this.attributeJson.paginationStyle.color
+      }
+    },
+    hasSwiperPagination() {
+      return this.indicatorType == 3
+    },
+    // 是否有导航指示器
+    hasSwiperButton() {
+      return this.indicatorType !=1
+    },
+    // 是否有导航条
+    hasScrollBar() {
+      return this.mode == 'pc' && this.indicatorType == 2
+    },
+    // 是否为两边露出的样式
+    isSpaceSwiper() {
+      return this.mode == 'mobile' && this.styleType == 2
+    }
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      let positionList = []
+      let positionTotal = []
+      this.list.forEach(item=>{
+        if((item.type == 1 && item.popList.length!=0)||(item.videoHotInfo.popList.length!=0)) {
+          positionList.push(item.type == 1?item.popList.length:item.videoHotInfo.popList.length)
+        } else {
+          positionList.push(1)
+        }
+      })
+
+      positionList.forEach((item, index)=>{
+        let preList = positionList.slice(0, index)
+        let preTotal = preList.reduce((pre, cur)=>{
+          return pre + cur
+        }, 0)
+        positionTotal.push(preTotal)
+      })
+
+      this.positionList = positionList
+      this.positionTotal = positionTotal
+      this.judgeSwiper()
+    })
+  },
+  methods: {
+    judgeSwiper() {
+      let list = this.attributeJson.list
+      let index = list.findIndex(item => {
+        return item.picList.length != 0 || item.videoInfo.list.length != 0
+      })
+      this.hasSwiperItem = index > -1
+      if (this.hasSwiperItem) {
+        list.forEach((item, index)=>{
+          item.i = index
+        })
+        let item = JSON.parse(JSON.stringify(list))
+        this.swiperList = list.concat(JSON.parse(JSON.stringify(item)))
+        this.swiperList = item.concat(this.swiperList)
+        // 初始化轮播
+        this.initSwiper(true)
+      }
+    },
+    initSwiper: function(flag) {
+      if (this.hasSwiperItem || (this.bgStyle.status === 1 && this.bgStyle.picList.length != 0)) {
+        this.$nextTick(() => {
+          if (this.swiper) {
+            this.swiper.destroy(true, true)
+            this.swiper = null
+          }
+          let { attributeJson } = this
+          this.options = {
+            effect: 'slide',
+            // loop: true,
+            observer: true,
+            observeParents: true,
+            preventInteractionOnTransition: true,
+            autoplay: attributeJson.autoPlay
+              ? {
+                  delay: attributeJson.interval * 1000,
+                  disableOnInteraction: true,
+                  stopOnLastSlide: false
+                }
+              : false
+          }
+          if(this.mode == 'mobile' && this.styleType == 2) {
+            this.options.spaceBetween = 10
+            this.options.loop = false
+            this.options.slidesPerView = 'auto'
+            this.options.centeredSlides = true
+          }
+          
+          // 导航按钮定义
+          if (this.hasSwiperButton) {
+            this.options.navigation = {
+              nextEl: `.swiper-button-next-${this.sortId}`,
+              prevEl: `.swiper-button-prev-${this.sortId}`
+            }
+          }
+
+          let that = this
+          let slideLen = this.list.length
+          this.options.on =  {
+            slideChangeTransitionEnd: function(){
+              //切换结束时，告诉我现在是第几个slide
+              that.activeIndex = this.activeIndex
+              that.slideIndex = that.swiperList[this.activeIndex].i
+  
+            },
+            slideNextTransitionEnd: function () {
+              if(this.activeIndex == slideLen *2 ) {
+                this.slideTo(slideLen, 0)
+              }
+            },
+            slidePrevTransitionEnd: function() {
+              if(this.activeIndex == slideLen - 1 ) {
+                this.slideTo(slideLen *2 - 1, 0)
+              }
+            }
+          }
+          this.swiper = new Swiper(`.swiper-container-${this.sortId}`, this.options)
+          if(this.swiper instanceof Array) {
+            this.swiper.forEach(item=>{
+              item.slideTo(slideLen, 0)
+            })
+          } else {
+            this.swiper.slideTo(slideLen, 0)
+          }
+          if(flag) {
+            this.reportData(this.windowHeight)
+          }
+        })
+      }
+    },
+    swiperSlide(i) {
+      this.swiper.slideTo(i)
+      this.slideIndex = i
+    },
+    // 上报数据
+    reportData(h) {
+      this.windowHeight = h
+      let ref = this.$refs[`swiper${this.attributeJson.sort}`]
+      if(!ref || ref.style.display == 'none') return
+      if(!this.hasInitSwiper && this.enterClass) {
+        this.hasInitSwiper = true
+        this.initSwiper()
+      }
+      let el = ref.getBoundingClientRect()
+      if(el.top <= h) {
+        this.list.forEach((item, i) => {
+          if(item.isReport) return
+          if ((item.type == 1 && item.popList.length!=0)||(item.videoHotInfo.popList.length!=0)) {
+            this.$refs[`hotspot${this.sortId}${i}`][0].reportData(h, this.positionTotal[i])
+            return
+          }
+          item.isReport = true
+          this.dataSend(item, this.positionTotal[i])
+        })
+      }
+    },
+    dataSend(item, preTotal) {
+      dataSaveDecorationPageComponentEventFn(
+        {
+          uniqueId: this.recordId + '_' + this.sortId, // 组件_id
+          uniqueName: this.attributeJson.uniqueName, // 组件_名称
+          componentType: 1,
+          popData: {},
+          materialId: this.recordId+ '_' + this.sortId + '_' + item.sort, //素材id
+          materialName: item.uniqueName, //素材名称
+          refererPagePath: this.refererPagePath,
+          brand: this.brand,
+          path: this.path,
+          position: preTotal + 1,
+          event: 'bannerShow'
+        },
+        this.envUrl
+      )
+    }
+  }
+}