CBB3/pages/chat/group/add.vue

<template>
	<view>
		<view id="app-top">
			<uni-nav-bar statusBar backgroundColor="transparent" 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="search fx-r fx-bc">
				<image src="/static/chat/tb-seach.png"></image>
				<input @input="tapKeyWord" class="fx-g1" type="text" placeholder="搜索联系人" />
			</view>
		</view>
		
		
		<scroll-view class="search-view" :style="'height: calc(100vh - ' + barheight + 'px);'" scroll-y :scroll-into-view="toView" scroll-with-animation='true'  show-scrollbar="false" >
			<view class="lists">
				<view v-for="(item,index) in letter">
					<view class="letter" :id="'letter_' + item.letter">{{item.letter}}</view>
					<view class="item fx-r fx-bc" @tap="tapSelect(index,index2)" v-for="(item2,index2) in item.data">
						<image class="select" v-if="!item2.select" src="/static/chat/check.png" mode="widthFix"></image>
						<image class="select" v-else src="/static/chat/check-btn.png" mode="widthFix"></image>
						<image class="avatar" :src="item2.avatar == '' ? '/static/chat/user-avatar.png' : item2.avatar" mode="aspectFill"></image>
						<view class="info fx-h fx-ac">
							<rich-text class="title" :nodes="getRanValue(item2.remark || item2.nickname)"></rich-text>
						</view>
					</view>
				</view>
				
				<view class="foot-value">{{count}}个朋友</view>
			</view>
			
			
		</scroll-view>
		
		<view class="SideMenu" >
			<view  @tap="tapOpenLetter(item.letter)" v-for="(item, index) in letter"> {{item.letter}} </view>
		</view>
		
		<view class="choice" v-if="isChoice">{{choice}}</view>
		<u-modal :show="isShow"  :showCancelButton="true" @confirm="tapSubmit2" @cancel="isShow=false" title="群名称">
			<view class="slot-content" style="width: 90%;">
				<u--input clearable placeholder="请输入创建群名" v-model="group_name" border="surround"></u--input>
			</view>
		</u-modal>
		
		
	</view>
