mall-web-ssr/components/mobile/common/StatisticsMobile.vue

<template>
  <div class="statistics">
    <ul class="list-inline pull-left" ref="pingdanListWrapperL" :style="'top: -' + 0.7 * timerIndexL + 'rem'" :class="{'topL': isTopL}">
      <li v-for="(item, index) in itemLeft">
        <span  class="number">
          <span class="name" v-html="nameLeft[index]"></span>
          <span class="num" v-html="formatNumber(item.count, item.type)"></span>
          <span class="unit" v-if="item.type === 3">家</span>
        </span>
      </li>
    </ul>
    <ul class="list-inline pull-right" ref="pingdanListWrapperR" :style="'top: -' + 0.7 * timerIndexR + 'rem'" :class="{'topR': isTopR}">
      <li v-for="(item, index) in itemRight">
        <span class="number" v-if="item.type === 2">
          <span class="name" v-html="nameRight[index]"></span>
          <span class="month" v-if="item.id === '上月询价单'">(上月)</span>
          <span class="month" v-if="item.id === '本月询价单'">(本月)</span>
          <span class="num" v-html="formatDouble(item.count)"></span>
          <span class="unit">条</span>
        </span>
        <span class="number" v-else>
          <span class="name" v-html="nameRight[index]"></span>
          <span class="num" v-html="formatNumber(item.count, item.type)"></span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'StatisticsView',
    data () {
      return {
        step: 1,
        nameLeft: ['现货', '品牌', '规格书', '平台用户', '店铺'],
        nameRight: ['询价求购', '询价求购', '上年交易', '本年交易'],
        topLeft: 0,
        topRight: 0,
//        timer: {},
//        timerIndex: 0,
        timerIndexL: 0,
        timerIndexR: 0,
        isTopL: false,
        isTopR: false,
        timerL: {},
        timerR: {}, // 定时器实体
        imgbox: {
            'src': ''
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.changeIntervalL(true)
        this.changeIntervalR(true)
      })
    },
    methods: {
      changeIntervalL: function (flag) {
        if (flag) {
          this.timerL = setInterval(() => {
            this.isTopL = false
            let isChange = true
            this.timerIndexL++
            if (this.$refs.pingdanListWrapperL) {
              let _transitionEvent = this.baseUtils.whichTransitionEvent()
              _transitionEvent && this.$refs.pingdanListWrapperL.addEventListener(
                _transitionEvent, () => {
                  if (isChange) {
                    let title = this.itemLeft.shift()
                    let name = this.nameLeft.shift()
                    this.itemLeft.push(title)
                    this.nameLeft.push(name)
                    this.timerIndexL = 0
                    isChange = false
                    this.isTopL = true
                  }
                })
           }
          }, 2400)
        } else {
          clearInterval(this.timerL)
        }
      },
      changeIntervalR: function (flag) {
        if (flag) {
          this.timerR = setInterval(() => {
            this.isTopR = false
            let isChange = true
            this.timerIndexR++
            if (this.$refs.pingdanListWrapperR) {
              let _transitionEvent = this.baseUtils.whichTransitionEvent()
              _transitionEvent && this.$refs.pingdanListWrapperR.addEventListener(
                _transitionEvent, () => {
                  if (isChange) {
                    let title = this.itemRight.shift()
                    let name = this.nameRight.shift()
                    this.itemRight.push(title)
                    this.nameRight.push(name)
                    this.timerIndexR = 0
                    isChange = false
                    this.isTopR = true
                  }
                })
            }
          }, 3000)
        } else {
          clearInterval(this.timerR)
        }
      },
      formatNumber (num, type) {
        if (num === '' || !num) return 0
        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 = num + '亿'
        } 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 += '万'
        } else {
          if (type === 4) {
            num += '元'
          } else if (type === 1) {
            num += '个'
          } else {
            num += ''
          }
        }
        return num || 0
      },
      formatDouble (num) {
        if (num === '' || !num) return 0
        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) + '亿'
        } else if (num > 9999) {
          num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '万'
        } else {
          num += ''
        }
        return num || 0
      }
    },
    computed: {
      counter () {
        return this.$store.state.option.counter.data
      },
      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
      },
      itemData () {
        let str = []
        if (this.counter.length) {
          this.counter.forEach((value, key, $data) => {
            if($data[key].item === '店铺') {
              str[4] = {id: $data[key].item, count: $data[key].count, type: 3}
            } else if($data[key].item === '供应商') {
              str[3] = {id: $data[key].item, count: $data[key].count, type: 3}
            } else if($data[key].item === '本年交易金额') {
              str[8] = {id: $data[key].item, count: $data[key].count, type: 4}
            } else if($data[key].item ==='上年交易金额') {
              str[7] = {id: $data[key].item, count: $data[key].count, type: 4}
            } else if($data[key].item === '品牌') {
              str[1] = {id: $data[key].item, count: $data[key].count, type: 1}
            } else if($data[key].item === '现货') {
              str[0] = {id: $data[key].item, count: $data[key].count, type: 1}
            } else if($data[key].item === '规格书') {
              str[2] = {id: $data[key].item, count: $data[key].count, type: 1}
            }
          })
        }
        str[6] = {id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2}
        str[5] ={id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2}
        return str
      },
      itemLeft () {
        return this.itemData.slice(0, 5)
      },
      itemRight () {
        return this.itemData.slice(5, 9)
      }
    }
  }
</script>
<style lang="scss" scoped>
  .statistics{
    position:relative;
    height: 0.7rem;
    border-radius:.48rem;
    background: #fff;
    margin:0 .05rem .2rem;
    overflow: hidden;
    background: url('/images/mobile/@2x/home/countnewbg1.png') no-repeat center;
    background-size: auto 0.69rem;
    ul{
      width:50%;
      position:relative;
      transition: .5s all linear;
      &.topL {
        transition: top 0s;
        -moz-transition: top 0s; /* Firefox 4 */
        -webkit-transition: top 0s; /* Safari and Chrome */
        -o-transition: top 0s; /* Opera */
      }
      &.topR {
        transition: top 0s;
        -moz-transition: top 0s; /* Firefox 4 */
        -webkit-transition: top 0s; /* Safari and Chrome */
        -o-transition: top 0s; /* Opera */
      }
      &:first-child{
        margin-left: .0rem;
      }
      &:no_tran{
        transition:none;
      }
      li{
        width:100%;
        text-align: center;
        height:0.7rem;
        line-height: 0.7rem;
        font-size: .28rem;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        vertical-align:top;
        span{
          &.number{
            display: inline-block;
            color:red;
            font-size: 0.32rem;
            height: .7rem;
            line-height:.7rem;
            font-weight: bold;
            .name, .month{
              color: #fff;
            }
            .month{
              font-size: 0.22rem;
            }
            .unit, .num{
              color: #feff00;
            }
            .num{
              padding-left: .1rem;
            }
          }
        }
      }
    }
  }
</style>