mall-web-ssr/components/home/displayCard.vue

<template>
  <div class="display-card" v-if="cardShow">
    <span @click="cardClose" v-if="cardShow" class="cardClose"><img src="/images/all/close.png"></span>
     <div class="content" v-if="cardShow">
       <div>
         <ul class="list-unstyled">
           <li ref="pingdanListWrapper" v-for="(item, index) in title"  :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
             <span>{{item}}</span>
           </li>
         </ul>
         <ul class="list-unstyled">
           <li ref="pingdanListWrapper" v-for="(c, index) in counts"  :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
             <span v-html="formatScrollNumber(c.count, c.logo)"></span>
           </li>
         </ul>
       </div>
       <div v-for="item in itemCounts">
         <p><span v-html="item.count"></span>
           <span style="color: #333" v-if="item.type === 3">家</span>
           <span style="color: #333" v-if="item.type === 2">条</span>
         </p>
       </div>
       <a class="enter" @click="goStoreApply()">
         <img src="/images/all/enter2.png">
       </a>
     </div>
  </div>
</template>
<script>
  import {whichTransitionEvent} from '~utils/baseUtils.js'
  export default {
    name: 'display-card',
    data () {
      return {
        cardShow: true,
        timerIndex: 0,
        isTop: false, // 判断是否滚动至顶,
        timer: {}, // 定时器实体
        title: [ '品牌', '现货', '规格书', '店铺' ]
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.changeInterval(true)
      })
    },
    methods: {
      changeInterval: function (flag) {
        if (flag) {
          this.timer = setInterval(() => {
            this.isTop = false
            let isChange = true
            this.timerIndex++
            if (this.$refs.pingdanListWrapper[0]) {
              let _transitionEvent = whichTransitionEvent()
              _transitionEvent && this.$refs.pingdanListWrapper[0].addEventListener(
                _transitionEvent, () => {
                  if (isChange) {
                    let title = this.title.shift()
                    let count = this.counts.shift()
                    this.title.push(title)
                    this.counts.push(count)
                    this.timerIndex = 0
                    isChange = false
                    this.isTop = true
                  }
                })
            }
          }, 3000)
        } else {
          clearInterval(this.timer)
        }
      },
      cardClose () {
        this.cardShow = false
      },
      formatScrollNumber (num, logo) {
//        let re = /(\d+)(\d{3})/
        if (num > 99999999) {
          let str2 = num.toString()
          num = Math.floor(num / 100000000)
          if (parseInt(str2.charAt(str2.length - 8)) > 8) {
            num = num + 1
          }
          let length = String(num).length
          this.len = length > 3 ? length + 1 : length
          num = (Array(7 - length).join(0) + num)
          num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">亿</span>'
        } else if (num > 9999) {
          let str = num.toString()
          num = Math.floor(num / 10000)
          if (parseInt(str.charAt(str.length - 4)) > 4) {
            num = num + 1
          }
          let length = String(num).length
          this.len = length > 3 ? length + 1 : length
          num = (Array(7 - length).join(0) + num)
          num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">万</span>'
        } else {
          let length = String(num).length
          this.len = length > 3 ? length + 1 : length
          num = (Array(7 - length).join(0) + num)
          if (logo === 0) {
            num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">家</span>'
          } else {
            num += '&nbsp;<span style="color: #376ef3;font-size: 16px;position:relative;top: -3px;">个</span>'
          }
        }
//        while (re.test(num)) {
//          num = num.replace(re, '$1，$2')
//        }
//        num = num.split('')
//        console.log(num)
        return num
      },
      formatNumber (num, type) {
        if (num) {
          if (num.toString().indexOf('E') !== -1) {
            let arr = num.toString().split('E')
            num = arr[0] * Math.pow(10, arr[1])
          }
          if (num > 99999999) {
            let str2 = num.toString()
            num = Math.floor(num / 100000000)
            if (parseInt(str2.charAt(str2.length - 8)) > 8) {
              num = num + 1
            }
            num += '<span style="color: #333">亿</span>'
          } else if (num > 9999) {
            let str = num.toString()
            num = Math.floor(num / 10000)
            if (parseInt(str.charAt(str.length - 4)) > 4) {
              num = num + 1
            }
            num += '<span style="color: #333">万</span>'
          } else {
            if (type === 1) {
              num += '<span style="color: #333">元</span>'
            } else {
              num += ''
            }
          }
        }
        return num
      },
      formatDouble (num) {
        if (num) {
          if (num.toString().indexOf('E') !== -1) {
            let arr = num.toString().split('E')
            num = arr[0] * Math.pow(10, arr[1])
          }
          if (num > 99999999) {
            num = (num / 100000000).toFixed(2).slice(num.length - 1, 4) + '<span style="color: #333">亿</span>'
          } else if (num > 9999) {
            num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '<span style="color: #333">万</span>'
          } else {
            num += ''
          }
        }
        return num
      }
    },
    computed: {
      allCount () {
        return this.$store.state.count.allCount.data
      },
      payMoneyLast () {
        return this.allCount[0] ? this.formatNumber(this.allCount[0].count, 1) : 0
      },
      payMoney () {
        return this.allCount[1] ? this.formatNumber(this.allCount[1].count, 1) : 0
      },
      inquirySheet () {
        let sheetNum = this.$store.state.count.inquirySheet.data
        return sheetNum ? this.formatDouble(sheetNum.count) : 0
      },
      inquirySheetLast () {
        let lastSheetNum = this.$store.state.count.inquirySheetLast.data
        return lastSheetNum ? this.formatDouble(lastSheetNum.count) : 0
      },
      all () {
        let count = this.$store.state.supplier.merchant.merchantAll.data
        let supplierCount = count.content ? count.totalElements + '' : 0
        return this.formatNumber(supplierCount, 0)
      },
      itemCounts () {
        let arr = []
        arr.push({count: this.all ? this.all : 0, type: 3}, {count: this.payMoney ? this.payMoney : 0, type: 1}, {count: this.payMoneyLast ? this.payMoneyLast : 0, type: 1}, {count: this.inquirySheet ? this.inquirySheet : 0, type: 2}, {count: this.inquirySheetLast ? this.inquirySheetLast : 0, type: 2})
        return arr
      },
      list () {
        let list = JSON.parse(JSON.stringify(this.$store.state.provider.stores.storeList.data))
        return list
      },
      counts () {
        let arr = []
        let countM = this.$store.state.product.common.counts.data
        if (countM) {
          countM.forEach((value, key, $data) => {
            arr.push({count: value.count, logo: 1})
          })
        }
        arr.push({count: this.list.totalElements, logo: 0})
        return arr
      },
      enterprise () {
        return this.user.data.enterprise
      }
    }
  }
