CBB3/pages/chat/friend/index.vue

<style>
	.search{background: #fff;border-radius: 6px;margin: 0px 10px;padding: 10px;}
	.search image{width: 30px;height: 30px;}
	.search input{font-size: 14px;}
	.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 image{width: 40px;height: 40px;border-radius: 50%;}
	.search-view .lists .item .info{width: calc(100% - 70px);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: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>
<template>
	<view class="app">
		<uni-nav-bar statusBar backgroundColor="transparent" fixed title="我的好友" left-icon="left" @clickLeft="utils.navigateBack()" />
		
		<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>
		
		<scroll-view class="search-view" :style="'height: calc(100% -  80px)'" scroll-y :scroll-into-view="toView" scroll-with-animation='true'  show-scrollbar="false" >
			<view class="lists">
				<view class="item fx-r fx-bc" v-for="(item,index) in sysData.serviceAr">
					<image src="/static/chat/ic_customer_chat.png" mode="widthFix"></image>
					<view class="info fx-h fx-ac">
						<view class="title">官方客服{{index + 1}}</view>
					</view>
				</view>
				
				<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="tapOpen" :data-url="'info?usercode=' + item2.f_uid"  v-for="(item2,index2) in item.data">
						<image :src="item2.avatar == '' ? '/static/img/user-avatar1.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>
		
	</view>
</template>

  
<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:""
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.checkUserLogin({
				page:this,isLogin:true,fn:this.initView
			})
		},
		methods: {
			...mapMutations(['checkUserLogin','setSys']),
			/**
			 * 
			 */
			initView:function(){
				this
					.request
					.get("FriendIndex")
					.then(res=>{
						if(res.code == 200) {
							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;
		  },
		  /**
		   * 遍历字符串
		   */
		  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);
		  },
		  
		  
		  
	   }
	}
</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>