预约倒计时逻辑开发

src/api/hospital.js

@@ -49,4 +49,11 @@ export const recordCancel = (id) => {
             id,
         }
     })
+};
+//系统时间
+export const getSystemTime = () => {
+    return request({
+        url: '/api//blade-business/common-api/get-system-datetime',
+        method: 'get'
+    })
 };

src/utils/date.js

@@ -22,6 +22,28 @@ export const calcDate = (date1, date2) => {
   }
 }
 
+export const calcTime = (date3) => {
+  let days = Math.floor(date3 / (24 * 3600 * 1000))
+
+  let leave1 = date3 % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
+  let hours = Math.floor(leave1 / (3600 * 1000))
+
+  let leave2 = leave1 % (3600 * 1000) //计算小时数后剩余的毫秒数
+  let minutes = Math.floor(leave2 / (60 * 1000))
+
+  let leave3 = leave2 % (60 * 1000) //计算分钟数后剩余的毫秒数
+  let seconds = Math.round(date3 / 1000)
+  return {
+    leave1,
+    leave2,
+    leave3,
+    days: days,
+    hours: hours,
+    minutes: minutes,
+    seconds: seconds,
+  }
+}
+
 /**
  * 日期格式化
  */

src/views/myExam.vue

@@ -14,7 +14,7 @@
             <img v-else src="~@/assets/image/time_gray.png" alt="" />
           </div>
           <div class="time_box">
-            <div class="time_text">{{ doDateFormatter(item.apmTime) }}</div>
+            <div class="time_text">{{ doDateFormatter(item.apmDay) }}</div>
             <div class="date_txt">{{ item.period + ' ' + item.timeFrame }}</div>
           </div>
         </div>
@@ -25,14 +25,14 @@
               <img v-else src="~@/assets/image/pro_gray.png" alt="" />
             </div>
             <div class="pro_name">{{ item.project }}</div>
-            <div class="pro_pos" :class="item.apmStatus === 0 ? 'tips' : item.apmStatus == 1 ? 'cancel_tip' : ''">
-              {{ item.cuAddr }}</div>
+            <div class="pro_pos" :class="item.apmStatus === 2 ? 'tips' : item.apmStatus == 1 ? 'cancel_tip' : ''">
+              {{ item.apmStatus == 1 ? '您的体检项目已取消' : item.apmStatus == 3 ? '体检项目已完成' : item.limitTime }}</div>
           </div>
           <div class="pro_right">
             <div class="cancel" @click="cancelRegisiter(item)"
               :class="item.apmStatus == 3 ? 'finish' : item.apmStatus == 1 ? 'cancel_item' : ''">{{
   item.apmStatus == 1 ?
-    '已取消' : item.apmStatus == 2 ? '未报到' : item.apmStatus == 3 ? '已报到' : '取消预约'
+    '已取消' : item.apmStatus == 2 ? '取消预约' : item.apmStatus == 3 ? '已完成' : '取消预约'
               }}</div>
           </div>
         </div>
@@ -42,25 +42,39 @@
 </template>
 
 <script>
-import { myRecord, recordCancel } from "@/api/hospital";
-import { dateFormat } from "@/utils/date";
+import { myRecord, recordCancel, getSystemTime } from "@/api/hospital";
+import { dateFormat, calcDate, calcTime } from "@/utils/date";
 export default {
   data() {
     return {
       current: 1,
       size: 10,
       examArr: [],
-      userInfo: null
+      userInfo: null,
+      systemTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
+      setInterval: 0
     }
   },
   mounted() {
     let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
     if (userInfo) {
       this.userInfo = userInfo;
+      this.querySystemTime();
       this.queryMyRecord();
     }
   },
+  beforeDestroy() {
+    if (this.setInterval) {
+      clearInterval(this.setInterval);
+    }
+  },
   methods: {
+    //系统时间
+    querySystemTime() {
+      getSystemTime().then(res => {
+        this.systemTime = res.data;
+      })
+    },
     //我的预约列表
     queryMyRecord() {
       this.$toast.loading({
@@ -71,6 +85,25 @@ export default {
         myRecord("", this.userInfo.papersnumber, this.current, this.size).then(res => {
           this.$toast.clear();
           this.examArr = res.data.records;
+          this.examArr.map(item => {
+            let systemTime = Date.parse(new Date(this.systemTime));
+            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.limitCancelTime = systemTime < startTime ? startTime - systemTime : 0;//距离取消预约剩余毫秒数
+          })
+          //开启倒计时
+          if (this.setInterval) {
+            clearInterval(this.setInterval);
+          }
+          this.setInterval = setInterval(() => {
+            this.examArr.map(item => {
+              item.limitTime = this.calcDateTimeStr(item.limitTime);
+              item.limitCancelTime = item.limitCancelTime > 1000 ? item.limitCancelTime - 1000 : 0;
+            })
+          }, 1000);
         }, err => {
           this.$toast.clear();
         })
@@ -82,26 +115,50 @@ export default {
     doDateFormatter(date) {
       return dateFormat(new Date(date), 'yyyy-MM-dd');
     },
+    //计算距离体检还剩多长时间
+    calcDateTime(item) {
+      let systemTime = Date.parse(new Date(this.systemTime));
+      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'));
+      if (systemTime < endTime) {
+        let ret = calcDate(systemTime, endTime);
+        return `距离体检还有${ret.days}天${ret.hours}:${ret.minutes}:${(ret.seconds + '').substr(0, 2)}`
+      }
+    },
+    calcDateTimeStr(time) {
+      let ret = calcTime(time);
+      return time > 0 ? `距离体检还有${ret.days}天${ret.hours}:${ret.minutes}:${(ret.seconds + '').substr(0, 2)}` : ''
+    },
     //取消预约
     cancelRegisiter(row) {
-      if (row.apmStatus !== 0) {
+      if (row.apmStatus !== 2) {
+        return;
+      }
+      if (row.limitCancelTime < 30 * 60 * 1000) {
+        lightAppJssdk.notification.alert({
+          message: "预约的时段前30分钟可取消",
+          title: "提示",//可传空
+          buttonName: "收到",
+          success: function (data) {
+          },
+          fail: function (data) { //错误返回
+          }
+        });
         return;
       }
       lightAppJssdk.notification.confirm({
         message: "是否取消该体检项目",
         title: "提示",//可传空
         buttonLabels: ['确定', '取消'],
-        success: function (data) {
-          //onSuccess将在点击button之后回调
-          /*回调*/
-          console.log('取消===>', data)
-          recordCancel(row.id).then(res => {
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.queryMyRecord();
-          })
+        success: (data) => {
+          if (data.buttonIndex == 1) {
+            recordCancel(row.id).then(res => {
+              if (res.code == 200) {
+                this.$toast('操作成功');
+                this.queryMyRecord();
+              }
+            })
+          }
         },
         fail: function (data) { //错误返回
         }
@@ -117,6 +174,7 @@ export default {
   height: 100%;
   background: #f9f9f9;
   position: absolute;
+  overflow-y: auto;
 
   .exam_noresult {
     text-align: center;