优化手机计数器代码

components/mobile/common/StatisticsMobile.vue

@@ -1,212 +1,5 @@
-<!--<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" :style="{top: topLeft + 'rem'}" :class="{no_tran: topLeft == 2.4}">-->
     <ul class="list-inline pull-left" ref="pingdanListWrapper" :style="'top: -' + 1 * timerIndexL + 'rem'" :class="{'topL': isTopL}">
       <li v-for="(item, index) in itemLeft">
         <span  class="number">
@@ -216,7 +9,6 @@
         </span>
       </li>
     </ul>
-      <!--<ul class="list-inline pull-right" :style="{top: topRight + 'rem'}" :class="{no_tran: topRight == 2.4}">-->
     <ul class="list-inline pull-right" ref="pingdanListWrapperR" :style="'top: -' + 1 * timerIndexR + 'rem'" :class="{'topR': isTopR}">
       <li v-for="(item, index) in itemRight">
         <span class="number" v-if="item.type === 2">
@@ -245,8 +37,8 @@
         nameRight: ['询价求购', '询价求购', '上年交易', '本年交易'],
         topLeft: 0,
         topRight: 0,
-        timer: {},
-        timerIndex: 0,
+//        timer: {},
+//        timerIndex: 0,
         timerIndexL: 0,
         timerIndexR: 0,
         isTopL: false,
@@ -265,29 +57,6 @@
       })
     },
     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.timerL = setInterval(() => {
@@ -300,7 +69,6 @@
                 if (isChange) {
                   let title = this.itemLeft.shift()
                   let name = this.nameLeft.shift()
-//                  console.log(title)
                   this.itemLeft.push(title)
                   this.nameLeft.push(name)
                   this.timerIndexL = 0