mall-web-ssr/components/store/home/RecommendList.vue

<template>
  <div class="wrap">
    <div class="reco-title">产品展示</div>
    <div class="recommend-fragment clearfix">
      <div v-if="!commodities || commodities.length === 0" class="empty-show">
        <div class="empty">
          <div class="empty-img">
            <img src="/images/brandList/empty-cart.jpg">
          </div>
          <div class="empty-info">
            <p class="grey f16"> 暂无展示产品</p>
            <i class="iconfont" v-if="emptyShow === false">&#xe610;</i>&nbsp;<a v-if="emptyShow === false" href="/">返回首页</a>
            <img v-if="emptyShow === true" src="/images/brandList/upload.png">&nbsp;<a v-if="emptyShow === true" href="/vendor#/store/maintain" target="_blank">马上去上传</a>
          </div>
        </div>
      </div>
      <div v-swiper:mySwiper="swiperOption" v-if="commodities || commodities.length>0">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-if="commodities.length>0">
            <ul class="recommend-list clearfix">
              <li v-for="commodity in commodities.slice(0,3)" class="big">
                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
                  <div class="img">
                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
                  </div>
                  <div class="content">
                    <p>{{commodity.comCode | comCodeFilter}}</p>
                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" v-if="commodities.length>=3">
            <ul class="recommend-list clearfix">
              <li v-for="commodity in commodities.slice(3,6)" class="big">
                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
                  <div class="img">
                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
                  </div>
                  <div class="content">
                    <p>{{commodity.comCode | comCodeFilter}}</p>
                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" v-if="commodities.length>=6">
            <ul class="recommend-list clearfix">
              <li v-for="commodity in commodities.slice(6,9)" class="big">
                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
                  <div class="img">
                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
                  </div>
                  <div class="content">
                    <p>{{commodity.comCode | comCodeFilter}}</p>
                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
                  </div>
                </a>
              </li>
            </ul>
          </div>
          <div class="swiper-slide" v-if="commodities.length>=9">
            <ul class="recommend-list clearfix">
              <li v-for="commodity in commodities.slice(9,12)" class="big">
                <a :href="commodity.batchCode ? '/store/productDetail/'+ commodity.batchCode : '#'" class="href">
                  <div class="img">
                    <img :src="commodity.comImg.startsWith('static')?'/'+commodity.comImg:commodity.comImg"/>
                  </div>
                  <div class="content">
                    <p>{{commodity.comCode | comCodeFilter}}</p>
                    <!-- <p class="color666" v-text="commodity.brandNameCn">PANFAEFQ</p>-->
                    <p class="price" v-if="commodity.minPriceRMB">¥ {{commodity.minPriceRMB | currency}}</p>
                    <!-- <p class="price" v-if="!commodity.minPriceRMB">$ {{commodity.minPriceUSD || 0}}</p>-->
                  </div>
                </a>
              </li>
            </ul>
          </div>
        </div>
        <div class="swiper-pagination swiper-pagination-bullets"></div>
      </div>
    </div>
  </div>
