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

<!--<template>
  <div class="statistics">
    <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
      <li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
        <span class="number" v-if="item.type === 2">
          <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
          <span v-html="formatDouble(item.count)" style="vertical-align: middle"></span>
          <span class="unit">条</span>
        </span>
        <span class="number" v-else>
          <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
          <span v-html="formatNumber(item.count, index)" style="vertical-align: middle"></span>
          <span class="unit" v-if="item.type === 3">家</span>
        </span>
      </li>
    </ul>
    <ul class="list-inline" :style="{top: widthTop + 'rem'}" :class="{no_tran: widthTop == 2.4}">
      <li v-for="(item, index) in itemData" :style="index % 2 == 0 ? 'text-align: right;padding-right: .3rem;' : 'text-align: left;padding-left: .3rem;'">
        <span class="number" v-if="item.type === 2">
          <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
          <span v-html="formatDouble(item.count)" style="vertical-align: middle"></span>
          <span class="unit">条</span>
        </span>
        <span class="number" v-else>
          <img :src="`/images/mobile/@2x/home/count${index + 1}.jpg`" alt="">
          <span v-html="formatNumber(item.count, index)" style="vertical-align: middle"></span>
          <span class="unit" v-if="item.type === 3">家</span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    name: 'StatisticsView',
    data () {
      return {
        step: 1,
        widthTop: 0,
        timerIndex: 0,
        timer: {}, // 定时器实体
        imgbox: {
            'src': ''
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.changeInterval()
      })
    },
    methods: {
      changeInterval () {
        setInterval(() => {
          this.widthTop += -0.6
          if (this.widthTop === -2.4) {
            this.widthTop = 0
          }
        }, 3000)
      },
      formatNumber (num, type) {
        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 + '<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 === 6 || type === 7) {
            num += '<span style="color: #333">元</span>'
          } else if (type === 0 || type === 1 || type === 2) {
            num += '<span style="color: #333">个</span>'
          } else {
            num += ''
          }
        }
        return num
      },
      formatDouble (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
      },
      inquirySheet () {
        let sheetNum = this.$store.state.count.inquirySheet.data.count
        return this.formatDouble(sheetNum)
      },
      inquirySheetLast () {
        let lastSheetNum = this.$store.state.count.inquirySheetLast.data.count
        return this.formatDouble(lastSheetNum)
      },
      all () {
        let count = this.$store.state.supplier.merchant.merchantAll.data
        return count.content ? count.totalElements : '0'
      },
      counts () {
        return this.$store.state.product.common.counts
      },
      itemData () {
        let str = []
        if (this.counts.data) {
          this.counts.data.forEach((value, key, $data) => {
            str.push({id: $data[key].item, count: $data[key].count, type: 1})
          })
        }
        str.push({id: '供应商', count: this.all ? this.all : 0, type: 3})
        str.push({id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2})
        str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
        if (this.allCount) {
          this.allCount.forEach((value, key, $data) => {
            str.push({id: $data[key].item, count: $data[key].count, type: 1})
          })
        }
        str = [str[1], str[2], str[0], ...str.slice(3, 6), str[7], str[6]]
        return str
      }
    }
  }
</script>
<style lang="scss" scoped>
  .statistics{
    position:relative;
  /*  height: 0.6rem;*/
    height: 8rem;
    border-radius:.3rem;
    background: #fff;
    margin:0 .05rem .2rem;
    /*overflow: hidden;*/
    background: url('/images/mobile/@2x/home/countbg.png') no-repeat center;
    ul{
      float: left;
      width:50%;
      position:absolute;
      transition: .5s all linear;
      border: 1px solid red;
      &:no_tran{
        transition:none;
      }
      li{
        width:100%;
        height:.6rem;
        line-height: .6rem;
        font-size: .28rem;
        font-weight: bold;
        white-space: nowrap;
        overflow: hidden;
        vertical-align:top;
        &:nth-child(even){
          &::before{
            content: '';
            display: inline-block;
            width: 0.02rem;
            height: 0.3rem;
            background-color: #9c9c9c;
            position: relative;
            top: .1rem;
            left: -.3rem;
          }
        }
        span{
          img {
            height: .3rem;
          }
          &.number{
            display: inline-block;
            color:red;
            font-size: 0.32rem;
            height: .6rem;
            vertical-align:middle;
            line-height:.6rem;
            .unit{
              color: #333;
              vertical-align: middle;
            }
          }
        }
      }
    }
  }
</style>-->
<template>
  <div class="statistics">
    <ul class="list-inline pull-left" ref="pingdanListWrapper" :style="{top: topLeft + 'rem'}" :class="{no_tran: topLeft == 2.4}">
      <li v-for="(item, index) in itemData" v-if="index <= 4">
        <span  class="number">
          <span class="name" v-html="count[index]"></span>
          <span class="num" v-html="formatNumber(item.count, index)"></span>
          <span class="unit" v-if="item.type === 3">家</span>
        </span>
      </li>
    </ul>
    <ul class="list-inline pull-right" ref="pingdanListWrapper" :style="{top: topRight + 'rem'}" :class="{no_tran: topRight == 2.4}">
      <li v-for="(item, index) in itemData" v-if="index > 4">
        <span class="number">
          <span class="name" v-html="count[index]"></span>
          <span class="month" v-if="index === 5">(上月)</span>
          <span class="month" v-if="index === 6">(本月)</span>
          <span class="num" v-html="formatDouble(item.count)"></span>
          <span class="unit" v-if="item.type === 2">条</span>
        </span>
      </li>
    </ul>
  </div>
