baiqiu-cms-decoration-dg 0.1.0 → 0.1.4

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

@@ -1,54 +0,0 @@
-// import vueDraggableResizable from "vue-draggable-resizable-gorkys";
-// import 'vue-draggable-resizable-gorkys/dist/VueDraggableResizable.css'
-import singleLayout from "../singleLayout/";
-export default {
-  name: "multipleLayout",
-  components: {
-    // vueDraggableResizable,
-    singleLayout
-  },
-  props: {
-    layOutData: {
-      type: Object,
-      default: () => {}
-    },
-    ratio: {
-      type: Number,
-      default: 1
-    },
-    mode: {
-      type: String,
-      default: "pc"
-    },
-    recordId: {
-      type: Number,
-      default: 0
-    }
-  },
-  inheritAttrs: false,
-  data() {
-    return {
-      w: 200,
-      currentItem: null,
-      currentIndex: ""
-    };
-  },
-  watch: {
-    // 'layOutData.layoutStyle.widthStyle.width': {
-    //   handler:function () {
-    //     this.w = this.ratio * (this.mode == 'pc' ? 1920 : 750)*this.layOutData.layoutStyle.widthStyle.width/100
-    //   },
-    //   deep:true,
-    //   immediate:true
-    // }
-  },
-  mounted() {},
-  methods: {
-    reportData(h) {
-      let refs = this.$refs.multipleSingle
-      refs.forEach(item=>{
-        item.reportData(h)
-      })
-    }
-  }
-};

package/src/components/cms/multipleLayout/multipleLayout.scss

@@ -1,21 +0,0 @@
-.multiple-layout {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  overflow: hidden;
-  position: relative;
-  display: flex;
-  .multiple-layout-bg{
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-  }
-
-  .multiple-item{
-    flex-shrink: 0;
-  }
-}

package/src/components/cms/multipleLayout/multipleLayout.vue

@@ -1,25 +0,0 @@
-<template>
-  <div class="multiple-layout" :key="layOutData.layoutStyle.height" :style="{height: Math.round(layOutData.layoutStyle.height * ratio) + 'px'}">
-    <template v-for="(item,index) in layOutData.list">
-      <div 
-       class="multiple-item"
-       :key="index"
-       :style="{
-        width: Math.round(item.baseStyle.w * ratio) + 'px',
-        height: Math.round(layOutData.layoutStyle.height * ratio) + 'px',
-        zIndex: currentIndex == index?1:'auto'
-       }">
-        <singleLayout ref="multipleSingle" v-bind="$attrs" v-on="$listeners" :layOutData="item" :componentList="item.componentList" :parent-l="item.baseStyle.l" :ratio="ratio" :recordId="recordId" :mode="mode"></singleLayout>
-      </div>
-    </template>
-  </div>
-</template>
-
-<script>
-import multipleLayoutJs from "./multipleLayout.js";
-export default multipleLayoutJs;
-</script>
-
-<style lang="scss" scoped>
-@import "multipleLayout";
-</style>

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

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

package/src/components/cms/productItem/productItem.js

