uniapp页面优化

im-uniapp/components/chat-item/chat-item.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="chat-item" :class="active?'active':''" >
+	<view class="chat-item" :class="active?'active':''">
 		<!--rich-text中的表情包会屏蔽事件，所以这里用一个遮罩层捕获点击事件 -->
 		<view class="mask" @tap="showChatBox()"></view>
 		<view class="left">
@@ -8,13 +8,16 @@
 		</view>
 		<view class="chat-right">
 			<view class="chat-name">
-				<view class="chat-name-text">{{chat.showName}}</view>
+				<view class="chat-name-text">
+					{{chat.showName}}
+					<uni-tag v-if="chat.type=='GROUP'" disabled text="群" size="mini" type="primary"></uni-tag>
+				</view>
 				<view class="chat-time">{{$date.toTimeText(chat.lastSendTime,true)}}</view>
 			</view>
 			<view class="chat-content">
 				<view class="chat-at-text">{{atText}}</view>
 				<view class="chat-send-name" v-show="chat.sendNickName">{{chat.sendNickName+':&nbsp;'}}</view>
-				<rich-text class="chat-content-text"  :nodes="$emo.transform(chat.lastContent)"></rich-text>
+				<rich-text class="chat-content-text" :nodes="$emo.transform(chat.lastContent)"></rich-text>
 			</view>
 		</view>
 	</view>
@@ -70,11 +73,11 @@
 		white-space: nowrap;
 
 		&:hover {
-			background-color: #eeeeee;
+			background-color: #f5f6ff;
 		}
 
 		&.active {
-			background-color: #eeeeee;
+			background-color: #f5f6ff;
 		}
 
 
@@ -83,6 +86,7 @@
 			width: 100%;
 			height: 100%;
 		}
