CBB3/pages/chat/group/info/groupInfo/transfer.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.uid)" 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 lang="scss">
	.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 {
					data  : [],
					groupId	: 0,
					mbAr	: {},
					popKeyword:"",
					page:{
						isFirst:false,
						isLoad:false,
						isFoot:false,
						page:1
					}
				}
			},
			onLoad(options) {
				this.groupId = options.groupId;
				this.checkUserLogin({
					page:this,isLogin:true,fn:this.initView
				});
				this.getData();
			},
			
			
			onReachBottom() {
				if(this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page ++;
				this.getData();
			},
			
			methods: {
				...mapMutations(['checkUserLogin','setSys']),
				
				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});
							}
						});
				},
				
			  /**
			   * 提交创建
			   */
			  tapItem:function(usercode){
				 if(usercode == this.user.id) {
					 return;
				 } 
				  
				this.utils.showModal("你确定要转让群主吗？", ()=>{
					uni.showLoading({ title:"提交数据中..." });
					this
						.request
						.post("GroupTransfer",{groupId:this.groupId,usercode:usercode})
						.then(res=>{
							uni.hideLoading();
							if(res.code == 200) {
								this.utils.Tip("转让成功");
								setTimeout(()=>{
									uni.navigateBack();
								},200);
							} else {
								this.utils.Tip(res.msg);
							}
						})
						.catch(err=>{
							uni.hideLoading();
							this.utils.Tip("加载失败，请重新尝试");
						});
				});  			
			  },
			  /**
			   * 遍历字符串
			   */
			  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>