</script>
<style lang="scss" scoped>
  .display-card{
    position: fixed;
    right: 100px;
    top: 100px;
    width: 180px;
    height: 540px;
    z-index: 100;
    .cardClose{
      position: absolute;
      right: 3px;
      top: 1px;
      opacity: 0.8;
      &:hover{
        cursor: pointer;
      }
    }
    .content{
      margin-top: 10px;
      width: 178px;
      height: 536px;
      background: url('/images/all/countBackground2.png') no-repeat;
      div{
        height: 72px;
        width: 158px;
        padding-top: 30px;
        margin-left: 6px;
        &:first-child{
          height: 109px;
          padding-top: 1px;
          ul{
            &:first-child{
                max-height: 30px;
                width: 100%;
                text-align: center;
                overflow: hidden;
                position: relative;
                top: 16px;
                li{
                  height: 30px;
                  line-height: 30px;
                  font-weight: bold;
                  font-size: 21px;
                  letter-spacing: 0px;
                  color: #fff000;
                  position: relative;
                  top: 0;
                  transition: top 1s;
                  -moz-transition: top 1s; /* Firefox 4 */
                  -webkit-transition: top 1s; /* Safari and Chrome */
                  -o-transition: top 1s; /* Opera */
                  &.top {
                    transition: top 0s;
                    -moz-transition: top 0s; /* Firefox 4 */
                    -webkit-transition: top 0s; /* Safari and Chrome */
                    -o-transition: top 0s; /* Opera */
                  }
                }
              }
            &:last-child{
              max-height: 30px;
              width: 100%;
              overflow: hidden;
              position: relative;
              top: 21px;
              text-align: right;
              li{
                height: 30px;
                line-height: 30px;
                font-weight: bold;
                font-size: 21px;
                color: #fff;
                position: relative;
                top: 0;
                left: -28px;
                transition: top 1s;
                -moz-transition: top 1s; /* Firefox 4 */
                -webkit-transition: top 1s; /* Safari and Chrome */
                -o-transition: top 1s; /* Opera */
                &.top {
                  transition: top 0s;
                  -moz-transition: top 0s; /* Firefox 4 */
                  -webkit-transition: top 0s; /* Safari and Chrome */
                  -o-transition: top 0s; /* Opera */
                }
              }
            }
          }
        }
        p{
          width: 100%;
          text-align: center;
          font-size: 20px;
          color: #f14e4e;
        }
      }
      .enter{
        width: 100%;
        display: inline-block;
        position: absolute;
        bottom: 35px;
        left: -5px;
        text-align: center;
      }
    }
  }
</style>