群聊@的功能

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

@@ -76,7 +76,6 @@ public class GroupServiceImpl extends ServiceImpl<GroupMapper, Group> implements
         groupMember.setUserId(user.getId());
         groupMember.setAliasName(StringUtils.isEmpty(vo.getAliasName())?session.getNickName():vo.getAliasName());
         groupMember.setRemark(StringUtils.isEmpty(vo.getRemark())?group.getName():vo.getRemark());
-        groupMember.setHeadImage(user.getHeadImageThumb());
         groupMemberService.save(groupMember);
 
         vo.setId(group.getId());

im-ui/src/components/chat/ChatItem.vue

@@ -80,7 +80,6 @@
 				return this.$date.toTimeText(this.chat.lastSendTime, true)
 			},
 			atText() {
-				console.log(this.chat.atMe)
 				if (this.chat.atMe) {
 					return "[有人@我]"
 				} else if (this.chat.atAll) {

im-ui/src/components/chat/ChatMessageItem.vue

@@ -251,7 +251,7 @@
 							width: 0;
 							height: 0;
 							border-style: solid dashed dashed;
-							border-color: rgb(235, 235, 245) transparent transparent;
+							border-color: white transparent transparent;
 							overflow: hidden;
 							border-width: 10px;
 						}

im-ui/src/store/chatStore.js

@@ -123,7 +123,6 @@ export default {
 			}
 		},
 		insertMessage(state, msgInfo) {
-
 			// 获取对方id或群id
 			let type = msgInfo.groupId ? 'GROUP' : 'PRIVATE';
 			let targetId = msgInfo.groupId ? msgInfo.groupId : msgInfo.selfSend ? msgInfo.recvId : msgInfo.sendId;

im-ui/src/view/Group.vue

@@ -36,7 +36,7 @@
 								:url="activeGroup.headImage"
 								:name="activeGroup.remark">
 							</head-image>
-							<el-button class="send-btn" icon="el-icon-chat-dot-round" type="primary" @click="onSendMessage()">发消息</el-button>
+							<el-button class="send-btn" icon="el-icon-chat-dot-round" type="primary" @click="onSendMessage()">发送消息</el-button>
 						</div>
 						<el-form class="group-form" label-width="130px" :model="activeGroup" :rules="rules"
 							ref="groupForm">
@@ -65,7 +65,7 @@
 						</el-form>
 					</div>
 					<el-divider content-position="center"></el-divider>
-					<el-scrollbar style="height:400px;">
+					<el-scrollbar style="height:200px;">
 						<div class="group-member-list">
 							<div v-for="(member) in groupMembers" :key="member.id">
 								<group-member v-show="!member.quit" class="group-member" :member="member"
@@ -134,8 +134,6 @@
 						name: o.value,
 						remark: o.value,
 						aliasName: userInfo.name,
-						headImage: userInfo.headImage,
-						headImageThumb: userInfo.headImageThumb,
 						ownerId: userInfo.id
 					}
 					this.$http({
@@ -328,8 +326,7 @@
 			}
 
 			.group-container {
-				padding: 50px;
-
+				padding: 20px;
 				.group-info {
 					display: flex;
 					padding: 5px 20px;
@@ -337,7 +334,7 @@
 					.group-form {
 						flex: 1;
 						padding-left: 40px;
-						max-width: 800px;
+						max-width: 700px;
 					}
 
 					.avatar-uploader {

im-uniapp/App.vue

@@ -249,7 +249,6 @@
 			}
 		},
 		onLaunch() {
-
 			// 登录状态校验
 			if (uni.getStorageSync("loginInfo")) {
 				// 初始化

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

@@ -1,16 +1,18 @@
 <template>
 	<view class="chat-item" @click="showChatBox()">
 		<view class="left">
-			<head-image  :url="chat.headImage" :name="chat.showName" :size="100"></head-image>
+			<head-image :url="chat.headImage" :name="chat.showName" :size="90"></head-image>
 			<view v-if="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</view>
 		</view>
 		<view class="chat-right">
 			<view class="chat-name">
-				{{ chat.showName}}
+				<view class="chat-name-text">{{chat.showName}}</view>
+				<view class="chat-time">{{$date.toTimeText(chat.lastSendTime)}}</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>
-				<view class="chat-time">{{$date.toTimeText(chat.lastSendTime)}}</view>
 			</view>
 		</view>
 	</view>
@@ -36,19 +38,29 @@
 					url: "/pages/chat/chat-box?chatIdx=" + this.index
 				})
 			}
+		},
+		computed: {
+			atText() {
+				if (this.chat.atMe) {
+					return "[有人@我]"
+				} else if (this.chat.atAll) {
+					return "[@全体成员]"
+				}
+				return "";
+			}
 		}
 	}
 </script>
 
 <style scoped lang="scss">
 	.chat-item {
-		height: 120rpx;
+		height: 100rpx;
 		display: flex;
 		margin-bottom: 2rpx;
 		position: relative;
-		padding-left: 30rpx;
+		padding: 10rpx;
+		padding-left: 20rpx;
 		align-items: center;
-		padding-right: 10rpx;
 		background-color: white;
 		white-space: nowrap;
 
@@ -87,23 +99,16 @@
 			overflow: hidden;
 
 			.chat-name {
-				font-size: 30rpx;
-				font-weight: 600;
-				line-height: 60rpx;
-				white-space: nowrap;
-				overflow: hidden;
-			}
-
-			.chat-content {
 				display: flex;
+				line-height: 50rpx;
+				height: 50rpx;
 
-				.chat-content-text {
+				.chat-name-text {
 					flex: 1;
-					font-size: 28rpx;
+					font-size: 30rpx;
+					font-weight: 600;
 					white-space: nowrap;
 					overflow: hidden;
-					line-height: 50rpx;
-					text-overflow: ellipsis;
 				}
 
 				.chat-time {
@@ -114,6 +119,28 @@
 					overflow: hidden;
 				}
 			}
+
+			.chat-content {
+				display: flex;
+				line-height: 44rpx;
+				.chat-at-text {
+					color: #c70b0b;
+					font-size: 24rpx;
+				}
+
+				.chat-send-name {
+					font-size: 26rpx;
+				}
+
+				.chat-content-text {
+					flex: 1;
+					font-size: 28rpx;
+					white-space: nowrap;
+					overflow: hidden;
+					line-height: 50rpx;
+					text-overflow: ellipsis;
+				}
+			}
 		}
 	}
 </style>

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

