diagnosis_app/views/patientItems/therapy/index.vue

<template>
	<view class="content">
		<view class="search">
			<view class="inp">
				<text class="zhcx-iconfont zhcx-icon-sousuo"></text>
				<input type="text" v-model="keyword"  placeholder="请输入关键字"/>			
			</view>
			<view class="searchBt">
				<button type="primary" @click="search">搜索</button>
			</view>
			<view class="filterBt"  @click="filterHandle">
				<text>筛选</text>
				<text class="zhcx-iconfont " :class="showMorefilter?'zhcx-icon-xiangshang':'zhcx-icon-xiangxia'"></text>
			</view>
		</view>
		<view class="more-filter" v-if="showMorefilter">
			<view class="illnessTypes">
			   <picker @change="changeIllnessType" :value="illnessTypeIndex" :range="illnessTypes">
					<view class="uni-input">{{illnessTypeIndex>-1?illnessTypes[illnessTypeIndex]:"请选择病症类型"}}</view>
				</picker>
			</view>		
		</view>
		<view class="tab-cont">
			<view class="item-container" :class="showMorefilter?'showMorefilter':''">
				<view class="item" v-for="item in items" :key="item.id" @click="showdetail(item.id)"> 
					<view class="avatar">
						<image src="../../../static/images/doctor.jpg" mode="widthFix" class="pic"></image>
					</view>
					<view class="item-info">
						<view class="user">
							<text class="name">{{item.name}}</text>	
							<view class="gender" :class="item.gender==='1'?'woman':'man'">
								<text>{{item.gender==='1'?'女':"男"}}</text>
							</view>	
							<text class="age">{{item.age}}</text>	
						</view>
						<view class="illnessType">
							<text>{{item.illnessType}}</text>
						</view>
						<view class="time">
							<text>就诊时间：</text>
							<text>{{item.time}}</text>
						</view>
					</view>
				</view>
			</view>		
		</view>		
	</view>
</template>

