首页询价、求购询价、手机计数器修改

components/home/count/countItem.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="count-item">
       <span>{{ nums }}</span>
-      <span v-text="isMore?'万':'个'" v-if="!isShow && index !==3"></span>
-      <span v-text="isMore?'万':'家'" v-if="!isShow && index ===3"></span>
+      <span v-text="isMore?'万':'个'" v-if="!isShow && logo !== 0"></span>
+      <span v-text="isMore?'万':'家'" v-if="!isShow && logo === 0"></span>
       <span v-if="isShow">亿</span>
   </div>
 </template>
@@ -14,7 +14,7 @@
         default: 0,
         type: Number
       },
-      index: {
+      logo: {
         default: 0,
         type: Number
       }

components/home/count/displayCard.vue

@@ -1,16 +1,16 @@
 <template>
-  <div class="display-card">
+  <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 v-for="(item, index) in title" :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
+           <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 v-for="(c, index) in counts" :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
-             <count-item :value ="c" :index ="index"></count-item>
+           <li ref="pingdanListWrapper" v-for="(c, index) in counts"  :style="'top: -' + 30 * timerIndex + 'px'" :class="{'top': isTop}">
+             <count-item :value ="c.count" :logo ="c.logo"></count-item>
            </li>
          </ul>
        </div>
@@ -28,6 +28,7 @@
 </template>
 <script>
   import CountItem from './countItem.vue'
+  import {whichTransitionEvent} from '~utils/baseUtils.js'
   export default {
     name: 'display-card',
     data () {
@@ -51,17 +52,24 @@
       changeInterval: function (flag) {
         if (flag) {
           this.timer = setInterval(() => {
-            this.timerIndex ++
-//            let title = this.title.shift()
-//            let count = this.counts.shift()
-//            this.title.push(title)
-//            this.counts.push(count)
-//            this.timerIndex = 0
-            this.isTop = (this.timerIndex === 4)
-            if (this.isTop) {
-              this.timerIndex = 0
-            }
-          }, 3000)
+            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.title.shift()
+                         let count = this.counts.shift()
+                         this.title.push(title)
+                         this.counts.push(count)
+                         this.timerIndex = 0
+                         isChange = false
+                         this.isTop = true
+                       }
+              })
+          }, 4000)
         } else {
           clearInterval(this.timer)
         }
@@ -164,10 +172,10 @@
         let countM = this.$store.state.product.common.counts.data
         if (countM) {
           countM.forEach((value, key, $data) => {
-            arr.push(value.count)
+            arr.push({count: value.count, logo: 1})
           })
         }
-        arr.push(this.list.totalElements)
+        arr.push({count: this.list.totalElements, logo: 0})
         return arr
       },
       enterprise () {
@@ -224,14 +232,14 @@
                   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 */
+                  /*-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 */
+                    /*-moz-transition: top 0s; !* Firefox 4 *!*/
+                    /*-webkit-transition: top 0s; !* Safari and Chrome *!*/
+                    /*-o-transition: top 0s; !* Opera *!*/
                   }
                 }
               }

components/mobile/common/StatisticsMobile.vue

@@ -204,7 +204,7 @@
 </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: 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>
@@ -213,7 +213,7 @@
         </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="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>
@@ -227,6 +227,7 @@
   </div>
 </template>
 <script>
+  import {whichTransitionEvent} from '~utils/baseUtils.js'
   export default {
     name: 'StatisticsView',
     data () {
@@ -249,28 +250,74 @@
       })
     },
     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)
+//      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)
+//          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) {

utils/baseUtils.js

@@ -211,3 +211,19 @@ export const deepCopy = function (target) {
   }
   return newObj
 }
+
+export function whichTransitionEvent() {
+  var t
+  var el = document.createElement('fakeelement')
+  var transitions = {
+    transition: 'transitionend',
+    OTransition: 'oTransitionEnd',
+    MozTransition: 'transitionend',
+    WebkitTransition: 'webkitTransitionEnd'
+  }
+  for (t in transitions) {
+    if (el.style[t] !== undefined) {
+      return transitions[t]
+    }
+  }
+}