预约页面

components/sliderBox.vue

@@ -2,6 +2,8 @@
 	<view class="slider-box-com">
 		<view class="mask" v-show="show"></view>
 		<view :class="'slider-box mybox-leave-to'+(show?' mybox-enter':'')">
+			<img :src="cssUrl+'close.svg'" alt="" class="slider-box-close" @click="close">
+			<slot></slot>
 		</view>
 	</view>
 </template>
@@ -11,10 +13,14 @@
 		name:"sliderBox",
 		data() {
 			return {
-				show:false
+				show:true,
+				cssUrl:this.cssUrl,
 			};
 		},
 		methods:{
+			close() {
+				this.show = false
+			}
 		}
 	}
 </script>
@@ -40,6 +46,13 @@
 		z-index: 899;
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
+		.slider-box-close{
+			position: absolute;
+			top: 44rpx;
+			right: 33rpx;
+			width: 40rpx;
+			height: 40rpx;
+		}
 	}
 	.mybox-leave-to{
 		transition: all .8s ease;

pages/prebook/prebook.vue

@@ -5,7 +5,55 @@
 			广安门中医医院西单门诊部 针灸科
 		</view>
 		<book/>
-		<slider-box></slider-box>
+		<slider-box ref="sliderbox">
+			<view class="slider-title PfScMedium">预约信息确认</view>
+			<view class="members-box" v-if="needSelectMembers">
+				<view class="desc">当前时段余号不足，只能预约2人</view>
+				<view class="members">
+					<view class="memmbers-item active">
+						<img :src="cssUrl+'checkbox_false.svg'" alt="">
+						<img :src="cssUrl+'checkbox_true.svg'" alt="">
+						上官子涵
+					</view>
+					<view class="memmbers-item">
+						<img :src="cssUrl+'checkbox_false.svg'" alt="">
+						<img :src="cssUrl+'checkbox_true.svg'" alt="">
+						帅哥
+					</view>
+					<view class="memmbers-item">
+						<img :src="cssUrl+'checkbox_false.svg'" alt="">
+						<img :src="cssUrl+'checkbox_true.svg'" alt="">
+						发财哥
+					</view>
+					<view class="memmbers-item">
+						<img :src="cssUrl+'checkbox_false.svg'" alt="">
+						<img :src="cssUrl+'checkbox_true.svg'" alt="">
+						王富贵
+					</view>
+				</view>
+			</view>
+			<view class="item member-style" v-else>
+				<view class="left">就诊人：</view>
+				<view class="right">①王鹏  ②张富贵  ③张杨明</view>
+			</view>
+			<view class="item">
+				<view class="left">医生姓名：</view>
+				<view class="right">李静</view>
+			</view>
+			<view class="item">
+				<view class="left">就诊医院：</view>
+				<view class="right">广安门中医医院西单门诊部 中医科</view>
+			</view>
+			<view class="item">
+				<view class="left">看诊时间：</view>
+				<view class="right orange">2023.11.12 上午 9:30-10:30</view>
+			</view>
+			
+			<view class="btns-box flex">
+				<view class="btn cancel btn1" hover-class="hover" @click="close">我再想想</view>
+				<view class="primary btn btn1" hover-class="hover">确认预约</view>
+			</view>
+		</slider-box>
 	</view>
 </template>
 
@@ -20,7 +68,8 @@
 		},
 		data() {
 			return {
-				cssUrl:this.cssUrl
+				cssUrl:this.cssUrl,
+				needSelectMembers:true
 			}
 		},
 		components:{
@@ -28,7 +77,9 @@
 			SliderBox
 		},
 		methods: {
-			
+			close() {
+				this.$refs.sliderbox.close()
+			}
 		}
 	}
 </script>
@@ -54,5 +105,129 @@
 				margin-right: 15rpx;
 			}
 		}
+		.slider-title{
+			width: 100%;
+			text-align: center;
+			color: #000000;
+			margin-top: 52rpx;
+			line-height: 50rpx;
+			height: 50rpx;
+			font-size: 32rpx;
+			letter-spacing: 2rpx;
+		}
+		.member-style{
+			margin-top: 82rpx;
+		}
+		.item{
+			display: flex;
+			box-sizing: border-box;
+			padding: 0 53rpx;
+			height: 42rpx;
+			line-height: 42rpx;
+			font-size: 30rpx;
+			margin-bottom: 24rpx;
+			.left{
+				width: 159rpx;
+				flex-shrink: 0;
+				color: #999999;
+			}
+			.right{
+				flex-grow: 1;
+				color: #242833;
+				&.orange{
+					color: #FD7100;
+				}
+			}
+		}
+		.item:last-of-type{
+			margin-bottom: 62rpx;
+		}
+		.btns-box{
+			justify-content: space-between;
+			width: 750rpx;
+			height: 124rpx;
+			padding: 0 50rpx;
+			box-sizing: border-box;
+			align-items: center;
+			background: #FFFFFF;
+			box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
+			margin-top: 62rpx;
+		}
+		.members-box{
+			margin-top: 52rpx;
+			padding-left: 60rpx;
+			width: 100%;
+			box-sizing: border-box;
+			.desc{
+				height: 50rpx;
+				font-size: 30rpx;
+				color: #999999;
+				line-height: 50rpx;
+				letter-spacing: 1rpx;
+				margin-bottom: 20rpx;
+			}
+			.members{
+				width: 630rpx;
+				min-height: 200rpx;
+				background: #F7F7F7;
+				display: flex;
+				justify-content: space-between;
+				flex-wrap: wrap;
+				padding: 32rpx 40rpx;
+				box-sizing: border-box;
+				.memmbers-item{
+					width: 50%;
+					display: flex;
+					flex-shrink: 0;
+					flex-wrap: wrap;
+					align-items: center;
+					img{
+						width: 36rpx;
+						height: 36rpx;
+						margin-right: 26rpx;
+					}
+					img:first-of-type{
+						display: block;
+					}
+					img:last-of-type{
+						display: none;
+					}
+					&.active{
+						img:first-of-type{
+							display: none;
+						}
+						img:last-of-type{
+							display: block;
+						}
+					}
+				}
+			}
+		}
+		
+		// <view class="members-box" v-if="needSelectMembers">
+		// 	<view class="desc">当前时段余号不足，只能预约2人</view>
+		// 	<view class="members">
+		// 		<view class="memmbers-item">
+		// 			<img :src="cssUrl+'checkbox_false.svg'" alt="">
+		// 			<img :src="cssUrl+'checkbox_true.svg'" alt="">
+		// 			上官子涵
+		// 		</view>
+		// 		<view class="memmbers-item">
+		// 			<img :src="cssUrl+'checkbox_false.svg'" alt="">
+		// 			<img :src="cssUrl+'checkbox_true.svg'" alt="">
+		// 			帅哥
+		// 		</view>
+		// 		<view class="memmbers-item">
+		// 			<img :src="cssUrl+'checkbox_false.svg'" alt="">
+		// 			<img :src="cssUrl+'checkbox_true.svg'" alt="">
+		// 			发财哥
+		// 		</view>
+		// 		<view class="memmbers-item">
+		// 			<img :src="cssUrl+'checkbox_false.svg'" alt="">
+		// 			<img :src="cssUrl+'checkbox_true.svg'" alt="">
+		// 			王富贵
+		// 		</view>
+		// 	</view>
+		// </view>
 	}
 </style>