From 5a67ca775c35626f3d18e3f7e18e8c0223aef335 Mon Sep 17 00:00:00 2001
From: whychw <858544502@qq.com>
Date: 星期五, 17 七月 2020 10:56:37 +0800
Subject: [PATCH] U 轮播 加倒计时

---
 src/assets/js/Timeout.js |   17 +++++++++++++++++
 src/pages/index.vue      |   35 +++++++++++++++++++++++++++++------
 2 files changed, 46 insertions(+), 6 deletions(-)

diff --git a/src/assets/js/Timeout.js b/src/assets/js/Timeout.js
index 4b00b20..69944e8 100644
--- a/src/assets/js/Timeout.js
+++ b/src/assets/js/Timeout.js
@@ -20,6 +20,22 @@
         console.warn('鏈畬鏁撮厤缃弬鏁帮紒');
     }
 };
+
+// 寮�鍚鏃跺櫒涓嶇珛鍗虫墽琛�
+Timeout.prototype.startDelay = function(callback, time) {
+    // 鍏堝叧闂鏃跺櫒
+    this.stop();
+    // 閰嶇疆鎵ц鍑芥暟
+    if(typeof callback == 'function' && typeof time == 'number') {
+        this.callback = callback;
+        this.time = time;
+
+        this.timer = setTimeout(callback, time);
+    }else {
+        console.warn('鏈畬鏁撮厤缃弬鏁帮紒');
+    }
+};
+
 // 寮�鍚鏃跺櫒
 Timeout.prototype.open = function() {
     var callback = this.callback;
@@ -27,6 +43,7 @@
     this.start(callback, time, 'exe');
 };
 
+
 // 鍏抽棴璁℃椂鍣�
 Timeout.prototype.stop = function() {
     clearTimeout(this.timer);
diff --git a/src/pages/index.vue b/src/pages/index.vue
index 5a51317..cbb7d61 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -9,7 +9,7 @@
                 <input type="checkbox" v-model="switch_status" class="control" />
               </label>
             </div>
-            <div class="">杞挱闂撮殭:<el-input class="timeInput" placeholder="璇疯緭鍏ユ椂闂撮棿闅�" v-model.number="battList.delayTime" @input="timeChange"></el-input></div>
+            <div class="">杞挱闂撮殭(绉�):<el-input class="timeInput" placeholder="璇疯緭鍏ユ椂闂撮棿闅�" v-model.number="battList.delayTime" @input="timeChange"></el-input>{{countDown}}绉�</div>
             <div class="btn_3d" @click="prev">涓婁竴涓�</div>
             <div class="btn_3d" @click="next">涓嬩竴涓�</div>
         </div>
@@ -141,6 +141,9 @@
                 timer: new Timeout(),
                 delayTime: 4
             },
+            // 鍊掕鏃�
+            countDown: 0,
+            countDownTimer: new Timeout(),
             rtstate: {
                 timer: new Timeout(),
                 data: {
@@ -214,6 +217,9 @@
             this.startFindrtstate();
             // 寮�濮嬫煡璇㈢數姹犵粍瀹炴椂淇℃伅
             this.startFindrtdata();
+            if (this.switch_status) {
+                this.countDownStart();
+            }
         },
         startFindrtstate() {
             this.rtstate.timer.start(()=>{
@@ -221,15 +227,17 @@
             }, 4000);
         },
         startLB () {
-            if (!this.battList.delayTime || this.battList.delayTime < 0.6) {
-                this.battList.delayTime = 0.6;
+            if (!this.battList.delayTime || this.battList.delayTime < 1) {
+                this.battList.delayTime = 1;
             }
+
+            this.countDownStart();
             this.battList.timer.start(() => {
                 let data = this.$store.state.allBattList;
                 let len = data.length;
-                this.$store.dispatch('changeBattGroup', data[idx]);
                 idx++;
                 idx = idx % len;
+                this.$store.dispatch('changeBattGroup', data[idx]);
                 this.battList.timer.open();
             }, this.battList.delayTime * 1000);
         },
@@ -243,10 +251,12 @@
         },
         stopLB () {
             this.battList.timer.stop();
+            this.countDownStop();
         },
         //  涓婁竴涓珯
         prev () {
             this.switch_status = false;
+            this.countDownStop();
             let data = this.$store.state.allBattList;
             let len = data.length;
             idx--;
@@ -258,11 +268,23 @@
         //  涓嬩竴涓珯
         next () {
             this.switch_status = false;
+            this.countDownStop();
             let data = this.$store.state.allBattList;
             let len = data.length;
             idx++;
             idx = idx % len;
             this.$store.dispatch('changeBattGroup', data[idx]);
+        },
+        countDownStop () {
+            this.countDownTimer.stop();
+        },
+        countDownStart () {
+            this.countDownTimer.stop();
+            this.countDown = this.battList.delayTime;
+            this.countDownTimer.startDelay(() => {
+                this.countDown--;
+                this.countDownTimer.open();
+            }, 1000);
         },
         initRtState() {     // 鍒濆鍖杛tstate
             var data = {
@@ -474,6 +496,7 @@
         }
     },
     mounted() {
+        this.countDown = this.battList.delayTime;
         this.getAllBattGrp();
         // 璁剧疆瀵艰埅鏍�
         this.$store.dispatch('changeNavActive', 0);
@@ -590,9 +613,9 @@
 }
 .timeInput {
     background: transparent;
-    width: 10rem;
-
+    width: 6rem;
     margin-left: 1rem;
+    margin-right: 1rem;
 }
 .btn_3d {
     margin-left: 1rem;

--
Gitblit v1.9.1