+
 		.left {
 			position: relative;
 			display: flex;
@@ -139,6 +143,7 @@
 				display: flex;
 				line-height: 60rpx;
 				height: 60rpx;
+
 				.chat-at-text {
 					color: #c70b0b;
 					font-size: 24rpx;

im-uniapp/components/chat-message-item/chat-message-item.vue

@@ -207,7 +207,8 @@
 				items.push({
 					key: 'DELETE',
 					name: '删除',
-					icon: 'trash'
+					icon: 'trash',
+					color: '#e64e4e'
 				});
 				if (this.msgInfo.selfSend && this.msgInfo.id > 0) {
 					items.push({
@@ -282,16 +283,16 @@
 						position: relative;
 						line-height: 60rpx;
 						margin-top: 10rpx;
-						padding: 10rpx 20rpx;
+						padding: 8rpx 20rpx;
-						background-color: white;
+						background-color: #eee;
-						border-radius: 10rpx;
+						border-radius: 20rpx;
 						color: #333;
 						font-size: 30rpx;
 						text-align: left;
 						display: block;
 						word-break: break-all;
 						white-space: pre-line;
-						box-shadow: 1px 1px 1px #c0c0f0;
+				
 
 						&:after {
 							content: "";
@@ -301,7 +302,7 @@
 							width: 6rpx;
 							height: 6rpx;
 							border-style: solid dashed dashed;
-							border-color: white transparent transparent;
+							border-color: #eee transparent transparent;
 							overflow: hidden;
 							border-width: 18rpx;
 						}
@@ -460,7 +461,6 @@
 							margin-left: 10px;
 							background-color: #587ff0;
 							color: #fff;
-							box-shadow: 1px 1px 1px #ccc;
 
 							&:after {
 								left: auto;

im-uniapp/components/friend-item/friend-item.vue

@@ -48,7 +48,7 @@
 		white-space: nowrap;
 
 		&:hover {
-			background-color: #eeeeee;
+			background-color: #f5f6ff;
 		}
 
 		.friend-info {

im-uniapp/components/group-item/group-item.vue

@@ -41,7 +41,7 @@
 		background-color: white;
 		white-space: nowrap;
 		&:hover {
-			background-color: #eeeeee;
+			background-color: #f5f6ff;
 		}
 
 		.group-name {

im-uniapp/components/group-rtc-join/group-rtc-join.vue

@@ -1,6 +1,6 @@
 <template>
 	<uni-popup ref="popup" type="center">
-		<uni-popup-dialog mode="base" message="成功消息" :duration="2000" title="是否加入通话?" confirmText="加入"
+		<uni-popup-dialog mode="base"  :duration="2000" title="是否加入通话?" confirmText="加入"
 			@confirm="onOk">
 			<div class="group-rtc-join">
 				<div class="host-info">

im-uniapp/components/pop-menu/pop-menu.vue

@@ -1,9 +1,10 @@
 <template>
-	<view class="pop-menu" @tap="onClose()" @touchmove="onClose" @contextmenu.prevent="">
+	<view>
+		<view class="pop-menu" @tap="onClose()" @contextmenu.prevent=""></view>
 		<view class="menu" :style="menuStyle">
-			<view class="menu-item" v-for="(item) in items" :key="item.key"  @click.prevent="onSelectMenu(item)">
+			<view class="menu-item"  v-for="(item) in items" :key="item.key"  @click.prevent="onSelectMenu(item)">
-				<uni-icons :type="item.icon" size="22"></uni-icons>
+				<uni-icons :type="item.icon" :style="itemStyle(item)" size="22"></uni-icons>
-				<text> {{item.name}}</text>
+				<text :style="itemStyle(item)"> {{item.name}}</text>
 			</view>
 		</view>
 	</view>
@@ -29,6 +30,12 @@
 			},
 			onClose() {
 				this.$emit("close");
+			},
+			itemStyle(item){
+				if(item.color){
+					return `color:${item.color};`
+				}
+				return `color:#4f76e6;`;
 			}
 		}
 	}
@@ -43,7 +50,10 @@
 		bottom: 0;
 		width: 100%;
 		height: 100%;
-		z-index: 9999;
+		background-color: #333;
+		z-index: 99;
+		opacity: 0.5;
+
 	}
 	
 	.menu {
@@ -51,17 +61,19 @@
 		border: 1px solid #b4b4b4;
 		border-radius: 7px;
 		overflow: hidden;
-		box-shadow: 0px 0px 10px #ccc;
+		background-color: #f5f6ff;
-		background-color: #eeeeee;
+		z-index: 100;
-
 		.menu-item {
 			height: 25px;
+			min-width: 150rpx;
 			line-height: 25px;
 			font-size: 18px;
 			display: flex;
 			padding: 10px;
-			align-items: center;
+			justify-content: center;
 			border-bottom: 1px solid #d0d0d8;
 		}
 	}
+
+	
 </style>

im-uniapp/pages.json

@@ -17,8 +17,6 @@
 		"path": "pages/group/group"
 	}, {
 		"path": "pages/mine/mine"
-	}, {
-		"path": "pages/friend/friend-search"
 	}, {
 		"path": "pages/common/user-info"
 	}, {

im-uniapp/pages/chat/chat-box.vue

@@ -782,7 +782,7 @@
 			border: #dddddd solid 1px;
 			overflow: hidden;
 			position: relative;
-			background-color: #f7f8fd;
+			background-color: white;
 
 			.scroll-box {
 				height: 100%;

im-uniapp/pages/chat/chat.vue

@@ -6,12 +6,17 @@
 				<view>消息接收中...</view>
 			</loading>
 		</view>
+		<view class="nav-bar">
+			<view class="nav-search">
+				<uni-search-bar radius="100" v-model="searchText" cancelButton="none" placeholder="搜索"></uni-search-bar>
+			</view>
+		</view>
 		<view class="chat-tip" v-if="!loading && chatStore.chats.length==0">
 			温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
 		</view>
 		<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
 			<view v-for="(chatPos,i) in chatsPos" :key="i">
-				<chat-item v-if="!chatStore.chats[chatPos.idx].delete" :chat="chatStore.chats[chatPos.idx]"
+				<chat-item v-if="isShowChat(chatStore.chats[chatPos.idx])" :chat="chatStore.chats[chatPos.idx]"
 					:active="menu.chatIdx==chatPos.idx" :index="chatPos.idx"
 					@longpress.native="onShowMenu($event,chatPos.idx)"></chat-item>
 			</view>
@@ -26,6 +31,7 @@
 	export default {
 		data() {
 			return {
+				searchText: "",
 				menu: {
 					show: false,
 					style: "",
@@ -33,7 +39,8 @@
 					items: [{
 							key: 'DELETE',
 							name: '删除该聊天',
-							icon: 'trash'
+							icon: 'trash',
+							color: '#e64e4e'
 						},
 						{
 							key: 'TOP',
@@ -94,6 +101,12 @@
 			moveToTop(chatIdx) {
 				this.$store.commit("moveTop", chatIdx);
 			},
+			isShowChat(chat){
+				if(chat.delete){
+					return false;
+				}
+				return !this.searchText || chat.showName.includes(this.searchText)
+			},
 			refreshUnreadBadge() {
 				if (this.unreadCount > 0) {
 					uni.setTabBarBadge({
@@ -159,6 +172,22 @@
 		display: flex;
 		flex-direction: column;
 		
+
+		.nav-bar {
+			padding: 2rpx 20rpx;
+			display: flex;
+			align-items: center;
+			background-color: white;
+			border-bottom: 1px solid #ddd;
+			height: 110rpx;
+			.nav-search {
+				flex: 1;
+				height: 110rpx;
+			}
+		
+			
+		}
+		
 		.chat-tip {
 			position: absolute;
 			top: 400rpx;

im-uniapp/pages/common/user-info.vue

@@ -162,8 +162,10 @@
 				padding-left: 40rpx;
 				flex: 1;
 				
+				
 				.info-primary {
 					display: flex;
+					align-items: center;
 					
 					.info-username {
 						font-size: 40rpx;

im-uniapp/pages/friend/friend-search.vue

@@ -1,52 +0,0 @@
-<template>
-	<view class="page friend-search" >
-		<view class="search-bar">
-		  	<uni-search-bar  v-model="searchText"  :focus="true"  @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
-		</view>
-		<view class="friend-items">
-			<scroll-view  class="scroll-bar" scroll-with-animation="true" scroll-y="true">
-				<view v-for="(friend,index) in $store.state.friendStore.friends"  :key="index">
-					<friend-item v-if="searchText&&!friend.delete&&friend.nickName.startsWith(searchText)" 
-						:friend="friend" :index="index"></friend-item>
-				</view>
-			</scroll-view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		data() {
-			return {
-				searchText:""
-			}
-		},
-		methods: {
-			onCancel(){
-				uni.navigateBack();
-			}
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.friend-search {
-		position: relative;
-		border: #dddddd solid 1px;
-		display: flex;
-		flex-direction: column;
-
-		.search-bar {
-			background: white;
-		}
-		.friend-items{
-			position: relative;
-			flex: 1;
-			overflow: hidden;
-			.scroll-bar {
-				height: 100%;
-			}
-		}
-		
-	}
-</style>

im-uniapp/pages/friend/friend.vue

@@ -2,7 +2,7 @@
 	<view class="tab-page friend">
 		<view class="nav-bar">
 			<view class="nav-search">
-				<uni-search-bar radius="100" @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
+				<uni-search-bar radius="100" @input="onInput" cancelButton="none" placeholder="点击搜索好友"></uni-search-bar>
 			</view>
 			<view class="nav-add" @click="onAddNewFriends()">
 				<uni-icons type="personadd" size="35"></uni-icons>
@@ -34,15 +34,15 @@
 	export default {
 		data() {
 			return {
+				searchText: '',
 				friendIdx: [],
 				friendGroup: []
 			}
 		},
 		methods: {
-			onFocusSearch() {
+			onInput(searchText){
-				uni.navigateTo({
+				this.searchText = searchText;
-					url: "/pages/friend/friend-search"
+				this.refreshFriendGroup()
-				})
 			},
 			onAddNewFriends() {
 				uni.navigateTo({
@@ -68,6 +68,9 @@
 					if (f.delete) {
 						return;
 					}
+					if(this.searchText && !f.nickName.includes(this.searchText)){
+						return;
+					}
 					let letter = this.firstLetter(f.nickName).toUpperCase();
 					// 非英文一律为#组
 					if (!this.isEnglish(letter)) {
@@ -135,11 +138,9 @@
 
 			.nav-search {
 				flex: 1;
-			
 			}
 
 			.nav-add {
-				line-height: 56px;
 				cursor: pointer;
 			}
 		}

im-uniapp/pages/group/group.vue

@@ -2,10 +2,10 @@
 	<view  class="tab-page group">
 		<view class="nav-bar">
 			<view class="nav-search">
-				<uni-search-bar v-model="searchText"  cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
+				<uni-search-bar v-model="searchText"  cancelButton="none" radius="100" placeholder="点击搜索群聊"></uni-search-bar>
 			</view>
 			<view class="nav-add" @click="onCreateNewGroup()">
-				<uni-icons type="personadd" size="30"></uni-icons>
+				<uni-icons type="personadd" size="35"></uni-icons>
 			</view>
 		</view>
 		<view class="group-tip" v-if="$store.state.groupStore.groups.length==0">
@@ -14,7 +14,7 @@
 		<view class="group-items" v-else>
 			<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
 				<view v-for="group in $store.state.groupStore.groups" :key="group.id">
-					<group-item v-if="!group.quit&&group.remark.startsWith(searchText)" :group="group"></group-item>
+					<group-item v-if="!group.quit&&group.remark.includes(searchText)" :group="group"></group-item>
 				</view>
 			</scroll-view>
 		</view>
@@ -50,7 +50,7 @@
 		flex-direction: column;
 
 		.nav-bar {
-			margin: 5rpx;
+			padding: 2rpx 10rpx;
 			display: flex;
 			align-items: center;
 			background-color: white;
@@ -60,7 +60,6 @@
 			}
 
 			.nav-add {
-				line-height: 56px;
 				cursor: pointer;
 			}
 		}