circulation_ancientCoins_new/components/preBookList.vue

<template>
  	<view class="prebook-list-com">
		<view :class="'list btPadding'+(topnopadding?' topnopadding':'')" v-if="dataList.length>0">
			<view :class="'item '+item" v-for="(item, key) in dataList" @click="toBookDetail(item)">
				<view class="left">
					<view class="title PfScMedium"><text v-if="item.name">{{item.name}}</text><text v-else>无</text></view>
					<view class="date">{{item.date}} {{item.week_desc}}  {{item.time_interval}}</view>
					<view class="loction over1">
						{{item.hospital_name}} {{item.depart_name}}
						</view>
				</view>
				<view class="right">
					<view :class="statusStyleList[item.status_desc]+' status'"><view class="over">{{item.status_desc2 ? item.status_desc2 : item.status_desc}}</view></view>
					<view class="queue-num" v-if="item.status_desc=='候诊' && item.wait_visit_count && item.wait_visit_count>0"><view>前方<text class="PfScSemibold">{{item.wait_visit_count}}</text>人</view> </view>
					<view class="bedDesc" v-if="item.bed_desc && item.status_desc=='待就诊'">{{item.bed_desc}}</view>
				</view>
			</view>
		</view>
		<img class="emptyImg" v-else :src="cssUrl + 'list_empty.svg'" alt="">
	</view>
</template>
<script>
export default {
  name: "preBookList",
  props: {
		dataList:{
			type: Array,
			default: function(){
				return []
			}
		},
		topnopadding:{
			type:Boolean,
			default:false
		}
  },
  data() {
    return {
		cssUrl:this.cssUrl,
		statusStyleList:{'待就诊':'status_wait', '就诊中':'status_ing', '就诊完成':'status_down', '过号':'status_out_num', '过期':'status_expire','取消':'status_cancle'}
    }
  },
  methods: {
	  toBookDetail(item){
			this.$nav.navToPath('/pages/visit_detail/visit_detail?id='+item.id+'&depart_id='+item.depart_id+'&visitor_id='+item.visitor_id)
	  },
  }
};
</script>

<style lang="scss" scoped>
.prebook-list-com{
	width: 100%;
	height: auto;
	overflow: hidden;
	background: #FFFFFF;
	.list{
		&.topnopadding{
			.item:first-of-type{
				padding: 0 13rpx 35rpx 13rpx;
			}
		}
		width: 100%;
		height: auto;
		background: #FFFFFF;
		border-radius: 8rpx;
		margin: 0 auto 0;
		overflow: hidden;
		box-sizing: border-box;
		.item{
			display: flex;
			justify-content: space-between;
			margin: 0 auto;
			width: 692rpx;
			border-bottom: 2rpx solid rgba(151,151,151,0.15);
			padding: 35rpx 13rpx;
			box-sizing: border-box;
			overflow: hidden;
			height: auto;
			&:last-of-type{
				border-bottom: none !important;
			}
			.left{
				flex-grow: 1;
				flex-shrink: 1;
				.title{
					min-height: 42rpx;
					font-size: 30rpx;
					color: #000000;
					line-height: 42rpx;
					margin-bottom: 28rpx;
					overflow: hidden;
				}
				.date{
					height: 40rpx;
					font-size: 28rpx;
					color: #949699;
					line-height: 40rpx;
					margin-bottom: 12rpx
				}
				.loction{
					min-height: 40rpx;
					line-height: 40rpx;
					font-size: 28rpx;
					color: #949699;
				}
			}
			.right{
				width: 250rpx;
				flex-shrink: 1;
				text-align: right;
				word-break: break-all;
				height: 42rpx;
				align-items: center;
				justify-content: flex-end;
				.bedDesc{
					font-size: 28rpx;
					line-height: 40rpx;
					letter-spacing: 0rpx;
					color: #30C563;
					margin-top: 28rpx;
				}

				.status{
					display: flex;
					justify-content: flex-end;
					view{
						display: flex;
						box-sizing: border-box;
						align-items: center;
						justify-content: center;
						border-radius: 6rpx;
						padding: 0rpx 18rpx;
						height: 40rpx;
						text-align: center;
						font-size: 22rpx;
					}

					&.status_wait{
						view{
							background: #F8FFF7;
							border: 2rpx solid #58CA7F;
							color: #30C563;
						}
					}
					&.status_out_num{
						view{
							background: #FFFAF7;
							color: #FE6710;
							border: 2rpx solid #FE6710;
						}
					}
					&.status_down{
						view{
							background: #FCFCFC;
							border: 2rpx solid #999999;
							color: #999999;
						}
					}
					&.status_cancle{
						view{
							background: #FCFCFC;
							border: 2rpx solid #AEB0B8;
							color: #B6B8BF;
						}
					}
					&.status_expire{
						view{
							background: #FFEEEE;
							border: 2rpx solid #FD0000;
							color: #FD3B3B;
						}
					}
					&.status_ing{
						view{
							border: 2rpx solid #5FA1CB;
							background: #F7FCFF;
							color: #007FD0;
						}
					}
				}
				.queue-num{
					line-height: 48rpx;
					height: 48rpx;
					font-size: 28rpx;
					color: #999999;
					margin-top: 25rpx;
					text{
						font-size: 48rpx;
						color: #39D067;
						margin: 0 8rpx;
					}
				}
			}
		}
	}
	.emptyImg{
		width: 440rpx;
		opacity: .6;
		margin-left: 50%;
		transform: translateX(-50%);
	}
}

</style>