baiqiu-cms-decoration-dg 0.1.0 → 0.1.4

package/src/components/cms/buttonItem/buttonItem.vue

@@ -1,47 +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="button-wrap"
-  >
-      <div class="entrance-con">
-        <div 
-          :ref="`button${attributeJson.sort}`"
-          :class="['button-cl', `button-cl-${sortId}`, animationInObj.type ? enterClass : '']" v-show="entranceShow"
-          @click="pageClick"
-          :style="{ animationDuration: `${animationInObj.duration}s` }">
-          <div
-            class="button-content"
-            :class="[{ flexCenterBetween: iconImage }, animationHoverObj.type === 4 ? hoverDirection : '']"
-            @mouseover.stop="textMouseOver"
-            @mouseleave="textMouseLeave"
-            :style="[buttonStyle, { '--width': hoverStyleShow ? '100%' : '0', '--height': hoverStyleShow ? '100%' : '0', '--bgColor': animationHoverObj.bgStyle.backgroundColor }]"
-            v-hoverAnimate
-          >
-            <img v-if="iconStyle.type === 1 && iconStyle.position === 1 && iconImage" :src="iconImage" alt="" />
-            <div class="label" :style="hoverButtonStyle">{{ attributeJson.label || '按钮' }}</div>
-            <img v-if="iconStyle.type === 1 && iconStyle.position === 2 && iconImage" :src="iconImage" alt="" />
-
-            <!-- 换图 -->
-            <img class="hover-image" :src="hoverImage" alt="" v-if="animationHoverObj.type === 5 && hoverImage && hoverStyleShow" />
-          </div>
-          <!-- 边框 -->
-          <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, { opacity: hoverStyleShow ? 1 : 0, borderRadius: attributeJson.borderStyle.borderRadius + 'px' }]"></div>
-        </div>
-      </div>
-  </div>
-</template>
-
-<script>
-import buttonItemJs from './buttonItem.js'
-export default buttonItemJs
-</script>
-
-<style lang="scss" scoped>
-@import 'buttonItem';
-@import '../animate.scss';
-</style>

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

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

package/src/components/cms/cms.js

@@ -1,104 +0,0 @@
-// import draggable from 'vuedraggable'
-import singleLayout from './singleLayout/'
-import multipleLayout from './multipleLayout/'
-import customLayout from './customLayout/'
-import tabLayout from "./tabLayout/";
-import slideLayout from './slideLayout/';
-
-export default {
-  name: 'cms',
-  inheritAttrs: false,
-  components: {
-    // draggable,
-    singleLayout, //单列布局
-    multipleLayout, //多列布局
-    customLayout, // 自定义
-    tabLayout, // 导航
-    slideLayout, // 滑动容器
-  },
-  props: {
-    cmsList: {
-      type: Array,
-      default: () => []
-    },
-    canDrag: {
-      type: Boolean,
-      default: true
-    },
-    mode: {
-      type: String,
-      default: 'pc'
-    },
-    ratio: {
-      type: Number,
-      default: 1
-    },
-    envUrl: {
-      type: String,
-      default: ''
-    },
-    path: {
-      type: String
-    }
-  },
-  watch: {
-    // cmsList: {
-    //   handler(val) {
-    //     console.log(val)
-    //   },
-    //   immediate: true
-    // }
-  },
-  data() {
-    return {
-      chooseSort: '', //选中的元素标识
-      activeIndex: -1, // 鼠标悬浮的元素位置
-      layOutObj: {
-        1:'singleLayout',
-        2:'multipleLayout',
-        3:'customLayout',
-        4:'tabLayout',
-        5:'slideLayout'
-      }
-    }
-  },
-  computed: {
-  },
-  mounted() {
-    this.$nextTick(()=>{
-      var commom = require('../../utils/common')
-      commom.scroll(this)
-      commom.entrance(this)
-    });
-  },
-  methods: {
-    chooseLayout(layoutType, sort) {
-      this.chooseSort = sort
-      this.$emit('updateLayOut', { layoutType, sort})
-    },
-    updateSort(sort) {
-      this.chooseSort = sort
-    },
-    // 删除布局组件
-    deleteModule(index, sort) {
-      // 若删除的为当前选中布局， 特殊处理
-      if(sort === this.chooseSort) {
-        this.$emit('deleteModule', index)
-      } else {
-        this.cmsList.splice(index, 1)
-        this.$emit('saveVersionId')
-      }
-    },
-    // 控制组件展示或隐藏
-    showOrHide(index) {
-      let item = this.cmsList[index]
-      this.$set(item, 'displayType', item.displayType ? 0 : 1)
-      this.$emit('componentChange', item.sort)
-    },
-    judgeSlot(index) {
-      if(this.cmsList[index].attributeJson.componentList) {
-        return this.cmsList[index].attributeJson.componentList.some(ele=> {return ele.type == 106})
-      }
-    }
-  }
-}