@@ -1,290 +0,0 @@
-import Swiper from 'swiper/js/swiper.js'
-import 'swiper/css/swiper.css'
-import { cmsMixin } from '../mixin'
-import { ComService } from '../../../api/com-service'
-import { dataSaveDecorationPageComponentEventFn } from '../../../utils/utils'
-
-export default {
-  name: 'productItem',
-  mixins: [cmsMixin],
-  components: {},
-  props: {
-    sortId: {
-      type: Number
-    }
-  },
-  data() {
-    return {
-      productList: [], // 商品列表
-      swiper: '',
-      productStyle: {}, // 商品组件样式
-      service: new ComService(),
-      productIndex: '',
-      windowHeight: 0
-    }
-  },
-  watch: {
-    addProduct: {
-      handler(val) {
-        if (val.type == 1 && val.itemCodeList.length == 0) return
-        if (val.type == 2 && !val.categoryGroupCode) return
-        if (val.type == 3 && !val.cmsSortCode) return
-        this.getProductList()
-      },
-      immediate: true,
-      deep: true
-    },
-    ratio: {
-      handler() {
-        if (!this.isSwiper && this.productStyle.width) {
-          this.productStyle.width = (this.attributeJson.baseStyle.w * this.ratio - this.attributeJson.goodsPaddingSpacing * 2 + this.goodsSpacing) / this.showNum + 'px'
-        }
-      }
-    }
-  },
-  computed: {
-    addProduct() {
-      return this.attributeJson.addProduct
-    },
-    goodsPaddingSpacing() {
-      return this.attributeJson.goodsPaddingSpacing
-    },
-    goodsSpacing() {
-      return this.attributeJson.goodsSpacing
-    },
-    itemsPerLine() {
-      return this.attributeJson.itemsPerLine
-    },
-    indicatorType() {
-      return this.attributeJson.indicatorType
-    },
-    // 是否为轮播图
-    isSwiper() {
-      return (this.mode == 'pc' && this.styleType == 1) || (this.mode == 'mobile' && this.styleType == 2 && (this.indicatorType == 2 || this.indicatorType == 3))
-    },
-    // 是否有左右指示器
-    hasSwiperButton() {
-      return (this.mode == 'pc' && this.styleType == 1 && this.indicatorType == 2) || (this.mode == 'mobile' && this.styleType == 2 && this.indicatorType == 2)
-    },
-    // 是否有底部滚动条
-    hasScrollBar() {
-      return this.mode == 'mobile' && this.styleType == 2 && this.indicatorType == 3
-    },
-    // 指示器样式
-    paginationStyle() {
-      return this.attributeJson.paginationStyle
-    },
-    pageStyle() {
-      return {
-        color: this.paginationStyle.color
-      }
-    },
-    showNum() {
-      let num = 1
-      if (this.mode == 'pc') {
-        num = this.attributeJson.itemsPerLine
-      } else {
-        if (this.attributeJson.styleType == 1) {
-          num = 2.5
-        } else if (this.attributeJson.styleType == 2) {
-          num = this.attributeJson.itemsPerLine
-        }
-      }
-      return num
-    }
-  },
-  mounted() {},
-  methods: {
-    // 获取商品列表
-    getProductList: function() {
-      let params = {}
-      switch (this.addProduct.type) {
-        case 1:
-          params = {
-            itemCodeList: this.addProduct.itemCodeList,
-            pageNum: 1,
-            pageSize: this.addProduct.itemCodeList.length
-          }
-          break
-        case 2:
-          params = {
-            categoryParam: {
-              categoryCodeList: this.addProduct.categoryCodeList,
-              categoryGroupCode: this.addProduct.categoryGroupCode
-            },
-            pageNum: 1,
-            pageSize: this.addProduct.max,
-            sortRuleId: this.addProduct.sortId
-          }
-          break
-        case 3:
-          params = {
-            pageNum: 1,
-            pageSize: this.addProduct.max,
-            sortField: this.addProduct.cmsSortCode
-          }
-          break
-      }
-
-      if (this.addProduct.type == 3) {
-        this.service.getSortProductInfo(this.envUrl, params, this.language).then(res => {
-          if (res && res.list) {
-            // 判断入场动画，是否需要展示
-            let productEntrance = document.querySelector(`.entrance-con${this.sortId}`)
-            let entrance = productEntrance && productEntrance.classList.contains('entrance-demonstrate')
-            if (entrance && productEntrance.firstChild.style) {
-              productEntrance.firstChild.style.display = 'block'
-            }
-            this.productList = res.list
-            this.initProduct()
-          } else {
-            this.productList = []
-          }
-        })
-      } else {
-        this.service.getProductInfo(this.envUrl, params, this.language).then(res => {
-          if (res && res.list) {
-            // 判断入场动画，是否需要展示
-            let productEntrance = document.querySelector(`.entrance-con${this.sortId}`)
-            let entrance = productEntrance && productEntrance.classList.contains('entrance-demonstrate')
-            if (entrance && productEntrance.firstChild.style) {
-              productEntrance.firstChild.style.display = 'block'
-            }
-            this.productList = res.list
-            this.initProduct()
-          } else {
-            this.productList = []
-          }
-        })
-      }
-    },
-    initProduct: function() {
-      let { attributeJson, addProduct } = this
-      if (attributeJson.goodsImgType == 2 && addProduct.customImageList.length != 0) {
-        this.productList.forEach((item, index) => {
-          if (addProduct.customImageList[index].picList.length != 0) {
-            this.$set(item, 'customImage', addProduct.customImageList[index].picList[0].resourcePath)
-          }
-        })
-      }
-      if (this.productList && this.productList.length > 0) {
-        if (this.isSwiper) {
-          this.initSwiper()
-        } else {
-          this.initSlide()
-        }
-      }
-    },
-    // 初始化轮播图
-    initSwiper: function() {
-      let { attributeJson, indicatorType, styleType } = this
-      this.$nextTick(() => {
-        if (this.swiper) {
-          this.swiper.destroy(true, true)
-          this.swiper = null
-        }
-        this.options = {
-          effect: 'slide',
-          autoplay: false,
-          slidesPerView: this.showNum,
-          spaceBetween: attributeJson.goodsSpacing
-        }
-        if (styleType == 2 && indicatorType == 2) {
-          this.options.pagination = { el: `.swiper-pagination-${this.sortId}`, clickable: true }
-        }
-        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)
-        this.$nextTick(()=>{
-          this.reportData(this.windowHeight)
-        })
-      })
-    },
-    initSlide() {
-      this.productStyle = {
-        padding: `0 ${this.goodsSpacing / 2}px`,
-        width: (this.attributeJson.baseStyle.w * this.ratio - this.attributeJson.goodsPaddingSpacing * 2 + this.goodsSpacing) / this.showNum + 'px',
-        marginBottom: this.goodsSpacing + 'px'
-      }
-      this.$nextTick(()=>{
-        this.reportData(this.windowHeight)
-      })
-    },
-    gotoPDP(code, colorCode, name, index) {
-      try {
-        dataSaveDecorationPageComponentEventFn(
-          {
-            uniqueId: this.recordId + '_' + this.sortId, // 组件_id
-            uniqueName: this.attributeJson.uniqueName, // 组件_名称
-            componentType: 4,
-            popData: {
-              productCode: code,
-              selectDataShow: name
-            },
-            materialId: this.recordId + '_' + this.sortId, //素材id
-            materialName: this.attributeJson.uniqueName, //素材名称
-            refererPagePath: this.refererPagePath,
-            brand: this.brand,
-            path: this.path,
-            position: index + 1,
-            event: 'bannerClick'
-          },
-          this.envUrl
-        )
-      } catch (err) {
-        console.log(err)
-      }
-      this.$emit('gotoPDP', { code, colorCode })
-    },
-    // 上报数据
-    reportData(h) {
-      this.windowHeight = h
-      if (this.productList.length == 0) return
-      let ref = this.$refs[`entrance${this.attributeJson.sort}`]
-      if (!ref || ref.style.display == 'none') return
-      // 当有入场的动画时，需要在入场时重新init一遍，否则轮播图有问题,原本用指令，只要监听entranceShow，但为兼容服务器渲染，指令不使用了
-      if (this.isSwiper && !this.hasInitSwiper && this.enterClass) {
-        this.hasInitSwiper = true
-        this.initSwiper()
-      }
-      this.productList.forEach((item, index) => {
-        if (item.isReport) return
-        if (!this.$refs[`product${item.code}${index}`]) return
-        let el = this.$refs[`product${item.code}${index}`][0].getBoundingClientRect()
-        if (el.top <= h) {
-          item.isReport = true
-          dataSaveDecorationPageComponentEventFn(
-            {
-              uniqueId: this.recordId + '_' + this.sortId, // 组件_id
-              uniqueName: this.attributeJson.uniqueName, // 组件_名称
-              componentType: 4,
-              popData: {
-                productCode: item.code,
-                selectDataShow: item.name
-              },
-              materialId: this.recordId + '_' + this.sortId, //素材id
-              materialName: this.attributeJson.uniqueName, //素材名称
-              refererPagePath: this.refererPagePath,
-              brand: this.brand,
-              path: this.path,
-              position: index + 1,
-              event: 'bannerShow'
-            },
-            this.envUrl
-          )
-        }
-      })
-    }
-  }
-}

