CBB3/pages/chat/group/info/groupInfo/user.vue

<template>
	<view class="app">
			<view class="top" id="app-top"> 
				<view class="search-view fx-h fx-bc fx-ac">
						<u--input
								placeholder="搜索联系人"
								prefixIcon="search"
								clearable
								border="none"
								prefixIconStyle="font-size: 22px;color: #909399"
								v-model="popKeyword"
								@input="tapPopKeyWord"
							></u--input>
					</view>
			</view>
			
			<view class="pop-win-scroll">
				<view class="item fx-r fx-bc" @tap="tapItem(item)" v-for="(item,index) in data">
					<image :src="item.avatar == '' ? '/static/chat/user-avatar.png' : item.avatar" mode="aspectFill"></image>
					<view class="info fx-h fx-ac">
						<rich-text class="nickname" :nodes="getRanValue(item.nickname)"></rich-text>
						<view class="manager" v-if="item.is_manager">群主</view>
						<view class="admin" v-else-if="item.is_admin">管理</view>
					</view>
				</view>
				<view class="loading fx-r fx-ac fx-bc" v-if="page.isFrite && !page.isFoot">
					<image src="/static/chat/xloading.png"></image>
					<text>正在载入更多...</text>
				</view>
				<view class="loading complete" :hidden="!page.isFoot">已加载全部</view>
			</view>
			
		</view>
	</template>
	
	<style>
		.top{background: #F8F6F6;position: fixed;z-index: 99;width: 100%;}
		.search-view{background: #fff;margin-top: 1px;padding: 10px;margin: 10px;border-radius: 6px;}
		.search-view .u-input{width: 100%;}
		
		.pop-win-scroll{ padding-top: 60px;}
		.pop-win-scroll .item{background: #fff;padding:10px 10px;position: relative;}
		.pop-win-scroll .item:active{background: #f1f1f1;}
		.pop-win-scroll .item image{width: 40px;height: 40px;border-radius: 50%;}
		.pop-win-scroll .item .info{width: calc(100% - 70px);padding: 10px 0;margin-left: 10px;font-size: 14px;color:#787878;border-bottom: 1px solid #f1f1f1;}
		.pop-win-scroll .item .info .title{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
		.pop-win-scroll .item .flg{background: #ff5857;width: 20px;height: 20px;border-radius: 50%;font-size: 10px;text-align: center;line-height: 20px;color: #fff;}
		.pop-win-scroll .item:last-child .info{border-bottom: 0;}
		.pop-win-scroll .letter{padding: 10px;background: #F8F6F6;}
		
		.manager{border: 1px solid #faac06;border-radius: 6px;font-size: 10px;padding:0px 6px;color: #faac06;background: #fff;width: 30px;text-align: center;}
		.admin{border: 1px solid #2fbec0;border-radius: 6px;font-size: 10px;padding:0px 6px;color: #2fbec0;background: #fff;width: 30px;text-align: center;}
		
	</style>
<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
	    data() {
	        return {
				barheight	: 40,
				toView		: "",
				data		: [],
				tvData		: [],
				groupId		: 0,
				popKeyword	: "",
				mbAr        : {},
				page:{
					isFirst:false,
					isLoad:false,
					isFoot:false,
					page:1
				}
	        }  
	    },
		onLoad(option){
			this.$nextTick(() => {
				uni.createSelectorQuery().select("#app-top").boundingClientRect(res=>{
					this.barheight = res.height;
				}).exec();
			});
			this.groupId = option.groupId;
			this.getData();
		},
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();
		},
				
	    methods: {
			
				
			tapPopKeyWord:function(ev){
				this.page = {page:1,isLoad:false,isFoot:false};
				if(this.mbAr[this.popKeyword] != null) {
					this.data = this.mbAr[this.popKeyword];
				} else {
					this.getData(true);
				}
			},
			
		
			getData:function(isPull = false){
				this
					.request
					.post("chatGroupUser",{groupId : this.groupId,page : this.page.page,keyword : this.popKeyword})
					.then(res=>{
						if(res.code == 200) {
							this.page.isFrite = true;
							this.page.isLoad = false;
							if(isPull) {
								this.data = res.data.list;
							} else {
								this.data = this.data.concat(res.data.list);
							}
							//是否到底
							if(res.data.list.length != res.data.pageSize) {
								this.page.isFoot = true;
							} 
							
							if(this.page.page == 1 && this.popKeyword != ''){
								this.mbAr[this.popKeyword] = res.data.list;
							}	
								
							
							//this.tapPopKeyWord();
						} else {
							uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
						}
					});
			},
			/**
			 * 搜索聊天信息
			 * @param {Object} item
			 */
			tapItem:function(item){
				uni.navigateTo({
					url: 'msgView?groupId=' + this.groupId + '&usercode=' + item.uid
				})
			},
			/**
			 * 遍历字符串
			 */
			getRanValue:function(str) {
						 let value = str;
						 if (value.indexOf(this.popKeyword)!==-1) {
						 	let reg = new RegExp(this.popKeyword, 'gi')
						 	return value.replace(reg, `<font style="color:#2fbec0">${this.popKeyword}</font>`)
						 } else {
						 	return value
						 }
			},
			
	    }
	}
</script>