package/src/components/cms/cms.scss

@@ -1,46 +0,0 @@
-.lay-wrap {
-  width: 100%;
-  
-  .vdr {
-    border: none;
-    touch-action: auto;
-  }
-
-  .lay-item {
-    border: none;
-    position: relative;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    background-color: #fff;
-
-    .btn-wrap {
-      width: 136px;
-      height: 40px;
-      background-color: #1890FF;
-      color: #fff;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      position: absolute;
-      right: -1px;
-      border-radius: 8px 0px 0px;
-      bottom: 0;
-
-      .icon {
-        font-size: 16px;
-        cursor: pointer;
-      }
-
-      .iconrank {
-        font-size: 19px;
-        margin-right: 16px;
-      }
-
-      .iconvisibility, .iconyincang {
-        margin-right: 18px;
-        font-size: 20px;
-      }
-    }
-  }
-}

package/src/components/cms/cms.vue

@@ -1,51 +0,0 @@
-<template>
-  <div ref="cms">
-    <div
-      :class="['lay-wrap', { mobile: mode == 'mobile' }]"
-    >
-      <div
-        class="lay-item"
-        v-for="(item, index) in cmsList"
-        :key="item.sort"
-      >
-        <div
-          class="layout-set"
-          :style="{
-            width: item.attributeJson.layoutStyle && item.attributeJson.layoutStyle.widthStyle.type === 2 ? item.attributeJson.layoutStyle.widthStyle.width + '%' : '100%',
-            height: item.attributeJson.layoutStyle ? Math.round(item.attributeJson.layoutStyle.height * ratio) + 'px' : 'auto'
-          }"
-        >
-          <component
-            ref="layModule"
-            :is="layOutObj[item.layoutType]"
-            v-bind="$attrs" 
-            v-on="$listeners" 
-            :layOutData="item.attributeJson" 
-            :sort="item.attributeJson.sort" 
-            :ratio="ratio" 
-            :mode="mode" 
-            :recordId="item.originalId" 
-            :envUrl="envUrl"
-            :path="path"
-          > 
-            <template v-if="item.layoutType === 3" slot="customComponent" slot-scope="scope">
-              <slot name="customComponent" :attributeJson="scope.attributeJson"></slot>
-            </template>
-            <template v-if="judgeSlot(index)" slot="dgCustomComponent">
-              <slot name="dgCustomComponent"></slot>
-            </template>
-          </component>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import cmsJs from "./cms.js";
-export default cmsJs;
-</script>
-
-<style lang="scss" scoped>
-@import "cms";
-</style>

package/src/components/cms/customLayout/customLayout.js

@@ -1,46 +0,0 @@
-import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils';
-export default {
-  name: 'customLayout',
-  props: {
-    layOutData: {
-      type: Object,
-      default: () => {}
-    },
-    envUrl: {
-      type: String,
-      default: ''
-    },
-    path: {
-      type: String
-    }
-  },
-  inheritAttrs: false,
-  methods:{
-    // 上报数据
-    reportData(h) {
-        if(this.isReport) return
-        let ref = this.$refs[`custom${this.layOutData.sort}`]
-        if(!ref) return
-        let el = ref.getBoundingClientRect()
-        if(el.top <= h && el.top >= 0) {
-          this.isReport = true
-          dataSaveDecorationPageComponentEventFn(
-            {
-              uniqueId: this.layOutData.sort, // 组件_id
-              uniqueName: this.uniqueName, // 组件_名称
-              componentType: 7,
-              popData: {},
-              materialId: this.layOutData.sort, //素材id
-              materialName: this.uniqueName, //素材名称
-              refererPagePath: this.refererPagePath,
-              brand: this.brand,
-              path: this.path,
-              position: 1,
-              event: 'bannerShow'
-            },
-            this.envUrl
-          )
-        }
-    }
-  }
-}