@@ -231,7 +231,7 @@
 						line-height: 60rpx;
 						margin-top: 10rpx;
 						padding: 10rpx 20rpx;
-						background-color: #ebebf5;
+						background-color: white;
 						border-radius: 10rpx;
 						color: #333;
 						font-size: 30rpx;
@@ -239,17 +239,17 @@
 						display: block;
 						word-break: break-all;
 						white-space: pre-line;
-						box-shadow: 2px 2px 2px #c0c0f0;
+						box-shadow: 1px 1px 1px  #c0c0f0;
 
 						&:after {
 							content: "";
 							position: absolute;
 							left: -20rpx;
 							top: 26rpx;
-							width: 0;
-							height: 0;
+							width: 6rpx;
+							height: 6rpx;
 							border-style: solid dashed dashed;
-							border-color: #ebebf5 transparent transparent;
+							border-color: white transparent transparent;
 							overflow: hidden;
 							border-width: 18rpx;
 						}

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

@@ -1,7 +1,7 @@
 <template>
 	<view class="friend-item" @click="showFriendInfo()">
 		<head-image :name="friend.nickName" :online="friend.online" :url="friend.headImage"
-			:size="100"></head-image>
+			:size="90"></head-image>
 		<view class="friend-info">
 			<view class="friend-name">{{ friend.nickName}}</view>
 			<view class="friend-online">
