jinna
3 years ago
parent
101a864339
commit
841ae6f79c
14 changed files with 999 additions and 5 deletions
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 604 B |
|
After Width: | Height: | Size: 924 B |
|
After Width: | Height: | Size: 943 B |
|
After Width: | Height: | Size: 405 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 379 B |
@ -0,0 +1,298 @@ |
|||||||
|
<template> |
||||||
|
<div class="pro_con"> |
||||||
|
<div class="pro_box" v-for="item in proArr" :key="item.time"> |
||||||
|
<div class="pro_top"> |
||||||
|
<div class="img_box"> |
||||||
|
<img src="~@/assets/image/time.png" alt="" /> |
||||||
|
</div> |
||||||
|
<div class="time_box"> |
||||||
|
<div class="time_text">{{item.day}}</div> |
||||||
|
<div class="date_txt">{{item.monmet}}</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pro_bottom"> |
||||||
|
<div class="pro_left"> |
||||||
|
<div class="img_box"> |
||||||
|
<img src="~@/assets/image/pro.png" alt="" /> |
||||||
|
</div> |
||||||
|
<div class="pro_name">{{item.name}}</div> |
||||||
|
<div class="pro_pos">{{item.posi}}</div> |
||||||
|
</div> |
||||||
|
<div class="pro_right"> |
||||||
|
<div class="cancel" @click="cancelButton(item)">取消预约</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="act_box"> |
||||||
|
<div class="act_btn" @click="confirm">确认</div> |
||||||
|
</div> |
||||||
|
<van-overlay :show="isShow"> |
||||||
|
<div class="wrapper" @click.stop v-show="isSuccess"> |
||||||
|
<div class="img_box"> |
||||||
|
<img src="~@/assets/image/succ.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="tips">预约成功</div> |
||||||
|
<div class="tip_txt"> |
||||||
|
<div>预约成功后若不能按时体检请提前取消</div> |
||||||
|
<div>未提前取消且未按期体检将被拉入黑名单</div> |
||||||
|
<div>被拉黑用户10日内不可再预约</div> |
||||||
|
</div> |
||||||
|
<div class="btn">知道了</div> |
||||||
|
</div> |
||||||
|
<div class="wrapper" @click.stop v-show="!isSuccess"> |
||||||
|
<div class="img_box"> |
||||||
|
<img src="~@/assets/image/fail.png" alt=""> |
||||||
|
</div> |
||||||
|
<div class="tips">预约失败</div> |
||||||
|
<div class="tip_txt"> |
||||||
|
<div>您选择的时间段已无号，请重新预约</div> |
||||||
|
</div> |
||||||
|
<div class="btn">知道了</div> |
||||||
|
</div> |
||||||
|
<div class="close_box"><img src="~@/assets/image/close.png" alt=""></div> |
||||||
|
</van-overlay> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default { |
||||||
|
data() { |
||||||
|
return { |
||||||
|
proData:{}, |
||||||
|
proArr:[], |
||||||
|
isShow:false, |
||||||
|
isSuccess:false |
||||||
|
}; |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
console.log(this.$route.params); |
||||||
|
this.proData = this.$route.params; |
||||||
|
this.proData.selectArr.map(item =>{ |
||||||
|
this.proArr.push({ |
||||||
|
day:this.proData.time, |
||||||
|
name:item.name, |
||||||
|
monmet:item.time, |
||||||
|
posi:item.posi |
||||||
|
}) |
||||||
|
}) |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
cancelButton(val){ |
||||||
|
this.proArr = this.proArr.filter(item => item.name != val.name) |
||||||
|
if(this.proArr.length == 0){ |
||||||
|
this.$router.push({ |
||||||
|
name:'examination' |
||||||
|
}) |
||||||
|
} |
||||||
|
// lightAppJssdk.notification.alert ({ |
||||||
|
// message: "这是一个弹窗", |
||||||
|
// title: "提示",//可传空 |
||||||
|
// buttonName: "收到", |
||||||
|
// success:function(data){ |
||||||
|
// //onSuccess将在点击button之后回调 |
||||||
|
// /*回调*/ |
||||||
|
|
||||||
|
// }, |
||||||
|
// fail:function(data){ //错误返回 |
||||||
|
// } |
||||||
|
// }); |
||||||
|
}, |
||||||
|
|
||||||
|
confirm(){ |
||||||
|
console.log(this.proArr) |
||||||
|
if(this.proArr.length != 0){ |
||||||
|
this.isShow = true |
||||||
|
} |
||||||
|
}, |
||||||
|
}, |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped lang="scss"> |
||||||
|
.pro_con { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
|
||||||
|
.pro_box { |
||||||
|
width: 98%; |
||||||
|
margin-top: 0.2rem; |
||||||
|
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: 0.6rem; |
||||||
|
margin-top: 0.24rem; |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
.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; |
||||||
|
margin-right: 0.24rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.act_box { |
||||||
|
position:absolute; |
||||||
|
left:0; |
||||||
|
right:0; |
||||||
|
bottom:0; |
||||||
|
padding: 0.24rem; |
||||||
|
background: #fff; |
||||||
|
.act_btn{ |
||||||
|
color: #FFFFFF; |
||||||
|
font-size: 0.3rem; |
||||||
|
font-family: PingFang SC-Bold, PingFang SC; |
||||||
|
font-weight: bold; |
||||||
|
line-height:0.96rem; |
||||||
|
text-align: center; |
||||||
|
background: #1677FF; |
||||||
|
border-radius: 0.08rem; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.wrapper{ |
||||||
|
width: 5.98rem; |
||||||
|
height: 6.66rem; |
||||||
|
background: #FFFFFF; |
||||||
|
border-radius: 0.16rem; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 2.76rem; |
||||||
|
|
||||||
|
.img_box{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
img{ |
||||||
|
width: 1rem; |
||||||
|
height: 1rem; |
||||||
|
margin-top: 1.2rem; |
||||||
|
} |
||||||
|
} |
||||||
|
.tips{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
font-size: 0.34rem; |
||||||
|
color:#000; |
||||||
|
font-weight: bold; |
||||||
|
margin: 0.56rem 0 0.2rem 0; |
||||||
|
font-family: PingFang SC-Regular, PingFang SC; |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
.tip_txt{ |
||||||
|
display: flex; |
||||||
|
flex-direction: column; |
||||||
|
justify-content: center; |
||||||
|
align-items: center; |
||||||
|
font-size: 0.24rem; |
||||||
|
color: #666; |
||||||
|
font-family: PingFang SC-Regular, PingFang SC; |
||||||
|
} |
||||||
|
.btn{ |
||||||
|
width: 3rem; |
||||||
|
height: 0.8rem; |
||||||
|
background: #1677FF; |
||||||
|
border-radius: 0.08rem; |
||||||
|
margin: 0 auto; |
||||||
|
margin-top: 0.6rem; |
||||||
|
font-size: 0.3rem; |
||||||
|
color: #fff; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
font-family: PingFang SC-Regular, PingFang SC; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
.close_box{ |
||||||
|
display: flex; |
||||||
|
justify-content: center; |
||||||
|
margin-top: 0.6rem; |
||||||
|
img{ |
||||||
|
width: 0.5rem; |
||||||
|
height: 0.5rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,513 @@ |
|||||||
|
<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"> |
||||||
|
<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-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.replace({ |
||||||
|
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; |
||||||
|
|
||||||
|
.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: 13.5%; |
||||||
|
height: 84%; |
||||||
|
font-size: 0.32rem; |
||||||
|
cursor: pointer; |
||||||
|
display: flex; |
||||||
|
align-items: center; |
||||||
|
justify-content: center; |
||||||
|
text-align: center; |
||||||
|
margin: 0.24rem 0.35% 0 0.35%; |
||||||
|
// margin-top: 0.12rem; |
||||||
|
|
||||||
|
.bottom_info{ |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: 0; |
||||||
|
font-size: 10px; |
||||||
|
line-height: 14px; |
||||||
|
bottom: 6px; |
||||||
|
} |
||||||
|
|
||||||
|
.top_info{ |
||||||
|
position: absolute; |
||||||
|
right: 0; |
||||||
|
left: 0; |
||||||
|
top: 6px; |
||||||
|
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__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; |
||||||
|
} |
||||||
|
} |
||||||
|
.van-calendar__days{ |
||||||
|
height: 6.4rem; |
||||||
|
|
||||||
|
.van-calendar__day{ |
||||||
|
height: 17%; |
||||||
|
width: 13.5%; |
||||||
|
margin: 0 0.35%; |
||||||
|
|
||||||
|
.van-calendar__selected-day{ |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #1677FF; |
||||||
|
border-radius: 50%; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
@ -0,0 +1,154 @@ |
|||||||
|
<template> |
||||||
|
<div class="my_exam"> |
||||||
|
<div class="exam_box"> |
||||||
|
<div class="time_box">2023-01-08</div> |
||||||
|
<div class="pro_box"> |
||||||
|
<div class="pro_top"> |
||||||
|
<div class="img_box"> |
||||||
|
<img src="~@/assets/image/time.png" alt="" /> |
||||||
|
</div> |
||||||
|
<div class="time_box"> |
||||||
|
<div class="time_text">2023-01-08</div> |
||||||
|
<div class="date_txt">上午 9:00-9:30</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
<div class="pro_bottom"> |
||||||
|
<div class="pro_left"> |
||||||
|
<div class="img_box"> |
||||||
|
<img src="~@/assets/image/pro.png" alt="" /> |
||||||
|
</div> |
||||||
|
<div class="pro_name">单眼视力</div> |
||||||
|
<div class="pro_pos">门诊楼3楼眼科门诊</div> |
||||||
|
</div> |
||||||
|
<div class="pro_right"> |
||||||
|
<div class="cancel">取消预约</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
export default {}; |
||||||
|
</script> |
||||||
|
|
||||||
|
<style lang="scss" scoped> |
||||||
|
.my_exam { |
||||||
|
width: 100%; |
||||||
|
height: 100%; |
||||||
|
background: #f9f9f9; |
||||||
|
.exam_box { |
||||||
|
background: #fff; |
||||||
|
padding: 0.5rem 0.24rem 0 0.24rem; |
||||||
|
|
||||||
|
.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.2rem; |
||||||
|
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: 0.6rem; |
||||||
|
margin-top: 0.24rem; |
||||||
|
|
||||||
|
.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; |
||||||
|
} |
||||||
|
} |
||||||
|
.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; |
||||||
|
margin-right: 0.24rem; |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
</style> |
||||||
Loading…
Reference in new issue