<script>
	import {treatmentList,removeTreatmentPatient} from '@/api/doctor';
	import { getIlltype } from '@/api/user.js'
	export default{
		name:"doctor-index",
		data() {
			return {
				showMorefilter:false,
				illnessTypeIndex:-1,
				illnessTypes:[],
				keyword: '',
				items:[],
				pageNumber:1,
				pageSize:9999
			}
		},
		created() {
			let accountInfo=uni.getStorageSync('accountInfo');
			this.userType=accountInfo.userType;
			if(accountInfo.userType===1){
				this.init();
			}		
		},
		methods:{
			init(){
				this.getList()	
				this.setIllnessType()	
			},
			setIllnessType(){
				getIlltype().then((result) => {
					let illnessTypes=result.data;
					illnessTypes=illnessTypes.map((item)=>{
						return item.typename
					})
					illnessTypes.unshift('全部病症类型');
					this.illnessTypes = illnessTypes;
				})			
			},
			filterHandle(){
				this.showMorefilter=!this.showMorefilter;
			},
			getList(){
					let accountInfo=uni.getStorageSync('accountInfo');
					let patientId=accountInfo.id;
					let keyword=this.keyword;
					let illnessTypeIndex=this.illnessTypeIndex;
					let illnessType=this.illnessTypes[illnessTypeIndex];
					if(illnessTypeIndex<1){
						illnessType="";
					}
					// let startTime=formatTime(this.time[0]);
					// let endTime=formatTime(this.time[1]);  
					let page= this.pageNumber;   
					let limit=this.pageSize;  
					const maxAge = 60;
					const minAge = 20;	
					var dictionaries={};
					treatmentList({
					  keyword,page,limit,patientId,illnessType
					}).then((res)=>{
						let list=res.data.list;
						let age="";
						let items=list.map((item)=>{
						if(dictionaries.hasOwnProperty(item.patientName)){
							age=dictionaries[item.patientName]
						}else{
							age=dictionaries[item.patientName]=Math.floor(Math.random()*(maxAge-minAge+1)+minAge);
						}				  
						  return{
							  id:item.treatmentId,
							  name:item.doctorName,
							  time:item.seekTime,
							  gender:item.doctorSex,
							  illnessType:item.illnessType,
							  age
						  }
						});
					  //this.total=res.data.totalCount;						
						this.items=items;
					})
			},
			search(){
				this.pageNumber=1;
				this.getList();
			},
			showdetail(id){
				uni.navigateTo({
					url:`/views/detail/index?type=therapy&user=doctor&id=${id}`
					// #ifdef MP-WEIXIN
					,animationType: 'pop-out',
					animationDuration: 200						
					// #endif		
				})
			},
			createTherapy(){
				uni.navigateTo({
					url:"/views/doctorItems/createPatient/index"
				})
			},
			removeSubmit(id=null){
				removeTreatmentPatient(id).then((res)=>{
					console.log(res)
				})
			},
			changeIllnessType({detail}){
				this.illnessTypeIndex=detail.value;
				this.search();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		.search{
			height: 100upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20upx;
			.inp{
				width: 350upx;
				height: 60upx;
				display: flex;
				justify-content:flex-start;
				align-items: center;	
				input{
					height: 100%;
					margin-left: 14upx;
					display: inline-block;
					font-size: 24upx;
					color: #999999;
					&::-webkit-input-placeholder {
						font-size: 24upx;
						color: #999999;
					}				
				}				
			}
			.searchBt{
				button{
					width: 130upx;
					height: 60upx;
					line-height: 60upx;
					background-color: #3384FF;
					text-align: center;
					color: #fff;
					font-size: 24upx;
				}
			}
		}
		.more-filter{
			padding: 20upx;
			border-top: 1px solid #eaeaea;
			.filterBt{
				padding-left: 20upx;
				.zhcx-iconfont{
					font-size: 16upx;
					padding-left: 10upx;
				}
			}	
			.uni-input{
				border: 1px solid #ccc;
				display: inline-block;
				padding: 10upx 20upx;
			}
		}	
		.tab-cont{
			&{
				padding-bottom: 30upx;	
				background-color: #fff;										
			}
			.item-container{
				border-top: 1px solid #eaeaea;
				.item{
					position: relative;
					padding: 20upx;
					background-color: #fff;
					// margin-bottom: 10upx;
					border-bottom: 1upx solid #eaeaea;
					.avatar{
						overflow: hidden;
						position: absolute;
						left: 20upx;
						top: 20upx;
						&,.pic{
							width: 86upx;
							height: 86upx;	
							border-radius: 50%;
						}
					}
					.item-info{
						margin-left: 120upx;
						line-height: 1;
						.user{	
							display: flex;
							justify-content: flex-start;
							align-items: center;						
							.name{
								color: #333;
								font-size: 30upx;
								width: 300upx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
							.gender{
								position: relative;
								padding:0 30upx;
								&::after{
									width: 16upx;
									height: 16upx;
									border-radius: 50%;
									position: absolute;
									left: 10upx;	
									top: 50%;
									transform: translateY(-50%);
									background-color: #1890FF;
									display: block;
									content: "";
								}
								&.woman::after{
									background-color: red;
								}
							}					
						}	
						.illnessType{
							padding-top:24upx;
							color: #424242;
							font-size: 28upx;								
						}									
						.time{
							color: #999;
							font-size: 28upx;
							padding-top: 24upx;
						}
					}				
				}
			}
		}
		.createBt{
			width:110upx;
			height: 110upx;
			border-radius: 50%;
			background-color: #1890FF;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			position: fixed;
			right: 20upx;
			bottom: 150upx;
			box-shadow: 0 0 2px #65c4ff;
			z-index: 99;
			&.h5{
				bottom: 160upx;
			}
			.icon{
				width: 45upx;
				height: 45upx;
				position: relative;
				&::after{
					width: 45upx;
					height: 4upx;				
					display: block;
					content: "";
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background-color: #fff;
				}
				&::before{
					width: 4upx;
					height: 45upx;				
					display: block;
					content: "";
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					background-color: #fff;
				}			
			}
			.word{
				font-size: 24upx;
				padding-top: 4upx;
			}
		}
	}
</style>