baiqiu-cms-decoration-dg 0.1.0 → 0.1.5

package/src/components/cms/imgNav/imgNav.js

@@ -1,176 +0,0 @@
-import Swiper from 'swiper/js/swiper.js'
-import 'swiper/css/swiper.css'
-import hotspot from "../hotspot";
-import { cmsMixin } from "../mixin";
-import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils';
-
-export default {
-  name: "imgNav",
-  mixins: [cmsMixin],
-  components: {
-    hotspot
-  },
-  props: {
-  },
-  data() {
-    return {
-      swiper: '',
-      imageList:[],
-      popList:[],
-      positionList:[],
-      positionTotal: [],
-      hasInitSwiper: false
-    }
-  },
-  computed: {
-    indicatorType() {
-      return this.attributeJson.indicatorType
-    },
-    // 图片组件样式
-    picStyle() {
-      let { attributeJson, ratio, animationInObj } = this
-      return {
-        animationDuration: `${animationInObj.duration}s`,
-        padding: `0 ${attributeJson.paddingSpacing * ratio}px`,
-        width: `${Math.ceil(attributeJson.baseStyle.w * ratio)}px`,
-      }
-    },
-    // 单个图片样式
-    picItemStyle() {
-      let { attributeJson, ratio } = this
-      let { oneLineCount } = attributeJson
-      return {
-        width: Math.ceil((attributeJson.baseStyle.w * ratio - attributeJson.paddingSpacing * 2 * ratio) / oneLineCount) + 'px',
-        height:  Math.ceil(attributeJson.baseStyle.h * ratio) + 'px',
-        padding: '0 ' + attributeJson.itemSpacing * ratio + 'px',
-      }
-    },
-    list() {
-      return this.attributeJson.list
-    },
-    isSwiper() {
-      return (this.styleType == 3 && this.indicatorType == 2 && this.mode == 'pc') || (this.styleType == 2 && this.indicatorType == 2 && this.mode == 'mobile')
-    },
-    // 是否配置了有效图片
-    hasConfig() {
-      return this.attributeJson.list.some(item => {return item.picList.length!=0})
-    },
-    // 是否有轮播导航
-    hasSwiperButton() {
-      return (this.styleType == 3 && this.indicatorType == 2 && this.mode == 'pc')
-    },
-    // 是否有底部scroll
-    hasScrollBar() {
-      return (this.styleType == 2 && this.indicatorType == 2 && this.mode == 'mobile')
-    }
-  },
-  watch: {
-    isSwiper: {
-      handler(val) {
-        if (val) {
-          this.initSwiper()
-        }
-      },
-      immediate: true,
-    }
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      let positionList = []
-      let positionTotal = []
-      this.list.forEach(item=>{
-        if(item.popList.length != 0) {
-          positionList.push(item.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
-    })
-  },
-  methods: {
-    // 初始化轮播图
-    initSwiper() {
-      if(!this.hasConfig || !this.isSwiper) return
-      this.$nextTick(() => {
-        if (this.swiper) {
-          this.swiper.destroy(true, true)
-          this.swiper = null
-        }
-
-        let { attributeJson } = this
-
-        this.options = {
-          effect: 'slide',
-          autoplay: false,
-          slidesPerView: this.attributeJson.oneLineCount,
-          spaceBetween: attributeJson.itemSpacing
-        }
-
-        if(this.hasSwiperButton) {
-          this.options.navigation = {
-            nextEl: `.swiper-button-next-${this.sortId}`,
-            prevEl: `.swiper-button-prev-${this.sortId}`,
-          }
-        }
-
-        if(this.hasScrollBar) {
-          this.options.scrollbar = {
-            el: `.swiper-scrollbar-${this.sortId}`,
-            draggable: true
-          }
-          this.options.freeMode =  true
-        }
-
-        this.swiper = new Swiper(`.swiper-container-${this.sortId}`, this.options)
-        console.log('\x1B[32m%s\x1B[0m', '初始化轮播图', this.swiper)
-      })
-    },
-    // 上报数据
-    reportData(h) {
-      let ref = this.$refs[`img${this.attributeJson.sort}`]
-      if(!ref || ref.style.display == 'none') return
-      if(this.isSwiper && !this.hasInitSwiper && this.enterClass) {
-        this.hasInitSwiper = true
-        this.initSwiper()
-      }
-      let el = ref.getBoundingClientRect()
-      this.list.forEach((item,i) => {
-        if(!item.isReport) {
-          if(item.popList.length!=0) {
-            this.$refs[`hotspot${this.sortId}${i}`][0].reportData(h, this.positionTotal[i])
-            return
-          }
-          if(el.top <= h) {
-            item.isReport = true
-            dataSaveDecorationPageComponentEventFn(
-              {
-                uniqueId: this.recordId + '_'+ this.sortId, // 组件_id
-                uniqueName: this.attributeJson.uniqueName, // 组件_名称
-                componentType: 2,
-                popData: {},
-                materialId: this.recordId+ '_'+ this.sortId + '_' + item.sort, //素材id
-                materialName: item.uniqueName, //素材名称
-                refererPagePath: this.refererPagePath,
-                brand: this.brand,
-                path: this.path,
-                position: this.positionTotal[i] + 1,
-                event: 'bannerShow'
-              },
-              this.envUrl
-            )
-          }
-        }
-      })
-    }
-  },
-};

package/src/components/cms/imgNav/imgNav.scss

@@ -1,113 +0,0 @@
-.image-list {
-  position: absolute;
-  border: none;
-
-  .image-include {
-    overflow: hidden;
-  }
-
-  .entrance-con {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .swiper-container {
-    height: 100%!important;
-    .swiper-slide {
-      transform: translate3d(0, 0, 0);
-      position: relative;
-      overflow: hidden;
-
-      .slide-con {
-        position: relative;
-        img {
-          object-fit: contain;
-          width: 100%;
-          height: 100%;
-        }
-      }
-    }
-  
-    .swiper-button-prev {
-      background-image: none;
-      left: 20px;
-      &::after {
-        display: none;
-      }
-      .cms2iconfont {
-        font-size: 28px;
-      }
-    }
-  
-    .swiper-button-next {
-      background-image: none;
-      right: 20px;
-      &::after {
-        display: none;
-      }
-
-      .cms2iconfont {
-        font-size: 28px;
-      }
-    }
-  
-    .swiper-scrollbar {
-      height: 3px;
-      width: 70%;
-      left: 50%;
-      transform: translateX(-50%);
-      ::v-deep .swiper-scrollbar-drag {
-        background-color: #1890FF;
-      }
-    }
-  }
-
-  .image-warp {
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-    display: flex;
-
-    &.image-type3 {
-      overflow-x: scroll;
-    }
-    .image-item {
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 0;
-      transition: transform 0.5s;
-      flex-shrink: 0;
-      position: relative;
-      overflow: hidden;
-      img {
-        width: auto;
-        height: auto;
-        width: 100%;
-        height: 100%;
-      }
-
-      .contain {
-        object-fit: contain;
-      }
-
-      &:first-child {
-        padding-left: 0 !important;
-      }
-
-      &:last-child {
-        padding-right: 0 !important;
-      }
-    }
-
-    .hot-spot {
-      position: absolute;
-      width: 100%;
-      height: 100%;
-    }
-  }
-} 

package/src/components/cms/imgNav/imgNav.vue

@@ -1,123 +0,0 @@
-<template>
-  <div
-    :style="{
-      width: Math.ceil(attributeJson.baseStyle.w * ratio) + 'px',
-      height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
-      left: Math.round(attributeJson.baseStyle.l * ratio) + 'px',
-      top: Math.round(attributeJson.baseStyle.t * ratio) + 'px'
-    }"
-    class="image-list"
-    :key="attributeJson.sort">
-
-    <div v-if="hasConfig" class="image-include" :style="{ height: Math.round(attributeJson.baseStyle.h * ratio) + 'px'}">
-      <div :class="['entrance-con',`entrance-con${sortId}`]">
-        <div :class="['image-warp', `image-warp-${sortId}`, animationInObj.type ? enterClass : '']"
-          v-show="entranceShow"
-          :ref="`img${attributeJson.sort}`"
-          :style="{animationDuration: `${animationInObj.duration}s`}">
-          <!-- 轮播样式 -->
-          <div v-hoverAnimate
-            v-if="isSwiper" 
-            :style="[picStyle, (animationHoverObj.type === 3 && hoverStyleShow? hoverStyle : '')]"
-            >
-            <div :class="[`swiper-container swiper-container-${sortId}`]">
-              <div class="swiper-wrapper" :style="{height: `${(baseStyle.h - (hasScrollBar ?30 : 0)) * ratio}px!important`}">
-                <div class="swiper-slide" v-for="(carousel, index) in attributeJson.list"
-                  :key="carousel.id"
-                  :style="{width: `${baseStyle.w/4 * ratio}px`}">
-                  <div class="slide-con" :style="{
-                    height: `${(baseStyle.h - (hasScrollBar ?30 : 0)) * ratio}px`}">
-                    <!-- 图片 -->
-                    <img :src="carousel.picList[0].resourcePath" :alt="carousel.picList[0].resourceName.split('.')[0]">
-                    
-                    <template v-if="carousel.picList.length!=0 && carousel.popList.length!=0">
-                      <hotspot 
-                        :ref="`hotspot${sortId}${index}`"
-                        :componentType="2"
-                        v-on="$listeners" 
-                        v-bind="$attrs"
-                        :item="carousel" 
-                        :ratio="ratio" 
-                        :path="path"
-                        :envUrl="envUrl" 
-                        :sortId="sortId" 
-                        :recordId="recordId"
-                        :laySort="sort"
-                        :brand="brand"
-                        :uniqueName="attributeJson.uniqueName"
-                        :language="language"></hotspot>
-                    </template>
-                  </div>
-                </div>
-
-              </div>
-
-              <div v-if="hasSwiperButton" :class="`swiper-button-prev swiper-button-prev-${sortId}`">
-                <slot name="swiper-button-prev">
-                  <div v-if="indicatorType == 2 || indicatorType == 3"><span class="cms2iconfont iconleft"></span></div>
-                </slot>
-              </div>
-              <div v-if="hasSwiperButton" :class="`swiper-button-next swiper-button-next-${sortId}`">
-                <slot name="swiper-button-next">
-                  <div v-if="indicatorType == 2 || indicatorType == 3"><span class="cms2iconfont iconright"></span></div>
-                </slot>
-              </div>
-
-              <!-- 滑动条 -->
-              <div v-if="hasScrollBar" :class="`swiper-scrollbar swiper-scrollbar-${sortId}`"></div>
-            </div>
-
-            <!-- 边框 -->
-            <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: (hoverStyleShow? 1 : 0)}]"></div>
-          </div>
-
-          <!-- 非轮播样式 -->
-          <div v-else :class="['image-warp', styleType==3 && mode!='pc'?'image-type3':'']" :style="[picStyle,  (animationHoverObj.type === 3 && hoverStyleShow) ? hoverStyle : '']">
-            <div
-              v-hoverAnimate
-              v-for="(item, index) in attributeJson.list"
-              :key="index"
-              :style="[picItemStyle]"
-              class="image-item">
-            
-              <img :class="{'contain': styleType!=1}" :src="item.picList[0].resourcePath" :alt="item.picList[0].resourceName.split('.')[0]"/>
-              <!-- 边框 -->
-              <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: (hoverStyleShow? 1 : 0)}]"></div>
-              <!-- 换图 -->
-              <img class="hover-image" :src="hoverImage" alt="" v-if="animationHoverObj.type === 5 && hoverImage && hoverStyleShow" />
-
-              
-              <div v-if="item.picList.length!=0 && item.popList.length!=0">
-                <hotspot 
-                  :ref="`hotspot${sortId}${index}`"
-                  v-on="$listeners" 
-                  v-bind="$attrs"
-                  :item="item" 
-                  :ratio="ratio" 
-                  :path="path"
-                  :brand="brand"
-                  :envUrl="envUrl" 
-                  :sortId="sortId" 
-                  :recordId="recordId"
-                  :componentType="2"
-                  :uniqueName="attributeJson.uniqueName"
-                  :language="language"></hotspot>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-</template>
-
-<script>
-import imgNavJs from "./imgNav.js";
-export default imgNavJs;
-</script>
-
-<style lang="scss" scoped>
-@import "imgNav";
-@import "../animate.scss";
-</style>

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

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

