baiqiu-cms-decoration-dg 0.0.1

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

@@ -0,0 +1,177 @@
+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';
+import * as utils from '../utils.js'
+
+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

@@ -0,0 +1,110 @@
+.image-list {
+  position: absolute;
+  border: none;
+  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

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

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

package/src/components/cms/index.js

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

package/src/components/cms/mixin.js

@@ -0,0 +1,244 @@
+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(val) {
+        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(e) {
+          vnode.context.hoverStyleShow = true
+          if (binding.value) {
+            vnode.context[binding.value.key] = binding.value.value
+          }
+        }
+
+        el.onmouseleave = function(e) {
+          vnode.context.hoverStyleShow = false
+          if (binding.value) {
+            vnode.context[binding.value.key] = -1
+          }
+        }
+      }
+    }
+  }
+}

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

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