hospital_health_check/src/views/myExam.vue

<template>
  <div class="my_exam" :style="{ backgroundColor: examArr.length > 0 ? '#f9f9f9' : '#fff' }">
    <div class="exam_noresult" v-if="examArr.length < 1">
      <img src="~@/assets/image/no_result.jpg" />
      <div class="no_title">查询无结果</div>
      <div class="no_txt">暂无您的预约项目，请选择医院后进行预约</div>
    </div>
    <div class="exam_box" v-for="item in examArr" :key="item.id">
      <div class="time_box">{{ item.createDeptName }}</div>
      <div class="pro_box" v-for="item1 in item.details" :key="item1.project">
        <div class="pro_top">
          <div class="img_box">
            <img v-if="item.apmStatus !== 1" src="~@/assets/image/time.png" alt="" />
            <img v-else src="~@/assets/image/time_gray.png" alt="" />
          </div>
          <div class="time_box">
            <div class="time_text">{{ doDateFormatter(item.apmDay) }}</div>
            <div class="date_txt">{{ item1.period + ' ' + item1.timeFrame }}</div>
          </div>
        </div>
        <div class="pro_bottom">
          <div class="pro_left">
            <div class="img_box">
              <img v-if="item.apmStatus !== 1" src="~@/assets/image/pro.png" alt="" />
              <img v-else src="~@/assets/image/pro_gray.png" alt="" />
            </div>
            <div class="pro_name">{{ item1.project }} </div>
            <div class="pro_pos" :class="[item1.apmStatus === 2 ? 'tips' : item1.apmStatus == 1 ? 'cancel_tip' : '',]">
              {{
                item1.apmStatus == 1 ? '您的体检项目已取消' : item1.apmStatus == 3 ? '体检项目已完成' : (item1.apmStatus == 2 &&
                  item1.lastExamTime == 0) ? '您的体检已过期' : item1.limitTime
              }}</div>
          </div>
          <div class="pro_right">
            <div class="cancel" @click="cancelRegisiter(item1)"
              :class="[item1.apmStatus == 3 ? 'finish' : item1.apmStatus == 1 || item1.limitCancelTime < 30 * 60 * 1000 ? 'cancel_item' : '',]">
              {{
  item1.apmStatus == 1 ? '已取消' : item1.apmStatus == 2 ? '取消预约' : item1.apmStatus == 3 ? '已完成' : '取消预约'
              }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
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,
      systemTime: dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss'),
      setInterval: 0,
      interVal: null,
      starTime: '',
      lastTime: '',
      timeArr: [],
      lastCanTime: '',
      limitTime: 1000 * 60 * 30
    }
  },
  mounted() {
    let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
    if (userInfo) {
      this.userInfo = userInfo;
      this.querySystemTime();
      this.queryMyRecord();
    }
  },
  computed: {
  },
  watch: {
  },
  beforeDestroy() {
    if (this.setInterval) {
      clearInterval(this.setInterval);
    }
  },
  methods: {
    //系统时间
    querySystemTime() {
      if (this.GlobalConfig.appMode) {
        vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczhqxtsj", JSON.stringify({}), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
          console.log(typeof (value), 'systemtime', value);
          let retData = typeof (value) == 'string' ? JSON.parse(value) : value;
          if (retData.code == 200) {
            this.systemTime = retData.data;
          }
        }, err => {
        })
      }
      else {
        getSystemTime().then(res => {
          this.systemTime = res.data;
        })
      }
    },
    //我的预约列表
    queryMyRecord() {
      this.$toast.loading({
        message: '加载中',
        duration: 0,
      })
      try {
        if (this.GlobalConfig.appMode) {
          vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczdckwdyy", JSON.stringify({ createDept: "", cupCardNo: this.userInfo.papersnumber, current: this.current, size: this.size }), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
            this.$toast.clear();
            let retData = JSON.parse(value);
            // console.log(retData,'record')
            if (retData.code == 200) {
              this.examArr = retData.data.records;
              console.log(this.examArr)
              this.examArr.map(item1 => {
                item1.details.map(item => {
                  console.log(item)
                  let systemTime = Date.parse(new Date(this.systemTime));
                  item.starTime = systemTime
                  let latime = item1.apmDay.substr(0, 10) + ' ' + item.timeFrame.split('-')[1] + ':00';
                  let lasCanTime = item1.apmDay.substr(0, 10) + ' ' + item.timeFrame.split('-')[0] + ':00';
                  // item.lastCanTime = Date.parse(new Date(lasCanTime.replaceAll('-', '/')))
                  // item.lastTime = Date.parse(new Date(latime.replaceAll('-', '/')))
                  item.lastCanTime = Date.parse(new Date(lasCanTime.replace(/\D/g, '/')))
                  item.lastTime = Date.parse(new Date(latime.replace(/\D/g, '/')))
                  item.limitTime = this.intervalTime(item.starTime, item.lastTime)
                  item.lastExamTime = systemTime < item.lastTime ? item.lastTime - systemTime : 0
                  item.limitCancelTime = systemTime < item.lastCanTime ? item.lastCanTime - systemTime : 0;//距离取消预约剩余毫秒数
                  // console.log(latime,item.lastTime,lasCanTime,item.lastCanTime,item.limitCancelTime) //670422000
                  // this.$set(
                  //   item,"limitTime",item.limitTime
                  // );
                })
              })
              this.timeList()
            }
          }, err => {
            this.$toast.clear();
          })
        }
        else {
          myRecord("", this.userInfo.papersnumber, this.current, this.size).then(res => {
            this.$toast.clear();
            this.examArr = res.data.records;
            console.log(this.examArr)
            this.examArr.map(item1 => {
              item1.details.map(item => {
                console.log(item)
                let systemTime = Date.parse(new Date(this.systemTime));
                item.starTime = systemTime
                let latime = item1.apmDay.substr(0, 10) + ' ' + item.timeFrame.split('-')[1] + ':00';
                let lasCanTime = item1.apmDay.substr(0, 10) + ' ' + item.timeFrame.split('-')[0] + ':00';
                // item.lastCanTime = Date.parse(new Date(lasCanTime.replaceAll('-', '/')))
                // item.lastTime = Date.parse(new Date(latime.replaceAll('-', '/')))
                item.lastCanTime = Date.parse(new Date(lasCanTime.replace(/-/g,'/')))
                item.lastTime = Date.parse(new Date(latime.replace(/-/g,'/')))
                console.log('las',item.lastTime)
                item.limitTime = this.intervalTime(item.starTime, item.lastTime)
                item.lastExamTime = systemTime < item.lastTime ? item.lastTime - systemTime : 0
                item.limitCancelTime = systemTime < item.lastCanTime ? item.lastCanTime - systemTime : 0;//距离取消预约剩余毫秒数
                console.log(item.limitCancelTime)
                // console.log(latime,item.lastTime,lasCanTime,item.lastCanTime,item.limitCancelTime) //670422000
                // this.$set(
                //   item,"limitTime",item.limitTime
                // );
              })
            })
            this.timeList()
            // 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';
            //   let lasCanTime =item.apmDay.substr(0,10) + ' ' + item.timeFrame.split('-')[0] + ':00';
            //   this.lastCanTime = Date.parse(new Date(lasCanTime))
            //   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.time = systemTime < endTime ? endTime - systemTime : 0;
            //   // item.limitTime = this.calcDateTimeStr(systemTime < endTime ? endTime - systemTime : 0);//距离体检时间剩余毫秒数
            //   item.limitTime = this.intervalTime(this.starTime,this.lastTime)
            //   // console.log('time ===>',item.limitTime)
            //   item.limitCancelTime = systemTime < this.lastCanTime ? this.lastCanTime - systemTime : 0;//距离取消预约剩余毫秒数
            //   console.log(item.limitCancelTime)
            // })
            // //开启倒计时
            // if (this.setInterval) {
            //   clearInterval(this.setInterval);
            // }
            // this.setInterval = setInterval(() => {
            //   // console.log(this.examArr)
            //   this.timeArr = this.examArr;
            //   this.timeArr.map(item => {
            //     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;
            //     // item.limitCancelTime = this.intervalTime(this.starTime,Date.parse(new Date(this.lastCanTime)))

            //   })
            //   // console.log(this.timeArr)

            // }, 1000);
            // this.examArr = arr
          }, err => {
            this.$toast.clear();
          })
        }
      } catch (error) {
        this.$toast.clear();
      }
    },

    timeList() {
      if (this.setInterval) {
        clearInterval(this.setInterval)
      }
      this.setInterval = setInterval(() => {
        let arr = []
        this.examArr.forEach(item => {
          item.details.map(item1 => {
            item1.starTime = item1.starTime > 1000 ? item1.starTime + 1000 : 0;
            item1.limitTime = this.intervalTime(item1.starTime, item1.lastTime);
            item1.lastExamTime = item1.lastExamTime > 1000 ? item1.lastExamTime - 1000 : 0;
            item1.limitCancelTime = item1.limitCancelTime > 1000 ? item1.limitCancelTime - 1000 : 0
            this.$set(item.details, item1.limitTime, item1.limitTime)
            // this.$set(item.details,item1.limitCancelTime,item1.limitCancelTime)
          })
          // console.log(this.examArr)
        })
      }, 1000)
    },

    // 计算时间差
    //计算两个时间之间的时间差 多少天时分秒
    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); //时间差的毫秒数
      date3 = date3 < 0 ? 0 : date3
      //计算出相差天数
      var days = Math.floor(date3 / (24 * 3600 * 1000));
      days = days < 0 ? '' : days + '天'
      //计算出小时数

      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));
      minutes = minutes < 10 ? '0' + minutes : minutes

      //计算相差秒数

      var leave3 = leave2 % (60 * 1000); //计算分钟数后剩余的毫秒数
      var seconds = Math.round(leave3 / 1000);
      seconds = seconds < 10 ? '0' + seconds : seconds;
      // console.log(days + "天 " + hours + "小时 ")
      return `距离体检还有${days}${hours}:${minutes}:${seconds}`
      // return {
      //   days,
      //   hours,
      //   minutes,
      //   seconds
      // } 
    },


    //日期格式化
    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) {
      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)}` : ''
    },
    //取消预约
    cancelRegisiter(row) {
      if (row.apmStatus !== 2 || row.limitCancelTime < 30 * 60 * 1000) {
        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: (data) => {
          console.log(data)
          if (JSON.parse(data).buttonIndex == 1) {
            // console.log('ces')
            if (this.GlobalConfig.appMode) {
              vaildInterfacefn("cgstjyyjzpzp", "qdsgajjtjczdqxtjyy", JSON.stringify({ id: row.id }), "2", "https://" + this.GlobalConfig.urlCreatesign, "https://" + this.GlobalConfig.urlGateway).then((value) => {
                let retData = JSON.parse(value);
                if (retData.code == 200) {
                  this.$toast('操作成功');
                  this.queryMyRecord();
                }
              }, err => {
              })
            }
            else {
              recordCancel(row.id).then(res => {
                console.log(res)
                if (res.code == 200) {
                  this.$toast('操作成功');
                  this.queryMyRecord();
                }
              })
            }
          }
        },
        fail: function (data) { //错误返回
        }
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.my_exam {
  width: 100%;
  height: 100%;
  background: #f9f9f9;
  position: absolute;
  overflow-y: auto;

  .exam_noresult {
    text-align: center;
    padding-top: 2rem;

    img {
      width: 2.56rem;
      height: 2.56rem;
    }

    .no_title {
      color: #666;
      font-size: 0.44rem;
      font-weight: bold;
      margin-bottom: 0.1rem;
    }

    .no_txt {
      color: #999;
      font-size: 0.24rem;
      width: 3rem;
      line-height: 0.33rem;
      margin: 0 auto;
    }
  }

  .exam_box {
    background: #fff;
    padding: 0.5rem 0.24rem 0 0.24rem;
    margin-bottom: 0.2rem;

    .time_box {
      font-size: 0.3rem;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: #333333;
      line-height: 0.46rem;
    }

    .pro_box {
      width: 98%;
      margin-top: 0.4rem;
      background: #fff;
      // margin: 0.4rem auto;
      // margin-bottom: 0.7rem;


      .pro_top {
        display: flex;
        padding-bottom: 0.26rem;
        border-bottom: 1px solid #EEEEEE;

        .img_box {
          display: flex;
          align-items: center;
          margin-right: 0.24rem;

          img {
            width: 0.5rem;
            height: 0.5rem;
          }
        }

        .time_box {
          .time_text {
            width: 1.46rem;
            height: 0.32rem;
            text-align: center;
            background: #F6F6F6;
            border-radius: 0.08rem;
            line-height: 0.32rem;
            font-size: 0.24rem;
            color: #999999;
          }

          .date_txt {
            font-size: 0.3rem;
            font-weight: bold;
            color: #333;
            line-height: 0.46rem;
          }
        }
      }

      .pro_bottom {
        display: flex;
        justify-content: space-between;
        height: 1.2rem;

        .pro_left {
          display: flex;


          .img_box {
            height: 100%;
            display: flex;
            align-items: center;

            img {
              width: 0.5rem;
              height: 0.5rem;

            }
          }

          .pro_name {
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 0.3rem;
            color: #333;
            font-weight: bold;
            margin-left: 0.24rem;
          }

          .pro_pos {
            height: 100%;
            display: flex;
            align-items: center;
            font-size: 0.24rem;
            color: #999;
            margin-left: 0.24rem;
          }

          .tips {
            color: #00B578;
          }

          .cancel_tip {
            color: #F93A4A;
          }
        }

        .pro_right {
          height: 100%;
          display: flex;
          align-items: center;

          .cancel {
            width: 1.5rem;
            height: 0.5rem;
            background: rgba(22, 119, 255, .1);
            border-radius: 0.26rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.24rem;
            color: #1677FF;
          }

          .finish {
            background: #E5E5E5;
            color: #999;
            pointer-events: none;
          }

          .limit {
            pointer-events: none;
            background: #E5E5E5;
            color: #999;
          }

          .cancel_item {
            background: rgba(125, 125, 125, .2);
            color: #999;
            pointer-events: none;
          }
        }
      }
    }
  }
}
</style>