ui优化

im-platform/src/main/java/com/bx/implatform/service/impl/PrivateMessageServiceImpl.java

@@ -158,6 +158,9 @@ public class PrivateMessageServiceImpl extends ServiceImpl<PrivateMessageMapper,
         }
 
         List<Friend> friends = friendService.findFriendByUserId(session.getUserId());
+        if(friends.isEmpty()){
+            return;
+        }
         List<Long> friendIds = friends.stream().map(Friend::getFriendId).collect(Collectors.toList());
         // 获取当前用户所有未读消息
         LambdaQueryWrapper<PrivateMessage> queryWrapper = Wrappers.lambdaQuery();

im-ui/src/components/friend/FriendItem.vue

@@ -1,16 +1,16 @@
 <template>
 	<div class="friend-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
 		<div class="friend-avatar">
-			<head-image :name="friend.nickName" 
-			:url="friend.headImage" 
-			:online="friend.online"> 
+			<head-image :name="friend.nickName" :url="friend.headImage" :online="friend.online">
 			</head-image>
 		</div>
 		<div class="friend-info">
 			<div class="friend-name">{{ friend.nickName}}</div>
-			<div class="friend-online online">
-				<span v-show="friend.onlineWeb" class="el-icon-s-platform" title="电脑端在线"></span>
-				<span v-show="friend.onlineApp" class="el-icon-mobile-phone" title="移动端在线"></span>			
+			<div class="friend-online">
+				<el-image v-show="friend.onlineWeb" class="online" :src="require('@/assets/image/online_web.png')"
+					title="电脑设备在线" />
+				<el-image v-show="friend.onlineApp" class="online" :src="require('@/assets/image/online_app.png')"
+					title="移动设备在线" />
 			</div>
 		</div>
 		<right-menu v-show="menu && rightMenu.show" :pos="rightMenu.pos" :items="rightMenu.items"
@@ -61,10 +61,12 @@
 				this.$emit(item.key.toLowerCase(), this.msgInfo);
 			}
 		},
+		computed:{
+			friend(){
+				return this.$store.state.friendStore.friends[this.index];
+			}
+		},
 		props: {
-			friend: {
-				type: Object
-			},
 			active: {
 				type: Boolean
 			},
@@ -75,11 +77,7 @@
 				type: Boolean,
 				default: true
 			}
-		},
-		mounted() {
-			console.log(this.menu)
 		}
-	
 	}
 </script>
 
@@ -94,6 +92,7 @@
 		padding-right: 5px;
 		background-color: #fafafa;
 		white-space: nowrap;
+		cursor: pointer;
 
 		&:hover {
 			background-color: #eeeeee;
@@ -127,10 +126,12 @@
 			}
 
 			.friend-online {
-				padding-right: 15px;
-				font-size: 16px;
-				font-weight: 600;	
-				color: #2f6dce;
+				.online {
+					padding-right: 2px;
+					width: 15px;
+					height: 15px;
+				
+				}
 			}
 		}
 	}

im-ui/src/store/chatStore.js

@@ -56,6 +56,7 @@ export default {
 			if (state.activeIndex >= state.chats.length) {
 				state.activeIndex = state.chats.length - 1;
 			}
+			
 		},
 		moveTop(state,idx){
 			let chat = state.chats[idx];
@@ -121,12 +122,12 @@ export default {
 				}
 			}
 			// 间隔大于10分钟插入时间显示
-			let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
-			if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
+			if(!chat.lastTimeTip || (chat.lastTimeTip < msgInfo.sendTime - 600*1000)){
 				chat.messages.push({
 					sendTime: msgInfo.sendTime,
 					type: MESSAGE_TYPE.TIP_TIME,
 				});
+				chat.lastTimeTip = msgInfo.sendTime;
 			}
 			// 新的消息
 			chat.messages.push(msgInfo);

im-ui/src/store/friendStore.js

