From 50bb28e1b4cf3d639c16f52363c54bd4040752b4 Mon Sep 17 00:00:00 2001
From: "xie.bx" <Blue_Xie@epam.com>
Date: Fri, 13 Oct 2023 00:10:32 +0800
Subject: [PATCH] =?UTF-8?q?uniapp=20=E4=BD=93=E9=AA=8C=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-uniapp/App.vue                      | 85 ++++++++++++--------------
 im-uniapp/common/request.js            |  5 +-
 im-uniapp/main.js                      |  2 -
 im-uniapp/pages/chat/chat-box.vue      | 43 ++++++++-----
 im-uniapp/pages/group/group-edit.vue   |  4 +-
 im-uniapp/pages/group/group-info.vue   | 69 +++++++++++----------
 im-uniapp/pages/login/login.vue        |  2 +-
 im-uniapp/pages/mine/mine-edit.vue     |  3 +
 im-uniapp/pages/mine/mine-password.vue |  3 +
 im-uniapp/pages/mine/mine.vue          |  2 +-
 im-uniapp/store/friendStore.js         |  6 +-
 im-uniapp/store/groupStore.js          |  5 +-
 im-uniapp/store/userStore.js           |  8 +--
 13 files changed, 123 insertions(+), 114 deletions(-)

diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index 8ee2eb1..bba8579 100644
--- a/im-uniapp/App.vue
+++ b/im-uniapp/App.vue
@@ -1,8 +1,11 @@
 <script>
