针灸挂号前端组件封装

pages/book_detail/book_detail.vue

@@ -1,15 +1,23 @@
 <template>
 	<view class="book-page btPadding">
 		<view class="list-box">
-			<list-box class="item-wrapper" v-for="(item,key) in list" :key="key" :leftTitle="item.leftTitle" :rightTitle="item.rightTitle?item.rightTitle:''">
+			<list-box class="item-wrapper" v-if="item.show" v-for="(item,key) in list" :key="key" :leftTitle="item.leftTitle" :rightTitle="item.rightTitle?item.rightTitle:''">
 				<view class="item-inner" v-html="item.custom" v-if="item.custom"></view>
 			</list-box>
 		</view>
 
 		<view class="bot-con">
-			<view class="title">就诊提醒</view>
+			<view class="title PfScMedium">就诊提醒</view>
 			<view class="content" v-html="notice"></view>
 		</view>
+		<view class="btPadding pagebt"></view>
+		
+		<view class="fixedBot btPadding">
+			<view class="submit">
+				<view :class="'btn cancel'+(showCancelBook?' btn1':' btn3')" hover-class="hover">返回</view>
+				<view class="btn primary btn1" hover-class="hover" v-if="showCancelBook">取消预约</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -22,21 +30,24 @@
 				// data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing', 'status_down', 'status_expire', 'status_ing'],
 				status:'status_wait',
 				queueNum:88,
+				bookDate:"2024.01.09 周二  09:30-12:00",
 				notice:"挂号方式：现场窗口挂号<br>流程：全部挂号，针灸病人按照本系统预约时段排床，拿药病人按叫号顺序就诊<br>其他：请准备一次性医用床单（可现场购买）和户外保温毯（推荐）",
 				list:[
-					{'leftTitle':'状态','custom':""},
+					{'leftTitle':'状态','custom':"",show:true},
-					{'leftTitle':'就诊人','rightTitle':'上官梓涵'},
+					{'leftTitle':'就诊人','rightTitle':'上官梓涵',show:true},
-					{'leftTitle':'就诊医院','rightTitle':'广安门中医医院西单门诊部'},
+					{'leftTitle':'就诊医院','rightTitle':'广安门中医医院西单门诊部',show:true},
-					{'leftTitle':'就诊科室','rightTitle':'针灸科'},
+					{'leftTitle':'就诊科室','rightTitle':'针灸科',show:true},
-					{'leftTitle':'医生','rightTitle':'李静'},
+					{'leftTitle':'医生','rightTitle':'李静',show:true},
-					{'leftTitle':'排队情况','custom':""},
+					{'leftTitle':'排队情况','custom':"",show:true},
-					{'leftTitle':'就诊时间','custom':"<view class='book-date'>2024.01.09 周二  09:30-12:00</view>"}
+					{'leftTitle':'就诊时间','custom':"",show:true}
-				]
+				],
+				showCancelBook:false
 			}
 		},
 		onShow() {
 			this.list[0].custom = "<view class='"+this.status+" status'><view class='over status_text'>候诊</view></view>"
 			this.list[5].custom = "<view class='queue-text'>前方<text class='queue-num-txt PfScSemibold'>"+this.queueNum+"</text>人</view>"
+			this.list[6].custom = "<view class='book-date wait'>"+this.bookDate+"</view>"
 		},
 		components:{
 			listBox
@@ -133,11 +144,65 @@
 				.book-date{
 					height: 45rpx;
 					font-size: 32rpx;
-					color: #39D067;
 					line-height: 45rpx;
+					&.wait{
+						color: #39D067;
+					}
+					&.expire{
+						color: #FD7B13;
+					}
 				}
 			}
 		}
 	}
+	.bot-con{
+		background: #FFFFFF;
+		margin-top: 15rpx;
+		padding: 40rpx 27rpx;
+		box-sizing: border-box;
+		overflow: hidden;
+		.title{
+			height: 44rpx;
+			font-size: 32rpx;
+			color: #000000;
+			line-height: 44rpx;
+			letter-spacing: 2rpx;
+		}
+		.content{
+			margin-top: 16rpx;
+			font-size: 32rpx;
+			color: #666666;
+			line-height: 46rpx;
+			padding-bottom: 124rpx;
+		}
+	}
+	.pagebt{
+		opacity: 0;
+	}
+	.fixedBot{
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 124rpx;
+		background: #FFFFFF;
+		box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
+		backdrop-filter: blur(20rpx);
+		display: flex;
+		.submit{
+			width: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			column-gap: 50rpx;
+		}
+	}
+	
+	// <view class="fixedBot btPadding">
+	// 	<view class="submit">
+	// 		<view class="btn cancel">返回</view>
+	// 		<view class="btn primary">取消预约</view>
+	// 	</view>
+	// </view>
 }
 </style>