</template>
<script>
  import Buy from '~components/common/buyOrCar/buyComponent.vue'
  import NuxtLink from '../../../.nuxt/components/nuxt-link'
  export default {
    name: 'recommend-product',
    components: {
      NuxtLink,
      Buy
    },
    computed: {
      commodities () {
        return this.$store.state.shop.recommend.products.data
      },
      storeInfo () {
        return this.$store.state.shop.storeInfo.store.data
      },
      isConsignment () {
        return this.storeInfo.type === 'CONSIGNMENT'
      },
      user() {
        return this.$store.state.option.user
      },
      storeStatus () {
        return this.$store.state.option.storeStatus.data
      },
      emptyShow () {
        let loggedStatus = false
        if (this.user.logged && this.user.data.enterprise.uu) {
          if (this.storeStatus.uuid === this.storeInfo.uuid) {
            loggedStatus = true
          } else {
            loggedStatus = false
          }
        } else {
          loggedStatus = false
        }
        return loggedStatus
      },
      // 产品推荐轮播
      swiperOption () {
        return {
          autoplay: 5000,
          initialSlide: 0,
          loop: true,
          effect: this.effect,
          lazyLoading: true,
          // 解决点击分页器后图片就不能轮播的问题
          autoplayDisableOnInteraction: false,
          pagination: '.swiper-pagination',
          paginationClickable: true,
          paginationElement: 'li'
        }
      }
    },
    filters: {
      comCodeFilter: function (title) {
        if (title === '') {
          return title
        }
        let len = 0
        let index = 0
        for (let i = 0; i < title.length; i++) {
          if (index === 0 && title.charAt(i).charCodeAt(0) > 255) {
            len = len + 2
          } else {
            len++
          }
          if (len > 18) {
            index = i
            break
          }
        }
        if (index > 0) {
          return title.substring(0, index) + '...'
        } else {
          return title
        }
      },
      currency: function (num) {
        if (typeof num === 'number') {
          if (num <= 0.000001) {
            num = 0.000001
          } else {
            if (num.toString().indexOf('.') === -1) {
              num += '.00'
            } else {
              let inputStr = num.toString()
              let arr = inputStr.split('.')
              let floatNum = arr[1]
              if (floatNum.length > 6) {
                num = inputStr.substring(0, arr[0].length + 7)
                if (Number(floatNum.charAt(6)) > 4) {
                  num = (Number(num) * 1000000 + 1) / 1000000
                }
              } else if (floatNum.length === 1) {
                num = num + '0'
              }
            }
          }
        }
        return num
      }
    },
    methods: {
      enidfilter: function (str) {
        if (str) {
          let encryptStr = '' // 最终返回的加密后的字符串
          // 产生三位随机数
          let num = ''
          for (let i = 0; i < 3; i++) {
            num += Math.floor(Math.random() * 10)
          }
          encryptStr += num // 产生3位随机数

          // 16位加密
          let tempspit = ''
          let strspit = str.toString().toLowerCase()
          if (strspit.match(/^[-+]?\d*$/) === null) { // 非整数字符，对每一个字符都转换成16进制，然后拼接
            /**
             * Unicode汉字、英文字母、数字的unicode范围
             *汉字：[0x4e00,0x9fa5]（或十进制[19968,40869]）
             *数字：[0x30,0x39]（或十进制[48, 57]）
             *小写字母：[0x61,0x7a]（或十进制[97, 122]）
             *大写字母：[0x41,0x5a]（或十进制[65, 90]
             * 'a'的Unicode编码：'&#97;',charCodeAt()的值是97
             * '码'的Unicode编码：'\u7801', new String('码').charCodeAt()的值是30721，30721的16进制表示是7801
             */
            let s = strspit.split('')
            for (let i = 0; i < s.length; i++) {
              s[i] = s[i].charCodeAt() // 先转换成Unicode编码
              s[i] = s[i].toString(16)
              // 因为在服务器是每两位当做一个字符进行解析的，所以这里每个字符的Unicode编码范围必须在0——255之间。数字和大小写满足该要求，特殊字符则不一定，如果后续有特殊字符的要求，需要重写编码器和解码器
              if (s[i].length === 1) {
                s[i] = '0' + s[i]
              }
              tempspit = tempspit + s[i]
            }
            tempspit = tempspit + '{' + 1 // 1代表字符
          } else { // 数字直接转换成16进制
            strspit = parseInt(strspit)
              .toString(16)
            tempspit = strspit + '{' + 0 // 0代表纯数字
          }

          let temp = tempspit.split('{') // 对要加密的字符转换成16进制
          let numLength = temp[0].length // 转换后的字符长度
          numLength = numLength.toString(16) // 字符长度换算成16进制
          if (numLength.length === 1) { // 如果是1，补一个0
            numLength = '0' + numLength
          } else if (numLength.length > 3) { // 转换后的16进制字符长度如果大于2位数，则返回，不支持
            return ''
          }
          encryptStr += numLength
          if (temp[1] === '0') {
            encryptStr += 0
          } else if (temp[1] === '1') {
            encryptStr += 1
          }
          encryptStr += temp[0]
          if (encryptStr.length < 20) { // 如果小于20位，补上随机数
            // 产生三位随机数
            let numtwo = ''
            for (let i = 0; i < 20 - encryptStr.length; i++) {
              numtwo += Math.floor(Math.random() * 10)
            }
            let ran = numtwo // 产生3位随机数
            encryptStr += ran
          }
          return encryptStr
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .wrap {
    background: #ece9ec;
    padding-top: 7px;
    width: 100%;
    height: 409px;
    .reco-title {
      border-bottom: 1px solid #3975f4;
      width: 218px;
      height: 34px;
      line-height: 34px;
      color: #fff;
      background: #3975f4;
      font-size: 18px;
      text-align: center;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      margin: 0;
    }
  }
  .recommend-fragment {
    background: #fff;
    .empty-show{
      height: 389px;
      padding-top: 140px;
      &:hover{
         box-shadow: 0px 0px 0px transparent;
       }
        .empty{
          margin: 0 auto;
          width: 181px;
          .empty-img{
            float: left;
          }
          .empty-info{
            float: left;
            margin: 5px 0px 0px 20px;
          .grey{
            color: #999;
            font-size: 14px;
          }
          i{
            color: #5078cb;
          }
          a{
            font-size: 14px;
            color: #5078cb;
          }
         }
        }
    }
  }
  .recommend-fragment ul{
    width: 100%;
    height: 360px;
    background: #fff;
   /* display: inline-block;*/
    -webkit-padding-start: 0;
    border-radius: 5px;
    /*padding-left: 2px;*/
    margin: 10px 0;
    padding: 0 15px;
  }
  .recommend-fragment ul li
    .img{
      height: 42px;
      text-align: center;
      line-height: 42px;
      img{
        max-width: 63px;
        max-height: 42px;
      }
  }
  .recommend-fragment ul li .content{
    width: 100%;
    margin: 0 auto;
    font-size: 12px;
    p{
      width: 100%;
      text-align: center;
      display: inline-block;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      margin: 5px 0;
      padding-left: 10px;
      color: #666;
      &.price{
        color: #ff002e;
        margin-top: -3px;
      }
    }
  }
 .recommend-fragment ul li .enter-store {
    position: absolute;
    top: 178px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: left;
  }
  .recommend-fragment ul li.big .enter-store a {
    width: 74px;
    height: 24px;
    display: inline-block;
    line-height: 24px;
    text-align: center;
    font-size: 13px;
    margin-left: 14px;
    border-radius: 3px;
    &:first-child {
      background-color: #fff;
      border: 1px solid #3b7cf4;
      color: #3b7cf4;
    }
    &:last-child {
      background-color: #ffa422;
      border: 1px solid #ffa422;
      color: #fff;
    }
    /*&:visited{
      .enter-store {
        top: 140px;
        left: 0px;
      }
    }*/
  }
  .recommend-fragment ul li.big {
    float: left;
    width: 190px;
    height: 115px;
    position: relative;
    overflow: hidden;
    margin: 2px 3px 0px 0px;
    &:nth-child(5n){
      margin: 2px 0px 0px 0px;
    }
    &:hover{
      /*box-shadow: 2px 0px 1px #d9d9d9, -2px 0px 1px #d9d9d9, 0px 2px 1px #d9d9d9, 0px -2px 1px #d9d9d9;*/
      .enter-store {
        top: 132px;
        left: 0px;
        transition: all .3s linear;
      }
      .img, .content{
        transform:translate(0px,-10px);
        -ms-transform:translate(0px,-10px); /* IE 9 */
        -webkit-transform:translate(0px,-10px); /* Safari and Chrome */
      }
    }
  }
  /*.recommend-fragment ul li.small .enter-store a {
    width: 74px;
    height: 24px;
    display: inline-block;
    line-height: 22px;
    text-align: center;
    font-size: 12px;
    margin-left: 11px;
    border-radius: 3px;
    &:first-child {
      background-color: #fff;
      border: solid 1px #3b7cf4;
      color: #3c7df5;
    }
    &:last-child {
      background-color: #ffa422;
      border: 1px solid #ffa422;
      color: #fff;
    }
  }
  .recommend-fragment ul li.small {
    float: left;
    width: 180px;
    height: 174px;
    position: relative;
    overflow: hidden;
    margin: 2px 8px 0px 0px;
    &:nth-child(5n){
      margin: 2px 0px 0px 0px;
    }
    &:hover, &:focus, &:active &:visited{
      box-shadow: 2px 0px 1px #d9d9d9, -2px 0px 1px #d9d9d9, 0px 2px 1px #d9d9d9, 0px -2px 1px #d9d9d9;
      .enter-store {
        top: 140px;
        left: 0px;
        transition: all .5s;
      }
      .img, .content{
        transform:translate(0px,-10px);
        -ms-transform:translate(0px,-10px); !* IE 9 *!
        -webkit-transform:translate(0px,-10px); !* Safari and Chrome *!
      }
    }
  }*/
  .recommend-fragment ul li.empty-show {
    width: 100%;
    height: 356px;
    padding-top: 150px;
    &:hover{
      box-shadow: 0px 0px 0px transparent;
    }
    .empty{
      margin: 0 auto;
      width: 181px;
      .empty-img{
        float: left;
      }
      .empty-info{
        float: left;
        margin: 5px 0px 0px 20px;
        .grey{
          color: #999;
          font-size: 14px;
        }
        i{
          color: #5078cb;
        }
        a{
          font-size: 14px;
          color: #5078cb;
        }

      }
    }
  }
  .shadow {
    width: 1190px;
    margin: 0 auto;
    position: relative;
    img {
      position: absolute;
      top: -12px;
    }
  }
</style>