xiaoyou-h5/pages/mine/search.vue

<template>
	<view class="search">
		<view class="top" v-if="is_show">
			<text class="warning">以下条件至少填写一个！</text>
			<view class="item">
				<text>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</text>
				<u-input class="input" v-model="form.name" type="text" />
			</view>
			<view class="item" @click="is_sex=!is_sex">
				<text>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别</text>
				<view class="choose">
					 {{form.sex == '' || form.sex == undefined? '请选择':form.sex ==1?'男':form.sex == 2?'女':'请选择'}}
				</view>
			</view>
			<u-picker v-model="is_sex" mode="selector" :range="sex_type" @confirm="choose_sex"></u-picker>
			<view class="item">
				<text>硕士单位</text>
				<u-input class="input" v-model="form.master_units" type="text" />
			</view>
			<view class="item">
				<text>工作地址</text>
				<u-input class="input" v-model="form.work_address" type="text" />
			</view>
			<!-- <u-picker v-model="is_school" mode="selector" :range="school_type" @confirm="choose_school"></u-picker> -->
			<view class="btn_wrap btn_wrap1">
				<view class="btn" @click="search">
					搜索
				</view>
			</view>
			
		</view>
		<view class="people_wrap" v-if="!is_show">
			<view class="people">
				<view class="empty" v-if="people_list.length == 0" >
					<u-empty text="没有内容哦!" mode="list"></u-empty>
				</view>
				<view class="people_list" v-for="(item,index) in people_list" :key="index"  @click="detail(item)">
					<view class="img">
						<image :src="item.headimg ? item.headimg : '../../static/images/avater.jpg'"
							mode=""></image>
					</view>
					<view class="right">
						<text>{{item.name}}</text>
						<view class="label">
							<text class="sex">{{item.sex_text}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="btn_wrap" >
				<view class="btn" @click="re_search">
					重新搜索
				</view>
			</view>
			<u-popup v-model="is_detail" mode="center" border-radius="42" width="85%" @close="close">
				<view class="student-show">
					<view class="stu-title">
						校友基本信息
					</view>
					<view class="stu-mess">
						<image :src="stu_detail.headimg ? stu_detail.headimg : '../../static/images/avator.png'" mode="">
						</image>
						<view class="right">
							<view class="stu-text">
								姓名：{{stu_detail.name}}
							</view>
							<view class="stu-text">
								性别：{{stu_detail.sex ? stu_detail.sex == 1?'男':'女' :'未知'}}
							</view>
							<view class="stu-text">
								学号：{{stu_detail.account}}
							</view>
							
							<view class="stu-text">
								手机号：{{stu_detail.mobile ? stu_detail.mobile :'--'}}
							</view>
				
						</view>
					</view>
					<view class="stu-text1">
						硕士单位：{{stu_detail.master_units ? stu_detail.master_units : '--'}}
					</view>
					<view class="stu-text1">
						现工作单位：{{stu_detail.work_units ? stu_detail.work_units : '--'}}
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				form:{
					page:1,
				},
				people_list:[
					{
						name:'丽丽',
						headimg:'../../static/images/avater.jpg',
						sex_text:'女'
					},
					{
						name:'丽丽',
						headimg:'../../static/images/avater.jpg',
						sex_text:'女'
					}
				],
				is_sex:false,
				sex_type:['请选择','男','女'],
				// school_type:['河南中医药大学'],
				// is_school:false,
				last:false,
				is_show:true,
				is_detail:false,
				stu_detail:{}
			}
		},
		onLoad() {
			this.form.page = 1
			this.people_list = []
			this.last = false
		},
		onReachBottom() {
			console.log(this.last, 'lasts')
			if (!this.last) {
				this.form.page++
			}
			console.log(this.form.page)
			this.getPeople()
		},
		methods:{
			choose_sex(e){
				console.log(e)
				this.form.sex = e
			},
			choose_school(e){
				console.log(e)
				this.form.school = this.school_type[e]
			},
			search(){
				console.log(this.form,'form')
				if(this.form.name||this.form.sex||this.form.school||this.form.work_address){
					this.people_list = []
					this.getPeople()
					this.is_show = false
				}else{
					uni.showToast({
						title:'请输入查找条件',
						icon:'none'
					})
				}
				
			},
			re_search(){
				this.is_show = true
				this.form = {page:1}
			},
			getPeople() {
				this.$u.get('/page/organization-people',this.form).then(res => {
					console.log(res, '成员')
			
					let data = res.data.data
					if (this.form.page > 1 && data.length == 0) {
						uni.showToast({
							title: '暂无更多',
							icon: 'none'
						})
						this.last = true
					} else {
						this.people_list = this.people_list.concat(data)
					}
				})
			},
			detail(item){
				console.log(item,'item')
				this.is_detail = true
				this.stu_detail = item
			},
			close() {
				this.stu_detail = {}
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f1f1f1 !important;
		// padding: 16px 0;
		// background-color: #fff;
	}
	.search{
		.top{
			background-color: #fff;
			padding: 0 16px;
			.warning{
				display: block;
				width: 100%;
				text-align: center;
				color: #CD5C5C;
				padding-top: 10px;
			}
			.item{
				display: flex;
				align-items: center;
				height: 50px;
				border-bottom: 1px solid #eee;
				&:last-child{
					border-bottom: none;
				}
				text{
					font-size: 16px;
					margin-right: 10px;
				}
				::v-deep .input{
					.u-input__input{
						color: #C0C4CC !important;
					}
				}
				.choose{
					color: #C0C4CC;
					
				}
			}
			.btn_wrap{
				text-align: center;
				margin-top: 20px;
			}
			.btn_wrap1{
				
				padding-bottom: 20px;
			}
			.btn{
				display: inline-block;
				width: 200px;
				height: 40px;
				line-height: 40px;
				border-radius: 20px;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				color: #fff;
				background-color: rgba($color: #84705E, $alpha: 0.8);
			}
		}
		.people_wrap{
			padding-bottom: 40px;
		.people {
			padding:0 10px;
			&:first-child {
				margin-top: 20px;
			}
			.empty{
				height: 80vh;
			}
			.people_list {
				height: 79px;
				background: #FFFFFF;
				box-shadow: 0px 8px 12px rgba(12, 20, 61, 0.12);
				border-radius: 10px;
				display: flex;
				align-items: center;
				margin-bottom: 10px;
		
				.img {
					width: 55px;
					height: 55px;
					border-radius: 50%;
					overflow: hidden;
					margin: 0 8px 0 20px;
		
					image {
						width: 55px;
						height: 55px;
					}
				}
		
				.right {
					text {
						font-size: 15px;
						font-family: Graphit;
						font-weight: 500;
						color: #282828;
					}
		
					.label {
						margin-top: 8px;
		
						text {
							display: inline-block;
							width: 44px;
							height: 18px;
							line-height: 18px;
							text-align: center;
							background: #E7E2DD;
							border-radius: 9px;
							font-size: 12px;
							font-family: PingFang HK;
							font-weight: 400;
							color: #674023;
							margin-right: 8px;
						}
					}
				}
			}
		}
		
		.btn_wrap{
				position: fixed;
				bottom: 0px;
				width: 100%;
			}
			.btn{
				display: inline-block;
				// width: 160px;
				width: 100%;
				height: 40px;
				line-height: 40px;
				// border-radius: 20px;
				text-align: center;
				font-size: 18px;
				font-weight: bold;
				color: #fff;
				background-color: rgba($color: #84705E, $alpha: 1);
			}
		}
		//查看学生信息弹框
		.student-show {
			padding-bottom: 15px;
		
			.stu-title {
				font-size: 20px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 1;
				text-align: center;
				padding: 20px 0 20px;
			}
		
			.stu-mess {
				display: flex;
				padding: 0 22px;
		
				image {
					height: 75px;
					width: 75px;
					margin-right: 14px;
					border-radius: 9px;
				}
		
				.right {
					flex: 1;
		
					.stu-text {
						font-size: 13px;
						font-family: PingFang SC;
						font-weight: 400;
						line-height: 20px;
						color: #282828;
						overflow: hidden;
						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
						text-overflow: ellipsis; //溢出部分用省略号代替
						-webkit-line-clamp: 2; //设置文本显示两行
						-webkit-box-orient: vertical; //从上到下排列子元素;
						white-space: normal;
		
					}
				}
			}
			.stu-text1{
				padding: 0 20px;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #282828;
				margin-top: 10px;
				// line-height: 36px;
			}
		
			.e-mail {
				margin: 10px 22px 0px;
				height: 36px;
				line-height: 36px;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: bold;
				color: rgba(40, 40, 40, .78);
				border-bottom: 1px solid rgba(112, 112, 112, .06);
			}
		
			.remark-title {
				margin: 10px 22px 0px;
				padding: 5px;
				font-size: 13px;
				font-family: PingFang SC;
				font-weight: bold;
				line-height: 20px;
				color: #282828;
				opacity: 0.61;
			}
		
			.remark {
				margin: 0px 22px 22px;
				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 20px;
				color: #282828;
				opacity: 0.54;
				padding: 5px;
				overflow: hidden;
				display: -webkit-box; //将对象作为弹性伸缩盒子模型显示;
		
				text-overflow: ellipsis; //溢出部分用省略号代替
		
				-webkit-line-clamp: 3; //设置文本显示两行
		
				-webkit-box-orient: vertical; //从上到下排列子元素;
		
				white-space: normal;
				// border-bottom: 1px solid rgba(112, 112, 112, .06);
			}
		}
	}
</style>