</template>
<style lang="scss">
	.sub-btn{color: #fff;background:$ic-appcolor;padding: 8px;border-radius: 4px;}
	.search{background: #fff;border-radius: 6px;margin: 0px 10px;padding: 10px;}
	.search image{width: 30px;height: 30px;}
	.search input{font-size: 14px;}
	.search-view{height: calc(100% - 50px)}
	.search-view .lists{margin-top: 10px;}
	.search-view .lists .item{background: #fff;padding:0 10px;position: relative;}
	.search-view .lists .item:active{background: #f1f1f1;}
	.search-view .lists .item .avatar{width: 40px;height: 40px;border-radius: 50%;}
	.search-view .lists .item .info{width: calc(100% - 100px);margin-left: 10px;font-size: 14px;color:#787878;border-bottom: 1px solid #f1f1f1;height: 60px;}
	.search-view .lists .item .flg{background: #ff5857;width: 20px;height: 20px;border-radius: 50%;font-size: 10px;text-align: center;line-height: 20px;color: #fff;}
	.search-view .lists .item .select{width: 18px;height: 18px;margin-right: 8px;}
	.search-view .lists .item:last-child .info{border-bottom: 0;}
	
	.search-view .letter{padding: 10px;}
	
	.SideMenu {
		position: fixed;
		top: 50%;
		right: 0;
		padding: 20rpx 0rpx;
		width: 45rpx;
		transform: translate(0,-50%);
		z-index: 1;
	}
	.SideMenu view {
		height: 30rpx;
		display: block;
		padding: 4rpx 0;
		wdith:45rpx;
		color: #000;
		text-align: center;
		font-size: 22rpx;
	}
	.foot-value{height:60px;line-height: 60px;font-size: 14px;text-align: center;color:#787878;}
</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']),
			data() {
				return {
					dataAr  : [],
					letter  : [],
					count   : 0,
					keyword : "",
					isChoice : false,
					choice   : "",
					toView:"",
					barheight : 0,
					isShow:false,
					group_name:""
				}
			},
			onLoad() {
				this.checkUserLogin({
					page:this,isLogin:true,fn:this.initView
				});
				this.$nextTick(() => {
					uni.createSelectorQuery().select("#app-top").boundingClientRect(res=>{
						this.barheight = res.height;
					}).exec();
				});
				//app-top
			},
			methods: {
				...mapMutations(['checkUserLogin','setSys']),
				/**
				 * 
				 */
				initView:function(){
					this
						.request
						.get("FriendIndex")
						.then(res=>{
							if(res.code == 200) {
								for(var i in res.data){
									res.data[i].select = false;
								}
								this.dataAr = res.data;
								this.letterView();
							} else {
								this.utils.showModal(res.msg);
							}
						});
				},
				/**
				 * 检索关键词
				 */
				tapKeyWord:function(ev){
					this.keyword = ev.detail.value;
					this.letterView();
				},
				//字母
				letterView:function(){
					var tAr = {};
					for(var i in LetterList) {
						var letter = LetterList[i];
						for(var j in this.dataAr) {
							var jAr = this.dataAr[j];
							if(jAr.letter == letter && (jAr.nickname.indexOf(this.keyword) >= 0 || jAr.remark.indexOf(this.keyword) >= 0 )) {
								if(tAr[letter] != null) {
									tAr[letter].data.push(jAr);
								} else {
									tAr[letter] = {'letter':letter,'data':[jAr]};
								}
							}
						}
					}
					var count = 0;
					var nAr = [];
					for(var j in tAr) {
						nAr.push(tAr[j]);
						count += tAr[j].data.length;
					}
					this.letter = nAr;
					this.count = count;
			  },
			  tapSelect:function(index,index2){
				var bool = this.letter[index].data[index2].select;
				this.$set(this.letter[index].data[index2],'select',!bool);
			  },
			  inAr:function(){
				  var count = 0;
					for(var i in this.letter) {
						for(var j in this.letter[i].data) {
							if(this.letter[i].data[j].select) {
								count += 1;
							}
						}
					}
				return count > 0 ? ("(" +  count+ ")") : "";
			  },
			  /**
			   * 遍历字符串
			   */
			  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
				 }
			  },
			  /**
			   * 打开字母
			   */
			  tapOpenLetter:function(item){
				  this.isChoice = true;
				  this.choice = item;
				  setTimeout(()=>{this.isChoice = false;},500);
				  this.toView = "letter_" + item;
			  },
			  /**
			   * 打开
			   * @param {Object} ev
			   */
			  tapOpen: function(ev) {
			  	let url = ev.currentTarget.dataset.url;
			  	this.utils.navigateTo(url);
			  },
			  
			  /**
			   * 提交创建
			   */
			  tapSubmit:function(){
				var idsAr = [];
				for(var i in this.letter) {
					for(var j in this.letter[i].data) {
						if(this.letter[i].data[j].select) {
							idsAr.push(this.letter[i].data[j].f_uid);
						}
					}
				}
				if(idsAr.length < 1) {
					return this.utils.Tip("群聊不能少于1人");
				}  
				this.group_name = "";
				this.isShow = true;
			  },
			  
			  tapSubmit2:function(){
				  if(this.group_name == "") {
					  return this.utils.Tip("请输入群名");
				  }
				  var idsAr = [];
				  for(var i in this.letter) {
				  	for(var j in this.letter[i].data) {
				  		if(this.letter[i].data[j].select) {
				  			idsAr.push(this.letter[i].data[j].f_uid);
				  		}
				  	}
				  }
				  this.isShow = false;
				  uni.showLoading({ title:"创建中" });
				  this
				  	.request
				  	.post("GroupCreate",{usercodes:idsAr.join(","),group_name:this.group_name})
				  	.then(res=>{
				  		uni.hideLoading();
				  		if(res.code == 200) {
				  			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});
				  	});
			  }
			  
			  
		   }
		}
	</script>
	
	<style>
			.app{width: 100vw;height: 100vh;}
			/* #ifdef H5 */
			.app{height: calc(100vh - 95px);}
			/* #endif */
			.app-run .text{font-size: 24px;font-weight: bold;color: #737373;}
			
			.choice {
				width: 110rpx;
				height: 110rpx;
				position: fixed;
				top: 40%;
				left: 50%;
				transform: translate(-50%,-50%);
				background: rgba(0,0,0,0.3);
				color: #fff;
				border-radius: 20rpx;
				text-align: center;
				line-height: 110rpx;
				font-size: 45rpx;
				z-index: 2;
			}
			
	</style>