package/src/components/cms/productItem/productItem.scss

@@ -1,180 +0,0 @@
-.product-wrap {
-  border: none;
-  position: absolute;
-  touch-action: auto;
-  
-  .entrance-con {
-    position: relative;
-    width: 100%;
-    height: 100%;
-  }
-
-  .product-con {
-    overflow: hidden;
-    position: relative;
-
-    .slide-con {
-      position: relative;
-      width: 100%;
-      display: flex;
-      overflow-x: auto;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      .product-item {
-        flex-shrink: 0;
-        font-size: 14px;
-        width: 40%;
-        overflow: hidden;
-        position: relative;
-        .hover-con {
-          position: absolute;
-          width: stretch;
-          width: -webkit-stretch;
-        }
-      }
-    }
-
-    .product-name {
-      font-size: 14px;
-    }
-
-    .slide-con-2-pc {
-      flex-wrap: wrap;
-
-      .product-item {
-        width: 33.3%;
-      }
-    }
-
-    .slide-con-2-mobile {
-      flex-wrap: wrap;
-
-      .product-item {
-        width: 50%;
-      }
-    }
-
-    .price-con {
-      display: flex;
-      align-items: baseline;
-      width: 100%;
-      padding: 10px 0;
-      font-size: 14px;
-
-      .standardPrice {
-        margin-left: 10px;
-        text-decoration: line-through;
-      }
-    }
-
-    .product-info {
-      transition: opacity 0.4s;
-      padding: 10px 2px 0;
-
-      &.position1 {
-        text-align: left;
-      }
-
-      &.position2 {
-        text-align: center;
-
-        .price-con {
-          display: flex;
-          justify-content: center;
-        }
-      }
-
-      &.position3 {
-        text-align: right;
-
-        .price-con {
-          display: flex;
-          justify-content: flex-end;
-        }
-      }
-    }
-
-    .transparent {
-      opacity: 0;
-    }
-
-    .product-image {
-      width: 100%;
-      height: auto;
-      overflow: hidden;
-      font-size: 0;
-      img {
-        position: relative;
-        width: 100%;
-        transition: 0.3s all;
-      }
-    }
-
-    .productInfo {
-      padding: 0 10px;
-    }
-
-    .swiper-container {
-      .swiper-wrapper {
-        .swiper-slide {
-          position: relative;
-        }
-      }
-    }
-
-
-    .swiper-scrollbar {
-      height: 3px;
-      width: 70%;
-      left: 50%;
-      bottom: 10px;
-      // background-color: var(--color);
-      transform: translateX(-50%);
-      // ::v-deep .swiper-scrollbar-drag {
-      //   background-color: var(--activeColor);
-      // }
-    }
-
-    .swiper-button-prev {
-      background-image: none;
-      left: 20px;
-
-      &::after {
-        display: none;
-      }
-
-      &:hover {
-        .cms2iconfont {
-          color: var(--hoverColor) !important;
-        }
-      }
-
-      .cms2iconfont {
-        font-size: 28px;
-      }
-    }
-
-    .swiper-button-next {
-      background-image: none;
-      right: 20px;
-
-      &:hover {
-        .cms2iconfont {
-          color: var(--hoverColor) !important;
-        }
-      }
-
-      &::after {
-        display: none;
-      }
-
-      .cms2iconfont {
-        font-size: 28px;
-      }
-    }
-  }
-  
-}

