baiqiu-cms-decoration-dg 0.0.1

package/src/components/cms/textItem/textItem.js

@@ -0,0 +1,72 @@
+import { cmsMixin } from "../mixin";
+import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils';
+
+export default {
+  name:'textItem',
+  mixins: [cmsMixin],
+  components: {
+  },
+  props: {
+    
+  },
+  data() {  
+    return {}
+  },
+  watch: {
+    
+  },
+  methods: {
+    pageClick() {
+      if(this.attributeJson.linkObj.jumpLinkType) {
+        try {
+          dataSaveDecorationPageComponentEventFn(
+            {
+              uniqueId: this.recordId + '_' + this.sortId, // 组件_id
+              uniqueName: this.attributeJson.uniqueName, // 组件_名称
+              componentType: 12,
+              popData: {},
+              materialId: this.recordId + '_' + this.sortId, //素材id
+              materialName: this.attributeJson.uniqueName, //素材名称
+              refererPagePath: this.refererPagePath,
+              brand: this.brand,
+              path: this.path,
+              position: 1,
+              event: 'bannerClick'
+            },
+            this.envUrl
+          )
+        } catch(err) {
+  
+        }
+      }
+      
+      this.$emit('jumpLink', this.attributeJson.linkObj)
+    },
+    // 上报数据
+    reportData(h) {
+      if(this.isReport) return
+      let ref = this.$refs[`text${this.attributeJson.sort}`]
+      if(!ref || ref.style.display == 'none') return
+      let el = ref.getBoundingClientRect()
+      if(el.top <= h) {
+        this.isReport = true
+        dataSaveDecorationPageComponentEventFn(
+          {
+            uniqueId: this.recordId + '_' + this.sortId, // 组件_id
+            uniqueName: this.attributeJson.uniqueName, // 组件_名称
+            componentType: 12,
+            popData: {},
+            materialId: this.recordId + '_' + this.sortId, //素材id
+            materialName: this.attributeJson.uniqueName, //素材名称
+            refererPagePath: this.refererPagePath,
+            brand: this.brand,
+            path: this.path,
+            position: 1,
+            event: 'bannerShow'
+          },
+          this.envUrl
+        )
+      }
+    }
+  }
+}

package/src/components/cms/textItem/textItem.scss

