baiqiu-cms-decoration-dg 0.1.0 → 0.1.4

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

@@ -1,65 +0,0 @@
-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) {
-          console.log(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

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

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

@@ -1,101 +0,0 @@
-//防抖
-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

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

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

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

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

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

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

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

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

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

@@ -1,34 +0,0 @@
-<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" v-if="videoInfo.checkedAttr.indexOf('controls') < 0"></div>
-  </div>
-</template>
-
-<script>
-import videoPlayerJs from "./videoPlayer.js";
-export default videoPlayerJs;
-</script>
-
-<style lang="scss" scoped>
-@import "videoPlayer";
-</style>

package/src/index.js

@@ -1,23 +0,0 @@
-import cms from './components/cms/'
-const components = {
-  cms
-}
-const install = function (Vue) {
-  // 判断是否安装
-  if (install.installed) return
-  // 遍历注册全局组件
-  Object.keys(components).forEach(key => {
-    Vue.component(key, components[key])
-  })
-}
-if (typeof window !== 'undefined' && window.Vue) {
-  install(window.Vue)
-}
-export default {
-  // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
-  install
-}
-
-export {
-  cms
-}