CBB3/pages/chat/search.vue

<template>
	<view class="app">
		<view id="app-top">
			<uni-nav-bar statusBar backgroundColor="#f8f8f8" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="搜索聊天信息" >
			</uni-nav-bar>  
			<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>
			<scroll-view class="pop-win-scroll" :style="'height:calc(100vh - ' + barheight + 'px)'" scroll-y :scroll-into-view="toView" scroll-with-animation='true'  show-scrollbar="false" >
				<view class="item fx-r fx-bc" @tap="tapItem(item)" v-for="(item,index) in data">
					<image :src="utils.getAvatar(item.img,item.chat_type)" mode="aspectFill"></image>
					<view class="info fx-h fx-ac">
						<view class="nickname">{{item.name}}</view>
						<rich-text class="title" :nodes="getRanValue(item.data)"></rich-text>
					</view>
				</view>
			</scroll-view>
		</view>
	</template>
	
	<style>
		.search-view{background: #fff;margin-top: 1px;padding: 10px;}
		.search-view .u-input{width: 100%;}
		
		.pop-win-scroll{height:calc(100% - 60px);margin-top: 1px;}
		.pop-win-scroll .item{background: #fff;padding:0 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;}
		
	</style>
<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['user','sysData']),
	    data() {
	        return {
				barheight	: 40,
				toView		: "",
				data		: [],
				popKeyword	: "",
				groupId		: 0
	        }  
	    },
		onLoad(option){
			this.groupId = option.groupId || 0;
			this.$nextTick(() => {
				uni.createSelectorQuery().select("#app-top").boundingClientRect(res=>{
					this.barheight = res.height;
				}).exec();
			});
		},
		onUnload() {
		//	uni.$off('groupSendClose');
		},
		
	    methods: {
			
			/**
			 * 配置数据
			 */
			getData:function(){
				this
					.request
					.post("chatSearchMsg",{keyword : this.popKeyword,groupId:this.groupId})
					.then(res=>{
						if(res.code == 200) {
							this.data = res.data;
						} else {
							uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
						}
					});
			},
			
			tapPopKeyWord:function(){
				if(this.popKeyword == '') return;
				this.getData();
			},
			/**
			 * 搜索聊天信息
			 * @param {Object} item
			 */
			tapItem:function(item){
				//聊天分组
				if(item.chat_type == 'chat') {
					uni.navigateTo({
						url:'chat?groupId=' + item.group_id + '&usercode=' + item.f_uid + "&msgId=" + item.msgId + "&nid=" + item.nid
					})
				}
				
				//聊天分组
				if(item.chat_type == 'group_chat') {
					uni.navigateTo({
						url: 'chatGroup?groupId=' + item.group_id + '&usercode=' + item.f_uid + "&msgId=" + item.msgId + "&nid=" + item.nid
					})
				}
			},
			/**
			 * 遍历字符串
			 */
			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>