uniapp 开发群聊功能（未完成）

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

@@ -5,7 +5,7 @@
 		</view>
 		<view class="text">
 			<view>{{ friend.nickName}}</view>
-			<view :class="online ? 'online-status  online':'online-status'">{{ online?"[在线]":"[离线]"}}</view>
+			<view :class="friend.online ? 'online-status  online':'online-status'">{{ friend.online?"[在线]":"[离线]"}}</view>
 		</view>
 	</view>
 </template>
@@ -26,14 +26,6 @@
 		props: {
 			friend: {
 				type: Object
-			},
-			index: {
-				type: Number
-			}
-		},
-		computed: {
-			online() {
-				return this.$store.state.friendStore.friends[this.index].online;
 			}
 		}
 	}

im-uniapp/pages.json

@@ -36,6 +36,8 @@
 		"path": "pages/chat/chat-box"
 	}, {
 		"path": "pages/friend/friend-add"
+	}, {
+		"path": "pages/group/group-info"
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",

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

@@ -226,7 +226,36 @@
 
 				}
 	
-			}
+			},
+			loadGroup(groupId) {
+				this.$http({
+					url: `/group/find/${groupId}`,
+					method: 'GET'
+				}).then((group) => {
+					this.group = group;
+					this.$store.commit("updateChatFromGroup", group);
+					this.$store.commit("updateGroup", group);
+			
+				});
+			
+				this.$http({
+					url: `/group/members/${groupId}`,
+					method: 'get'
+				}).then((groupMembers) => {
+					this.groupMembers = groupMembers;
+				});
+			},
+			loadFriend(friendId) {
+				// 获取对方最新信息
+				this.$http({
+					url: `/user/find/${friendId}`,
+					method: 'GET'
+				}).then((friend) => {
+					this.friend = friend;
+					this.$store.commit("updateChatFromFriend", friend);
+					this.$store.commit("updateFriend", friend);
+				})
+			},
 		},
 		computed: {
 			mine() {
@@ -248,13 +277,18 @@
 			}
 		},
 		onLoad(options) {
-			console.log("onLoad")
+			// 聊天数据
-			let chatIdx = options.chatIdx;
+			this.chat = this.$store.state.chatStore.chats[options.chatIdx];
-			this.chat = this.$store.state.chatStore.chats[chatIdx];
 			// 激活当前会话
-			this.$store.commit("activeChat", chatIdx);
+			this.$store.commit("activeChat", options.chatIdx);
 			// 页面滚到底部
 			this.scrollToBottom();
+			// 加载好友或群聊信息
+			if (this.chat.type == "GROUP") {
+				this.loadGroup(this.chat.targetId);
+			} else {
+				this.loadFriend(this.chat.targetId);
+			}
 		},
 		onUnload() {
 			console.log("onShow")

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

@@ -17,7 +17,7 @@
 				<text>
 					昵称 ：{{userInfo.nickName}}
 				</text>
-				<text class="person-wx-name">
+				<text>
 					签名 ：{{userInfo.signature}}
 				</text>
 			</view>

im-uniapp/pages/friend/friend.vue

@@ -11,7 +11,7 @@
 		<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 :friend="friend" :index="index"></friend-item>
+					<friend-item :friend="friend"></friend-item>
 				</view>
 			</scroll-view>
 		</view>
@@ -36,14 +36,8 @@
 					url: "/pages/friend/friend-add"
 				})
 			}
-		},
-		onNavigationBarButtonTap(e) {
-			if (e.index == 1) {
-				uni.navigateTo({
-					url: "/pages/friend/friend-search"
-				})
-			}
 		}
+	
 	}
 </script>
 

im-uniapp/pages/group/group.vue

@@ -1,6 +1,20 @@
 <template>
-	<view class="tab-page">
+	<view class="tab-page group">
-		
+		<view class="nav-bar">
+			<view class="nav-search">
+				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索群聊"></uni-search-bar>
+			</view>
+			<view class="nav-add" @click="onCreateNewGroup()">
+				<uni-icons type="personadd" size="30"></uni-icons>
+			</view>
+		</view>
+		<view class="group-items">
+			<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>
+				</view>
+			</scroll-view>
+		</view>
 	</view>
 </template>
 
