群聊功能开发-完成

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

@@ -1,8 +1,11 @@
 <template>
 	<el-container class="r-chat-box">
 		<el-header height="60px">
-			{{title}}
+			<span>{{title}}</span>
+			<span class="btn-side el-icon-more" @click="showSide=!showSide"></span>
 		</el-header>
+		<el-container>
+			<el-container class="content-box">
 				<el-main class="im-chat-main" id="chatScrollBox">
 					<div class="im-chat-box">
 						<ul>
@@ -37,9 +40,15 @@
 					</div>
 				</el-footer>
 			</el-container>
+			<el-aside class="chat-group-side-box" width="20%" v-show="showSide">
+				<chat-group-side :group="group" :groupMembers="groupMembers" @reload="loadGroup(group.id)"></chat-group-side>
+			</el-aside>	
+		</el-container>
+	</el-container>
 </template>
 
 <script>
+	import ChatGroupSide from "./ChatGroupSide.vue";
 	import MessageItem from "./MessageItem.vue";
 	import FileUpload from "../common/FileUpload.vue";
 
@@ -47,7 +56,8 @@
 		name: "chatPrivate",
 		components: {
 			MessageItem,
-			FileUpload
+			FileUpload,
+			ChatGroupSide
 		},
 		props: {
 			chat: {
@@ -57,6 +67,7 @@
 		data() {
 			return {
 				sendText: "",
+				showSide: false,
 				group: {},
 				groupMembers: []
 			}
@@ -174,6 +185,9 @@
 				// 借助file对象保存对方id
 				file.targetId = this.chat.targetId;
 			},
+			handleCloseSide() {
+				this.showSide = false;
+			},
 			sendTextMessage() {
 
 				if (!this.sendText.trim()) {
@@ -214,7 +228,7 @@
 					method: 'get'
 				}).then((group) => {
 					this.group = group;
-					this.$store.commit("updateChatFromGroup",group);
+					this.$store.commit("updateChatFromGroup", group);
 				});
 
 				this.$http({
@@ -244,8 +258,8 @@
 			mine() {
 				return this.$store.state.userStore.userInfo;
 			},
-			title(){
+			title() {
-				let size = this.groupMembers.filter(m=>!m.quit).length;
+				let size = this.groupMembers.filter(m => !m.quit).length;
 				return `${this.chat.showName}(${size})`;
 			}
 
@@ -259,4 +273,15 @@
 </script>
 
 <style>
+	.btn-side {
+		position: absolute;
+		right: 20px;
+		line-height: 60px;
+		font-size: 22px;
+		cursor: pointer;
+		
+		&:hover {
+			font-size: 30px;
+		}
+	}
 </style>

im-ui/src/components/group/GroupMember.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="group-member">
-		<head-image :url="member.headImage" :size="60" class="">
+		<head-image :url="member.headImage" :size="50" class="">
 			<div  v-if="showDel" @click.stop="handleDelete()" class="btn-kick el-icon-error"></div>
 		</head-image>
 		<div class="member-name">{{member.aliasName}}</div>
@@ -39,7 +39,7 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		width: 60px;
+		width: 50px;
 		.member-name {
 			font-size: 12px;
 			text-align: center;

im-ui/src/store/groupStore.js

@@ -24,17 +24,22 @@ export default {
 		addGroup(state,group){
 			state.groups.unshift(group);
 		},
-		removeGroup(state,index){
+		removeGroup(state,groupId){
+			state.groups.forEach((g,index)=>{
+				if(g.id==groupId){
 					state.groups.splice(index, 1);
 					if(state.activeIndex  >= state.groups.length){
 						state.activeIndex = state.groups.length-1;
 					}
+				}
+			})
+			
 		},
 		updateGroup(state,group){
-			state.groups.forEach((g,index)=>{
+			state.groups.forEach((g,idx)=>{
 				if(g.id==group.id){
 					// 拷贝属性
-					state.groups[index] = Object.assign(state.groups[index], group);
+					state.groups[idx] = Object.assign(state.groups[idx], group);
 				}
 			})
 		}

im-ui/src/view/Chat.vue

@@ -164,6 +164,7 @@
 				padding: 5px;
 				background-color: white;
 				line-height: 50px;
+				border: #dddddd solid 1px;
 			}
 
 			.im-chat-main {
@@ -185,7 +186,7 @@
 				display: flex;
 				flex-direction: column;
 				padding: 0;
-
+				border: #dddddd solid 1px;	
 				.chat-tool-bar {
 
 					display: flex;
@@ -193,6 +194,7 @@
 					width: 100%;
 					height: 40px;
 					text-align: left;
+					box-sizing: border-box;
 					border: #dddddd solid 1px;
 
 					>div {

im-ui/src/view/Group.vue

@@ -56,7 +56,6 @@
 							</div>
 						</el-form>
 					</div>
-
 					<el-divider content-position="center"></el-divider>
 					<el-scrollbar style="height:400px;">
 						<div class="r-group-member-list">
@@ -169,7 +168,7 @@
 						url: `/api/group/delete/${this.activeGroup.id}`,
 						method: 'delete'
 					}).then(() => {
-						this.$store.commit("removeGroup", this.groupStore.activeIndex);
+						this.$store.commit("removeGroup", this.activeGroup.id);
 						this.$store.commit("activeGroup", -1);
 						this.$store.commit("removeGroupChat", this.activeGroup.id);
 					});
@@ -205,7 +204,7 @@
 						url: `/api/group/quit/${this.activeGroup.id}`,
 						method: 'delete'
 					}).then(() => {
-						this.$store.commit("removeGroup", this.groupStore.activeIndex);
+						this.$store.commit("removeGroup", this.activeGroup.id);
 						this.$store.commit("activeGroup", -1);
 						this.$store.commit("removeGroupChat", this.activeGroup.id);
 					});