@@ -37,13 +37,13 @@
 
 <style scope lang="scss">
 	.friend-item {
-		height: 120rpx;
+		height: 100rpx;
 		display: flex;
 		margin-bottom: 1rpx;
 		position: relative;
-		padding-left: 30rpx;
+		padding: 10rpx;
+		padding-left: 20rpx;
 		align-items: center;
-		padding-right: 10rpx;
 		background-color: white;
 		white-space: nowrap;
 

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

@@ -1,7 +1,7 @@
 <template>
 	<view class="group-item" @click="showGroupInfo()">
 		<head-image :name="group.remark"
-			:url="group.headImage" :size="100"></head-image>
+			:url="group.headImage" :size="90"></head-image>
 		<view class="group-name">
 			<view>{{ group.remark}}</view>
 		</view>
@@ -31,13 +31,13 @@
 
 <style scope lang="scss">
 	.group-item {
-		height: 120rpx;
+		height: 100rpx;
 		display: flex;
 		margin-bottom: 1rpx;
 		position: relative;
-		padding-left: 30rpx;
+		padding: 10rpx;
+		padding-left: 20rpx;
 		align-items: center;
-		padding-right: 10rpx;
 		background-color: white;
 		white-space: nowrap;
 		&:hover {

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

@@ -527,8 +527,6 @@
 					right: 30rpx;
 				}
 			}
-
-
 		}
 
 
@@ -538,7 +536,7 @@
 			border: #dddddd solid 1px;
 			overflow: hidden;
 			position: relative;
-			background-color: white;
+			background-color: #f8f8f8;
 
 			.scroll-box {
 				height: 100%;

im-uniapp/store/chatStore.js

@@ -70,6 +70,8 @@ export default {
 				if (state.chats[idx].type == chatInfo.type &&
 					state.chats[idx].targetId == chatInfo.targetId) {
 					state.chats[idx].unreadCount = 0;
+					state.chats[idx].atMe = false;
+					state.chats[idx].atAll = false; 
 				}
 			}
 			this.commit("saveToStorage");
@@ -127,7 +129,6 @@ export default {
 					break;
 				}
 			}
-			
 			// 会话列表内容
 			if(!state.loadingPrivateMsg && !state.loadingPrivateMsg){
 				if (msgInfo.type == MESSAGE_TYPE.IMAGE) {
@@ -140,11 +141,23 @@ export default {
 					chat.lastContent = msgInfo.content;
 				}
 				chat.lastSendTime = msgInfo.sendTime;
+				chat.sendNickName = msgInfo.sendNickName;
 			}
+			
 			// 未读加1
 			if (!msgInfo.selfSend && msgInfo.status != MESSAGE_STATUS.READED) {
 				chat.unreadCount++;
 			}
+			// 是否有人@我
+			if(!msgInfo.selfSend && chat.type=="GROUP" && msgInfo.atUserIds){
+				let userId = userStore.state.userInfo.id;
+				if(msgInfo.atUserIds.indexOf(userId)>=0){
+					chat.atMe = true;
+				}
+				if(msgInfo.atUserIds.indexOf(-1)>=0){
+					chat.atAll = true;
+				}
+			}
 			// 记录消息的最大id
 			if (msgInfo.id && type == "PRIVATE" && msgInfo.id > state.privateMsgMaxId) {
 				state.privateMsgMaxId = msgInfo.id;
@@ -267,10 +280,10 @@ export default {
 				groupMsgMaxId: state.groupMsgMaxId,
 				chats: state.chats
 			}
-			// uni.setStorage({
-			// 	key: key,
-			// 	data: chatsData
-			// })
+			uni.setStorage({
+				key: key,
+				data: chatsData
+			})
 		},
 		clear(state) {
 			state.chats = [];