zhangqi
/
circulation_ancientCoins_new
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

预约页面

master
kuaileWu 1 year ago
parent
d02c00805b
commit
d7e230bc87
3 changed files with 253 additions and 10 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 231
      components/bookBox.vue
  2. 28
      pages/prebook/prebook.vue
  3. BIN
      static/images/frontend/empty.png

231
components/bookBox.vue
View File

@ -1,16 +1,57 @@
<template>
<view class="book-com">
<view class="date-wraper">
<view class="date">
<view :class="'date'+((key==0)?' active':'')" v-for="(item,key) in data">
<view class="top">
<view>01</view>
<view>周一</view>
<view>0{{key+1}}</view>
<view class="PfScMedium">周一</view>
</view>
<view class="bot">
<view :class="'bot'+((key%2==0)?' active':'')+(key==0?' PfScMedium':'')">
全天出诊
</view>
</view>
</view>
<view class="datelist">
<view :class="'item'+(!timeList?' itemempty':' ')" v-if="bookList">
<view class="title PfScMedium">上午预约</view>
<view class="inner-wrapper" v-if="timeList">
<view class="son PfScMedium">07:30-08:30</view>
<view class="son PfScMedium">08:30-09:30 <text>（2）</text></view>
<view class="son PfScMedium">07:30-08:30</view>
<view :class="'son PfScMedium'+(disable?' disable':'')">08:30-09:30<text>（满）</text></view>
</view>
<view class="empty" v-else>
<img :src="cssUrl+'empty.png'" alt="">
<view class="info">该时段已约满</view>
</view>
</view>
<view :class="'item'+(!false?' itemempty':' ')" v-if="bookList">
<view class="title PfScMedium">上午预约</view>
<view class="inner-wrapper" v-if="false">
<view class="son PfScMedium">07:30-08:30</view>
<view class="son PfScMedium">08:30-09:30 <text>（2）</text></view>
<view class="son PfScMedium">07:30-08:30</view>
<view :class="'son PfScMedium'+(disable?' disable':'')">08:30-09:30<text>（满）</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">尚未开放预约</view>
<view>请提前48小时前来预约</view>
</view>
</view>
</view>
</view>
</template>
@ -22,6 +63,11 @@ export default {
},
data() {
return {
data:[8,8,8,8,8,8,8,8],
cssUrl:this.cssUrl,
bookList:true,
timeList:true,
disable:true
}
},
methods: {
@ -31,5 +77,182 @@ export default {
</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: 106rpx;
flex-shrink: 0;
margin-right: 34rpx;
.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;
&.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: #DEF3DB;
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>

28
pages/prebook/prebook.vue
View File

@ -1,8 +1,8 @@
<template>
<view class="page-prebook">
<view class="title">
<view class="title flex">
<img :src="cssUrl+'ten.svg'">
广安门中医医院西单门诊部
广安门中医医院西单门诊部 针灸科
</view>
<book/>
</view>
@ -30,6 +30,26 @@
}
</script>
<style>
<style lang="scss" scoped>
.page-prebook{
width: 100%;
height: 100vh;
overflow-y: auto;
background: #F8F8F8;
.title{
margin-top: 24rpx;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 0 41rpx;
line-height: 36rpx;
font-size: 30rpx;
color: #949699;
img{
width: 26rpx;
height: 26rpx;
margin-right: 15rpx;
}
}
}
</style>

BIN
static/images/frontend/empty.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

Write Preview
Loading…
Cancel
Save