报告预约详情页面

components/listBox.vue

@@ -56,6 +56,7 @@ export default {
 				width: 140rpx;
 				flex-shrink: 0;
 				text-align: left;
+				padding-right: 20rpx;
 			}
 			.right{
 				flex-grow: 1;

manifest.json

@@ -82,6 +82,9 @@
             "treeShaking" : {
                 "enable" : true
             }
+        },
+        "sdkConfigs" : {
+            "maps" : {}
         }
     }
 }

pages.json

@@ -8,6 +8,12 @@
                 "enablePullDownRefresh": false
             }
         },
+		{
+			"path": "pages/index/index",
+			"style": {
+				"navigationBarTitleText": ""
+			}
+		},
         {
             "path" : "pages/prebook_list/prebook_list",
             "style" :                                                                                    
@@ -35,12 +41,6 @@
             
         },
 		{
-			"path": "pages/index/index",
-			"style": {
-				"navigationBarTitleText": ""
-			}
-		},
-		{
             "path" : "pages/modify_visitor/modify_visitor",
             "style" :                                                                                    
             {

pages/book_detail/book_detail.vue

@@ -2,38 +2,46 @@
 	<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:''">
-				{{item.custom}}
+				<view class="item-inner" v-html="item.custom" v-if="item.custom"></view>
 			</list-box>
-		</view>
+		</view>
+
+		<view class="bot-con">
+			<view class="title">就诊提醒</view>
+			<view class="content" v-html="notice"></view>
+		</view>
 	</view>
 </template>
 
 <script>
-	import listBox from '@/components/listBox.vue';
+	import listBox from '@/components/listBox.vue';
+	
 	export default {
 		data() {
 			return {
 				// data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing', 'status_down', 'status_expire', 'status_ing'],
-				status:'status_wait',
+				status:'status_wait',
+				queueNum:88,
+				notice:"挂号方式：现场窗口挂号<br>流程：全部挂号，针灸病人按照本系统预约时段排床，拿药病人按叫号顺序就诊<br>其他：请准备一次性医用床单（可现场购买）和户外保温毯（推荐）",
 				list:[
 					{'leftTitle':'状态','custom':""},
 					{'leftTitle':'就诊人','rightTitle':'上官梓涵'},
 					{'leftTitle':'就诊医院','rightTitle':'广安门中医医院西单门诊部'},
 					{'leftTitle':'就诊科室','rightTitle':'针灸科'},
 					{'leftTitle':'医生','rightTitle':'李静'},
-					{'leftTitle':'排队情况','isCustom':true},
+					{'leftTitle':'排队情况','custom':""},
-					{'leftTitle':'就诊时间','isCustom':true}
+					{'leftTitle':'就诊时间','custom':"<view class='book-date'>2024.01.09 周二  09:30-12:00</view>"}
 				]
 			}
 		},
 		onShow() {
-			this.list[0].custom = "<view class='"+this.status+" status'><view class='over'>候诊</view></view>"
+			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>"
 		},
 		components:{
 			listBox
 		},
 		methods: {
-			
 		}
 	}
 </script>
@@ -45,76 +53,90 @@
 	background: #F6F6F6;
 	overflow-y: auto;
 	box-sizing: border-box;
-	.item-wrapper{
+	.list-box,.bot-con{
-		.rightBox{
-			.status{
-				color: red;	
-			}
-		}
-	}
-	
-	.list-box{
 		width: calc(100% - 34rpx);
 		height: auto;
 		margin: 0 auto;
 		overflow: hidden;
 		border-radius: 0 0 8rpx 8rpx;
+	}
+	
+	.list-box{
 		.item-wrapper{
-		// 	.rightBox{
+			.item-inner /deep/{
-		// 		.status{
+				 .status{
-		// 			color: red;
+					display: flex;
-		// 			display: flex;
+					justify-content: flex-end;
-		// 			justify-content: flex-end;
+					.status_text{
-		// 			view{
+						display: flex;
-		// 				display: flex;
+						border-radius: 6rpx;
-		// 				border-radius: 6rpx;
+						font-size: 22rpx;
-		// 				font-size: 22rpx;
+						height: 32rpx;
-		// 				height: 32rpx;
+						line-height: 32rpx;
-		// 				line-height: 32rpx;
+						padding:  0 10rpx;
-		// 				padding:  0 10rpx;
+						box-sizing: border-box;
-		// 				box-sizing: border-box;
+						min-width: 90rpx;
-		// 				min-width: 90rpx;
+						display: block;
-		// 				display: block;
+						text-align: center;
-		// 				text-align: center;
+					}
-		// 			}
+					&.status_wait {
-		// 			&.status_wait{
+						.status_text{
-		// 				view{
+							background: #F8FFF7;
-		// 					background: #F8FFF7;
+							border: 1rpx solid #5BD07A;
-		// 					border: 1rpx solid #5BD07A;
+							color: #58CA7F;
-		// 					color: #58CA7F;
+						}
-		// 				}
+					}
-		// 			}
+					&.status_out_num{
-		// 			&.status_out_num{
+						.status_text{
-		// 				view{
+							background: #FFFAF7;
-		// 					background: #FFFAF7;
+							border: 1rpx solid #FE6710;
-		// 					border: 1rpx solid #FE6710;
+							color: #FE6710;
-		// 					color: #FE6710;
+						}
-		// 				}
+					}
-		// 			}
+					&.status_down{
-		// 			&.status_down{
+						.status_text{
-		// 				view{
+							background: #FCFCFC;
-		// 					background: #FCFCFC;
+							border: 1rpx solid #AEB0B8;
-		// 					border: 1rpx solid #AEB0B8;
+							color: #B6B8BF;
-		// 					color: #B6B8BF;
+						}
-		// 				}
+					}
-		// 			}
+					&.status_expire{
-		// 			&.status_expire{
+						.status_text{
-		// 				view{
+							background: #FCFCFC;
-		// 					background: #FCFCFC;
+							border: 1rpx solid #AEB0B8;
-		// 					border: 1rpx solid #AEB0B8;
+							color: #B6B8BF;
-		// 					color: #B6B8BF;
+						}
-		// 				}
+					}
-		// 			}
+					&.status_ing{
-		// 			&.status_ing{
+						.status_text{
-		// 				view{
+							border: 1rpx solid #5FA1CB;
-		// 					border: 1rpx solid #5FA1CB;
+							background: #F7FCFF;
-		// 					background: #F7FCFF;
+							color: #5FA1CB;
-		// 					color: #5FA1CB;
+						}
-		// 				}
+					}
-		// 			}
+				}
-		// 		}
+				
-		// 	}
+				.queue-text{
-		
+					height: 40rpx;
+					font-size: 28rpx;
+					color: #242833;
+					line-height: 40rpx;
+					.queue-num-txt{
+						height: 48rpx;
+						font-weight: 600;
+						font-size: 48rpx;
+						color: #39D067;
+						line-height: 48rpx;
+						margin: 0 8rpx;
+					}
+				}
+				.book-date{
+					height: 45rpx;
+					font-size: 32rpx;
+					color: #39D067;
+					line-height: 45rpx;
+				}
+			}
 		}
 	}
 }