baiqiu-cms-decoration-dg 0.0.1

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

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

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

package/src/components/cms/cms.js

@@ -0,0 +1,102 @@
+// 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
+    }
+  },
+  data() {
+    return {
+      chooseSort: '', //选中的元素标识
+      activeIndex: -1, // 鼠标悬浮的元素位置
+      layOutObj: {
+        1:'singleLayout',
+        2:'multipleLayout',
+        3:'customLayout',
+        4:'tabLayout',
+        5:'slideLayout'
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(()=>{
+      var commom = require('../../utils/common')
+      commom.scroll(this)
+      commom.entrance(this)
+    });
+  },
+  methods: {
+    dragChange(e) {
+      // 拖拽添加元素
+      if (e.added) {
+        this.chooseSort = e.added.element.sort
+        this.$emit('updateLayOut', { layoutType: e.added.element.layoutType, sort: this.chooseSort})
+        this.ratio = this.$refs.cms.offsetWidth / (this.mode == 'pc' ? 1920 : 750)
+        this.$emit('dragChange', e.added)
+      }
+
+      if(e.moved) {
+        this.$emit('saveVersionId')
+      }
+    },
+    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)
+    }
+  }
+}

package/src/components/cms/cms.scss

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

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

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

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

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

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

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

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

@@ -0,0 +1,199 @@
+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('_')[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) {
+  
+        }
+      }
+      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,
+                  // 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

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

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

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