修改倒计时

src/views/myExam.vue

@@ -26,7 +26,7 @@
             </div>
             <div class="pro_name">{{ item.project }}</div>
             <div class="pro_pos" :class="item.apmStatus === 2 ? 'tips' : item.apmStatus == 1 ? 'cancel_tip' : ''">
-              {{ item.apmStatus == 1 ? '您的体检项目已取消' : item.apmStatus == 3 ? '体检项目已完成' : item.limitTime }}</div>
+              {{ item.apmStatus == 1 ? '您的体检项目已取消' : item.apmStatus == 3 ? '体检项目已完成' : getTime(item.limitTime) }}</div>
           </div>
           <div class="pro_right">
             <div class="cancel" @click="cancelRegisiter(item)"
@@ -52,7 +52,10 @@ export default {
       examArr: [],
       userInfo: null,
       systemTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
-      setInterval: 0
+      setInterval: 0,
+      interVal:null,
+      starTime:'',
+      lastTime:''
     }
   },
   mounted() {
@@ -63,6 +66,24 @@ export default {
       this.queryMyRecord();
     }
   },
+  computed:{
+    getTime:() =>{
+      return time =>{
+        console.log(time)
+        let interVal = null
+        if(interVal){
+          clearInterval(this.interVal);
+        }else{
+          // this.intervalTime(this.starTime,this.lastTime)
+          interVal = setInterval(() => {
+            // time = this.intervalTime(time,this.lastTime)
+             time = time > 1000 ? time + 1000 : 0;
+             return time
+          }, 1000);
+        }
+      }
+    }
+  },
   beforeDestroy() {
     if (this.setInterval) {
       clearInterval(this.setInterval);
@@ -87,11 +108,17 @@ export default {
           this.examArr = res.data.records;
           this.examArr.map(item => {
             let systemTime = Date.parse(new Date(this.systemTime));
+            this.starTime = systemTime
+            let latime = item.apmDay.substr(0,10) + ' ' + item.timeFrame.split('-')[1] + ':00';
+            this.lastTime = Date.parse(new Date(latime))
             let time = item.timeFrame.split('-')[1].split(':');
             let endTime = Date.parse(new Date(this.doDateFormatter(item.apmDay) + ' ' + (time[0] < 10 ? '0' + time[0] : time[0]) + ':' + (time[1] < 10 ? '0' + time[1] : time[1]) + ':00'));
             let time2 = item.timeFrame.split('-')[0].split(':');
             let startTime = Date.parse(new Date(this.doDateFormatter(item.apmDay) + ' ' + (time2[0] < 10 ? '0' + time2[0] : time2[0]) + ':' + (time2[1] < 10 ? '0' + time2[1] : time2[1]) + ':00'));
-            item.limitTime = this.calcDateTimeStr(systemTime < endTime ? endTime - systemTime : 0);//距离体检时间剩余毫秒数
+            item.time = systemTime < endTime ? endTime - systemTime : 0;
+            // item.limitTime = this.calcDateTimeStr(systemTime < endTime ? endTime - systemTime : 0);//距离体检时间剩余毫秒数
+            item.limitTime = systemTime
+            // console.log('time ===>',item.limitTime)
             item.limitCancelTime = systemTime < startTime ? startTime - systemTime : 0;//距离取消预约剩余毫秒数
           })
           //开启倒计时
@@ -100,8 +127,11 @@ export default {
           }
           this.setInterval = setInterval(() => {
             this.examArr.map(item => {
-              item.limitTime = this.calcDateTimeStr(item.limitTime);
+              // item.limitTime = this.calcDateTimeStr(item.limitTime);
+              this.starTime = this.starTime > 1000 ? this.starTime + 1000 : 0;
+              item.limitTime = this.intervalTime(this.starTime,this.lastTime)
               item.limitCancelTime = item.limitCancelTime > 1000 ? item.limitCancelTime - 1000 : 0;
+
             })
           }, 1000);
         }, err => {
@@ -111,6 +141,41 @@ export default {
         this.$toast.clear();
       }
     },
+
+    // 计算时间差
+    //计算两个时间之间的时间差 多少天时分秒
+    intervalTime(startTime,endTime) {
+      // var timestamp=new Date().getTime(); //计算当前时间戳
+      var timestamp = (Date.parse(new Date()))/1000;//计算当前时间戳 (毫秒级)
+      var date1 = ""; //开始时间
+      if(timestamp<startTime){
+          date1=startTime;
+      }else{
+          date1 = timestamp; //开始时间
+      }
+      var date2 = endTime; //结束时间
+      // var date3 = date2.getTime() - date1.getTime(); //时间差的毫秒数
+      var date3 =  (date2- date1); //时间差的毫秒数
+      //计算出相差天数
+      var days = Math.floor(date3 / (24 * 3600 * 1000));
+      //计算出小时数
+
+      var leave1 = date3 % (24 * 3600 * 1000); //计算天数后剩余的毫秒数
+      var hours = Math.floor(leave1 / (3600 * 1000));
+      //计算相差分钟数
+      var leave2 = leave1 % (3600 * 1000); //计算小时数后剩余的毫秒数
+      var minutes = Math.floor(leave2 / (60 * 1000));
+
+      //计算相差秒数
+
+      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
+      var seconds = Math.round(leave3 / 1000);
+      // console.log(days + "天 " + hours + "小时 ")
+      // return   days + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒"
+      return   days + "天 " + hours + "小时 " + minutes + '分钟' + seconds + '秒'
+  },
+
+
     //日期格式化
     doDateFormatter(date) {
       return dateFormat(new Date(date), 'yyyy-MM-dd');
@@ -126,7 +191,9 @@ export default {
       }
     },
     calcDateTimeStr(time) {
+      console.log('剩余 ===>',time)
       let ret = calcTime(time);
+      console.log('ret ===>',ret)
       return time > 0 ? `距离体检还有${ret.days}天${ret.hours}:${ret.minutes}:${(ret.seconds + '').substr(0, 2)}` : ''
     },
     //取消预约