yxk_h5_master/pages/month/peopleSearch.vue

<template>
	<view class="page">
		<view class="mybox" v-if="listCards.length>0">
			<view v-for="(item,index) in listCards" :key="index" class="people-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"></uni-load-more>
		</view>
		<view class="mybox" v-else>
			<xinsoft-no-record noRecordContent="暂无满足条件的内容,请输入关键字重新搜索" ></xinsoft-no-record>
		</view>
		<view class="goHome" @click='goMain("monthInfo")'>
			<img src="../../static/img/gohome.png">
		</view>
	</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: [],
				pagenumber:1,//当前第几页
				pagesize:20,//每页加载数据条数
				loading_status: 'more'//more（loading前）、loading（loading中）、noMore（没有更多了）
			}
		},
		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.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";
				});
			},			
			//点击搜索 实现效果  这里需要根据情况判断。处理方式和前面差不多。
			selectPeople(item,index){
				var _this = this;
				var monthInfo =  uni.getStorageSync('monthInfo');
				if(!monthInfo){
					monthInfo = {}
				}
				monthInfo.targetList =  [{
					user_id :item.userId,
					name:item.NAME
				}];
				uni.setStorage({
				    key: 'monthInfo',
				    data: monthInfo,
				    success: function () {
				        uni.navigateTo({
							url: 'addMonth'
						});
				    }
				});
			}
		},
		onPageScroll : function(e) {  
			uni.hideKeyboard()
		},
		//搜索框文本变化
		onNavigationBarSearchInputChanged(n){
			this.search_text=n.text;
		},
		//点击软键盘搜索按钮
		onNavigationBarSearchInputConfirmed(){
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.getDateList();
		},
		//点击搜索按钮
		onNavigationBarButtonTap(obj) {
			this.listCards=[];
			this.pagenumber=1;
			this.loading_status="more";
			this.getDateList();
		}
	}
</script>

<style scoped>
	>>>.noRecord{
		padding-top: 30%;
		margin-top: 0 !important;
	}
</style>