yxk_h5_master/pages/reimApply/peopleSearch.vue

<template>
	<view class="page">
		<view v-for="(item,index) in listCards" :key="index" class="example-box myContainer myContentBox"  @click="selectPeople(item,index)">
			<view class="name_">{{item.NAME}}</view>
			<view class="user_container">
				 <img src="../../static/img/user2.png">
				 <view class="username">{{item.deptName}}</view>
			</view>
			<view class="user_container">
				 <img src="../../static/img/phone.png">
				 <view class="username">{{item.mobile}}</view>
			</view>
		</view>
		<uni-load-more  :status="loading_status" v-if="!show_no"></uni-load-more>
		<xinsoft-no-record noRecordContent="暂无满足条件的内容,请输入关键字重新搜索" v-if='show_no'></xinsoft-no-record>
	</view>
</template>

<script>
	import uniIcons from '@/components/uni-icons/uni-icons.vue'
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	import xinsoftNoRecord from '@/components/xinsoft-no-record/xinsoft-no-record.vue';
	export default {
		components: {
			uniIcons,
			uniLoadMore,xinsoftNoRecord
		},
		data() {
			return {
				id:'',
				search_text:'',
				listCards: [],
				themeColor: '#000000',
				titleColor: '#666666',
				pagenumber:1,//当前第几页
				pagesize:20,//每页加载数据条数
				loading_status: 'more',//more（loading前）、loading（loading中）、noMore（没有更多了）
				show_no:false,
				flag:'',
			}
		},
		onLoad(option) {
			// this.flag = option.flag;
		},
		created() {
			this.getDateList();
		
		},
		//滚动到底部加载下一页
		onReachBottom(obj){
			if(this.loading_status=='noMore'){
				return false;
			}
			this.pagenumber++;
			this.getDateList();
		},
		//下拉刷新
		onPullDownRefresh(){
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.show_no=false;
			this.getDateList();
			  
		},
		methods: {
			//获取列表数据
			getDateList(){
				this.loading_status="loading";
				var filterRes = {};
				filterRes.pageno = this.pagenumber;
				filterRes.pagesize = this.pagesize;
				filterRes.query=this.search_text;
				this.$http.request({
					url: '/apis/user/list',
					params: filterRes,
					method:"GET"
				}).then(res => {
					uni.stopPullDownRefresh();
					if(!res.data.data){
					this.loading_status="noMore";
					}else if(res.data.data.datas.length<this.pagesize){
						this.loading_status="noMore";
					}else{
						this.loading_status="more";
					}
					
					if (res.data.code == 0) {
						this.listCards = this.listCards.concat(res.data.data.datas);
						}
				}).catch(err => {
					this.loading_status="noMore";
					uni.showToast({
						title: '获取信息失败',
						duration: 2000,
						icon:"none"
					});
				});
			},			
			//点击搜索 实现效果  这里需要根据情况判断。处理方式和前面差不多。
			selectPeople(item,index){
				
				var arrays = [
					{
						userId :item.userId,
						name:item.NAME
					}
				];
				var reimInfo =  uni.getStorageSync('reimInfo');
				if(!reimInfo){
					reimInfo = {}
				}
				reimInfo.targetList = arrays;
				uni.setStorage({
					key: 'reimInfo',
					data: reimInfo,
					success: function () {
						uni.navigateTo({
						    url: 'addReimApplyStep'
						});
					}
				});
			}
		},
		onPageScroll : function(e) {  
			uni.hideKeyboard()
		},
		//搜索框文本变化
		onNavigationBarSearchInputChanged(n){
			this.search_text=n.text;
		},
		//点击软键盘搜索按钮
		onNavigationBarSearchInputConfirmed(){
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.show_no=false;
			this.getDateList();
		},
		//点击搜索按钮
		onNavigationBarButtonTap(obj) {
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.show_no=false;
			this.getDateList();
		}
	}
</script>

<style scoped>
	.example-box{
		position: relative;
		padding: 30upx;
		display: block;
	}
	>>>.noRecord{
		padding-top: 30%;
		margin-top: 0 !important;
	}
	.user_container{
		position: relative;
		float: left;
		margin-top: 20upx;
		font-size: 24upx;
		color: #999;
		padding-left: 52upx;
		box-sizing: border-box;
		line-height: 32upx;
		height: 32upx;
		margin-right: 40upx;
	}
	.user_container img{
		position: absolute;
		left: 0;
		display: inline-block;
		float: left;
		width: 32upx;
		height: 32upx;
	}
	.username{
		line-height: 32upx;
	}
</style>