打开首页求购轮播

components/home/floor/FloorList.vue

@@ -3,7 +3,7 @@
     <div class="container">
       <floor-bar :floors="floors"></floor-bar>
       <!--<a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao.png" alt=""></a>-->
-      <div v-if="purchaseManListData && false"></div>
+      <!--<div v-if="purchaseManListData && false"></div>-->
       <div class="banner">
         <ul class="seek-banner">
           <li><a href="/store/33069557578d44e69bd91ad12d28a8d4" target="_blank"><img src="/images/all/banner-cuxiao001.jpg" alt=""></a></li>
@@ -20,7 +20,7 @@
                   <span>操作</span>
                 </div>
                 <ul>
-                  <li v-for="(purchaseMan, index) in purchaseManList.content" v-if="index < 5" :style="'top: -' + 32 * timerIndex + 'px'">
+                  <li v-for="(purchaseMan, index) in purchaseManListData.content" :style="'top: -' + 32 * timerIndex + 'px'" :class="{'top': isTop}">
                     <div>{{purchaseMan.date | date}}</div>
                     <div>
                       <span :title="user.logged ? purchaseMan.inquiry.enterprise.enName : null" v-if="purchaseMan.inquiry && purchaseMan.inquiry.enterprise && purchaseMan.inquiry.enterprise.enName">{{[purchaseMan.inquiry.enterprise.enName, user] | enterpriseFilter}}</span>
@@ -49,7 +49,7 @@
     </div>
     <span v-if="expandFloors && false">floor</span>
     <say-price :current="currentSayPriceIndex"
-               :purchase="purchaseManList"
+               :purchase="purchaseManListData || {}"
                @cancelSayPriceAction="cancelSayPrice"
                @resetListAction="resetList"
                @sayPriceIndexAction="setIndex(index)"
@@ -98,24 +98,20 @@
         pageSize: 50,
         nowPage: 1,
         currentSayPriceIndex: -1,
-        purchaseManList: {
-          content: []
-        },
-        listTemplate: [],
-        isChange: false
+//        purchaseManList: {
+//          content: []
+//        },
+//        listTemplate: [],
+        isChange: false,
+        isTop: false, // 判断是否滚动至顶,
+        timer: {} // 定时器实体
       }
     },
-//    mounted () {
-//      setInterval(() => {
-//        let _this = this
-//        _this.timerIndex ++
-//        if (_this.timerIndex % 45 === 0) {
-//          for (let i = 0; i < _this.listTemplate.content.length; i++) {
-//            this.purchaseManList.content.push(_this.listTemplate.content[i])
-//          }
-//        }
-//      }, 3000)
-//    },
+    mounted () {
+      this.$nextTick(() => {
+        this.changeInterval(true)
+      })
+    },
     filters: {
       date: function (date) {
         const now = formatDate('yyyy-MM-dd', Date.now())
@@ -188,18 +184,18 @@
         return false
       },
       purchaseManListData () {
-        let list = this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
-        if (this.isChange) {
-          this.purchaseManList.content = []
-          this.listTemplate = list
-          this.isChange = false
-        } else if (list.content) {
-          for (let i = 0; i < list.content.length; i++) {
-            this.purchaseManList.content.push(list.content[i])
-          }
-          this.listTemplate = list
-        }
-        return list
+//        let list = this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
+//        if (this.isChange) {
+//          this.purchaseManList.content = []
+//          this.listTemplate = list
+//          this.isChange = false
+//        } else if (list.content) {
+//          for (let i = 0; i < list.content.length; i++) {
+//            this.purchaseManList.content.push(list.content[i])
+//          }
+//          this.listTemplate = list
+//        }
+        return this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
       },
       user () {
         return this.$store.state.option.user
@@ -227,6 +223,7 @@
           if (this.user.data.enterprise.uu) {
             if (this.user.data.enterprise.isVendor && this.user.data.enterprise.isVendor !== '1690') {
 //              purchaseMan.active = true
+              this.changeInterval(false)
               this.currentSayPriceIndex = index
             } else {
               this.$message.error('抱歉，您需开通卖家功能才可报价')
@@ -247,6 +244,23 @@
       cancelSayPrice: function () {
 //        this.purchaseManList.content[this.currentSayPriceIndex].active = false
         this.currentSayPriceIndex = -1
+        this.changeInterval(true)
+      },
+      changeInterval: function (flag) {
+        if (flag) {
+          this.timer = setInterval(() => {
+            this.timerIndex ++
+            this.isTop = (this.timerIndex % 45 === 0)
+            if (this.isTop) {
+//          for (let i = 0; i < _this.listTemplate.content.length; i++) {
+//            this.purchaseManList.content.push(_this.listTemplate.content[i])
+//          }
+              this.timerIndex = 0
+            }
+          }, 3000)
+        } else {
+          clearInterval(this.timer)
+        }
       }
     }
   }
@@ -332,6 +346,12 @@
             -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 */
+            }
             > div {
               overflow: hidden;
               text-overflow: ellipsis;