package/src/components/cms/customLayout/customLayout.scss

@@ -1,8 +0,0 @@
-.custom-layout{
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}

package/src/components/cms/customLayout/customLayout.vue

@@ -1,15 +0,0 @@
-<template>
-    <div class="custom-layout" :ref="`custom${layOutData.sort}`">
-        <div class="add-con"></div>
-        <slot name="customComponent" :attributeJson="layOutData"></slot>
-    </div>
-</template>
-
-<script>
-    import customLayoutJs from './customLayout.js'
-    export default customLayoutJs
-</script>
-
-<style lang="scss" scoped>
-@import "customLayout";
-</style>

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

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

package/src/components/cms/hotspot/hotspot.js

@@ -1,200 +0,0 @@
-import { ComService } from "../../../api/com-service";
-import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils'
-export default {
-  name: 'hotspot',
-  props: {
-    item: {
-      type: Object,
-      default: () => {}
-    },
-    width: {
-      type: Number,
-      default: 0
-    },
-    height: {
-      type: Number,
-      default: 0
-    },
-    ratio: {
-      type: Number,
-      default: 1
-    },
-    envUrl: {
-      type: String,
-      default:''
-    },
-    // 组件sort
-    sortId: {
-      type: Number,
-      default: 0
-    },
-    // 最外层布局recordId
-    recordId: {
-      type: Number,
-      default: 0
-    },
-    brand: {
-      type: String
-    },
-    componentType: {
-      type: Number
-    },
-    refererPagePath: {
-      type: String
-    },
-    path: {
-      type: String,
-    },
-    pathType: {
-      type: Number
-    },
-    uniqueName: {
-      type: String
-    },
-    language: {
-      type: String,
-      default: 'zh-CN'
-    },
-    // 适用于轮播图的热区坑位上报，因为轮播图loop前后复制的原因，会造成复制的元素拿不到preTotal
-    prePosition: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      hotList: [],
-      proportion: 1,
-      hoverIndex: 1,
-      needReport: true, // 是否需要上报
-      preTotal: 0,
-      service: new ComService(),
-    }
-  },
-  watch: {
-    'item.width': {
-      handler(val) {
-        this.proportion = val / 750
-      },
-      deep: true,
-      immediate: true
-    },
-    itemCodeList: {
-      handler(val) {
-        this.getProductList(val)
-      },
-      immediate: true,
-      deep: true
-    }
-  },
-  computed: {
-    itemCodeList() {
-      let pop = this.item.popList.filter(item => {
-        return item.jumpLinkType == 1 && item.product.imageType == 1
-      })
-      return pop.map(item=> {
-        return item.productCode
-      })
-    }
-  },
-  mounted() {
-    this.hotList = JSON.parse(JSON.stringify(this.item.popList))
-  },
-  methods: {
-    // 点击热区
-    pageClick(val,index) {
-      if(val.jumpLinkType) {
-        try {
-          dataSaveDecorationPageComponentEventFn(
-            {
-              uniqueId: this.recordId + '_' + this.sortId, // 组件_id
-              uniqueName: this.uniqueName, // 组件_名称
-              componentMethodType: 1,
-              popData: {
-                ...val,
-                uniqueId: this.recordId + '_' + this.sortId + '_' + val.uniqueId.split('_')[2],
-                brand: this.pathType === 1 ? 'defaultPath' : this.brand
-              },
-              materialId: this.item.sort ? this.recordId + '_' + this.item.sort : this.recordId + '_' + this.sortId, //素材id
-              materialName: this.item.uniqueName ? this.item.uniqueName : this.uniqueName, //素材名称
-              refererPagePath: this.refererPagePath,
-              componentType: this.componentType,
-              path: this.path,
-              brand: this.brand,
-              position: this.prePosition? this.prePosition + index + 1 : this.preTotal*1 + index + 1,
-              event: 'bannerClick'
-            },
-            this.envUrl
-          )
-        } catch(err) {
-          console.log(err)
-        }
-      }
-      this.$emit('jumpLink', val)
-    },
-    // 获取商品列表
-    getProductList(itemCodeList) {
-      if(itemCodeList.length == 0) return
-      let params = {
-        itemCodeList: itemCodeList,
-        pageNum: 1,
-        pageSize: itemCodeList.length
-      }
-      let productImage = {}
-      this.service.getProductInfo(this.envUrl, params, this.language).then(res => {
-        if (res && res.list) {
-          this.productList = res.list;
-          res.list.forEach(item => {
-            productImage[item.code] = item.mainPicUrl
-          })
-          this.productImage = productImage
-        }
-      })
-    },
-    reportData(h, preTotal = 0) {
-      this.preTotal = preTotal
-      let arr = this.hotList || []
-      if(!this.needReport) return
-      
-      this.needReport = arr.some(item=>{
-        return !item.isReport
-      })
-      arr.forEach((ele, i) => {
-        // 若已上报不重复上报
-        if (!ele.isReport) {
-          let hotEl = this.$refs[`${this.sortId}${i}`][0].getBoundingClientRect()
-          if (hotEl.top <= h && hotEl.top >= -100) {
-            arr[i].isReport = true
-            let obj = arr[i]
-            dataSaveDecorationPageComponentEventFn(
-              {
-                uniqueId: this.recordId + '_' + this.sortId, // 组件_id
-                uniqueName: this.uniqueName, // 组件_名称
-                componentMethodType: 0,
-                popData: {
-                  ...obj,
-                  uniqueId: this.recordId + '_' + this.sortId + '_' + obj.uniqueId.split('_')[2],
-                  brand: this.pathType === 1 ? 'defaultPath' : this.brand
-                },
-                materialId: this.item.sort ? this.recordId + '_' +this.item.sort : this.recordId + '_' + this.sortId, //素材id
-                materialName: this.item.uniqueName ? this.item.uniqueName : this.uniqueName, //素材名称
-                refererPagePath: this.refererPagePath,
-                path: this.path,
-                componentType: this.componentType,
-                brand: this.brand,
-                position: preTotal + i + 1,
-                event: 'bannerShow'
-              },
-              this.envUrl
-            )
-          }
-        }
-      })
-    },
-    mouseover(index) {
-      this.hoverIndex = index
-    },
-    mouseLeave() {
-      this.hoverIndex = -1
-    }
-  },
-}

