add countdown test

src/packages/countdown/__test__/countdown.spec.js

@@ -0,0 +1,27 @@
+import {shallowMount} from '@vue/test-utils';
+import CountDown, {restTime} from '../countdown.vue';
+
+describe('CountDown.vue', () => {
+    const end = 1559334689373;
+    const wrapper = shallowMount(CountDown, {
+        propsData: {
+            endTime: end 
+        }
+    });
+    it('默认显示时分秒', () => {
+        const rest = restTime(end - Date.now());
+        const h = Number(rest.d) * 24 + Number(rest.h);
+        const text_h = wrapper.findAll('.nut-cd-block').at(0).text();
+        expect(h).toBe(Number(text_h));
+        expect(h).toBe(wrapper.vm.resttime.h);
+    });
+
+    it('显示天', () => {
+        wrapper.setProps({
+            showDays: true
+        });
+        const rest = restTime(end - Date.now());
+        expect(rest.d).toBe(wrapper.find('.nut-cd-block').text());
+    });
+
+});

src/packages/countdown/countdown.vue

@@ -76,10 +76,6 @@ const countdownTimer = {
       default: false,
       type: Boolean
     },
-    rest: {
-      default: 0,
-      type: Number
-    },
     interval: {
       default: 1000,
       type: Number
@@ -99,7 +95,7 @@ const countdownTimer = {
       const rest = restTime(this.restTime);
       const {d, h, m, s} = rest;
       if(!this.showDays && d > 0) {
-        rest.h += d * 24;
+        rest.h = Number(rest.h) + d * 24;
         rest.d = 0;
       }
       return rest;
@@ -107,7 +103,7 @@ const countdownTimer = {
     plainText() {
       const {d, h, m, s} = this.resttime;
 
-      return `${d > 0 && this.showDays? d + '天': h}小时${m}分${s}秒`;
+      return `${d > 0 && this.showDays? d + '天' + h: h}小时${m}分${s}秒`;
     }
   },
   created() {
@@ -120,14 +116,16 @@ const countdownTimer = {
       
       this.restTime = end - (start + diffTime);
       this.timer = setInterval(() => {
-        let restTime = end - (new Date().getTime() + diffTime);
-        restTime -= 1000;
-        this.restTime = restTime;
-        if(restTime < 0) {
-          this.restTime = 0;
-          clearInterval(this.timer);
+        if(!this.paused) {
+          let restTime = end - (new Date().getTime() + diffTime);
+          restTime -= 1000;
+          this.restTime = restTime;
+          if(restTime < 0) {
+            this.restTime = 0;
+            clearInterval(this.timer);
+          }
         }
-      }, 1000);
+      }, this.interval);
       
     }
   }

src/packages/countdown/demo.vue

@@ -3,25 +3,31 @@
       <h4>基本用法</h4>
       <div>
         <nut-cell>
-          <count-down slot="title" :rest="rest" />
+          <count-down slot="title" :endTime="end" />
+        </nut-cell>
+      </div>
+      <h4>显示天</h4>
+      <div>
+        <nut-cell>
+          <count-down slot="title" :endTime="end" showDays/>
         </nut-cell>
       </div>
       <h4>以服务端的时间为准</h4>
       <div>
         <nut-cell>
-          <count-down slot="title" :rest="rest" :remoteCurrTime="1550134689373" />
+          <count-down slot="title" :startTime="serverTime" :endTime="end" />
         </nut-cell>
       </div>
       <h4>显示为 天时分秒</h4>
       <div>
         <nut-cell>
-          <count-down slot="title" :rest="rest" :showPlainText="true" />
+          <count-down slot="title" showDays showPlainText :endTime="end" />
         </nut-cell>
       </div>
       <h4>控制开始和暂停的倒计时</h4>
       <div>
         <nut-cell>
-          <count-down slot="title" :rest="rest" :paused="paused" />
+          <count-down slot="title" :endTime="end" :paused="paused" />
           <div slot="desc">
             <nut-button type="default" small shape="circle" @click="toggle">
               <b style="font-size: 14px;">{{paused ? 'start': 'stop'}}</b>
@@ -42,7 +48,8 @@
 export default {
   data() {
     return {
-      rest: 12345678,
+      serverTime: 1551943874069,
+      end: 1559334689373,
       paused: false
     };
   },