针灸挂号系统 预约就诊页面

components/bookBox.vue

@@ -16,7 +16,7 @@
 		<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" @click="confirmSubmit">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>
@@ -71,7 +71,9 @@ export default {
     }
   },
   methods: {
-
+	confirmSubmit(e){
+		this.$emit('confirmSubmitEvent')
+	}
   }
 };
 </script>

components/sliderBox.vue

@@ -2,7 +2,7 @@
 	<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">
+			<img :src="cssUrl+'close.svg'" alt="" class="slider-box-close" @click="closeConfirm">
 			<slot></slot>
 		</view>
 	</view>
@@ -13,13 +13,16 @@
 		name:"sliderBox",
 		data() {
 			return {
-				show:true,
+				show:false,
 				cssUrl:this.cssUrl,
 			};
 		},
 		methods:{
-			close() {
+			closeConfirm() {
 				this.show = false
+			},
+			showConfirm() {
+				this.show = true
 			}
 		}
 	}
@@ -44,6 +47,7 @@
 		bottom: 0;
 		left: 0;
 		z-index: 899;
+		max-height: 80vh;
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
 		.slider-box-close{

pages/prebook/prebook.vue

@@ -4,7 +4,7 @@
 			<img :src="cssUrl+'ten.svg'">
 			广安门中医医院西单门诊部 针灸科
 		</view>
-		<book/>
+		<book @confirmSubmitEvent="showConfirm"/>
 		<slider-box ref="sliderbox">
 			<view class="slider-title PfScMedium">预约信息确认</view>
 			<view class="members-box" v-if="needSelectMembers">
@@ -34,7 +34,7 @@
 			</view>
 			<view class="item member-style" v-else>
 				<view class="left">就诊人：</view>
-				<view class="right">①王鹏  ②张富贵  ③张杨明</view>
+				<view class="right over2 over5">①王鹏  ②张富贵  ③张杨明</view>
 			</view>
 			<view class="item">
 				<view class="left">医生姓名：</view>
@@ -42,7 +42,7 @@
 			</view>
 			<view class="item">
 				<view class="left">就诊医院：</view>
-				<view class="right">广安门中医医院西单门诊部 中医科</view>
+				<view class="right over2 over5">广安门中医医院西单门诊部 中医科</view>
 			</view>
 			<view class="item">
 				<view class="left">看诊时间：</view>
@@ -50,7 +50,7 @@
 			</view>
 			
 			<view class="btns-box flex">
-				<view class="btn cancel btn1" hover-class="hover" @click="close">我再想想</view>
+				<view class="btn cancel btn1" hover-class="hover" @click="closeConfirm">我再想想</view>
 				<view class="primary btn btn1" hover-class="hover">确认预约</view>
 			</view>
 		</slider-box>
@@ -77,8 +77,11 @@
 			SliderBox
 		},
 		methods: {
-			close() {
+			closeConfirm() {
-				this.$refs.sliderbox.close()
+				this.$refs.sliderbox.closeConfirm()
+			},
+			showConfirm() {
+				this.$refs.sliderbox.showConfirm()
 			}
 		}
 	}
@@ -122,7 +125,7 @@
 			display: flex;
 			box-sizing: border-box;
 			padding: 0 53rpx;
-			height: 42rpx;
+			min-height: 42rpx;
 			line-height: 42rpx;
 			font-size: 30rpx;
 			margin-bottom: 24rpx;
@@ -169,6 +172,8 @@
 			.members{
 				width: 630rpx;
 				min-height: 200rpx;
+				max-height: 230rpx;
+				overflow-y: auto;
 				background: #F7F7F7;
 				display: flex;
 				justify-content: space-between;
@@ -179,13 +184,14 @@
 				color: #000000;
 				line-height: 40rpx;
 				margin-bottom: 52rpx;
-				
+				row-gap: 50rpx;
 				.memmbers-item{
 					width: 50%;
+					overflow-y: auto;
 					display: flex;
 					flex-shrink: 0;
-					flex-wrap: wrap;
 					align-items: center;
+					word-break: break-all;
 					img{
 						width: 36rpx;
 						height: 36rpx;
@@ -208,31 +214,5 @@
 				}
 			}
 		}
-		
-		// <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>