@@ -0,0 +1,41 @@
+.text-wrap {
+  position: absolute;
+  border: none;
+  touch-action: auto;
+  overflow: hidden;
+  .add-con {
+    width: 100%;
+    height: 100%;
+    background-color: #EDF5FE;
+    overflow: hidden;
+    .default {
+      width: 120px;
+      height: 84px;
+      position: relative;
+      left: 50%;
+      top: 50%;
+      transform: translate(-50%, -50%);
+      .default-image {
+        background-image: url("/src/assets/img/pc-cms-v2/icon.png");
+        background-size: 1941px 1407px;
+        background-position: -424px -583px;
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+
+  .entrance-con {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .text-con {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    font-size: 14px;
+    overflow: hidden;
+  }
+}

package/src/components/cms/textItem/textItem.vue

@@ -0,0 +1,26 @@
+<template>
+  <div
+    :style="{
+      width: Math.round(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="text-wrap"
+  >
+    <div v-if="attributeJson.label">
+      <div class="entrance-con editor-richTextWrap" @click="pageClick">
+        <div :ref="`text${attributeJson.sort}`" :class="['text-con', `text-con-${sortId}`, animationInObj.type ? enterClass : '']" v-show="entranceShow" v-html="attributeJson.label" :style="{ animationDuration: `${animationInObj.duration}s` }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import textItemJs from './textItem.js'
+export default textItemJs
+</script>
+
+<style lang="scss" scoped>
+@import 'textItem';
+</style>

package/src/components/cms/utils.js

@@ -0,0 +1,101 @@
+//防抖
+export function debounce(fn, wait=500, immediate=false) {
+  let timer, startTimeStamp=0;
+  let context, args;
+
+  let run = (timerInterval)=>{
+    timer= setTimeout(()=>{
+      let now = (new Date()).getTime();
+      let interval=now-startTimeStamp
+      if(interval<timerInterval){ // the timer start time has been reset，so the interval is less than timerInterval
+        // console.log('debounce reset',timerInterval-interval);
+        startTimeStamp=now;
+        run(wait-interval);  // reset timer for left time
+      }else{
+        if(!immediate){
+          fn.apply(context,args);
+        }
+        clearTimeout(timer);
+        timer=null;
+      }
+
+    },timerInterval);
+  }
+
+  return function() {
+    context = this;
+    args = arguments;
+    let now = (new Date()).getTime();
+    startTimeStamp = now; // set timer start time
+
+    if (!timer) {
+      // console.log('debounce set', wait);
+      if (immediate) {
+        fn.apply(context, args);
+      }
+      run(wait);    // last timer alreay executed, set a new timer
+    }
+  }
+}
+
+export function throttle(func, wait) {
+
+  var timer = null;
+  var startTime = Date.now();  
+
+  return function(){
+      var curTime = Date.now();
+      var remaining = wait-(curTime-startTime); 
+      var context = this;
+      var args = arguments;
+
+      clearTimeout(timer);
+
+      if(remaining<=0){ 
+          func.apply(context, args);
+
+          startTime = Date.now();
+
+      }else{
+          timer = setTimeout(func, remaining);  // 如果小于wait 保证在差值时间后执行
+      }
+  }
+}
+
+
+export function navigateJump(params) {
+  let path = ''
+  let jumpLinkDic = {
+    defaultPath: {
+      1: '/productDetail/', //商品详情
+      2: '/productList', //商品列表
+      9: '/articleList/', //文章列表
+      10: '/articleDetail/' //文章详情
+    }
+  }
+  switch (params.brand) {
+    case 'defaultPath':
+      path = `${jumpLinkDic[params.brand][params.jumpLinkType]}${defaultPathParams(params)}`
+      break
+  }
+  return path
+}
+
+function defaultPathParams(params) {
+  let code = ''
+  switch (params.jumpLinkType) {
+    case 1:
+      code = `${params.productCode}?colorCode=${params.colorCode}`
+      break
+    case 2:
+      code = `?categoryId=${params.categoryCode}`
+      break
+    case 9:
+      code = ''
+      break
+    case 10:
+      code = `${params.articleCode}`
+      break
+  }
+  return code
+}

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

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

package/src/components/cms/videoItem/videoItem.js

@@ -0,0 +1,96 @@
+import { cmsMixin } from "../mixin";
+import hotspot from "../hotspot/";
+import videoPlayer from '../videoPlayer/'
+import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils';
+
+export default {
+  name: 'videoItem',
+  mixins: [cmsMixin],
+  components: {
+    hotspot,
+    myVideoPlayer: videoPlayer
+  },
+  props:{
+    attributeJson: {
+      type: Object,
+      default: function() {}
+    },
+    ratio: {
+      type: Number,
+      default: 1,
+      positionList: []
+    }
+  },
+  data() {
+    return {
+      autoPlay: false
+    }
+  },
+  watch: {
+    'videoInfo.checkedAttr': {
+      handler(val) {
+        this.autoPlay = val.indexOf('autoPlay') > -1
+      },
+      immediate: true,
+      deep: true
+    },
+  },
+  computed: {
+    videoItem() {
+      return this.attributeJson.videoInfo.list
+    },
+    videoHotPic() {
+      return this.attributeJson.videoHotInfo.picList
+    },
+    videoHotPop() {
+      return this.attributeJson.videoHotInfo.popList
+    },
+    videoInfo() {
+      return this.attributeJson.videoInfo
+    },
+    hotData() {
+      let {attributeJson} = this
+      return {
+        popList: attributeJson.videoHotInfo.popList, 
+        width: attributeJson.videoHotInfo.picList[0].width,
+        height: attributeJson.videoHotInfo.picList[0].height,
+        realWidth: attributeJson.baseStyle.w,
+        realHeight: attributeJson.baseStyle.h,
+        top: 0,
+        left: 0
+      }
+    }
+  },
+  methods: {
+    // 上报数据
+    reportData(h) {
+      if(this.attributeJson.isVideoHasHot == 1) {
+        this.$refs.hotspot&&this.$refs.hotspot.reportData(h, 0)
+        return
+      }
+      if(this.isReport) return
+      let ref = this.$refs[`video${this.attributeJson.sort}`]
+      if( !ref || ref.style.display == 'none') return
+      let el = ref.getBoundingClientRect()
+      if(el.top <= h) {
+        this.isReport = true
+        dataSaveDecorationPageComponentEventFn(
+          {
+            uniqueId: this.recordId + '_' + this.sortId, // 组件_id
+            uniqueName: this.attributeJson.uniqueName, // 组件_名称
+            componentType: 3,
+            popData: {},
+            materialId: this.recordId + '_' + this.sortId, //素材id
+            materialName: this.attributeJson.uniqueName, //素材名称
+            refererPagePath: this.refererPagePath,
+            brand: this.brand,
+            path: this.path,
+            event: 'bannerShow',
+            position: 1
+          },
+          this.envUrl
+        )
+      }
+    }
+  }
+}

package/src/components/cms/videoItem/videoItem.scss

@@ -0,0 +1,27 @@
+.video-wrap {
+  border: none;
+  touch-action: auto;
+  position: absolute;
+  .entrance-con {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .video-con {
+    position: relative;
+
+    .hot-image {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}

package/src/components/cms/videoItem/videoItem.vue

@@ -0,0 +1,56 @@
+<template>
+  <div
+    :style="{
+      width: Math.round(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="video-wrap"
+  >
+
+    <div v-if="videoItem.length !== 0">
+      <div class="entrance-con">
+        <div
+          :class="['video-con', `video-con-${sortId}`, animationInObj.type ? enterClass : '']"
+          :ref="`video${attributeJson.sort}`"
+          v-show="entranceShow"
+          :style="{
+            width: Math.round(attributeJson.baseStyle.w * ratio) + 'px',
+            height: Math.round(attributeJson.baseStyle.h * ratio) + 'px',
+            animationDuration: `${animationInObj.duration}s`
+          }">
+
+          <myVideoPlayer :sort="new Date().getTime()" :videoInfo="videoInfo" :autoPlay="autoPlay"></myVideoPlayer>
+          <!-- 热区图片 -->
+          <div class="hot-image" v-if="attributeJson.isVideoHasHot === 1 && videoHotPic.length != 0">
+            <img :src="videoHotPic[0].resourcePath" alt="" />
+            <hotspot 
+              ref="hotspot" 
+              v-bind="$attrs"
+              v-on="$listeners" 
+              :componentType="3"
+              :item="hotData" 
+              :ratio="ratio" 
+              :envUrl="envUrl" 
+              :language="language"
+              :recordId="recordId"
+              :sortId="sortId"
+              :path="path"
+              :brand="brand"
+              :uniqueName="attributeJson.uniqueName"></hotspot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import videoItemJs from "./videoItem.js";
+export default videoItemJs;
+</script>
+
+<style lang="scss" scoped>
+@import "videoItem";
+</style>

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

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

package/src/components/cms/videoPlayer/videoPlayer.js

@@ -0,0 +1,69 @@
+import videojs from "video.js"
+export default {
+  name: 'videoPlayer',
+  props: {
+    videoInfo: {
+      type: Object,
+      default: () => {}
+    },
+    autoPlay: {
+      type: Boolean,
+      default: false
+    },
+    sort: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      isPlay: false, // 是否正在播放
+    }
+  },
+  watch: {
+    autoPlay: {
+      handler(n) {
+        if(this.player) {
+          if(n) {
+            this.player.play()
+          } else {
+            this.player.pause()
+          }
+        }
+      },
+      immediate: true,
+      deep: true
+    }
+  },
+  mounted() {
+    let that = this
+    setTimeout(()=>{
+      this.player = videojs(this.$refs[`myVideo-${this.sort}`], {}, function() {
+        this.on("play", () => {
+          that.isPlay = true
+        });
+        this.on("pause", () => {
+          that.isPlay = false
+        });
+      })
+      this.$nextTick(()=>{
+        this.play()
+      });
+    }, 50)
+    
+  },
+  methods: {
+    play() {
+      if(this.videoInfo.list.length!=0 && this.autoPlay) {
+        this.player.play()
+      }
+    },
+    clickVideo() {
+      if (this.isPlay) {
+        this.player.pause();
+      } else {
+        this.player.play()
+      }
+    }
+  }
+}

package/src/components/cms/videoPlayer/videoPlayer.scss

@@ -0,0 +1,37 @@
+.video-item{
+  width: 100%!important;
+  height: 100%!important;
+  object-fit: cover;
+}
+
+.video-cover {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  top: 0;
+  left: 0;
+}
+
+.cover-btn {
+  position: absolute;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: rgba(0,0,0,0.6);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.cover-btn .cms2iconfont{
+  color: #fff;
+  font-size: 32px;
+}
+
+.cover-btn .iconbofang {
+  position: relative;
+  left: 2px;
+}

package/src/components/cms/videoPlayer/videoPlayer.vue

@@ -0,0 +1,34 @@
+<template>
+  <div style="height: 100%;position: relative;">
+    <video
+      :ref="`myVideo-${sort}`"
+      preload="auto"
+      data-setup="{}"
+      x5-playsinline
+      x5-video-orientation="landscape|portrait"
+      x5-video-player-type="h5"
+      webkit-playsinline="true"
+      playsinline="true"
+      :controls="videoInfo.checkedAttr.indexOf('controls') > -1"
+      :autoplay="autoPlay"
+      :loop="videoInfo.checkedAttr.indexOf('loop') > -1"
+      muted
+      :poster="videoInfo.list.length != 0 ? videoInfo.list[0].imgUrl : ''"
+      class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9 video-item"
+    >
+      <source
+        :src="videoInfo.list.length != 0 ? videoInfo.list[0].resourcePath : ''"
+      />
+    </video>
+    <div @click="clickVideo" class="video-cover"></div>
+  </div>
+</template>
+
+<script>
+import videoPlayerJs from "./videoPlayer.js";
+export default videoPlayerJs;
+</script>
+
+<style lang="scss" scoped>
+@import "videoPlayer";
+</style>

package/src/index.js

@@ -0,0 +1,26 @@
+import Vue from 'vue'
+import cms from './components/cms/'
+import singleLayout from './components/cms/singleLayout/'
+
+Vue.component('singleLayout', singleLayout)
+
+const components = [
+  cms
+]
+
+const install = function(Vue) {
+  // 判断是否安装
+  if (install.installed) return;
+  // 遍历注册全局组件
+  components.map(component => Vue.component(component.name, component));
+};
+
+export default {
+  install
+  // picNav
+  // banner
+};
+
+export {
+ cms
+};