baiqiu-cms-decoration-dg 0.0.22 → 0.0.24

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

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

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

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

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

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

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

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

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

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