You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
524 lines
18 KiB
524 lines
18 KiB
<template> |
|
<div class="exam_contaniner"> |
|
<div class="top_box"> |
|
<div class="week-box" v-if="!isCal"> |
|
<div class="week_box" style="display:flex"> |
|
<div class="week_num" v-for="item in weekData" :key="item">{{item}}</div> |
|
</div> |
|
<div class="week_text"> |
|
<div class="week_txt" v-for="item in weekArr" :key="item" @click="changeDate(item)" :class="[(item < today ? 'week_none' : ''),item == isToday ? 'today_week' : '',numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? 'isnum' : 'none' : '']"> |
|
<div class="top_info"></div> |
|
{{item}} |
|
<div class="bottom_info" v-text="numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)) ? numData.find(item1 => item1.date.slice(-2) == (item < 0 ? '0' + item : item)).isNum == 0 ? '有号' :'无号' : ''"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div v-if="isCal"> |
|
<van-swipe class="my-swipe" :stop-propagation="false" :show-indicators="false"> |
|
<van-swipe-item> |
|
<van-calendar |
|
class="can_box" |
|
ref="calendar" |
|
first-day-of-week="1" |
|
v-model="show" |
|
@confirm="onConfirm" |
|
:poppable="false" |
|
:show-mark="false" |
|
:show-title="false" |
|
:show-subtitle="false" |
|
:show-confirm="false" |
|
:min-date="minDate" |
|
:max-date="maxDate" |
|
:formatter="formatter" |
|
/> |
|
</van-swipe-item> |
|
<van-swipe-item> |
|
<van-calendar |
|
class="can_box" |
|
ref="calendar1" |
|
first-day-of-week="1" |
|
v-model="show" |
|
@confirm="onConfirm1" |
|
:poppable="false" |
|
:show-mark="false" |
|
:show-title="false" |
|
:show-subtitle="false" |
|
:show-confirm="false" |
|
:min-date="minDate1" |
|
:max-date="maxDate1" |
|
/> |
|
</van-swipe-item> |
|
</van-swipe> |
|
</div> |
|
<div class="pull_box" @click="isShow"> |
|
<img v-show="!isCal" src="~@/assets/image/pull.png" alt=""> |
|
<img v-show="isCal" src="~@/assets/image/up.png" alt=""> |
|
</div> |
|
</div> |
|
<div class="center_box"> |
|
<div class="exam_box" v-for="item in examData" :key="item.name"> |
|
<div class="exam_top"> |
|
<div class="top_left"> |
|
<div class="name_txt">{{item.name}}</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.position}}</div> |
|
</div> |
|
</div> |
|
<div class="top_right"><div style="font-size:0.3rem;color:#333">{{item.residue}}</div><div style="font-size:0.22rem;color:rgba(51, 51, 51,0.5)">/{{item.total}}</div> |
|
</div> |
|
</div> |
|
<div class="exam_bottom"> |
|
<div class="exam_txt" v-for="item1 in item.examArr" :key="item1.time" @click="clickExam(item,item1)" :class="[(item1.num == 0 ? 'isAct' : ''),(item1.isSelect ? 'active' : '')]"> |
|
<div class="txt" style="font-size:0.22rem;color:#666;"><span style="font-size:0.24rem;color:#666">{{item1.moment}}</span> {{item1.time}}</div> |
|
<div style="font-size:0.24rem;color:#333333;">剩余:{{item1.num}}</div> |
|
</div> |
|
</div> |
|
</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> |
|
</div> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
export default { |
|
data() { |
|
return { |
|
show:true, |
|
text:"下拉", |
|
isCal:false, |
|
radio:1, |
|
weekArr:[], |
|
weekData:['一','二','三','四','五','六','日'], |
|
minDate: new Date(new Date().getFullYear(), new Date().getMonth(), 1), |
|
maxDate: new Date(new Date().getFullYear(), new Date().getMonth(), new Date(new Date().getFullYear(),new Date().getMonth() + 1,0).getDate()), |
|
minDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, 1), |
|
maxDate1: new Date(new Date().getFullYear(), new Date().getMonth() + 1, new Date(new Date().getFullYear(),new Date().getMonth() + 2,0).getDate()), |
|
numData:[{date:'2023-02-09',isNum:1},{date:'2023-02-11',isNum:0}, |
|
{date:'2023-02-15',isNum:1},{date:'2023-02-17',isNum:1},{date:'2023-02-20',isNum:0}], |
|
examData:[ |
|
{name:'单眼视力',position:'门诊楼3楼眼科门诊',total:20,residue:15,examArr:[ |
|
{moment:'上午',time:'8:00-8:30',num:2}, |
|
{moment:'上午',time:'8:30-9:00',num:0}, |
|
{moment:'上午',time:'9:00-9:30',num:1}, |
|
{moment:'上午',time:'9:30-10:00',num:1}, |
|
]}, |
|
{name:'肢体',position:'门诊楼3楼',total:20,residue:15,examArr:[ |
|
{moment:'上午',time:'8:00-8:30',num:2}, |
|
{moment:'上午',time:'8:30-9:00',num:0}, |
|
{moment:'上午',time:'9:00-9:30',num:1}, |
|
{moment:'上午',time:'9:30-10:00',num:1}, |
|
]}, |
|
{name:'听力',position:'门诊楼3楼听力门诊',total:20,residue:15,examArr:[ |
|
{moment:'上午',time:'8:00-8:30',num:2}, |
|
{moment:'上午',time:'8:30-9:00',num:0}, |
|
{moment:'上午',time:'9:00-9:30',num:1}, |
|
{moment:'上午',time:'9:30-10:00',num:1}, |
|
]} |
|
], |
|
selectArr:[], |
|
selectDate:'', |
|
today:'', |
|
isToday:'' |
|
} |
|
}, |
|
created() { |
|
this.getList() |
|
}, |
|
mounted() { |
|
var WeekFirstDay=new Date(new Date()-(new Date().getDay()-1)*86400000); |
|
this.today = new Date().getDate(); |
|
this.isToday = this.today; |
|
let year = new Date().getFullYear(); |
|
let month = new Date().getMonth() + 1 < 10 ? '0' + (new Date().getMonth() + 1) : new Date().getMonth() + 1 |
|
this.selectDate = year + '-' + month + '-' + (this.today < 10 ? '0' + this.today : this.today); |
|
for(var i = WeekFirstDay.getDate();i<= parseInt(WeekFirstDay.getDate()) + 6;i++){ |
|
this.weekArr.push(i) |
|
} |
|
var todayWeek = new Date().getDay(); |
|
this.weekData.map((item,index) =>{ |
|
if(index + 1 == todayWeek){ |
|
// item = '今日' |
|
this.weekData[index] = '今日' |
|
} |
|
}) |
|
}, |
|
methods: { |
|
getList(){ |
|
this.examData.map(item =>{ |
|
item.examArr.map(item1 =>{ |
|
item1.isSelect = false |
|
}) |
|
}) |
|
console.log(this.examData) |
|
}, |
|
formatter(day){ |
|
/* |
|
这里的参数包含以下属性 |
|
bottomInfo: undefined |
|
date: Sat May 22 2021 00:00:00 GMT+0800 (中国标准时间) {} |
|
text: 22 |
|
type: " |
|
|
|
我们只需要修改type值为 disabled 即可 |
|
*/ |
|
if(day.date.getDate() < new Date().getDate()){ |
|
day.type = 'disabled' |
|
}else{ |
|
this.numData.forEach(item =>{ |
|
if(day.date.getDate() == item.date.slice(-2)){ |
|
item.isNum == 0 ? day.bottomInfo = '有号' : day.bottomInfo = '无号' |
|
item.isNum == 0 ? day.className = 'num1' : day.className = 'num2' |
|
|
|
} |
|
}) |
|
} |
|
// if(day.date.getDate() == new Date().getDate()){ |
|
day.topInfo = ` ` |
|
// day.className = 'today' |
|
|
|
// } |
|
return day |
|
}, |
|
changeDate(item){ |
|
console.log(item) |
|
this.isToday = item |
|
}, |
|
isShow(){ |
|
console.log(111) |
|
this.isCal = !this.isCal |
|
}, |
|
clickExam(val,val1){ |
|
this.selectArr = [] |
|
let arr = JSON.parse(JSON.stringify(this.examData)) |
|
arr.find(item =>{ |
|
if(item.name == val.name){ |
|
console.log(item) |
|
item.examArr.find(item1 =>{ |
|
if(item1.time == val1.time){ |
|
item1.isSelect = true |
|
}else{ |
|
item1.isSelect = false |
|
} |
|
}) |
|
} |
|
}) |
|
this.examData = arr |
|
this.examData.map(item =>{ |
|
item.examArr.map(item1 =>{ |
|
if(item1.isSelect){ |
|
this.selectArr.push({ |
|
name:item.name, |
|
posi:item.position, |
|
time:item1.moment + ' ' + item1.time, |
|
}) |
|
} |
|
}) |
|
}) |
|
}, |
|
onConfirm(date){ |
|
let year = date.getFullYear(); |
|
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 |
|
let val = this.numData.find(item => item.date == text) |
|
console.log(val) |
|
if(val){ |
|
this.selectDate = val.date |
|
}else{ |
|
// this.$toast('异常') |
|
} |
|
}, |
|
onConfirm1(){}, |
|
handleExam(){ |
|
console.log(this.selectArr,this.selectDate) |
|
this.$router.push({ |
|
name:'ExamProject', |
|
params:{ |
|
time:this.selectDate, |
|
selectArr:this.selectArr |
|
} |
|
}) |
|
}, |
|
}, |
|
} |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.exam_contaniner{ |
|
width: 100%; |
|
overflow-y: scroll; |
|
height: 100%; |
|
overflow-x: hidden; |
|
background: #F9F9F9; |
|
position: absolute; |
|
|
|
.top_box{ |
|
background: #fff; |
|
.week-box{ |
|
.week_box{ |
|
width: 100%; |
|
height: 0.6rem; |
|
padding-top: 0.7rem; |
|
|
|
.week_num{ |
|
flex: 1; |
|
font-size: 0.32rem; |
|
line-height: 0.6rem; |
|
text-align: center; |
|
} |
|
} |
|
.week_text{ |
|
display: flex; |
|
width: 100%; |
|
height: 1.28rem; |
|
.week_txt{ |
|
position: relative; |
|
width: 1rem; |
|
height: 1rem; |
|
font-size: 0.32rem; |
|
cursor: pointer; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
text-align: center; |
|
margin: 0.24rem 0.035rem 0 0.035rem; |
|
// margin-top: 0.12rem; |
|
|
|
.bottom_info{ |
|
position: absolute; |
|
right: 0; |
|
left: 0; |
|
font-size: 10px; |
|
line-height: 14px; |
|
bottom: 0.06rem; |
|
} |
|
|
|
.top_info{ |
|
position: absolute; |
|
right: 0; |
|
left: 0; |
|
top: 0.06rem; |
|
font-size: 10px; |
|
line-height: 14px; |
|
} |
|
} |
|
.week_none{ |
|
color:#ccc; |
|
pointer-events:none; |
|
} |
|
|
|
.none{ |
|
background: rgba(22, 119, 255,0.5); |
|
border-radius: 50%; |
|
color:#fff; |
|
} |
|
.isnum{ |
|
background: rgb(22, 119, 255,); |
|
border-radius: 50%; |
|
color:#fff; |
|
} |
|
.today_week{ |
|
background: #1677FF; |
|
border-radius: 50%; |
|
color:#fff; |
|
|
|
.top_info{ |
|
width: 0.1rem; |
|
height: 0.1rem; |
|
background: #fff; |
|
border-radius: 50%; |
|
margin: 0 auto; |
|
margin-top: 0.1rem; |
|
} |
|
} |
|
} |
|
} |
|
|
|
.pull_box{ |
|
display: flex; |
|
justify-content: center; |
|
margin-top: 0.24rem; |
|
|
|
img{ |
|
width: 0.4rem; |
|
height: 0.4rem; |
|
} |
|
} |
|
.my-swipe .van-swipe-item { |
|
width: 100%; |
|
font-size: 0.4rem; |
|
text-align: center; |
|
} |
|
|
|
.can_box{ |
|
padding-top:0.7rem |
|
} |
|
} |
|
.center_box{ |
|
width: 100%; |
|
margin-top: 0.2rem; |
|
.exam_box{ |
|
width: 100%; |
|
background: #fff; |
|
padding-bottom: 0.4rem; |
|
margin-bottom: 0.2rem; |
|
|
|
.exam_top{ |
|
width: 100%; |
|
height: 1.6rem; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.top_left{ |
|
width: 80%; |
|
height: 80%; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
margin-left: 5%; |
|
|
|
.name_txt{ |
|
font-size: 0.3rem; |
|
color: #333; |
|
font-weight: bold; |
|
} |
|
.posi_txt{ |
|
display: flex; |
|
align-items: center; |
|
} |
|
} |
|
.top_right{ |
|
width: 1.48rem; |
|
height: 0.6rem; |
|
border-top-left-radius: 0.4rem; |
|
border-bottom-left-radius: 0.4rem; |
|
border-right: none; |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
background: rgba(72, 118, 255,0.2); |
|
} |
|
} |
|
.exam_bottom{ |
|
width: 93%; |
|
display: flex; |
|
justify-content: space-between; |
|
margin: 0 auto; |
|
flex-wrap: wrap; |
|
|
|
.exam_txt{ |
|
width: 2.2rem; |
|
height: 1rem; |
|
background: #F6F6F6; |
|
border: 1px solid #1677FF; |
|
border-radius: 0.08rem; |
|
display: flex; |
|
flex-direction: column; |
|
justify-content: space-around; |
|
align-items: center; |
|
font-size: 0.22rem; |
|
margin-bottom: 0.2rem; |
|
} |
|
|
|
.isAct{ |
|
background: #F6F6F6; |
|
border: 1px solid #F6F6F6; |
|
pointer-events:none; |
|
.txt{ |
|
color:rgba(102, 102, 102,0.3) !important; |
|
} |
|
div{ |
|
span{ |
|
color:rgba(102, 102, 102,0.3) !important; |
|
|
|
} |
|
color: rgba(51, 51, 51,0.3) !important; |
|
} |
|
} |
|
|
|
.active{ |
|
background: #1677FF ; |
|
div{ |
|
span{ |
|
color: #fff !important; |
|
} |
|
color: #fff !important; |
|
} |
|
|
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
.btn_box{ |
|
width:90%; |
|
height: 1.6rem; |
|
margin:0 auto; |
|
margin-top: 0.4rem; |
|
cursor: not-allowed |
|
} |
|
} |
|
::v-deep{ |
|
.van-calendar__header { |
|
box-shadow: none !important; |
|
} |
|
.van-calendar__month-title{ |
|
display: none; |
|
} |
|
.num1{ |
|
background: rgb(22, 119, 255); |
|
border-radius: 50%; |
|
color: #fff; |
|
} |
|
.num2{ |
|
background: rgba(22, 119, 255,0.5); |
|
border-radius: 50%; |
|
color: #fff; |
|
} |
|
.van-calendar__weekdays{ |
|
margin-bottom: 0.24rem; |
|
} |
|
.van-calendar__weekday{ |
|
font-size: 0.32rem; |
|
} |
|
.van-calendar__selected-day{ |
|
.van-calendar__top-info{ |
|
width: 0.1rem; |
|
height: 0.1rem; |
|
background: #fff; |
|
border-radius: 50%; |
|
margin: 0 auto; |
|
margin-top: 0.1rem; |
|
top: 0.06rem; |
|
} |
|
} |
|
.van-calendar__days{ |
|
height: 6.4rem; |
|
|
|
.van-calendar__day{ |
|
// height: 17%; |
|
// width: 13.5%; |
|
// margin: 0 0.35%; |
|
width: 1rem; |
|
height: 1rem; |
|
margin: 0 0.03rem; |
|
|
|
.van-calendar__selected-day{ |
|
width: 100%; |
|
height: 100%; |
|
background: #1677FF; |
|
border-radius: 50%; |
|
} |
|
} |
|
} |
|
.van-calendar__bottom-info{ |
|
bottom:0.06rem; |
|
} |
|
} |
|
</style> |