uniapp 添加、删除好友以及一些优化

im-platform/src/main/java/com/bx/implatform/controller/UserController.java

@@ -64,8 +64,14 @@ public class UserController {
 
     @GetMapping("/findByNickName")
     @ApiOperation(value = "查找用户",notes="根据昵称查找用户")
-    public Result findByNickName(@NotEmpty(message = "用户昵称不可为空") @RequestParam("nickName") String nickName){
+    public Result<List<UserVO>> findByNickName(@NotEmpty(message = "用户昵称不可为空") @RequestParam("nickName") String nickName){
            return ResultUtils.success( userService.findUserByNickName(nickName));
     }
+
+    @GetMapping("/findByName")
+    @ApiOperation(value = "查找用户",notes="根据用户名或昵称查找用户")
+    public Result<List<UserVO>> findByName(@NotEmpty(message = "用户名称不可为空") @RequestParam("name") String name){
+        return ResultUtils.success( userService.findUserByName(name));
+    }
 }
 

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

@@ -18,12 +18,14 @@ public interface IUserService extends IService<User> {
 
     void register(RegisterDTO dto);
 
-    User findUserByName(String username);
+    User findUserByUserName(String username);
 
     void update(UserVO vo);
 
     List<UserVO> findUserByNickName(String nickname);
 
+    List<UserVO> findUserByName(String name);
+
     List<Long> checkOnline(String userIds);
 
 }

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

@@ -66,7 +66,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
 
     @Override
     public LoginVO login(LoginDTO dto) {
-        User user = findUserByName(dto.getUserName());
+        User user = this.findUserByUserName(dto.getUserName());
         if(null == user){
             throw  new GlobalException(ResultCode.PROGRAM_ERROR,"用户不存在");
         }
@@ -119,7 +119,7 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
      */
     @Override
     public void register(RegisterDTO dto) {
-        User user = findUserByName(dto.getUserName());
+        User user = this.findUserByUserName(dto.getUserName());
         if(null != user){
             throw  new GlobalException(ResultCode.USERNAME_ALREADY_REGISTER);
         }
@@ -136,12 +136,13 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
      * @return
      */
     @Override
-    public User findUserByName(String username) {
+    public User findUserByUserName(String username) {
         LambdaQueryWrapper<User> queryWrapper =  Wrappers.lambdaQuery();
         queryWrapper.eq(User::getUserName,username);
         return this.getOne(queryWrapper);
     }
 
+
     /**
      * 更新用户信息，好友昵称和群聊昵称等冗余信息也会更新
      *
@@ -206,6 +207,26 @@ public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IU
         }).collect(Collectors.toList());
     }
 
+    /**
+     * 根据用户昵称查询用户，最多返回20条数据
+     *
+     * @param name 用户名或昵称
+     * @return
+     */
+    @Override
+    public List<UserVO> findUserByName(String name) {
+        LambdaQueryWrapper<User> queryWrapper = Wrappers.lambdaQuery();
+        queryWrapper.like(User::getUserName,name)
+            .or()
+            .like(User::getNickName,name)
+            .last("limit 20");
+        List<User> users = this.list(queryWrapper);
+        return users.stream().map(u-> {
+            UserVO vo = BeanUtils.copyProperties(u,UserVO.class);
+            vo.setOnline(imClient.isOnline(u.getId()));
+            return vo;
+        }).collect(Collectors.toList());
+    }
 
     /**
      * 判断用户是否在线，返回在线的用户id列表

im-uniapp/App.vue

@@ -1,10 +1,17 @@
 <script>
+	import store from './store'
+	
 	export default {
+		data(){
+			return {
+				audioTip: null
+			}
+		},
 		methods: {
 			init(loginInfo) {
 				// 加载数据
 				console.log(this)
-				this.$store.dispatch("load").then(() => {
+				store.dispatch("load").then(() => {
 					// 初始化websocket
 					this.initWebSocket(loginInfo);
 				}).catch((e) => {
@@ -52,19 +59,18 @@
 				});
 			},
 			handlePrivateMessage(msg) {
-				// 好友列表存在好友信息，直接插入私聊消息
-				let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+				let friendId = msg.selfSend ? msg.recvId : msg.sendId; 
 				let friend = this.$store.state.friendStore.friends.find((f) => f.id == friendId);
 				if (!friend) {
-					// 好友列表不存在好友信息，则发请求获取好友信息
 					this.$http({
 						url: `/friend/find/${msg.sendId}`,
-						method: 'get'
+						method: 'GET'
 					}).then((friend) => {
 						this.insertPrivateMessage(friend, msg);
 						this.$store.commit("addFriend", friend);
 					})
 				} else {
+					// 好友列表不存在好友信息，则发请求获取好友信息
 					this.insertPrivateMessage(friend, msg);
 				}
 
@@ -101,10 +107,8 @@
 
 			},
 			handleGroupMessage(msg) {
-				// 群聊缓存存在，直接插入群聊消息
 				let group = this.$store.state.groupStore.groups.find((g) => g.id == msg.groupId);
 				if (!group) {
-					// 群聊缓存存在，直接插入群聊消息
 					this.$http({
 						url: `/group/find/${msg.groupId}`,
 						method: 'get'
@@ -113,6 +117,7 @@
 						this.$store.commit("addGroup", group);
 					})
 				} else {
+					// 群聊缓存存在，直接插入群聊消息
 					this.insertGroupMessage(group, msg);
 				}
 
@@ -132,10 +137,6 @@
 				!msg.selfSend && this.playAudioTip();
 			},
 			quit() {
-				uni.showToast({
-					title: "退出登录"
-				})
-				console.log("退出登录")
 				this.$wsApi.closeWebSocket();
 				uni.removeStorageSync("loginInfo");
 				uni.navigateTo({
@@ -143,17 +144,15 @@
 				})
 			},
 			playAudioTip() {
-				// let audio = new Audio();
-				// let url = "/static/audio/tip.wav";
-				// audio.src = url;
-				// audio.play();
+				// 音频播放无法成功
+				// this.audioTip = uni.createInnerAudioContext();
+				// this.audioTip.src =  "/static/audio/tip.wav";
+				// this.audioTip.play();
 			}
 
 		},
 		onLaunch() {
-
-			// 跳转到登录页面
-			console.log("onLaunch")
+			// 登录状态校验
 			let loginInfo = uni.getStorageSync("loginInfo");
 			if (loginInfo) {
 				// 初始化

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

@@ -68,6 +68,7 @@
 				width: 100%;
 				height: 100%;
 				border-radius: 10%;
+				border: #eeeeee solid 1px;
 			}
 			
 			.unread-text {

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

@@ -65,6 +65,7 @@
 				width: 100%;
 				height: 100%;
 				border-radius: 10%;
+				border: #eeeeee solid 1px;
 			}
 		}
 

im-uniapp/pages.json

@@ -13,24 +13,7 @@
 		"path": "pages/friend/friend",
 		"style": {
 			"navigationBarTitleText": "好友列表",
-			"enablePullDownRefresh": false,
-			"app-plus": {
-				"titleNView": {
-					"buttons": [{
-							"text": "",
-							"fontSrc": "/static/icon/iconfont.ttf",
-							"fontSize": "40rpx",
-							"width": "50rpx"
-						},
-						{
-							"text": "",
-							"fontSrc": "/static/icon/iconfont.ttf",
-							"fontSize": "30rpx",
-							"width": "50rpx"
-						}
-					]
-				}
-			}
+			"enablePullDownRefresh": false
 		}
 	}, {
 		"path": "pages/group/group",
@@ -46,32 +29,13 @@
 			"enablePullDownRefresh": false
 		}
 	}, {
-		"path": "pages/friend/friend-search",
-		"style": {
-			"app-plus": {
-				"navigationBarTitleText": "好友查找",
-				"titleNView": {
-					"buttons": [{
-							"text": "取消",
-							"fontSize": "20rpx",
-							"width": "80rpx"
-						}
-				
-					],
-					"searchInput": {
-						"autoFocus": true,
-						"placeholder": "输入好友昵称",
-						"borderRadius": "10rpx"
-					},
-					"autoBackButton": false
-				}
-				
-			}
-		}
-	},{
+		"path": "pages/friend/friend-search"
+	}, {
 		"path": "pages/common/user-info"
-	},{
+	}, {
 		"path": "pages/chat/chat-box"
+	}, {
+		"path": "pages/friend/friend-add"
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

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

@@ -248,9 +248,17 @@
 			}
 		},
 		onLoad(options) {
+			console.log("onLoad")
 			let chatIdx = options.chatIdx;
 			this.chat = this.$store.state.chatStore.chats[chatIdx];
+			// 激活当前会话
+			this.$store.commit("activeChat", chatIdx);
+			// 页面滚到底部
 			this.scrollToBottom();
+		},
+		onUnload() {
+			console.log("onShow")
+			this.$store.commit("activeChat", -1);
 		}
 	}
 </script>

im-uniapp/pages/chat/chat.vue

@@ -16,7 +16,31 @@
 			}
 		},
 		methods: {
-			
+			refreshUnreadBadge(){
+				if(this.unreadCount>0){
+					uni.setTabBarBadge({
+					  index: 0,
+					  text: this.unreadCount+""
+					})
+				}else{
+					uni.removeTabBarBadge({
+						index:0
+					})
+					
+				}
+			}
+		},
+		computed:{
+			unreadCount(){
+				let count = 0;
+				this.$store.state.chatStore.chats.forEach(chat =>{
+					count += chat.unreadCount;
+				})
+				return count;
+			}
+		},
+		onLoad() {
+			this.refreshUnreadBadge();
 		}
 	}
 </script>

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

@@ -24,8 +24,9 @@
 		</view>
 		<view class="line"></view>
 		<view class="btn-group">
-			<button v-show="isFriend" type="primary" @click="sendMessage()">发消息</button>
-			<button v-show="!isFriend" type="primary" @click="addFriend()">加为好友</button>
+			<button class="btn" v-show="isFriend" type="primary" @click="onSendMessage()">发消息</button>
+			<button class="btn" v-show="!isFriend" type="primary" @click="onAddFriend()">加为好友</button>
+			<button class="btn" v-show="isFriend" type="warn" @click="onDelFriend()">删除好友</button>
 		</view>
 	</view>
 </template>
@@ -38,7 +39,7 @@
 			}
 		},
 		methods: {
-			sendMessage() {
+			onSendMessage() {
 				let chat = {
 					type: 'PRIVATE',
 					targetId: this.userInfo.id,
@@ -50,7 +51,7 @@
 					url:"/pages/chat/chat-box?chatIdx=0"
 				})
 			},
-			addFriend() {
+			onAddFriend() {
 				this.$http({
 					url: "/friend/add?friendId=" + this.userInfo.id,
 					method: "POST"
@@ -63,27 +64,74 @@
 					}
 					this.$store.commit("addFriend", friend);
 					uni.showToast({
-						title: '添加成功，对方已成为您的好友',
+						title: '对方已成为您的好友',
 						icon: 'none'
 					})
 				})
+			},
+			onDelFriend(){
+				console.log(this.userInfo)
+				uni.showModal({
+					title: "确认删除",
+					content: `确认要删除与 '${this.userInfo.nickName}'的好友关系吗?`,
+					success: ()=> {
+						this.$http({
+							url: `/friend/delete/${this.userInfo.id}`,
+							method: 'delete'
+						}).then((data) => {
+							this.$store.commit("removeFriend", this.userInfo.id);
+							this.$store.commit("removePrivateChat", this.userInfo.id);
+							uni.showToast({
+								title: 	`与 '${this.userInfo.nickName}'的好友关系已解除`,
+								icon: 'none'
+							})
+						})
+					}
+				})
+			},
+			updateFriendInfo() {
+				// store的数据不能直接修改，深拷贝一份store的数据
+				let friend = JSON.parse(JSON.stringify(this.friendInfo));
+				friend.headImage = this.userInfo.headImageThumb;
+				friend.nickName = this.userInfo.nickName;
+				this.$http({
+					url: "/friend/update",
+					method: "PUT",
+					data: friend
+				}).then(() => {
+					// 更新好友列表中的昵称和头像
+					this.$store.commit("updateFriend", friend);
+					// 更新会话中的头像和昵称
+					this.$store.commit("updateChatFromFriend", this.userInfo);
+				})
+			},
+			loadUserInfo(id){
+				this.$http({
+					url: "/user/find/" + id,
+					method: 'GET'
+				}).then((user) => {
+					this.userInfo = user;
+					// 如果发现好友的头像和昵称改了，进行更新
+					if (this.isFriend &&this.userInfo.headImageThumb != this.friendInfo.headImage ||
+						this.userInfo.nickName != this.friendInfo.nickName) {
+						this.updateFriendInfo()
+					}
+				})
 			}
 		},
 		computed: {
 			isFriend() {
+				return this.friendInfo != undefined;
+			},
+			friendInfo(){
 				let friends = this.$store.state.friendStore.friends;
 				let friend = friends.find((f) => f.id == this.userInfo.id);
-				return friend != undefined;
+				return friend;
 			}
 		},
 		onLoad(options) {
-			// 查询好友信息
-			const id = options.id;
-			this.$http({
-				url: "/user/find/" + id
-			}).then((userInfo) => {
-				this.userInfo = userInfo;
-			})
+			// 查询用户信息
+			this.loadUserInfo(options.id);
 		}
 	}
 </script>
@@ -136,6 +184,11 @@
 
 		.btn-group {
 			margin: 100rpx;
+			
+			.btn{
+				margin-top: 20rpx;
+			}
+			
 		}
 	}
 </style>

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

@@ -1,14 +1,15 @@
 <template>
-	<view class="page">
+	<view class="page friend-search" >
 		<view>
 		  	<uni-search-bar  v-model="searchText"  :focus="true"  @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
 		</view>
-		<scroll-view  class="scroll-bar" scroll-with-animation="true" scroll-y="true">
-			<view v-for="(friend,index) in $store.state.friendStore.friends" v-show="searchText && friend.nickName.startsWith(searchText)"  :key="index">
-				<friend-item :friend="friend" :index="index"></friend-item>
-			</view>
-		</scroll-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" v-show="searchText && friend.nickName.startsWith(searchText)"  :key="index">
+					<friend-item :friend="friend" :index="index"></friend-item>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -23,19 +24,28 @@
 			onCancel(){
 				uni.navigateBack();
 			}
-			
-		},
-		onNavigationBarButtonTap(e) {
-			if(e.index==0){
-				uni.navigateBack();
-			}
-		},
-		onNavigationBarSearchInputChanged(e){
-			this.searchText = e.text;
 		}
 	}
 </script>
 
-<style>
+<style scoped lang="scss">
+	.friend-search {
+		position: relative;
+		border: #dddddd solid 1px;
+		display: flex;
+		flex-direction: column;
 
-</style>
+		.search-bar {
+			background: white;
+		}
+		.friend-items{
+			position: relative;
+			flex: 1;
+			overflow: hidden;
+			.scroll-bar {
+				height: 100%;
+			}
+		}
+		
+	}
+</style>

im-uniapp/pages/friend/friend.vue

@@ -4,7 +4,7 @@
 			<view class="nav-search">
 				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友" ></uni-search-bar>
 			</view>
-			<view  class="nav-add">
+			<view  class="nav-add" @click="onAddNewFriends()">
 				<uni-icons type="personadd" size="30"></uni-icons>
 			</view>
 		</view>
@@ -30,6 +30,11 @@
 				uni.navigateTo({
 					url: "/pages/friend/friend-search"
 				})
+			},
+			onAddNewFriends(){
+				uni.navigateTo({
+					url: "/pages/friend/friend-add"
+				})
 			}
 		},
 		onNavigationBarButtonTap(e) {

im-uniapp/store/chatStore.js

@@ -36,6 +36,12 @@ export default {
 			}
 			uni.setStorageSync("chats",state.chats);
 		},
+		activeChat(state, idx) {
+			state.activeIndex = idx;
+			if(idx>=0){
+				state.chats[idx].unreadCount = 0;
+			}
+		},
 		removeChat(state, idx) {
 			state.chats.splice(idx, 1);
 			uni.setStorageSync("chats",state.chats);

im-uniapp/store/friendStore.js

@@ -3,8 +3,7 @@ import request from '../common/request';
 export default {
 
 	state: {
-		friends: [],
-		activeIndex: -1
+		friends: []
 	},
 	mutations: {
 		setFriends(state, friends) {
@@ -20,14 +19,12 @@ export default {
 				}
 			})
 		},
-		activeFriend(state, index) {
-			state.activeIndex = index;
-		},
-		removeFriend(state, index) {
-			state.friends.splice(index, 1);
-			if (state.activeIndex >= state.friends.length) {
-				state.activeIndex = state.friends.length - 1;
-			}
+		removeFriend(state, id) {
+			state.friends.forEach((f,idx) => {
+				if(f.id == id){
+					state.friends.splice(idx, 1)
+				}
+			});
 		},
 		addFriend(state, friend) {
 			state.friends.push(friend);
@@ -39,7 +36,6 @@ export default {
 				f.online = onlineFriend != undefined;
 			});
 
-			let activeFriend = state.friends[state.activeIndex];
 			state.friends.sort((f1, f2) => {
 				if (f1.online && !f2.online) {
 					return -1;
@@ -49,15 +45,6 @@ export default {
 				}
 				return 0;
 			});
-
-			// 重新排序后，activeIndex指向的好友可能会变化，需要重新指定
-			if (state.activeIndex >= 0) {
-				state.friends.forEach((f, i) => {
-					if (f.id == activeFriend.id) {
-						state.activeIndex = i;
-					}
-				})
-			}
 		}
 	},
 	actions: {