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