mall-web-ssr/components/provider/HotCommodity.vue

<template>
  <div class="hot-commodity recommend-fragment">
    <div class="title-icon">
      <span>产品推荐</span>
      <img src="/images/original/line.png" alt=""/>
    </div>
    <div v-if="hotComponents && hotComponents.length>0" class="hot-components">
      <div v-if="hotComponents.length<=2">
        <ul class="recommend-list clearfix">
          <li v-for="(component, index) in hotComponents.slice(0,2)" class="big">
            <a :href="component.detailsLink" target="_blank">
              <div class="img"><img :src="component.pictureLink || '/images/store/common/default.png'"/></div>
              <span class="name">{{component.metadatas.contExp_abstract}}</span>
              <div class="price">{{component.metadatas.contExp_remark}}</div>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <div v-swiper:mySwiper="swiperOption" v-if="hotComponents && hotComponents.length>2">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-if="hotComponents.length>0">
          <ul class="recommend-list clearfix">
            <li v-for="(component, index) in hotComponents.slice(0,2)" class="big">
              <a :href="component.detailsLink" target="_blank">
                <div class="img"><img :src="component.pictureLink || '/images/store/common/default.png'"/></div>
                <span class="name">{{component.metadatas.contExp_abstract}}</span>
                <div class="price">{{component.metadatas.contExp_remark}}</div>
              </a>
            </li>
          </ul>
        </div>
        <div class="swiper-slide" v-if="hotComponents.length>2">
          <ul class="recommend-list clearfix">
            <li v-for="(component, index) in hotComponents.slice(2,4)" class="big">
              <a :href="component.detailsLink" target="_blank">
                <div class="img"><img :src="component.pictureLink || '/images/store/common/default.png'"/></div>
                <span class="name">{{component.metadatas.contExp_abstract}}</span>
                <div class="price">{{component.metadatas.contExp_remark}}</div>
              </a>
            </li>
          </ul>
        </div>
        <div class="swiper-slide" v-if="hotComponents.length>4">
          <ul class="recommend-list clearfix">
            <li v-for="(component, index) in hotComponents.slice(4,6)" class="big">
              <a :href="component.detailsLink" target="_blank">
                <div class="img"><img :src="component.pictureLink || '/images/store/common/default.png'"/></div>
                <span class="name">{{component.metadatas.contExp_abstract}}</span>
                <div class="price">{{component.metadatas.contExp_remark}}</div>
              </a>
            </li>
          </ul>
        </div>
        <div class="swiper-slide" v-if="hotComponents.length>6">
          <ul class="recommend-list clearfix">
            <li v-for="(component, index) in hotComponents.slice(6,8)" class="big">
              <a :href="component.detailsLink" target="_blank">
                <div class="img"><img :src="component.pictureLink || '/images/store/common/default.png'"/></div>
                <span class="name">{{component.metadatas.contExp_abstract}}</span>
                <div class="price">{{component.metadatas.contExp_remark}}</div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="swiper-pagination swiper-pagination-bullets" style="bottom: -3px!important;"></div>
    </div>
  </div>
</template>
<script>

export default {
  name: 'hot-commodity',
  computed: {
    hotComponents () {
      // console.log(this.$store.state.provider.storeCms.hotComponents.data.data)
      return this.$store.state.provider.storeCms.hotComponents.data.data
    },
    // 产品推荐轮播
    swiperOption () {
      return {
        autoplay: 5000,
        initialSlide: 0,
        loop: true,
        effect: this.effect,
        lazyLoading: true,
        // 解决点击分页器后图片就不能轮播的问题
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination',
        paginationClickable: true,
        paginationElement: 'li'
      }
    }
  }
}
</script>
<style scoped lang="scss">
  .hot-commodity {
    margin: 10px 0 30px 0;
    width: 220px;
    height: 464px;
    background-color: #fff;
    border-radius: 5px;
    .title-icon {
      position: relative;
      width: 100%;
      height: 34px;
      line-height: 34px;
      text-align: center;
      span{
        font-size: 14px;
        font-weight: bold;
        color: #333;
      }
      img{
        position: absolute;
        top: 14px;
        left: 26px;
      }
    }
    ul{
      padding: 14px 0 0;
      width: 220px;
      li{
        margin: 0 auto 25px;
        text-align: center;
        .img{
          margin: 0 auto;
          width: 181px;
          height: 117px;
          line-height: 117px;
          border-radius: 2px;
          border: solid 1px #e2e2e2;
          img{
            width: 91px;
            height: 87px;
          }
        }
        .name {
          display: inline-block;
          margin: 10px auto;
          font-size: 14px;
          color: #333;
        }
        .price{
          margin: 0 auto;
          width: 124px;
          height: 21px;
          line-height: 21px;
          font-size: 13px;
          color: #fff;
          background-color: #e6382f;
        }
      }
    }
  }
</style>