完善页面逻辑

main
jinna 3 years ago
parent cc8a62cb0e
commit 5fcc0a2a8d
  1. 9
      src/api/examination.js
  2. 228
      src/views/examination.vue
  3. 166
      src/views/myExam.vue

@ -26,3 +26,12 @@ export const postExam = (data) => {
data,
});
};
//取消预约记录
export const cancelExam = (data) => {
return request({
url: "blade-business/apm-record/cancel",
method: "post",
data,
});
};

@ -66,14 +66,14 @@
<div class="name_txt">{{item.project}}</div>
<div class="posi_txt">
<img style="width:0.24rem;height:0.24rem" src="~@/assets/image/posi.png" alt="">
<div style="color: #999;font-size: 0.24rem;">{{item.cuAddr}}</div>
<div style="color: #999;font-size: 0.24rem;">{{item.cuAddr}} {{systemTime}}</div>
</div>
</div>
<div class="top_right"><div style="font-size:0.3rem;color:#333">{{item.totalApmNum}}</div><div style="font-size:0.22rem;color:rgba(51, 51, 51,0.5)">/{{item.totalNum}}</div>
</div>
</div>
<div class="exam_bottom">
<div class="exam_txt" v-for="item1 in item.detailList" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.residueNum == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : '')]">
<div class="exam_txt" v-for="item1 in item.detailList" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.residueNum == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : ''),Date.parse(new Date(item.apmDay.substring(0,10) + ' ' + item1.timeFrame.split('-')[1] + ':00')) < Date.parse(new Date(systemTime)) ? 'isAct' : '']">
<div class="txt" style="font-size:0.22rem;color:#666;"><span style="font-size:0.24rem;color:#666">{{item1.period}}</span> {{item1.timeFrame}}</div>
<div style="font-size:0.24rem;color:#333333;">剩余:{{item1.residueNum}}</div>
</div>
@ -81,14 +81,15 @@
</div>
</div>
<div class="btn_box">
<van-button v-show="selectArr.length == 0" type="info" block disabled >预约</van-button>
<van-button v-show="selectArr.length !== 0" type="info" block @click="handleExam">预约</van-button>
<van-button v-show="examData.length !== 0 && selectArr.length == 0" type="info" block disabled >预约</van-button>
<van-button v-show="examData.length !== 0 && selectArr.length !== 0" type="info" block @click="handleExam">预约</van-button>
</div>
</div>
</template>
<script>
import {queryDays,queryList} from "@/api/examination";
import { getSystemTime, } from "@/api/hospital";
export default {
data() {
return {
@ -158,10 +159,20 @@ export default {
this.startTime = year + '-' + month + '-' + this.today;
this.endTime = year + '-' + month1 + '-' + lastDay;
this.getDays()
let userInfo = sessionStorage.getItem('userInfo') ? JSON.parse(sessionStorage.getItem('userInfo')) : null;
if (userInfo) {
this.cupCardNo = JSON.parse(sessionStorage.getItem('userInfo')).papersnumber;
this.getList()
this.querySystemTime();
}
},
methods: {
querySystemTime() {
getSystemTime().then(res => {
this.systemTime = res.data;
})
},
getDays(){
queryDays(
{
@ -177,8 +188,6 @@ export default {
}else{
this.dayArr = res.data;
for(let key in this.dayArr){
console.log(key)
console.log(this.dayArr[key])
this.dayArr[key].map(item =>{
this.numData.push({
date:item,
@ -199,96 +208,96 @@ export default {
).then(res =>{
if(res.data.length == 0){
this.examData = [
{
project:'单眼视力',cuAddr:'三楼眼科',apmDay: "2023-03-12",
totalNum : 10, totalApmNum: 0,
detailList: [
{
period:"上午",
timeFrame: "9:00-9:30",
numberNum: 5,
apmNum: 0,
residueNum: 0,
enableApm: 0
},
{
period:"上午",
timeFrame: "9:30-10:00",
numberNum: 5,
apmNum: 0,
residueNum: 0, //
enableApm: 0 //
},
{
period:"上午",
timeFrame: "10:30-11:00",
numberNum: 5,
apmNum: 0,
residueNum: 0, //
enableApm: 0 //
}
]
},
{
project:'听力',cuAddr:'三楼眼科',apmDay: "2023-03-12",
totalNum : 10, totalApmNum: 0,
detailList: [
{
period:"上午",
timeFrame: "9:00-9:30",
numberNum: 5,
apmNum: 0,
residueNum: 0,
enableApm: 0
},
{
period:"上午",
timeFrame: "9:30-10:00",
numberNum: 5,
apmNum: 0,
residueNum: 0, //
enableApm: 0 //
},
{
period:"上午",
timeFrame: "10:30-11:00",
numberNum: 5,
apmNum: 0,
residueNum: 0, //
enableApm: 0 //
}
]
},
{
project:'四肢',cuAddr:'三楼眼科',apmDay: "2023-03-12",
totalNum : 10, totalApmNum: 0,
detailList: [
{
period:"上午",
timeFrame: "9:00-9:30",
numberNum: 5,
apmNum: 0,
residueNum: 0,
enableApm: 0
},
{
period:"上午",
timeFrame: "9:30-10:00",
numberNum: 5,
apmNum: 0,
residueNum: 0, //
enableApm: 0 //
},
{
period:"上午",
timeFrame: "10:30-11:00",
numberNum: 5,
apmNum: 0,
residueNum: 0, //
enableApm: 0 //
}
]
}
// {
// project:'',cuAddr:'',apmDay: "2023-03-12",
// totalNum : 10, totalApmNum: 0,
// detailList: [
// {
// period:"",
// timeFrame: "9:00-9:30",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0,
// enableApm: 0
// },
// {
// period:"",
// timeFrame: "9:30-10:00",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0, //
// enableApm: 0 //
// },
// {
// period:"",
// timeFrame: "10:30-11:00",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0, //
// enableApm: 0 //
// }
// ]
// },
// {
// project:'',cuAddr:'',apmDay: "2023-03-12",
// totalNum : 10, totalApmNum: 0,
// detailList: [
// {
// period:"",
// timeFrame: "9:00-9:30",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0,
// enableApm: 0
// },
// {
// period:"",
// timeFrame: "9:30-10:00",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0, //
// enableApm: 0 //
// },
// {
// period:"",
// timeFrame: "10:30-11:00",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0, //
// enableApm: 0 //
// }
// ]
// },
// {
// project:'',cuAddr:'',apmDay: "2023-03-12",
// totalNum : 10, totalApmNum: 0,
// detailList: [
// {
// period:"",
// timeFrame: "9:00-9:30",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0,
// enableApm: 0
// },
// {
// period:"",
// timeFrame: "9:30-10:00",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0, //
// enableApm: 0 //
// },
// {
// period:"",
// timeFrame: "10:30-11:00",
// numberNum: 5,
// apmNum: 0,
// residueNum: 0, //
// enableApm: 0 //
// }
// ]
// }
];
}else{
this.examData = res.data;
@ -357,15 +366,11 @@ export default {
},
isShow(){
this.isCal = !this.isCal
console.log(this.selectDate)
},
clickExam(val,val1){
console.log(val,val1)
this.selectArr = []
let arr = JSON.parse(JSON.stringify(this.examData))
console.log(arr)
arr.find(item =>{
console.log('item ===>',item)
if(item.project == val.project){
item.detailList.find(item1 =>{
if(item1.timeFrame == val1.timeFrame){
@ -394,7 +399,6 @@ export default {
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
let text = year + '-' + month + '-' + day
console.log(text)
this.selectDate = text;
this.getList()
},
@ -403,13 +407,11 @@ export default {
let month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
let day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
let text = year + '-' + month + '-' + day
console.log(text)
this.selectDate = text;
this.getList()
},
handleExam(){
console.log(this.selectArr,this.selectDate)
this.$router.push({
name:'ExamProject',
params:{
@ -498,7 +500,7 @@ export default {
color:#fff;
}
.today_week{
background: #1677FF;
background: rgba(51, 51, 51, .3);
border-radius: 50%;
color:#fff;
@ -652,11 +654,24 @@ export default {
background: rgb(22, 119, 255);
border-radius: 50%;
color: #fff;
.van-calendar__selected-day{
width: 100%;
height: 100%;
background: rgb(22, 119, 255) !important;
border-radius: 50%;
}
}
.num2{
background: rgba(22, 119, 255,0.5);
border-radius: 50%;
color: #fff;
.van-calendar__selected-day{
width: 100%;
height: 100%;
background: rgba(51, 51, 51, .3) !important;
border-radius: 50%;
}
}
.van-calendar__weekdays{
margin-bottom: 0.24rem;
@ -679,9 +694,6 @@ export default {
height: 6.4rem;
.van-calendar__day{
// height: 17%;
// width: 13.5%;
// margin: 0 0.35%;
width: 1rem;
height: 1rem;
margin: 0 0.03rem;
@ -689,7 +701,7 @@ export default {
.van-calendar__selected-day{
width: 100%;
height: 100%;
background: #1677FF;
background: rgba(51, 51, 51, .3);
border-radius: 50%;
}
}

@ -5,9 +5,9 @@
<div class="no_title">查询无结果</div>
<div class="no_txt">暂无您的预约项目请选择医院后进行预约</div>
</div>
<div class="exam_box" v-for="item in examArr" :key="item.time">
<div class="time_box">{{ doDateFormatter(item.apmTime) }}</div>
<div class="pro_box">
<div class="exam_box" v-for="item in examArr" :key="item.id">
<div class="time_box">{{ doDateFormatter(item.apmDay) }}</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="" />
@ -15,7 +15,7 @@
</div>
<div class="time_box">
<div class="time_text">{{ doDateFormatter(item.apmDay) }}</div>
<div class="date_txt">{{ item.period + ' ' + item.timeFrame }}</div>
<div class="date_txt">{{ item1.period + ' ' + item1.timeFrame }}</div>
</div>
</div>
<div class="pro_bottom">
@ -24,15 +24,14 @@
<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">{{ item.project }}</div>
<div class="pro_pos" :class="item.apmStatus === 2 ? 'tips' : item.apmStatus == 1 ? 'cancel_tip' : ''">
{{ item.apmStatus == 1 ? '您的体检项目已取消' : item.apmStatus == 3 ? '体检项目已完成' : getTime(item.limitTime) }}</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(item)"
:class="item.apmStatus == 3 ? 'finish' : item.apmStatus == 1 ? 'cancel_item' : ''">{{
item.apmStatus == 1 ?
'已取消' : item.apmStatus == 2 ? '取消预约' : item.apmStatus == 3 ? '已完成' : '取消预约'
<div class="cancel" @click="cancelRegisiter(item1)"
:class="[item1.apmStatus == 3 ? 'finish' : item1.apmStatus == 1 ? 'cancel_item' : '',]">{{
item1.apmStatus == 1 ? '已取消' : item1.apmStatus == 2 ? '取消预约' : item1.apmStatus == 3 ? '已完成' : '取消预约'
}}</div>
</div>
</div>
@ -42,7 +41,7 @@
</template>
<script>
import { myRecord, recordCancel, getSystemTime } from "@/api/hospital";
import { myRecord, recordCancel, getSystemTime, } from "@/api/hospital";
import { dateFormat, calcDate, calcTime } from "@/utils/date";
export default {
data() {
@ -55,7 +54,10 @@ export default {
setInterval: 0,
interVal:null,
starTime:'',
lastTime:''
lastTime:'',
timeArr:[],
lastCanTime:'',
limitTime:1000 * 60 *30
}
},
mounted() {
@ -67,22 +69,8 @@ export default {
}
},
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);
}
}
}
},
watch:{
},
beforeDestroy() {
if (this.setInterval) {
@ -106,34 +94,62 @@ export default {
myRecord("", this.userInfo.papersnumber, this.current, this.size).then(res => {
this.$toast.clear();
this.examArr = res.data.records;
this.examArr.map(item => {
console.log(this.examArr)
this.examArr.map(item1 =>{
item1.details.map(item =>{
console.log(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.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;//
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))
item.lastTime = Date.parse(new Date(latime))
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) //670422000
// this.$set(
// item,"limitTime",item.limitTime
// );
})
//
if (this.setInterval) {
clearInterval(this.setInterval);
}
this.setInterval = setInterval(() => {
this.examArr.map(item => {
// 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);
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();
})
@ -142,6 +158,26 @@ export default {
}
},
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) {
@ -156,8 +192,10 @@ export default {
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); //
@ -171,8 +209,13 @@ export default {
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 + '秒'
return `距离体检还有${days}${hours}:${minutes}:${seconds}`
// return {
// days,
// hours,
// minutes,
// seconds
// }
},
@ -218,8 +261,11 @@ export default {
title: "提示",//
buttonLabels: ['确定', '取消'],
success: (data) => {
if (data.buttonIndex == 1) {
console.log(data)
if (JSON.parse(data).buttonIndex == 1) {
console.log('ces')
recordCancel(row.id).then(res => {
console.log(res)
if (res.code == 200) {
this.$toast('操作成功');
this.queryMyRecord();
@ -398,6 +444,12 @@ export default {
pointer-events: none;
}
.limit{
pointer-events: none;
background: #E5E5E5;
color: #999;
}
.cancel_item {
background: rgba(125, 125, 125, .2);
color: #999;

Loading…
Cancel
Save