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

<template>
	<view>
		<view class="app">
			<uni-nav-bar statusBar fixed title="设置管理员" left-icon="left" @clickLeft="utils.navigateBack()">
				<view  slot="right" @tap="tapSubmit">
					<view class="sub-btn">完成{{inAr()}}</view>
				</view>	
			</uni-nav-bar>	
				<view class="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="tapSelect(index)" v-for="(item,index) in data">
						
						<view v-if="">
							<view v-if="item.isDisable || item.is_manager">
								<image class="select"  src="/static/chat/radio_buttons_0.png" mode="widthFix"></image>
							</view>
							<view v-else>
								<image class="select" v-if="!item.select" src="/static/chat/check.png" mode="widthFix"></image>
								<image class="select" v-else src="/static/chat/check-btn.png" mode="widthFix"></image>
							</view>
						</view>
						
						<view class="fx-r fx-g1 fx-bc">
							<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>
					<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>
	</view>
</template>
<style lang="scss">
	.sub-btn{color: #fff;background:$ic-appcolor;padding: 8px;border-radius: 4px;}
	.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 .item .select{width: 20px;height: 20px;margin-right: 8px;border-radius: 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';
		var LetterList = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','#'];
		export default {
			computed: mapState(['user','sysData','txbagenum']),
			data() {
				return {
					noData	: [],
					data  	: [],
					groupId	: 0,
					mbAr	: {},
					popKeyword:"",
					page	:{
						isFirst:false,
						isLoad:false,
						isFoot:false,
						page:1
					}
				}
			},
			onLoad(options) {
				this.checkUserLogin({
					page:this,isLogin:true,fn:this.initView
				});
				this.groupId = options.groupId;
				this.noData = JSON.parse(decodeURIComponent(options.notData));
			},
			
			onReachBottom() {
				if(this.page.isFoot || this.page.isLoad) {
					return;
				}
				this.page.page ++;
				this.getData();
			},
			onShow() {
				
			},
			methods: {
				...mapMutations(['checkUserLogin','setSys']),
				/**
				 * 
				 */
				initView:function(){
					this.getData();
				},
				
				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;
								console.log(this.notData);
								for(var j in this.noData) {
									for(var i in res.data.list){
										if(this.noData[j] ==res.data.list[i].uid) {
											res.data.list[i].isDisable = true;
										} else {
											res.data.list[i].isDisable = 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;
								}
										
						} else {
							uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
						}
					});
				},
			  /**
			   * 遍历字符串
			   */
			  getRanValue:function(str) {
				 let value = str;
				 if (value.indexOf(this.keyword)!==-1) {
				 	let reg = new RegExp(this.keyword, 'gi')
				 	return value.replace(reg, `<font style="color:#2fbec0">${this.keyword}</font>`)
				 } else {
				 	return value
				 }
			  },
			  /**
			   * 打开
			   * @param {Object} ev
			   */
			  tapOpen: function(ev) {
			  	let url = ev.currentTarget.dataset.url;
			  	this.utils.navigateTo(url);
			  },
			  tapSelect:function(index){
				if(this.data[index].isDisable)return;
			  	var bool = this.data[index].select;
			  	this.$set(this.data[index],'select',!bool);
			  },
			  /**
			   * 提交创建
			   */
			  tapSubmit:function(){
				var idsAr = [];
				for(var j in this.data) {
					if(this.data[j].select) {
						idsAr.push(this.data[j].uid);
					}
				}
				if(idsAr.length < 0) {
					return this.utils.Tip("请选择添加的人");
				}  
				uni.showLoading({ title:"提交中.." }); 
				this
					.request
					.post("chatGroupAdminAdd",{groupId:this.groupId,usercodes:idsAr.join(",")})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							uni.$emit('groupAdmin','');
							this.utils.Tip("操作成功");
							setTimeout(()=>{uni.navigateBack();},200);
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						console.log(err);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，返回在尝试',showCancel: false});
					});
				
				  
			  },
			  inAr:function(){
			  	var count = 0;
				for(var j in this.data) {
					if(this.data[j].select) {
						count += 1;
					}
				}			  
			  	return count > 0 ? ("(" +  count+ ")") : "";
			},
			  
			  
		   }
		}
	</script>