-	import store from './store'
-	
+	import store from './store';
+	import http from './common/request';
+	import * as enums from './common/enums';
+	import * as wsApi from './common/wssocket';
+
 	export default {
-		data(){
+		data() {
 			return {
 				audioTip: null
 			}
@@ -10,7 +13,6 @@
 		methods: {
 			init(loginInfo) {
 				// 加载数据
-				console.log(this)
 				store.dispatch("load").then(() => {
 					// 初始化websocket
 					this.initWebSocket(loginInfo);
@@ -18,14 +20,15 @@
 					console.log(e);
 					this.exit();
 				})
+
 			},
 			initWebSocket(loginInfo) {
-				let userId = this.$store.state.userStore.userInfo.id;
-				this.$wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken);
-				this.$wsApi.onopen(() => {
+				let userId = store.state.userStore.userInfo.id;
+				wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken);
+				wsApi.onopen(() => {
 					this.pullUnreadMessage();
 				});
-				this.$wsApi.onmessage((cmd, msgInfo) => {
+				wsApi.onmessage((cmd, msgInfo) => {
 					if (cmd == 2) {
 						// 异地登录，强制下线
 						uni.showModal({
@@ -48,26 +51,26 @@
 			},
 			pullUnreadMessage() {
 				// 拉取未读私聊消息
-				this.$http({
+				http({
 					url: "/message/private/pullUnreadMessage",
 					method: 'POST'
 				});
 				// 拉取未读群聊消息
-				this.$http({
+				http({
 					url: "/message/group/pullUnreadMessage",
 					method: 'POST'
 				});
 			},
 			handlePrivateMessage(msg) {
-				let friendId = msg.selfSend ? msg.recvId : msg.sendId; 
-				let friend = this.$store.state.friendStore.friends.find((f) => f.id == friendId);
+				let friendId = msg.selfSend ? msg.recvId : msg.sendId;
+				let friend = store.state.friendStore.friends.find((f) => f.id == friendId);
 				if (!friend) {
-					this.$http({
+					http({
 						url: `/friend/find/${msg.sendId}`,
 						method: 'GET'
 					}).then((friend) => {
 						this.insertPrivateMessage(friend, msg);
-						this.$store.commit("addFriend", friend);
+						store.commit("addFriend", friend);
 					})
 				} else {
 					// 好友列表不存在好友信息，则发请求获取好友信息
@@ -77,20 +80,8 @@
 			},
 			insertPrivateMessage(friend, msg) {
 				// webrtc 信令
-				if (msg.type >= this.$enums.MESSAGE_TYPE.RTC_CALL &&
-					msg.type <= this.$enums.MESSAGE_TYPE.RTC_CANDIDATE) {
-
-					// // 呼叫
-					// if (msg.type == this.$enums.MESSAGE_TYPE.RTC_CALL ||
-					// 	msg.type == this.$enums.MESSAGE_TYPE.RTC_CANCEL) {
-					// 	this.$store.commit("showVideoAcceptorBox", friend);
-					// 	this.$refs.videoAcceptor.handleMessage(msg)
-					// } else {
-					// 	this.$refs.videoAcceptor.close()
-					// 	this.$refs.privateVideo.handleMessage(msg)
-					// }
-					// return;
-				}
+				if (msg.type >= enums.MESSAGE_TYPE.RTC_CALL &&
+					msg.type <= enums.MESSAGE_TYPE.RTC_CANDIDATE) {}
 
 				let chatInfo = {
 					type: 'PRIVATE',
@@ -99,22 +90,22 @@
 					headImage: friend.headImage
 				};
 				// 打开会话
-				this.$store.commit("openChat", chatInfo);
+				store.commit("openChat", chatInfo);
 				// 插入消息
-				this.$store.commit("insertMessage", msg);
+				store.commit("insertMessage", msg);
 				// 播放提示音
 				!msg.selfSend && this.playAudioTip();
 
 			},
 			handleGroupMessage(msg) {
-				let group = this.$store.state.groupStore.groups.find((g) => g.id == msg.groupId);
+				let group = store.state.groupStore.groups.find((g) => g.id == msg.groupId);
 				if (!group) {
-					this.$http({
+					http({
 						url: `/group/find/${msg.groupId}`,
 						method: 'get'
 					}).then((group) => {
 						this.insertGroupMessage(group, msg);
-						this.$store.commit("addGroup", group);
+						store.commit("addGroup", group);
 					})
 				} else {
 					// 群聊缓存存在，直接插入群聊消息
@@ -130,14 +121,15 @@
 					headImage: group.headImageThumb
 				};
 				// 打开会话
-				this.$store.commit("openChat", chatInfo);
+				store.commit("openChat", chatInfo);
 				// 插入消息
-				this.$store.commit("insertMessage", msg);
+				store.commit("insertMessage", msg);
 				// 播放提示音
 				!msg.selfSend && this.playAudioTip();
 			},
 			exit() {
-				this.$wsApi.closeWebSocket();
+				console.log("exit");
+				wsApi.closeWebSocket();
 				uni.removeStorageSync("loginInfo");
 				uni.navigateTo({
 					url: "/pages/login/login"
@@ -149,7 +141,6 @@
 				// this.audioTip.src =  "/static/audio/tip.wav";
 				// this.audioTip.play();
 			}
-
 		},
 		onLaunch() {
 			// 登录状态校验
@@ -157,10 +148,10 @@
 			if (loginInfo) {
 				// 初始化
 				this.init(loginInfo)
-			}else{
+			} else {
 				// 跳转到登录页
 				uni.navigateTo({
-					url:"/pages/login/login"
+					url: "/pages/login/login"
 				})
 			}
 		}
@@ -169,23 +160,23 @@
 
 <style lang="scss">
 	@import url('./static/icon/iconfont.css');
-	
-	.tab-page{
-	    // #ifdef H5
+
+	.tab-page {
+		// #ifdef H5
 		height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部，需要减去
 		// #endif
 		// #ifndef H5
-		height: calc(100vh);    
+		height: calc(100vh);
 		// #endif
 		background-color: #f8f8f8;
 	}
-	
-	.page{
-	    // #ifdef H5
+
+	.page {
+		// #ifdef H5
 		height: calc(100vh - 45px); // h5平台100vh是包含了顶部，需要减去
 		// #endif
 		// #ifndef H5
-		height: calc(100vh);    
+		height: calc(100vh);
 		// #endif
 		background-color: #f8f8f8;
 	}
diff --git a/im-uniapp/common/request.js b/im-uniapp/common/request.js
index 6ee7b04..c70648a 100644
--- a/im-uniapp/common/request.js
+++ b/im-uniapp/common/request.js
@@ -93,9 +93,6 @@ const navToLogin = () => {
 		title: "登录过期，请需要重新登录",
 		duration: 1500
 	})
-	uni.removeStorageSync("loginInfo");
-	uni.navigateTo({
-		url: '/pages/login/login'
-	});
+	getApp().exit();
 }
 export default request;
\ No newline at end of file
diff --git a/im-uniapp/main.js b/im-uniapp/main.js
index 8e61396..ef96dea 100644
--- a/im-uniapp/main.js
+++ b/im-uniapp/main.js
@@ -14,8 +14,6 @@ export function createApp() {
   app.config.globalProperties.$wsApi = socketApi;
   app.config.globalProperties.$emo = emotion;
   app.config.globalProperties.$enums = enums;
-  app.config.globalProperties.$init = (data)=>{getApp().init(data)};
-  app.config.globalProperties.$exit = (data)=>{getApp().exit()};
   return {
     app
   }
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index 26ac9cd..7be53c4 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -16,15 +16,14 @@
 		<view class="send-bar">
 			<view class="iconfont icon-voice-circle"></view>
 			<view class="send-text">
-				<textarea class="send-text-area" v-model="sendText" auto-height 
-					:show-confirm-bar="false" :adjust-position="false"
-					@focus="onSendTextFoucs" @confirm="sendTextMessage()" 
-					@keyboardheightchange="onKeyboardheightchange"
-					confirm-type="send" @blur="onSendTextBlur"
+				<textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
+					:adjust-position="false" @focus="onSendTextFoucs" @confirm="sendTextMessage()"
+					@keyboardheightchange="onKeyboardheightchange" confirm-type="send" @blur="onSendTextBlur"
 					confirm-hold :hold-keyboard="true"></textarea>
 			</view>
 			<view class="iconfont icon-icon_emoji" @touchend.prevent="switchChatTabBox('emo',true)"></view>
-			<view v-show="sendText==''" class="iconfont icon-add-circle" @touchend.prevent="switchChatTabBox('tools',true)">
+			<view v-show="sendText==''" class="iconfont icon-add-circle"
+				@touchend.prevent="switchChatTabBox('tools',true)">
 			</view>
 			<button v-show="sendText!=''" class="btn-send" type="primary" @touchend.prevent="sendTextMessage()"
 				size="mini">发送</button>
@@ -53,7 +52,7 @@
 			</scroll-view>
 			<view v-if="showKeyBoard"></view>
 		</view>
-		
+
 	</view>
 </template>
 
@@ -69,7 +68,7 @@
 				showVoice: false, // 是否显示语音录制弹窗
 				scrollMsgIdx: 0, // 滚动条定位为到哪条消息
 				chatTabBox: 'none',
-				showKeyBoard:false,
+				showKeyBoard: false,
 				keyboardHeight: 322,
 				tools: [{
 						name: "拍摄",
@@ -167,12 +166,12 @@
 				});
 
 			},
-			switchChatTabBox(chatTabBox,hideKeyBoard) {
+			switchChatTabBox(chatTabBox, hideKeyBoard) {
 				console.log("switchChatTabBox")
 				this.chatTabBox = chatTabBox;
 				this.scrollToBottom();
-				if(hideKeyBoard){
-					uni.hideKeyboard();	
+				if (hideKeyBoard) {
+					uni.hideKeyboard();
 				}
 			},
 			selectEmoji(emoText) {
@@ -186,13 +185,13 @@
 				// 	console.log(this.keyboardHeight)
 				// }
 			},
-			onKeyboardheightchange(e){
+			onKeyboardheightchange(e) {
 				console.log(e);
-				if(e.detail.height >0){
+				if (e.detail.height > 0) {
 					this.showKeyBoard = true;
-					this.switchChatTabBox('none',false)
+					this.switchChatTabBox('none', false)
 					this.keyboardHeight = this.rpxTopx(e.detail.height);
-				}else{
+				} else {
 					this.showKeyBoard = false;
 				}
 			},
@@ -303,6 +302,20 @@
 			},
 			messageAction() {
 				return `/message/${this.chat.type.toLowerCase()}/send`;
+			},
+			messageSize() {
+				if (!this.chat || !this.chat.messages) {
+					return 0;
+				}
+				return this.chat.messages.length;
+			}
+		},
+		watch: {
+			messageSize: function(newSize, oldSize) {
+				// 接收到消息时滚动到底部
+				if (newSize > oldSize) {
+					this.scrollToBottom();
+				}
 			}
 		},
 		onLoad(options) {
diff --git a/im-uniapp/pages/group/group-edit.vue b/im-uniapp/pages/group/group-edit.vue
index d8c8c4e..91688c8 100644
--- a/im-uniapp/pages/group/group-edit.vue
+++ b/im-uniapp/pages/group/group-edit.vue
@@ -81,13 +81,13 @@
 					uni.showToast({
 						title: `群聊创建成功，快邀请小伙伴进群吧`,
 						icon: 'none',
-						duration: 2000
+						duration: 1500
 					});
 					setTimeout(()=>{
 						uni.navigateTo({
 							url: "/pages/group/group-info?id="+group.id
 						});
-					},2000)
+					},1500)
 					
 				})
 			},
diff --git a/im-uniapp/pages/group/group-info.vue b/im-uniapp/pages/group/group-info.vue
index f2b84ed..af3171c 100644
--- a/im-uniapp/pages/group/group-info.vue
+++ b/im-uniapp/pages/group/group-info.vue
@@ -21,7 +21,7 @@
 		<view class="group-detail">
 			<uni-section title="群聊名称:" titleFontSize="30rpx">
 				<template v-slot:right>
-					<text>{{group.name}}</text>
+					<text>{{groupInfo.name}}</text>
 				</template>
 			</uni-section>
 			<uni-section title="群主:" titleFontSize="30rpx">
@@ -32,16 +32,16 @@
 
 			<uni-section title="群聊备注:" titleFontSize="30rpx">
 				<template v-slot:right>
-					<text> {{group.remark}}</text>
+					<text> {{groupInfo.remark}}</text>
 				</template>
 			</uni-section>
 			<uni-section title="我在本群的昵称:" titleFontSize="30rpx">
 				<template v-slot:right>
-					<text> {{group.aliasName}}</text>
+					<text> {{groupInfo.aliasName}}</text>
 				</template>
 			</uni-section>
 			<uni-section title="群公告:" titleFontSize="30rpx">
-				<uni-notice-bar :text="group.notice" />
+				<uni-notice-bar :text="groupInfo.notice" />
 			</uni-section>
 			<view class="group-edit" @click="onEditGroup()">修改群聊资料 > </view>
 		</view>
@@ -57,15 +57,15 @@
 	export default {
 		data() {
 			return {
-				group: {},
+				groupId: null,
 				groupMembers: []
 			}
 		},
 		methods: {
 			onFocusSearch() {},
-			onInviteMember(){
+			onInviteMember() {
 				uni.navigateTo({
-					url: `/pages/group/group-invite?id=${this.group.id}`
+					url: `/pages/group/group-invite?id=${this.groupId}`
 				})
 			},
 			onShowUserInfo(userId) {
@@ -73,22 +73,22 @@
 					url: "/pages/common/user-info?id=" + userId
 				})
 			},
-			onShowMoreMmeber(){
+			onShowMoreMmeber() {
 				uni.navigateTo({
-					url: `/pages/group/group-member?id=${this.group.id}`
+					url: `/pages/group/group-member?id=${this.groupId}`
 				})
 			},
 			onEditGroup() {
 				uni.navigateTo({
-					url: `/pages/group/group-edit?id=${this.group.id}`
+					url: `/pages/group/group-edit?id=${this.groupId}`
 				})
 			},
 			onSendMessage() {
 				let chat = {
 					type: 'GROUP',
-					targetId: this.group.id,
-					showName: this.group.remark,
-					headImage: this.group.headImage,
+					targetId: this.groupInfo.id,
+					showName: this.groupInfo.remark,
+					headImage: this.groupInfo.headImage,
 				};
 				this.$store.commit("openChat", chat);
 				uni.navigateTo({
@@ -100,19 +100,19 @@
 					title: '确认退出?',
 					content: `退出群聊后将不再接受群里的消息，确认退出吗?`,
 					success: () => {
-						if(res.cancel)
+						if (res.cancel)
 							return;
 						this.$http({
-							url: `/group/quit/${this.group.id}`,
+							url: `/group/quit/${this.groupId}`,
 							method: 'DELETE'
 						}).then(() => {
-							this.$store.commit("removeGroup", this.group.id);
-							this.$store.commit("removeGroupChat", this.group.id);
+							this.$store.commit("removeGroup", this.groupId);
+							this.$store.commit("removeGroupChat", this.groupId);
 							uni.showModal({
 								title: `退出成功`,
-								content: `您已退出群聊'${this.group.name}'`,
+								content: `您已退出群聊'${this.groupInfo.name}'`,
 								showCancel: false,
-								success:()=>{
+								success: () => {
 									uni.navigateBack();
 								}
 							})
@@ -123,35 +123,34 @@
 			onDissolveGroup() {
 				uni.showModal({
 					title: '确认解散?',
-					content: `确认要解散群聊'${this.group.name}'吗?`,
-					success:(res)=>{
-						if(res.cancel)
+					content: `确认要解散群聊'${this.groupInfo.name}'吗?`,
+					success: (res) => {
+						if (res.cancel)
 							return;
 						this.$http({
-							url: `/group/delete/${this.group.id}`,
+							url: `/group/delete/${this.groupId}`,
 							method: 'delete'
 						}).then(() => {
-							this.$store.commit("removeGroup", this.group.id);
-							this.$store.commit("removeGroupChat", this.group.id);
+							this.$store.commit("removeGroup", this.groupId);
+							this.$store.commit("removeGroupChat", this.groupId);
 							uni.showModal({
 								title: `解散成功`,
-								content: `群聊'${this.group.name}'已解散`,
+								content: `群聊'${this.groupInfo.name}'已解散`,
 								showCancel: false,
-								success:()=>{
+								success: () => {
 									uni.navigateBack();
 								}
 							})
 						});
 					}
 				});
-			
+
 			},
 			loadGroupInfo(id) {
 				this.$http({
 					url: `/group/find/${id}`,
 					method: 'GET'
 				}).then((group) => {
-					this.group = group;
 					// 更新聊天页面的群聊信息
 					this.$store.commit("updateChatFromGroup", group);
 					// 更新聊天列表的群聊信息
@@ -169,20 +168,26 @@
 			}
 		},
 		computed: {
+			groupInfo() {
+				let groups = this.$store.state.groupStore.groups;
+				return groups.find(g => g.id == this.groupId)
+			},
 			ownerName() {
-				let member = this.groupMembers.find((m) => m.userId == this.group.ownerId);
+				let member = this.groupMembers.find((m) => m.userId == this.groupInfo.ownerId);
 				return member && member.aliasName;
 			},
 			isOwner() {
-				return this.group.ownerId == this.$store.state.userStore.userInfo.id;
-			},
+				return this.groupInfo.ownerId == this.$store.state.userStore.userInfo.id;
+			}
 		},
 		onLoad(options) {
+			this.groupId = options.id;
 			// 查询群聊信息
 			this.loadGroupInfo(options.id);
 			// 查询群聊成员
 			this.loadGroupMembers(options.id)
 		}
+		
 	}
 </script>
 
diff --git a/im-uniapp/pages/login/login.vue b/im-uniapp/pages/login/login.vue
index fa22553..0201f73 100644
--- a/im-uniapp/pages/login/login.vue
+++ b/im-uniapp/pages/login/login.vue
@@ -49,7 +49,7 @@
 					console.log("登录成功,自动跳转到聊天页面...")
 					uni.setStorageSync("loginInfo", data);
 					// 调用App.vue的初始化方法
-					this.$init(data);
+					getApp().init(data)
 					// 跳转到聊天页面
 					uni.switchTab({
 						url: "/pages/chat/chat"
diff --git a/im-uniapp/pages/mine/mine-edit.vue b/im-uniapp/pages/mine/mine-edit.vue
index fac9bd2..e2aca6c 100644
--- a/im-uniapp/pages/mine/mine-edit.vue
+++ b/im-uniapp/pages/mine/mine-edit.vue
@@ -53,6 +53,9 @@
 						title:"修改成功",
 						icon: 'none'
 					});
+					setTimeout(()=>{
+						uni.navigateBack();
+					},1000);
 				})	
 			}
 		},
diff --git a/im-uniapp/pages/mine/mine-password.vue b/im-uniapp/pages/mine/mine-password.vue
index b350f77..ca3b47e 100644
--- a/im-uniapp/pages/mine/mine-password.vue
+++ b/im-uniapp/pages/mine/mine-password.vue
@@ -82,6 +82,9 @@
 							title: "修改密码成功",
 							icon: 'none'
 						})
+						setTimeout(()=>{
+							uni.navigateBack();
+						},1000);
 					})
 				}).catch(err => {
 					console.log('表单错误信息：', err);
diff --git a/im-uniapp/pages/mine/mine.vue b/im-uniapp/pages/mine/mine.vue
index 5978807..731a6c7 100644
--- a/im-uniapp/pages/mine/mine.vue
+++ b/im-uniapp/pages/mine/mine.vue
@@ -52,7 +52,7 @@
 					title: '确认退出?',
 					success: (res) => {
 						if (res.confirm) {
-							this.$exit();
+							getApp().exit()
 						}
 					}
 				});
diff --git a/im-uniapp/store/friendStore.js b/im-uniapp/store/friendStore.js
index ce52faf..d97a7d3 100644
--- a/im-uniapp/store/friendStore.js
+++ b/im-uniapp/store/friendStore.js
@@ -1,4 +1,4 @@
-import request from '../common/request';
+import http from '../common/request';
 
 export default {
 
@@ -50,7 +50,7 @@ export default {
 	actions: {
 		loadFriend(context) {
 			return new Promise((resolve, reject) => {
-				request({
+				http({
 					url: '/friend/list',
 					method: 'GET'
 				}).then((friends) => {
@@ -68,7 +68,7 @@ export default {
 				context.state.friends.forEach((f) => {
 					userIds.push(f.id)
 				});
-				request({
+				http({
 					url: '/user/online?userIds='+ userIds.join(','),
 					method: 'GET'
 				}).then((onlineIds) => {
diff --git a/im-uniapp/store/groupStore.js b/im-uniapp/store/groupStore.js
index 7fac097..bd87b57 100644
--- a/im-uniapp/store/groupStore.js
+++ b/im-uniapp/store/groupStore.js
@@ -1,7 +1,6 @@
-import request from '@/common/request';
+import http from '@/common/request';
 
 export default {
-
 	state: {
 		groups: [],
 		activeIndex: -1,
@@ -39,7 +38,7 @@ export default {
 	actions: {
 		loadGroup(context) {
 			return new Promise((resolve, reject) => {
-				request({
+				http({
 					url: '/group/list',
 					method: 'GET'
 				}).then((groups) => {
diff --git a/im-uniapp/store/userStore.js b/im-uniapp/store/userStore.js
index 024c7e6..5c3971f 100644
--- a/im-uniapp/store/userStore.js
+++ b/im-uniapp/store/userStore.js
@@ -1,9 +1,8 @@
 import {USER_STATE} from "../common/enums"
-import request from '../common/request'
+import http from '../common/request'
 
 
 export default {
-	
 	state: {
 		userInfo: {},
 		state: USER_STATE.FREE 
@@ -11,7 +10,8 @@ export default {
 
 	mutations: {
 		setUserInfo(state, userInfo) {
-			state.userInfo = userInfo;
+			// 使用深拷贝方式，否则小程序页面不刷新
+			Object.assign(state.userInfo, userInfo); 
 		},
 		setUserState(state, userState) {
 			state.state = userState;
@@ -20,7 +20,7 @@ export default {
 	actions:{
 		loadUser(context){
 			return new Promise((resolve, reject) => {
-				request({
+				http({
 					url: '/user/self',
 					method: 'GET'
 				}).then((userInfo) => {