package/src/components/cms/productItem/productItem.vue

@@ -1,117 +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="product-wrap"
-  >
-     <div :class="['product-list','entrance-con',`entrance-con${sortId}`]" :style="{'--hoverColor': paginationStyle.hoverColor || paginationStyle.color, '--activeColor': paginationStyle.activeColor, '--color': paginationStyle.color}">
-      <div
-        :ref="`entrance${attributeJson.sort}`"
-        :class="['product-con',  animationInObj.type ? enterClass : '']"
-        v-show="entranceShow"
-        :style="[{
-          width: `${baseStyle.w * ratio}px`,
-          height: `${baseStyle.h * ratio}px`,
-          padding: `0 ${attributeJson.goodsPaddingSpacing}px`,
-          animationDuration: `${animationInObj.duration}s`
-        }]">
-        <!-- 非swiper展示样式 -->
-        <div :class="`slide-con slide-con-${styleType}-${mode}`"
-             :style="{width: attributeJson.baseStyle.w * ratio + attributeJson.goodsSpacing +'px',
-             margin:('0px -'+ attributeJson.goodsSpacing/2 + 'px')}"
-             :ref="`slide${sortId}`"
-             v-if="!isSwiper">
-          <div 
-            :ref="`product${item.code}${index}`"
-            :class="['product-item',`product${item.code}${index}`]" 
-            v-hoverAnimate="{key: 'productIndex', value: index}"
-            v-for="(item, index) in productList"
-            @click="gotoPDP(item.code, item.colorCode, item.name, index)"
-            :style="[productStyle]"
-            :key="item.id">
-              <div class="product-image">
-                <img :src="(attributeJson.goodsImgType == 2 && item.customImage) ? item.customImage : item.mainPicUrl" :style="[(animationHoverObj.type === 3 && productIndex == index) ? hoverStyle : '']" :alt="item.name" />
-              </div>
-              <div v-if="attributeJson.showInfo.length!=0" :class="['product-info',`position${attributeJson.infoPoisition}`, {'transparent': attributeJson.isHover == 2 && productIndex!=index}]">
-                <slot name="productInfo">
-                  <div class="product-name" v-if="attributeJson.showInfo.indexOf(1) > -1">{{ item.name }}</div>
-                  <div class="price-con">
-                    <div v-if="attributeJson.showInfo.indexOf(2) > -1">￥{{ item.salesPrice || 0 }}</div>
-                    <div v-if="item.salesPrice!=item.standardPrice && attributeJson.showInfo.indexOf(3) > -1" class="standardPrice">￥{{ item.standardPrice || 0 }}</div>
-                  </div>
-                </slot>
-              </div>
-              
-              <!-- 边框 -->
-              <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: productIndex === index? 1 : 0, margin: `0 ${goodsSpacing / 2}px`}]"></div>
-            </div>
-        </div>
-
-        <!-- 轮播图 -->
-        <div v-if="isSwiper" :class="`swiper-container swiper-container-${sortId}`" :id="`mySwiper-${sortId}`" :ref="`slide${sortId}`" :key="styleType+indicatorType">
-          <div
-            class="swiper-wrapper"
-            :style="[{
-              width: `${baseStyle.w * ratio}px`
-            }]">
-            <div 
-              :class="`swiper-slide swiper-slide-${styleType}-${mode}`"
-              v-hoverAnimate="{key: 'productIndex', value: index}"
-              v-for="(item, index) in productList"
-              :style="[productStyle]"
-              :key="item.id">
-              <div :ref="`product${item.code}${index}`" @click="gotoPDP(item.code, item.colorCode, item.name, index)" :style="{height: `${attributeJson.baseStyle.h * ratio}px`}">
-                <!-- 商品图片 -->
-                <div class="product-image">
-                  <img :src="(attributeJson.goodsImgType==2 && item.customImage) ? item.customImage : item.mainPicUrl" :style="[(animationHoverObj.type === 3 && productIndex == index) ? hoverStyle : '']" alt="" />
-                </div>
-                 <div v-if="attributeJson.showInfo.length!=0" :class="['product-info',`position${attributeJson.infoPoisition}`, {'transparent': attributeJson.isHover == 2 && productIndex!=index }]">
-                  <slot name="productInfo">
-                    <div class="product-name" v-if="attributeJson.showInfo.indexOf(1) > -1">{{ item.name }}</div>
-                    <div class="price-con">
-                      <div  v-if="attributeJson.showInfo.indexOf(2) > -1">￥{{ item.salesPrice || 0 }}</div>
-                      <div v-if="item.salesPrice!=item.standardPrice && attributeJson.showInfo.indexOf(3) > -1" class="standardPrice">￥{{ item.standardPrice || 0 }}</div>
-                    </div>
-                  </slot>
-                </div>
-
-                <!-- 边框 -->
-                <div class="hover-con" v-if="animationHoverObj.type === 2" :style="[hoverStyle, {opacity: productIndex === index? 1 : 0}]"></div>
-              </div>
-            </div>
-          </div>
-
-          <!-- 滑动条 -->
-          <div v-if="hasScrollBar" :class="`swiper-scrollbar swiper-scrollbar-${sortId}`"></div>
-
-          <div :class="`swiper-button-prev swiper-button-prev-${sortId}`" v-if="hasSwiperButton">
-            <slot name="swiper-button-prev">
-              <div v-if="indicatorType == 2"><span :style="pageStyle" class="cms2iconfont iconleft"></span></div>
-            </slot>
-          </div>
-          <div :class="`swiper-button-next swiper-button-next-${sortId}`" v-if="hasSwiperButton">
-            <slot name="swiper-button-next">
-              <div v-if="indicatorType == 2"><span :style="pageStyle" class="cms2iconfont iconright" ></span></div>
-            </slot>
-          </div>
-
-        </div>
-
-      </div>
-     </div>
-  </div>
-</template>
-
-<script>
-import productItemJs from './productItem.js'
-export default productItemJs
-</script>
-
-<style lang="scss" scoped>
-@import 'productItem';
-@import "../animate.scss";
-</style>

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

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