</template>
<script>
  import {whichTransitionEvent} from '~utils/baseUtils.js'
  export default {
    name: 'StatisticsView',
    data () {
      return {
        step: 1,
        count: ['现货', '品牌', '规格书', '供应商', '店铺', '询价求购', '询价求购', '上年交易', '本年交易'],
        topLeft: 0,
        topRight: 0,
        timerIndex: 0,
        timer: {}, // 定时器实体
        imgbox: {
            'src': ''
        }
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.changeIntervalL()
        this.changeIntervalR()
      })
    },
    methods: {
//      changeIntervalL () {
//        setInterval(() => {
//          this.topLeft += -1
//          let arr1 = this.itemData.slice(0, 5)
//          let arr2 = arr1.shift()
//          arr1.push(arr2)
//          if (this.topLeft === -5) {
//            this.topLeft = 0
//          }
//        }, 2400)
//      },
//      changeIntervalR () {
//        setInterval(() => {
//          this.topRight += -1
//          let arr1 = this.itemData.slice(5, 9)
//          let arr2 = arr1.shift()
//          arr1.push(arr2)
//          this.itemDataTemp.push(this.itemData)
//          if (this.topRight === -4) {
//            this.topRight = 0
//          }
//        }, 3000)
//      },
      changeIntervalL: function (flag) {
        if (flag) {
          this.timer = setInterval(() => {
            this.isTop = false
            let isChange = true
            this.timerIndex++
            let _transitionEvent = whichTransitionEvent()
            _transitionEvent && this.$refs.pingdanListWrapper[0].addEventListener(
              _transitionEvent, () => {
                console.log(isChange)
                if (isChange) {
                  let title = this.itemData.slice(0, 5).shift()
                  this.title.push(title)
                  this.timerIndex = 0
                  isChange = false
                  this.isTop = true
                }
              })
          }, 2400)
        } else {
          clearInterval(this.timer)
        }
      },
      changeIntervalR: function (flag) {
        if (flag) {
          this.timer = setInterval(() => {
            this.isTop = false
            let isChange = true
            this.timerIndex++
            let _transitionEvent = whichTransitionEvent()
            _transitionEvent && this.$refs.pingdanListWrapper[0].addEventListener(
              _transitionEvent, () => {
                console.log(isChange)
                if (isChange) {
                  let title = this.itemData.slice(5, 9).shift()
                  this.title.push(title)
                  this.timerIndex = 0
                  isChange = false
                  this.isTop = true
                }
              })
          }, 3000)
        } else {
          clearInterval(this.timer)
        }
      },
      formatNumber (num, type) {
        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 >= 7) {
            num += '元'
          } else if (type <= 2) {
            num += '个'
          } else {
            num += ''
          }
        }
        return num
      },
      formatDouble (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) + '亿'
        } else if (num > 9999) {
          num = (num / 10000).toFixed(2).slice(num.length - 1, 4) + '万'
        } else {
          num += ''
        }
        return num
      }
    },
    computed: {
      allCount () {
        return this.$store.state.count.allCount.data
      },
      inquirySheet () {
        let sheetNum = this.$store.state.count.inquirySheet.data.count
        return this.formatDouble(sheetNum)
      },
      inquirySheetLast () {
        let lastSheetNum = this.$store.state.count.inquirySheetLast.data.count
        return this.formatDouble(lastSheetNum)
      },
      all () {
        let count = this.$store.state.supplier.merchant.merchantAll.data
        return count.content ? count.totalElements : '0'
      },
      counts () {
        return this.$store.state.product.common.counts
      },
      list () {
        let list = JSON.parse(JSON.stringify(this.$store.state.provider.stores.storeList.data))
        console.log(list)
        return list.totalElements
      },
      itemData () {
        let str = []
        if (this.counts.data) {
          this.counts.data.forEach((value, key, $data) => {
            str.push({id: $data[key].item, count: $data[key].count, type: 1})
          })
        }
        str.push({id: '供应商', count: this.all ? this.all : 0, type: 3})
        str.push({id: '本月询价单', count: this.$store.state.count.inquirySheet.data ? this.$store.state.count.inquirySheet.data.count : 0, type: 2})
        str.push({id: '上月询价单', count: this.$store.state.count.inquirySheetLast.data ? this.$store.state.count.inquirySheetLast.data.count : 0, type: 2})
        if (this.allCount) {
          this.allCount.forEach((value, key, $data) => {
            str.push({id: $data[key].item, count: $data[key].count, type: 1})
          })
        }
        str.push({id: '店铺', count: this.list ? this.list : 0, type: 3})
        str = [str[1], str[0], str[2], str[3], str[8], str[5], str[4], str[6], str[7]]
        return str
      }
    }
  }
</script>
<style lang="scss" scoped>
  .statistics{
    position:relative;
    height: 1rem;
    border-radius:.48rem;
    background: #fff;
    margin:0 .05rem .2rem;
    overflow: hidden;
    background: url('/images/mobile/@2x/home/countbg.png') no-repeat center;
    background-size: auto 0.96rem;
    ul{
      width:50%;
      position:relative;
      transition: .5s all linear;
      &:first-child{
        margin-left: .0rem;
      }
      &:no_tran{
        transition:none;
      }
      li{
        width:100%;
        text-align: center;
        height:1rem;
        line-height: 0.92rem;
        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: .6rem;
            vertical-align:middle;
            line-height:.6rem;
            font-weight: bold;
            .name, .month{
              color: #fff;
              vertical-align:middle;
            }
            .month{
              font-size: 0.22rem;
            }
            .unit, .num{
              color: #feff00;
              vertical-align:middle;
            }
            .num{
              padding-left: .1rem;
            }
          }
        }
      }
    }
  }
</style>