package/src/components/cms/hotspot/hotspot.scss

@@ -1,20 +0,0 @@
-.pop-wrap {
-  position: absolute;
-  .pop-item {
-    position: absolute;
-    cursor: pointer;
-
-    .product-hover {
-      font-size: 0;
-      display: flex;
-      align-items: center;
-      position: relative;
-      height: 100%;
-
-      .product-image {
-        font-size: 0;
-        padding-left: 10px;
-      }
-    }
-  }
-}

package/src/components/cms/hotspot/hotspot.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="pop-wrap" :style="{left: item.left, top: item.top, width: item.realWidth * ratio+'px' || '100%', height: item.realHeight * ratio+'px' || '100%'}">
-    <div 
-      :ref="`${sortId}${index}`"
-      :class="`pop-item`" 
-      v-for="(ele,index) in item.popList"
-      :key="index"
-      @click="pageClick(ele, index)"
-      :style="{
-        width: `${ele.width / 750 * 100 }%`,
-        height:`${ele.height / (item.height / proportion) * 100}%`,
-        left: `${ele.left / 750 * 100 }%`,
-        top: `${ele.top / (item.height /proportion) * 100}%`
-      }">
-        <div class="product-hover" v-if="ele.product.openHot" @mouseover="mouseover(index)" @mouseleave="mouseLeave">
-          <div v-if="ele.product.initImage.length!=0" style="{fontSize: 0}">
-            <img :src="hoverIndex == index ?ele.product.hoverImage[0].resourcePath: ele.product.initImage[0].resourcePath" alt="">
-          </div>
-
-          <div v-if="hoverIndex == index" class="product-image">
-            <img :src="ele.product.imageType == 1 ? productImage[ele.productCode] : ele.product.productImage[0].resourcePath" alt="">
-          </div>
-        </div>
-      </div>
-  </div>
-</template>
-
-<script>
-import hotspotJs from './hotspot.js';
-export default hotspotJs;
-</script>
-
-<style lang="scss" scoped>
-@import 'hotspot';
-</style>

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

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