预约详情页面

components/listBox.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="list-box-com">
+	  <view class="item">
+		  <view class="left PfScMedium">
+		  	{{leftTitle}}
+		  </view>
+		  <view class="right">
+		  	<slot>{{rightTitle}}</slot>
+		  </view>
+	  </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "listBox",
+  props: {
+	leftTitle: {
+		type: String,
+		default: ""
+	},
+	rightTitle: {
+		type: String,
+		default: ""
+	}
+  },
+  data() {
+    return {
+    }
+  },
+  methods: {
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+	.list-box-com{
+		width: 100%;
+		background: #FFFFFF;
+		box-sizing: border-box;
+		.item{
+			width: 692rpx;
+			padding: 40rpx 26rpx;
+			box-sizing: border-box;
+			margin: 0 auto;
+			display: flex;
+			background: #FFFFFF;
+			justify-content: space-between;
+			line-height: 44rpx;
+			font-size: 32rpx;
+			border-bottom: 2rpx solid rgba(151,151,151,0.15);
+			align-items: center;
+			.left{
+				color: #000000;
+				letter-spacing: 2rpx;
+				width: 140rpx;
+				flex-shrink: 0;
+				text-align: left;
+			}
+			.right{
+				flex-grow: 1;
+				color: #666666;
+				display: flex;
+				justify-content: flex-end;
+			}
+		}
+		
+	}
+</style>

pages/book_detail/book_detail.vue

@@ -1,15 +1,36 @@
 <template>
-	<view class="book-page btPadding">
+	<view class="book-page btPadding">
-		<view class="page-box"></view>
+		<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}}
+			</list-box>
+		</view>
 	</view>
 </template>
 
-<script>
+<script>
+	import listBox from '@/components/listBox.vue';
 	export default {
 		data() {
-			return {
+			return {
-				
+				// data:['status_wait', 'status_out_num', 'status_down', 'status_expire', 'status_ing', 'status_down', 'status_expire', 'status_ing'],
+				status:'status_wait',
+				list:[
+					{'leftTitle':'状态','custom':""},
+					{'leftTitle':'就诊人','rightTitle':'上官梓涵'},
+					{'leftTitle':'就诊医院','rightTitle':'广安门中医医院西单门诊部'},
+					{'leftTitle':'就诊科室','rightTitle':'针灸科'},
+					{'leftTitle':'医生','rightTitle':'李静'},
+					{'leftTitle':'排队情况','isCustom':true},
+					{'leftTitle':'就诊时间','isCustom':true}
+				]
 			}
+		},
+		onShow() {
+			this.list[0].custom = "<view class='"+this.status+" status'><view class='over'>候诊</view></view>"
+		},
+		components:{
+			listBox
 		},
 		methods: {
 			
@@ -24,8 +45,77 @@
 	background: #F6F6F6;
 	overflow-y: auto;
 	box-sizing: border-box;
-	.page-box{
+	.item-wrapper{
+		.rightBox{
+			.status{
+				color: red;	
+			}
+		}
+	}
+	
+	.list-box{
 		width: calc(100% - 34rpx);
+		height: auto;
+		margin: 0 auto;
+		overflow: hidden;
+		border-radius: 0 0 8rpx 8rpx;
+		.item-wrapper{
+		// 	.rightBox{
+		// 		.status{
+		// 			color: red;
+		// 			display: flex;
+		// 			justify-content: flex-end;
+		// 			view{
+		// 				display: flex;
+		// 				border-radius: 6rpx;
+		// 				font-size: 22rpx;
+		// 				height: 32rpx;
+		// 				line-height: 32rpx;
+		// 				padding:  0 10rpx;
+		// 				box-sizing: border-box;
+		// 				min-width: 90rpx;
+		// 				display: block;
+		// 				text-align: center;
+		// 			}
+		// 			&.status_wait{
+		// 				view{
+		// 					background: #F8FFF7;
+		// 					border: 1rpx solid #5BD07A;
+		// 					color: #58CA7F;
+		// 				}
+		// 			}
+		// 			&.status_out_num{
+		// 				view{
+		// 					background: #FFFAF7;
+		// 					border: 1rpx solid #FE6710;
+		// 					color: #FE6710;
+		// 				}
+		// 			}
+		// 			&.status_down{
+		// 				view{
+		// 					background: #FCFCFC;
+		// 					border: 1rpx solid #AEB0B8;
+		// 					color: #B6B8BF;
+		// 				}
+		// 			}
+		// 			&.status_expire{
+		// 				view{
+		// 					background: #FCFCFC;
+		// 					border: 1rpx solid #AEB0B8;
+		// 					color: #B6B8BF;
+		// 				}
+		// 			}
+		// 			&.status_ing{
+		// 				view{
+		// 					border: 1rpx solid #5FA1CB;
+		// 					background: #F7FCFF;
+		// 					color: #5FA1CB;
+		// 				}
+		// 			}
+		// 		}
+		// 	}
+		
+		}
 	}
 }
 </style>