zq
1 month ago
6 changed files with 714 additions and 785 deletions
@ -1,303 +0,0 @@ |
|||
<template> |
|||
<view class="book-com"> |
|||
<view class="date-wraper"> |
|||
<view :class="'date'+((selectDay===item.date)?' active':'')" v-for="(item,key) in Object.values(RegistrationTimeList)" @click="chooseDay(item.date)"> |
|||
<view class="top"> |
|||
<view>{{item.month}}.{{ item.day }}</view> |
|||
<view class="PfScMedium">{{item.week_desc}}</view> |
|||
</view> |
|||
<view :class="'bot'+((item.work_desc !== '不出诊')?' active':'')+(key==0?' PfScMedium':'')"> |
|||
{{item.work_desc}} |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="datelist"> |
|||
<view :class="'item'+(timeList.am.length<=0?' itemempty':' ')" v-if="bookTimeList"> |
|||
<view class="title PfScMedium">上午预约</view> |
|||
<view class="inner-wrapper" v-if="timeList.am.length>0"> |
|||
<view v-for="(item,key) in timeList.am" :class="'son PfScMedium'+( time2remain[item] <=0?' disable':'')" @click="confirmSubmit(item, 1)" :hover-class="time2remain[item]>0?'hover2':''"> |
|||
{{item.split('-')[0]}} |
|||
<text v-if="visitorList.length > time2remain[item] || time2remain[item]<=0">{{time2remain[item]>0?("（名额余"+time2remain[item]+"）"):(time2remainExpire[item]?'':'（名额已满）')}}</text> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="empty" v-else> |
|||
<img :src="cssUrl+'empty.png'" alt=""> |
|||
<view class="info">当前时间段不可预约</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view :class="'item'+(timeList.pm.length<=0?' itemempty':' ')" v-if="bookTimeList"> |
|||
<view class="title PfScMedium">下午预约</view> |
|||
<view class="inner-wrapper" v-if="timeList.pm.length>0"> |
|||
<view :class="'son PfScMedium'+(time2remain[item]<=0?' disable':'')" @click="confirmSubmit(item, 2)" :hover-class="time2remain[item]>0?'hover2':''" v-for="(item,key) in timeList.pm"> |
|||
{{item.split('-')[0]}} |
|||
<text v-if="visitorList.length > time2remain[item] || time2remain[item]<=0">{{time2remain[item]>0?("（名额余"+time2remain[item]+"）"):(time2remainExpire[item]?'':'（名额已满）')}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="empty" v-else> |
|||
<img :src="cssUrl+'empty.png'" alt=""> |
|||
<view class="info">当前时间段不可预约</view> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="empty-all" v-else> |
|||
<img :src="cssUrl+'empty.png'" alt=""> |
|||
<view class="info2"> |
|||
<view class="PfScMedium">{{timeList.type_text}}</view> |
|||
<view>请选择其他可预约日期</view> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
|
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: "bookBox", |
|||
props: { |
|||
visitorList:{ |
|||
type:Array, |
|||
default:()=>[] |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
cssUrl:this.cssUrl, |
|||
time2remain:[], |
|||
bookTimeList:false, |
|||
timeList:true, |
|||
disable:true, |
|||
selectDay:-1, |
|||
RegistrationTimeList:[], |
|||
nowtime:'', |
|||
time2remainExpire:[], |
|||
} |
|||
}, |
|||
methods: { |
|||
dataInit(allDate,chooseDate) {//上下午时间 |
|||
let firstRegistrationTime = allDate['date2time'] |
|||
this.RegistrationTimeList = allDate['date2work'] |
|||
this.nowtime = allDate['nowtime'] |
|||
this.time2remain = allDate['time2remain']; |
|||
for (var key in this.time2remain) { |
|||
if (this.time2remain.hasOwnProperty(key)) { |
|||
var times = key.split('-') |
|||
var end_times = chooseDate+' '+times[1] |
|||
this.time2remainExpire[key] = 0 |
|||
if(this.nowtime >= end_times) this.time2remainExpire[key] = 1 |
|||
} |
|||
} |
|||
|
|||
if(chooseDate){ |
|||
this.selectDay = chooseDate; |
|||
}else{ |
|||
this.selectDay = Object.keys(this.RegistrationTimeList)[0]; |
|||
if(!this.selectDay)return |
|||
this.chooseDay(this.selectDay) |
|||
return |
|||
} |
|||
this.bookTimeList = false |
|||
if(firstRegistrationTime.am.length > 0 || firstRegistrationTime.pm.length > 0) this.bookTimeList = true |
|||
this.timeList = firstRegistrationTime |
|||
}, |
|||
chooseDay(date){ |
|||
this.selectDay = date |
|||
this.bookTimeList = false |
|||
this.$emit('getAvailabletRegistrationTime', true,this.selectDay) |
|||
}, |
|||
confirmSubmit(time_interval, type){ |
|||
let param = new Object() |
|||
if(this.time2remain[time_interval] <= 0) return |
|||
param.date = this.selectDay |
|||
param.time_interval = time_interval |
|||
param.type = type |
|||
this.$emit('confirmSubmitEvent', param) |
|||
} |
|||
} |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.book-com{ |
|||
width: 100%; |
|||
height: auto; |
|||
overflow: hidden; |
|||
.date-wraper{ |
|||
width: 714rpx; |
|||
margin: 24rpx auto 0; |
|||
height: 218rpx; |
|||
background: #FFFFFF; |
|||
box-shadow: 0rpx 2rpx 24rpx 0rpx rgba(0,0,0,0.03); |
|||
overflow-x: auto; |
|||
display: flex; |
|||
box-sizing: border-box; |
|||
padding: 40rpx 24rpx; |
|||
.date{ |
|||
width: 120rpx; |
|||
flex-shrink: 0; |
|||
margin-right: 18rpx; |
|||
.top{ |
|||
width: 106rpx; |
|||
height: 98rpx; |
|||
padding-top: 8rpx !important; |
|||
box-sizing: border-box; |
|||
view{ |
|||
color: #333333; |
|||
font-size: 28rpx; |
|||
line-height: 36rpx; |
|||
height: 36rpx; |
|||
text-align: center; |
|||
} |
|||
view:last-of-type{ |
|||
margin-top: 10rpx; |
|||
} |
|||
} |
|||
.bot{ |
|||
height: 32rpx; |
|||
font-size: 24rpx; |
|||
color: #999999; |
|||
line-height: 32rpx; |
|||
margin-top: 14rpx; |
|||
text-align: center; |
|||
&.active{ |
|||
color: #50C382; |
|||
} |
|||
} |
|||
&.active{ |
|||
.top{ |
|||
background: #39D067; |
|||
border-radius: 8rpx; |
|||
view{ |
|||
color: white !important; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.datelist{ |
|||
width: 714rpx; |
|||
margin: 20rpx auto 0; |
|||
height: auto; |
|||
background: #F8F8F8; |
|||
border-radius: 8rpx; |
|||
box-sizing: border-box; |
|||
overflow: hidden; |
|||
.title{ |
|||
height: 50rpx; |
|||
font-size: 32rpx; |
|||
color: #000000; |
|||
line-height: 50rpx; |
|||
letter-spacing: 2rpx; |
|||
padding-top: 24rpx; |
|||
margin-bottom: 24rpx; |
|||
background: #FFFFFF; |
|||
} |
|||
.item{ |
|||
min-height: 318rpx; |
|||
padding: 0 24rpx 0rpx 24rpx; |
|||
box-shadow: 0rpx 24rpx 24rpx 0rpx rgba(0,0,0,0.03); |
|||
background: #FFFFFF; |
|||
position: relative; |
|||
margin-bottom: 20rpx; |
|||
&.itemallempty{ |
|||
background: #FFFFFF !important; |
|||
} |
|||
&.itemempty{ |
|||
height: 420rpx !important; |
|||
padding-bottom: 0rpx !important; |
|||
} |
|||
.empty{ |
|||
position: absolute; |
|||
top: 0; |
|||
left: 147rpx; |
|||
width: 420rpx; |
|||
height: 420rpx; |
|||
img{ |
|||
width: 420rpx; |
|||
height: 420rpx; |
|||
display: block; |
|||
height: 420rpx; |
|||
margin: 0 auto; |
|||
} |
|||
.info{ |
|||
width: 100%; |
|||
position: absolute; |
|||
z-index: 2; |
|||
bottom: 42rpx; |
|||
text-align: center; |
|||
height: 40rpx; |
|||
font-size: 28rpx; |
|||
color: #AEB0B8; |
|||
line-height: 40rpx; |
|||
} |
|||
} |
|||
.inner-wrapper{ |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
justify-content: space-between; |
|||
.son{ |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
width: 320rpx; |
|||
height: 86rpx; |
|||
background: #F8FFF7; |
|||
border-radius: 8rpx; |
|||
border: 2rpx solid #39D067; |
|||
margin-bottom: 20rpx; |
|||
color: #50C382; |
|||
font-size: 30rpx; |
|||
&.disable{ |
|||
background: #F1F1F1; |
|||
border: 2rpx solid #CACACA; |
|||
color: #999999; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
img{ |
|||
width: 420rpx; |
|||
height: 420rpx; |
|||
display: block; |
|||
height: 420rpx; |
|||
margin: 0 auto; |
|||
} |
|||
.info2{ |
|||
position: absolute; |
|||
bottom: 50rpx; |
|||
width: 100%; |
|||
view{ |
|||
width: 100%; |
|||
text-align: center; |
|||
} |
|||
view:first-of-type{ |
|||
font-size: 28rpx; |
|||
height: 40rpx; |
|||
width: 100%; |
|||
color: #AEB0B8; |
|||
line-height: 40rpx; |
|||
} |
|||
view:last-of-type{ |
|||
height: 33rpx; |
|||
font-size: 24rpx; |
|||
color: #BEC1CA; |
|||
line-height: 33rpx; |
|||
margin-top: 14rpx; |
|||
} |
|||
} |
|||
|
|||
.empty-all{ |
|||
height: 454rpx; |
|||
padding-bottom: 20rpx; |
|||
background: #FFFFFF; |
|||
position: relative; |
|||
} |
|||
} |
|||
} |
|||
|
|||
</style> |
|||
Loading…
Reference in new issue