package/src/components/cms/index.js

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

package/src/components/cms/mixin.js

@@ -1,239 +0,0 @@
-import '../../assets/iconfont/iconfont.css'
-import 'swiper/css/swiper.css'
-import 'animate.css'
-import '../../index.scss'
-import 'video.js/dist/video-js.css'
-
-export const cmsMixin = {
-  inheritAttrs: false,
-  props: {
-    attributeJson: {
-      type: Object,
-      default: function() {}
-    },
-    item: {
-      type: Object,
-      default: () => {}
-    },
-    ratio: {
-      type: Number,
-      default: 1
-    },
-    envUrl: {
-      type: String,
-      default: ''
-    },
-    fontRatio: {
-      type: Number,
-      default: 1
-    },
-    mode: {
-      type: String,
-      default: 'pc'
-    },
-    language: {
-      type: String,
-      default: 'zh-CN'
-    },
-    // 组件sort
-    sortId: {
-      type: Number,
-      default: 0
-    },
-    // 最外层布局sort
-    sort: {
-      type: [String, Number],
-      default: 0
-    },
-    // 最外层布局recordId
-    recordId: {
-      type: [String, Number],
-      default: 0
-    },
-    refererPagePath: {
-      type: String
-    },
-    brand: {
-      type: String
-    },
-    path: {
-      type: String
-    }
-  },
-  data() {
-    return {
-      hoverStyle: {}, // 悬停动画样式
-      hoverStyleShow: false,
-      hoverImage: '',
-      fillStyle: {}, // 填充样式
-      hoverDirection: '',
-      entranceShow: true,
-      enterClass: '',
-      entranceAnimate: {
-        fade: 'animate__animated animate__fadeIn',
-        scale: 'animate__animated animate__zoomIn'
-      }
-    }
-  },
-  computed: {
-    animationInObj: function() {
-      return this.attributeJson.animationInObj
-    },
-    animationHoverObj: function() {
-      return this.attributeJson.animationHoverObj
-    },
-    animateInType: function() {
-      return this.attributeJson.animationInObj.type
-    },
-    animateSort: function() {
-      return this.attributeJson.animationInObj.sort
-    },
-    baseStyle() {
-      return this.attributeJson.baseStyle
-    },
-    styleType() {
-      return this.attributeJson.styleType
-    }
-  },
-  watch: {
-    animationHoverObj: {
-      handler(val) {
-        this.disposeHoverAnimate(val)
-      },
-      immediate: true,
-      deep: true
-    },
-    // 入场动画类别
-    animateSort: {
-      handler() {
-        let type = this.animateInType
-        if (type && type != 'slide') {
-          this.entranceShow = false
-          this.enterClass = ''
-          this.enterClass = this.entranceAnimate[type]
-        }
-
-        if (type == 'slide' && this.animationInObj.direction) {
-          this.entranceShow = false
-          this.enterClass = ''
-          this.enterClass = `animate__animated animate__${this.animationInObj.direction}`
-        }
-      },
-      immediate: true
-    },
-    // recordId: {
-    //   handler(val) {
-    //     console.log('recordId',val);
-    //   },
-    //   immediate: true,
-    //   deep: true
-    // }
-  },
-  methods: {
-    // 处理悬停动画数据
-    disposeHoverAnimate(val) {
-      let hoverStyle = {}
-      // 显示边框
-      if (val.type === 2) {
-        let borderStyle = val.borderStyle
-        if (borderStyle.type == 1) {
-          // 边框颜色相同
-          hoverStyle = {
-            border: borderStyle.borderColor ? `2px solid ${borderStyle.borderColor}` : 'none'
-          }
-        }
-        if (borderStyle.type == 2) {
-          let { borderTop, borderRight, borderBottom, borderLeft } = borderStyle
-          hoverStyle = {
-            borderTop: borderTop ? `2px solid ${borderTop}` : 'none',
-            borderRight: borderRight ? `2px solid ${borderRight}` : 'none',
-            borderBottom: borderBottom ? `2px solid ${borderBottom}` : 'none',
-            borderLeft: borderLeft ? `2px solid ${borderLeft}` : 'none'
-          }
-        }
-      }
-      // 焦点放大镜
-      if (val.type === 3) {
-        hoverStyle = {
-          transform: 'scale(1.2)',
-          transformOrigin: 'center center'
-        }
-      }
-      // 填充
-      if (val.type === 4) {
-        this.hoverDirection = val.bgStyle.direction
-      }
-      // 换图
-      if (val.type === 5) {
-        let { hoverImgList } = val
-        this.hoverImage = hoverImgList[0] ? hoverImgList[0].resourcePath : ''
-      }
-
-      this.hoverStyle = hoverStyle
-    },
-    onDrag: function(x, y) {
-      let ratio = this.ratio
-      this.attributeJson.baseStyle.l = x / ratio
-      this.attributeJson.baseStyle.t = y / ratio
-      this.$set(this.attributeJson, 'baseStyle', this.attributeJson.baseStyle)
-    },
-    onResize: function(x, y, width, height) {
-      let ratio = this.ratio
-      let baseStyle = this.attributeJson.baseStyle
-      baseStyle = {
-        w: width / ratio,
-        h: height / ratio,
-        l: x / ratio,
-        t: y / ratio,
-        isLocked: baseStyle.isLocked
-      }
-      this.$set(this.attributeJson, 'baseStyle', baseStyle)
-    },
-    getRefLineParams(params) {
-      this.$emit('getRefLineParams', params)
-    }
-  },
-  directives: {
-    // 入场指令
-    // entrance: {
-    //   inserted: function(el, binding, vnode) {
-    //     if (!vnode.context.animateInType && !binding.value) return
-    //     binding.addClass = () => {
-    //       const { top } = el.getBoundingClientRect()
-    //       const h = document.documentElement.clientHeight || document.body.clientHeight
-    //       if (top < h - 50) {
-    //         vnode.context.entranceShow = true
-
-    //         if (binding.addClass) {
-    //           window.removeEventListener('scroll', binding.addClass)
-    //         }
-    //       }
-    //     }
-    //     window.addEventListener('scroll', binding.addClass, true)
-    //     binding.addClass()
-    //   },
-    //   unbind: function(el, binding, vnode) {
-    //     if (binding.addClass) {
-    //       window.removeEventListener('scroll', binding.addClass)
-    //     }
-    //   }
-    // },
-    // 悬停指令
-    hoverAnimate: {
-      inserted: function(el, binding, vnode) {
-        el.onmouseover = function() {
-          vnode.context.hoverStyleShow = true
-          if (binding.value) {
-            vnode.context[binding.value.key] = binding.value.value
-          }
-        }
-        el.onmouseleave = function() {
-          vnode.context.hoverStyleShow = false
-          if (binding.value) {
-            vnode.context[binding.value.key] = -1
-          }
-        }
-      }
-    }
-  }
-}

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

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