@@ -46,7 +46,6 @@ export default {
 		},
 		refreshOnlineStatus(state){
 			let userIds = [];
-			console.log("refreshOnlineStatus")
 			if(state.friends.length ==0){
 				return; 
 			}
@@ -69,7 +68,6 @@ export default {
 			state.friends.forEach((f)=>{
 				let userTerminal = onlineTerminals.find((o)=> f.id==o.userId);
 				if(userTerminal){
-					console.log(userTerminal)
 					f.online = true;
 					f.onlineTerminals = userTerminal.terminals;
 					f.onlineWeb = userTerminal.terminals.indexOf(TERMINAL_TYPE.WEB)>=0
@@ -92,6 +90,7 @@ export default {
 				return 0;
 			});
 			
+			console.log(state.friends)
 			// 重新排序后，activeIndex指向的好友可能会变化，需要重新指定
 			if(state.activeIndex >=0){
 				state.friends.forEach((f,i)=>{

im-ui/src/view/Friend.vue

@@ -14,7 +14,7 @@
 			</div>
 			<el-scrollbar class="l-friend-list">
 				<div v-for="(friend,index) in $store.state.friendStore.friends" :key="index">
-					<friend-item v-show="friend.nickName.startsWith(searchText)" :friend="friend" :index="index"
+					<friend-item v-show="friend.nickName.startsWith(searchText)"  :index="index"
 						:active="index === $store.state.friendStore.activeIndex" @chat="handleSendMessage(friend)"
 						@delete="handleDelItem(friend,index)" @click.native="handleActiveItem(friend,index)">
 					</friend-item>

im-uniapp/App.vue

@@ -171,7 +171,7 @@
 					// 隐藏群组功能
 					uni.setTabBarItem({
 						index: 2,
-						text: "资讯"
+						text: "搜索"
 					})	
 				}
 			}

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

@@ -5,8 +5,10 @@
 		<view class="friend-info">
 			<view class="friend-name">{{ friend.nickName}}</view>
 			<view class="friend-online">
-				<text v-show="friend.onlineWeb"  title="网页端在线">【网页端】</text>
-				<text v-show="friend.onlineApp"  title="移动端在线">【移动端】</text>			
+				<image v-show="friend.onlineWeb" class="online" src="/static/image/online_web.png"
+					title="电脑设备在线" />
+				<image v-show="friend.onlineApp" class="online" src="/static/image/online_app.png"
+					title="移动设备在线" />
 			</view>
 		</view>
 	</view>
@@ -63,6 +65,15 @@
 				white-space: nowrap;
 				overflow: hidden;
 			}
+			
+			.friend-online {
+				.online {
+					padding-right: 4rpx;
+					width: 32rpx;
+					height: 32rpx;
+				
+				}
+			}
 		}
 	}
 </style>

im-uniapp/pages.json

@@ -57,7 +57,7 @@
 				"pagePath": "pages/group/group",
 				"iconPath": "static/tarbar/group.png",
 				"selectedIconPath": "static/tarbar/group_active.png",
-				"text": "资讯"
+				"text": "搜索"
 			},
 			{
 				"pagePath": "pages/mine/mine",

im-uniapp/pages/chat/chat.vue

@@ -1,10 +1,14 @@
 <template>
 	<view class="tab-page">
-		<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
+		<view class="chat-tip" v-if="$store.state.chatStore.chats.length==0">
+			温馨提示：您现在还没有任何聊天消息，快跟您的好友发起聊天吧~
+		</view>
+		<scroll-view class="scroll-bar" v-else scroll-with-animation="true" scroll-y="true">
 			<view v-for="(chat,index) in $store.state.chatStore.chats" :key="index">
 				<chat-item :chat="chat" :index="index" @longpress.native="onShowMenu($event,index)"></chat-item>
 			</view>
 		</scroll-view>
+
 		<pop-menu v-show="menu.show" :menu-style="menu.style" :items="menu.items" @close="menu.show=false"
 			@select="onSelectMenu"></pop-menu>
 	</view>
@@ -14,7 +18,6 @@
 	export default {
 		data() {
 			return {
-
 				menu: {
 					show: false,
 					style: "",
@@ -37,14 +40,16 @@
 			onSelectMenu(item) {
 				switch (item.key) {
 					case 'DELETE':
-						this.removeChat(this.menu.chatIdx); 
+						this.removeChat(this.menu.chatIdx);
+						break;
 					case 'TOP':
 						this.moveToTop(this.menu.chatIdx);
+						break;
 					default:
 						break;
 				}
 			},
-			onShowMenu(e,chatIdx) {
+			onShowMenu(e, chatIdx) {
 				uni.getSystemInfo({
 					success: (res) => {
 						let touches = e.touches[0];
@@ -84,7 +89,7 @@
 				} else {
 					uni.removeTabBarBadge({
 						index: 0,
-						complete:()=>{}
+						complete: () => {}
 					})
 
 				}
@@ -99,8 +104,8 @@
 				return count;
 			}
 		},
-		watch:{
-			unreadCount(newCount,oldCount){
+		watch: {
+			unreadCount(newCount, oldCount) {
 				this.refreshUnreadBadge();
 			}
 		},
@@ -110,6 +115,14 @@
 	}
 </script>
 
-<style>
-
+<style scoped lang="scss">
+	.chat-tip {
+		position: absolute;
+		top: 400rpx;
+		padding: 50rpx;
+		line-height: 50rpx;
+		text-align: left;
+		color: darkblue;
+		font-size: 30rpx;
+	}
 </style>

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

@@ -121,8 +121,8 @@
 				}).then((user) => {
 					this.userInfo = user;
 					// 如果发现好友的头像和昵称改了，进行更新
-					if (this.isFriend &&this.userInfo.headImageThumb != this.friendInfo.headImage ||
-						this.userInfo.nickName != this.friendInfo.nickName) {
+					if (this.isFriend && (this.userInfo.headImageThumb != this.friendInfo.headImage ||
+						this.userInfo.nickName != this.friendInfo.nickName)) {
 						this.updateFriendInfo()
 					}
 				})

im-uniapp/pages/friend/friend.vue

@@ -8,13 +8,17 @@
 				<uni-icons type="personadd" size="30"></uni-icons>
 			</view>
 		</view>
-		<view class="friend-items">
+		<view class="friend-tip" v-if="$store.state.friendStore.friends.length==0">
+			温馨提示：您现在还没有任何好友，快点击右上方'+'按钮添加好友吧~
+		</view>
+		<view class="friend-items" v-else>
 			<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 :friend="friend"></friend-item>
 				</view>
 			</scroll-view>
 		</view>
+		
 	</view>
 </template>
 
@@ -48,6 +52,17 @@
 		display: flex;
 		flex-direction: column;
 		
+		.friend-tip{
+			position: absolute;
+			top: 400rpx;
+			padding: 50rpx ;
+			text-align: center;
+			line-height: 50rpx;
+			text-align: left;
+			color: darkblue;
+			font-size: 30rpx;
+		}
+		
 		.nav-bar {
 			margin: 5rpx;
 			display: flex;

im-uniapp/pages/group/group.vue

@@ -8,7 +8,10 @@
 				<uni-icons type="personadd" size="30"></uni-icons>
 			</view>
 		</view>
-		<view class="group-items">
+		<view class="group-tip" v-if="$store.state.groupStore.groups.length==0">
+			温馨提示：您现在还没有加入任何群聊，点击右上方'+'按钮可以创建群聊哦~
+		</view>
+		<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 :group="group"></group-item>
@@ -16,6 +19,10 @@
 			</scroll-view>
 		</view>
 	</view>
+	<!-- wx audit -->
+	<view v-else>
+		<user-search></user-search>
+	</view>
 </template>
 
 <script>
@@ -60,6 +67,16 @@
 			}
 		}
 
+		.group-tip{
+			position: absolute;
+			top: 400rpx;
+			padding: 50rpx;
+			text-align: left;
+			line-height: 50rpx;
+			color: darkblue;
+			font-size: 30rpx;
+		}
+
 		.group-items {
 			flex: 1;
 			padding: 0;

im-uniapp/store/chatStore.js

@@ -128,17 +128,15 @@ export default {
 				}
 			}
 			// 间隔大于10分钟插入时间显示
-			let lastTimeMsg = chat.messages.findLast(m=>m.type==MESSAGE_TYPE.TIP_TIME);
-			if(!lastTimeMsg || (lastTimeMsg.sendTime < msgInfo.sendTime - 600*1000)){
+			if(!chat.lastTimeTip || (chat.lastTimeTip < msgInfo.sendTime - 600*1000)){
 				chat.messages.push({
-					id:0,
 					sendTime: msgInfo.sendTime,
 					type: MESSAGE_TYPE.TIP_TIME,
 				});
+				chat.lastTimeTip = msgInfo.sendTime;
 			}
 			// 新的消息
 			chat.messages.push(msgInfo);
-			console.log(chat.unreadCount)
 			this.commit("saveToStorage");
 			
 		},