baiqiu-cms-decoration-dg 0.1.0 → 0.1.4

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

@@ -1,63 +0,0 @@
-// 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: {
-    reportData(h) {
-      let refs = this.$refs.singleComponent
-      refs&&refs.forEach(item => {
-        item.reportData(h)
-      });
-    }
-  }
-};
-1

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

@@ -1,21 +0,0 @@
-.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

@@ -1,42 +0,0 @@
-<template>
-  <div
-    class="single-layout"
-    :style="layoutStyle"
-  >
-    <div
-      style="width: 100%; height: 100%"
-    >
-      <div v-for="(item, index) in layOutData.componentList" :key="index">
-        <template v-if="item.type > 100">
-          {{item.sort}}
-          <slot :name="`dgCustomComponent${item.sort}`" :attributeJson="JSON.parse(JSON.stringify(item.attributeJson))"></slot>
-        </template>
-        <template v-if="item.type <= 100">
-          <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>
-        </template>
-      </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

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

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

@@ -1,248 +0,0 @@
-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

@@ -1,18 +0,0 @@
-.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

@@ -1,44 +0,0 @@
-<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

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

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

@@ -1,228 +0,0 @@
-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
-      )
-    }
-  }
-}