@@ -8,15 +22,52 @@
 	export default {
 		data() {
 			return {
-				
+
 			}
 		},
 		methods: {
-			
+			onFocusSearch() {},
+			onCreateNewGroup() {
+
+			}
 		}
+		
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.group {
+		position: relative;
+		border: #dddddd solid 1px;
+		display: flex;
+		flex-direction: column;
+
+		.nav-bar {
+			margin: 5rpx;
+			display: flex;
+			align-items: center;
+			background-color: white;
+
+			.nav-search {
+				flex: 1;
+			}
 
-</style>
+			.nav-add {
+				line-height: 56px;
+				cursor: pointer;
+			}
+		}
+
+		.group-items {
+			flex: 1;
+			padding: 0;
+			border: #dddddd solid 1px;
+			overflow: hidden;
+			position: relative;
+
+			.scroll-bar {
+				height: 100%;
+			}
+		}
+	}
+</style>

im-uniapp/store/chatStore.js

@@ -67,10 +67,12 @@ export default {
 			let type = msgInfo.groupId ? 'GROUP' : 'PRIVATE';
 			let targetId = msgInfo.groupId ? msgInfo.groupId : msgInfo.selfSend ? msgInfo.recvId : msgInfo.sendId;
 			let chat = null;
+			let chatIdx = -1;
 			for (let idx in state.chats) {
 				if (state.chats[idx].type == type &&
 					state.chats[idx].targetId === targetId) {
 					chat = state.chats[idx];
+					chatIdx = idx;
 					break;
 				}
 			}
@@ -86,7 +88,10 @@ export default {
 			}
 			chat.lastSendTime = msgInfo.sendTime;
 			// 如果不是当前会话，未读加1
-			chat.unreadCount++;
+			if(chatIdx !=  state.activeIndex){
+				chat.unreadCount++;
+			}
+			// 自己回复了消息，说明消息已读
 			if(msgInfo.selfSend){
 				chat.unreadCount=0;
 			}

im-uniapp/store/index.js

@@ -2,15 +2,13 @@ import chatStore from './chatStore.js';
 import friendStore from './friendStore.js';
 import userStore from './userStore.js';
 import groupStore from './groupStore.js';
-import uiStore from './uiStore.js';
 import {createStore} from 'vuex';
 const store = createStore({
 	modules: {
 		chatStore,
 		friendStore,
 		userStore,
-		groupStore,
+		groupStore
-		uiStore
 	},
 	state: {},
 	actions: {

im-uniapp/store/uiStore.js

@@ -1,68 +0,0 @@
-export default {
-	state: {
-		userInfo: { // 用户信息窗口
-			show: false,
-			user: {},
-			pos:{
-				x:0,
-				y:0
-			}
-		},
-		fullImage: { // 全屏大图
-			show: false,
-			url: ""
-		},
-		chatPrivateVideo:{  // 私人视频聊天
-			show: false,
-			master: false, // 是否房主
-			friend:{},
-			offer:{}  // 对方发起带过过来的sdp信息
-		},
-		videoAcceptor:{ // 视频呼叫选择
-			show: false,
-			
-			friend:{}
-		}
-		
-	},
-	mutations: {
-		showUserInfoBox(state,user){
-			state.userInfo.show = true;
-			state.userInfo.user = user;
-			
-		},
-		setUserInfoBoxPos(state,pos){
-			let w =  document.documentElement.clientWidth;
-			let h =  document.documentElement.clientHeight;
-			state.userInfo.pos.x = Math.min(pos.x,w-350);
-			state.userInfo.pos.y = Math.min(pos.y,h-200); 
-		},
-		closeUserInfoBox(state){
-			state.userInfo.show = false;
-		},
-		showFullImageBox(state,url){
-			state.fullImage.show = true;
-			state.fullImage.url = url;
-		},
-		closeFullImageBox(state){
-			state.fullImage.show = false;
-		},
-		showChatPrivateVideoBox(state,info){
-			state.chatPrivateVideo.show = true;
-			state.chatPrivateVideo.friend = info.friend;
-			state.chatPrivateVideo.master = info.master;
-			state.chatPrivateVideo.offer = info.offer;
-		},
-		closeChatPrivateVideoBox(state){
-			state.chatPrivateVideo.show = false;
-		},
-		showVideoAcceptorBox(state,friend){
-			state.videoAcceptor.show = true;
-			state.videoAcceptor.friend = friend;
-			
-		},
-		closeVideoAcceptorBox(state){
-			state.videoAcceptor.show = false;
-		}
-	}
-}