From e9f5006c234eeed68712489428d3560af2336151 Mon Sep 17 00:00:00 2001
From: xsx <825657193@qq.com>
Date: Wed, 4 Oct 2023 01:18:55 +0800
Subject: [PATCH] =?UTF-8?q?uniapp=20=E6=94=AF=E6=8C=81emoji=E5=AD=97?=
 =?UTF-8?q?=E7=AC=A6(=E6=97=A0=E6=95=B0=E5=9D=91..=E4=BA=BA=E5=B7=B2?=
 =?UTF-8?q?=E5=B4=A9=E6=BA=83)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 im-uniapp/App.vue                             | 185 +++++++++++++++-
 im-uniapp/common/emotion.js                   |  44 +++-
 im-uniapp/components/chat-item/chat-item.vue  |  10 +-
 .../components/friend-item/friend-item.vue    |   2 +-
 im-uniapp/pages/chat/chat-box.vue             | 203 +++++++++++-------
 im-uniapp/pages/chat/chat.vue                 |   2 +-
 im-uniapp/pages/common/user-info.vue          |   6 +-
 im-uniapp/pages/friend/friend-search.vue      |   2 +-
 im-uniapp/pages/friend/friend.vue             |  21 +-
 im-uniapp/pages/group/group.vue               |   2 +-
 im-uniapp/pages/login/login.vue               | 165 +-------------
 im-uniapp/pages/mine/mine.vue                 |   2 +-
 im-uniapp/store/chatStore.js                  |   2 -
 im-uniapp/store/friendStore.js                |   1 -
 im-uniapp/store/userStore.js                  |   1 -
 15 files changed, 383 insertions(+), 265 deletions(-)

diff --git a/im-uniapp/App.vue b/im-uniapp/App.vue
index fc94f96..2e57e5e 100644
--- a/im-uniapp/App.vue
+++ b/im-uniapp/App.vue
@@ -1,18 +1,193 @@
 <script>
 	export default {
+		methods: {
+			init(loginInfo) {
+				// 加载数据
+				console.log(this)
+				this.$store.dispatch("load").then(() => {
+					// 初始化websocket
+					this.initWebSocket(loginInfo);
+				}).catch((e) => {
+					console.log(e);
+					this.quit();
+				})
+			},
+			initWebSocket(loginInfo) {
+				let userId = this.$store.state.userStore.userInfo.id;
+				this.$wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken);
+				this.$wsApi.onopen(() => {
+					this.pullUnreadMessage();
+				});
+				this.$wsApi.onmessage((cmd, msgInfo) => {
+					if (cmd == 2) {
+						// 异地登录，强制下线
+						uni.showModal({
+							content: '您已在其他地方登陆，将被强制下线',
+							showCancel: false,
+						})
+						this.quit();
+					} else if (cmd == 3) {
+						// 标记这条消息是不是自己发的
+						msgInfo.selfSend = userId == msgInfo.sendId;
+						// 插入私聊消息
+						this.handlePrivateMessage(msgInfo);
+					} else if (cmd == 4) {
+						// 标记这条消息是不是自己发的
+						msgInfo.selfSend = userId == msgInfo.sendId;
+						// 插入群聊消息
+						this.handleGroupMessage(msgInfo);
+					}
+				})
+			},
+			pullUnreadMessage() {
+				// 拉取未读私聊消息
+				this.$http({
+					url: "/message/private/pullUnreadMessage",
+					method: 'POST'
+				});
+				// 拉取未读群聊消息
+				this.$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);
+				if (!friend) {
+					// 好友列表不存在好友信息，则发请求获取好友信息
+					this.$http({
+						url: `/friend/find/${msg.sendId}`,
+						method: 'get'
+					}).then((friend) => {
+						this.insertPrivateMessage(friend, msg);
+						this.$store.commit("addFriend", friend);
+					})
+				} else {
+					this.insertPrivateMessage(friend, msg);
+				}
+
+			},
+			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;
+				}
+
+				let chatInfo = {
+					type: 'PRIVATE',
+					targetId: friend.id,
+					showName: friend.nickName,
+					headImage: friend.headImage
+				};
+				// 打开会话
+				this.$store.commit("openChat", chatInfo);
+				// 插入消息
+				this.$store.commit("insertMessage", msg);
+				// 播放提示音
+				!msg.selfSend && this.playAudioTip();
+
+			},
+			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'
+					}).then((group) => {
+						this.insertGroupMessage(group, msg);
+						this.$store.commit("addGroup", group);
+					})
+				} else {
+					this.insertGroupMessage(group, msg);
+				}
+
+			},
+			insertGroupMessage(group, msg) {
+				let chatInfo = {
+					type: 'GROUP',
+					targetId: group.id,
+					showName: group.remark,
+					headImage: group.headImageThumb
+				};
+				// 打开会话
+				this.$store.commit("openChat", chatInfo);
+				// 插入消息
+				this.$store.commit("insertMessage", msg);
+				// 播放提示音
+				!msg.selfSend && this.playAudioTip();
+			},
+			quit() {
+				uni.showToast({
+					title: "退出登录"
+				})
+				console.log("退出登录")
+				this.$wsApi.closeWebSocket();
+				uni.removeStorageSync("loginInfo");
+				uni.navigateTo({
+					url: "/pages/login/login"
+				})
+			},
+			playAudioTip() {
+				// let audio = new Audio();
+				// let url = "/static/audio/tip.wav";
+				// audio.src = url;
+				// audio.play();
+			}
+
+		},
 		onLaunch() {
+
 			// 跳转到登录页面
-				console.log("onLaunch")
-				// #ifdef H5
-				// 小程序不能跳转，否则会触发多次初始化
+			console.log("onLaunch")
+			let loginInfo = uni.getStorageSync("loginInfo");
+			if (loginInfo) {
+				// 初始化
+				this.init(loginInfo)
+			}else{
+				// 跳转到登录页
 				uni.navigateTo({
-					url:"/pages/login/login" 
+					url:"/pages/login/login"
 				})
-				// #endif
+			}
 		}
 	}
 </script>
 
 <style lang="scss">
 	@import url('./static/icon/iconfont.css');
+	
+	.tab-page{
+	    // #ifdef H5
+		height: calc(100vh - 46px - 50px); // h5平台100vh是包含了顶部和底部，需要减去
+		// #endif
+		// #ifndef H5
+		height: calc(100vh);    
+		// #endif
+		background-color: #f8f8f8;
+	}
+	
+	.page{
+	    // #ifdef H5
+		height: calc(100vh - 45px); // h5平台100vh是包含了顶部，需要减去
+		// #endif
+		// #ifndef H5
+		height: calc(100vh);    
+		// #endif
+		background-color: #f8f8f8;
+	}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/common/emotion.js b/im-uniapp/common/emotion.js
index 1caa481..9e6917c 100644
--- a/im-uniapp/common/emotion.js
+++ b/im-uniapp/common/emotion.js
@@ -1,21 +1,55 @@
-const emoTextList =  ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷', '冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨', '衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓', '可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球', '瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻', '跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'];
+const emoTextList = ['微笑', '撇嘴', '色', '发呆', '得意', '流泪', '害羞', '闭嘴', '睡', '大哭', '尴尬', '发怒', '调皮', '呲牙', '惊讶', '难过', '酷',
+	'冷汗', '抓狂', '吐', '偷笑', '可爱', '白眼', '傲慢', '饥饿', '困', '惊恐', '流汗', '憨笑', '大兵', '奋斗', '咒骂', '疑问', '嘘', '晕', '折磨',
+	'衰', '骷髅', '敲打', '再见', '擦汗', '抠鼻', '鼓掌', '糗大了', '坏笑', '左哼哼', '右哼哼', '哈欠', '鄙视', '委屈', '快哭了', '阴险', '亲亲', '吓',
+	'可怜', '菜刀', '西瓜', '啤酒', '篮球', '乒乓', '咖啡', '饭', '猪头', '玫瑰', '凋谢', '示爱', '爱心', '心碎', '蛋糕', '闪电', '炸弹', '刀', '足球',
+	'瓢虫', '便便', '月亮', '太阳', '礼物', '拥抱', '强', '弱', '握手', '胜利', '抱拳', '勾引', '拳头', '差劲', '爱你', 'NO', 'OK', '爱情', '飞吻',
+	'跳跳', '发抖', '怄火', '转圈', '磕头', '回头', '跳绳', '挥手', '激动', '街舞', '献吻', '左太极', '右太极'
+];
+
+let emoImageUrlList = [];
+
+// 备注：经过测试，小程序的<rich-text>无法显示相对路径的图片，所以在这里对图片提前全部转成绝对路径
+// 提前初始化图片的url
+for (let i = 0; i < emoTextList.length; i++) {
+	let path = `/static/emoji/${i}.gif`;
+	uni.getImageInfo({
+		src: path,
+		success(res) {
+			emoImageUrlList[i] = res.path
+		},
+		fail(res) {
+			emoImageUrlList = path;
+		}
+	});
+}
 
 
 let transform = (content) => {
 	return content.replace(/\#[\u4E00-\u9FA5]{1,3}\;/gi, textToImg);
 }
 
+
+
 // 将匹配结果替换表情图片
 let textToImg = (emoText) => {
 	let word = emoText.replace(/\#|\;/gi, '');
 	let idx = emoTextList.indexOf(word);
-	let url = `/static/emoji/${idx}.gif`;
-	return `<img src="${url}" style="vertical-align:bottom;"/>`
+	let img = `<img src="${emoImageUrlList[idx]}" style="vertical-align:bottom;"/>`;
+	return img;
+}
+
+
+let textToPath = (emoText) => {
+	let word = emoText.replace(/\#|\;/gi, '');
+	let idx = emoTextList.indexOf(word);
+	return  `/static/emoji/${idx}.gif`;
 }
 
 
+
 export default {
 	emoTextList,
 	transform,
-	textToImg
-}
+	textToImg,
+	textToPath
+}
\ No newline at end of file
diff --git a/im-uniapp/components/chat-item/chat-item.vue b/im-uniapp/components/chat-item/chat-item.vue
index 488abdb..97a086a 100644
--- a/im-uniapp/components/chat-item/chat-item.vue
+++ b/im-uniapp/components/chat-item/chat-item.vue
@@ -45,12 +45,12 @@
 	.chat-item {
 		height: 120rpx;
 		display: flex;
-		margin-bottom: 1rpx;
+		margin-bottom: 2rpx;
 		position: relative;
 		padding-left: 30rpx;
 		align-items: center;
 		padding-right: 10rpx;
-		background-color: #fafafa;
+		background-color: white;
 		white-space: nowrap;
 		&:hover {
 			background-color: #eeeeee;
@@ -76,9 +76,9 @@
 				right: -12rpx;
 				top: -12rpx;
 				color: white;
-				border-radius: 30rpx;
-				padding: 5rpx 6rpx;
-				font-size: 10px;
+				border-radius: 16rpx;
+				padding: 4rpx 12rpx;
+				font-size: 20rpx;
 				text-align: center;
 				white-space: nowrap;
 			}
diff --git a/im-uniapp/components/friend-item/friend-item.vue b/im-uniapp/components/friend-item/friend-item.vue
index 2708a1d..9e93998 100644
--- a/im-uniapp/components/friend-item/friend-item.vue
+++ b/im-uniapp/components/friend-item/friend-item.vue
@@ -48,7 +48,7 @@
 		padding-left: 30rpx;
 		align-items: center;
 		padding-right: 10rpx;
-		background-color: #fafafa;
+		background-color: white;
 		white-space: nowrap;
 		&:hover {
 			background-color: #eeeeee;
diff --git a/im-uniapp/pages/chat/chat-box.vue b/im-uniapp/pages/chat/chat-box.vue
index 271fcec..60f66a2 100644
--- a/im-uniapp/pages/chat/chat-box.vue
+++ b/im-uniapp/pages/chat/chat-box.vue
@@ -1,10 +1,10 @@
 <template>
-	<view class="chat-box">
+	<view class=" page chat-box">
 		<view class="header">
 			<text class="title">{{title}}</text>
 			<uni-icons class="btn-side" type="more-filled" size="30"></uni-icons>
 		</view>
-		<view class="chat-msg" @click="showToolBox(false)">
+		<view class="chat-msg" @click="switchChatTabBox('none')">
 			<scroll-view class="scroll-box" scroll-y="true" :scroll-into-view="'chat-item-'+scrollMsgIdx">
 				<view v-for="(msgInfo,idx) in chat.messages" :key="idx">
 					<chat-message-item :headImage="headImage(msgInfo)" :showName="showName(msgInfo)"
@@ -13,39 +13,41 @@
 				</view>
 			</scroll-view>
 		</view>
-
 		<view class="send-bar">
 			<view class="iconfont icon-voice-circle"></view>
 			<view class="send-text">
-				<textarea class="send-text-area" v-model="sendText" ref="sendBox" auto-height  :show-confirm-bar="false"
-					cursor-spacing="10"  @keydown.enter="sendTextMessage()" @click="showToolBox(false)"></textarea>
+				<textarea class="send-text-area" v-model="sendText"  auto-height :show-confirm-bar="false" :focus="sendTextFocus" @blur="onSendTextBlur()"
+					@focus="onSendTextFoucs()" cursor-spacing="20" @keydown.enter="sendTextMessage()" @click="switchChatTabBox('none')"></textarea>
 			</view>
-			<view class="iconfont icon-icon_emoji"></view>
-			<view v-show="sendText==''" class="iconfont icon-add-circle"  @click="showToolBox(true)" ></view>
-			<button v-show="sendText!=''" class="btn-send" type="primary" @click="sendTextMessage()" size="mini">发送</button>
+			<view class="iconfont icon-icon_emoji" @click="switchChatTabBox('emo')"></view>
+			<view v-show="sendText==''" class="iconfont icon-add-circle" @click="switchChatTabBox('tools')"></view>
+			<button v-show="sendText!=''" class="btn-send" type="primary" @click="sendTextMessage()"
+				size="mini">发送</button>
 		</view>
 
-		<view v-show="showTools" class="chat-tools" >
-			<view class="chat-tools-item">
-				<image-upload :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
-					:onError="onUploadImageFail">
-					<view class="tool-icon iconfont icon-picture"></view>
-				</image-upload>
-				<view class="tool-name">相册</view>
-			</view>
-			<view class="chat-tools-item" v-for="(tool, idx) in tools" @click="onClickTool(tool)">
-				<view class="tool-icon iconfont" :class="tool.icon"></view>
-				<view class="tool-name">{{ tool.name }}</view>
+		<view class="chat-tab-bar" v-show="chatTabBox!='none'">
+			<view v-if="chatTabBox == 'tools'" class="chat-tools">
+				<view class="chat-tools-item">
+					<image-upload :onBefore="onUploadImageBefore" :onSuccess="onUploadImageSuccess"
+						:onError="onUploadImageFail">
+						<view class="tool-icon iconfont icon-picture"></view>
+					</image-upload>
+					<view class="tool-name">相册</view>
+				</view>
+				<view class="chat-tools-item" v-for="(tool, idx) in tools" @click="onClickTool(tool)">
+					<view class="tool-icon iconfont" :class="tool.icon"></view>
+					<view class="tool-name">{{ tool.name }}</view>
+				</view>
 			</view>
-		</view>
-
 
+			<scroll-view v-if="chatTabBox==='emo'" class="chat-emotion" scroll-y="true">
+				<view class="emotion-item-list">
+					<image class="emotion-item" :src="$emo.textToPath(emoText)" v-for="(emoText, i) in $emo.emoTextList"
+						:key="i" @click="selectEmoji(emoText)" mode="aspectFit" lazy-load="true"></image>
+				</view>
+			</scroll-view>
 
-		<!--
-		<emotion v-show="showEmotion" :pos="emoBoxPos" @emotion="handleEmotion"></Emotion>
-		<chat-voice :visible="showVoice" @close="closeVoiceBox" @send="handleSendVoice"></chat-voice>
-		<chat-history :visible="showHistory" :chat="chat" :friend="friend" :group="group" :groupMembers="groupMembers" @close="closeHistoryBox"></chat-history>
-		-->
+		</view>
 	</view>
 </template>
 
@@ -59,11 +61,9 @@
 				groupMembers: [],
 				sendText: "",
 				showVoice: false, // 是否显示语音录制弹窗
-				showSide: false, // 是否显示群聊信息栏
-				showEmotion: false, // 是否显示emoji表情
-				showHistory: false, // 是否显示历史聊天记录
 				scrollMsgIdx: 0, // 滚动条定位为到哪条消息
-				showTools: false,
+				chatTabBox: 'none',
+				sendTextFocus: false,
 				tools: [{
 						name: "拍摄",
 						icon: "icon-camera"
@@ -125,13 +125,12 @@
 					msgInfo.sendId = this.$store.state.userStore.userInfo.id;
 					msgInfo.selfSend = true;
 					this.$store.commit("insertMessage", msgInfo);
-					uni.showToast({
-						title: "发送成功",
-						icon: "none"
-					})
+					this.sendText = "";
 				}).finally(() => {
 					// 滚动到底部
 					this.scrollToBottom();
+					// 重新获得输入焦点
+					this.sendTextFocus = true;
 				});
 			},
 			fillTargetId(msgInfo, targetId) {
@@ -142,13 +141,40 @@
 				}
 			},
 			scrollToBottom() {
+				let size = this.chat.messages.length;
+				if(size>0){
+					this.scrollToMsgIdx(size-1);
+				}
+			},
+			scrollToMsgIdx(idx){
+				// 踩坑：如果scrollMsgIdx值没变化，滚动条不会移动
+				if(idx == this.scrollMsgIdx && idx>0){
+					this.$nextTick(() => {
+						// 先滚动到上一条
+						this.scrollMsgIdx = idx-1;
+						// 再滚动目标位置
+						this.scrollToMsgIdx(idx);
+					});
+					return;
+				}
 				this.$nextTick(() => {
-					this.scrollMsgIdx = this.chat.messages.length - 1;
-				})
-
+					this.scrollMsgIdx = idx;
+				});
+				
+			},
+			switchChatTabBox(v) {
+				this.chatTabBox = v;
+				this.scrollToBottom();
+			},
+			selectEmoji(emoText) {
+				this.sendText += `#${emoText};`;
+			},
+			onSendTextBlur(){
+				this.sendTextFocus=false;
 			},
-			showToolBox(v){
-				this.showTools = v;
+			onSendTextFoucs(){
+				console.log("onSendTextFoucs")
+				this.scrollToBottom();
 			},
 			onUploadImageBefore(file) {
 				let data = {
@@ -176,7 +202,6 @@
 				return true;
 			},
 			onUploadImageSuccess(file, res) {
-				console.log("onUploadImageSuccess")
 				let msgInfo = JSON.parse(JSON.stringify(file.msgInfo));
 				msgInfo.content = JSON.stringify(res.data);
 				this.$http({
@@ -200,7 +225,7 @@
 						break;
 
 				}
-				console.log(tool);
+	
 			}
 		},
 		computed: {
@@ -223,7 +248,6 @@
 			}
 		},
 		onLoad(options) {
-			console.log("onLoad")
 			let chatIdx = options.chatIdx;
 			this.chat = this.$store.state.chatStore.chats[chatIdx];
 			this.scrollToBottom();
@@ -234,12 +258,9 @@
 <style lang="scss" scoped>
 	.chat-box {
 		position: relative;
-		background: white;
 		border: #dddddd solid 1px;
 		display: flex;
 		flex-direction: column;
-		height: calc(100vh - 44px);
-	
 		.header {
 			display: flex;
 			justify-content: center;
@@ -269,7 +290,7 @@
 			border: #dddddd solid 1px;
 			overflow: hidden;
 			position: relative;
-
+			background-color: white;
 			.scroll-box {
 				height: 100%;
 			}
@@ -278,25 +299,28 @@
 		.send-bar {
 			display: flex;
 			align-items: center;
-			padding: 3rpx;
+			padding: 10rpx;
+			margin-bottom: 10rpx;
 			border: #dddddd solid 1px;
-			background-color: #eeeeee;
-				
-			.iconfont{
-				font-size: 50rpx;
-			}	
+			background-color: white;
+
+			.iconfont {
+				font-size: 70rpx;
+				margin: 3rpx;
+			}
+
 			.send-text {
 				flex: 1;
 				background-color: #f8f8f8 !important;
 				overflow: auto;
-				margin: 0rpx 12rpx;
-				padding: 12rpx;
+				padding: 20rpx;
 				background-color: #fff;
-				border-radius: 10rpx;
-				max-height: 225rpx;
-				min-height: 65rpx;
+				border-radius: 20rpx;
+				max-height: 300rpx;
+				min-height: 85rpx;
+				font-size: 30rpx;
 				box-sizing: border-box;
-
+				
 				.send-text-area {
 					width: 100%;
 				}
@@ -304,40 +328,61 @@
 			}
 
 			.btn-send {
-				text-align: right;
+				margin: 5rpx;
 			}
 		}
 
-		.chat-tools {
-			display: flex;
-			flex-wrap: wrap;
-			justify-content: space-between;
+
+		.chat-tab-bar {
+			height: 500rpx;
+			padding: 20rpx;
 			background-color: whitesmoke;
 
-			.chat-tools-item {
-				width: 140rpx;
-				padding: 20rpx;
+			.chat-tools {
+
 				display: flex;
-				flex-direction: column;
-				align-items: center;
+				flex-wrap: wrap;
+				justify-content: space-between;
 
-				.tool-icon {
+				.chat-tools-item {
+					width: 140rpx;
 					padding: 15rpx;
-					font-size: 60rpx;
-					background-color: white;
-					border-radius: 13%;
-				}
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+
+					.tool-icon {
+						padding: 15rpx;
+						font-size: 80rpx;
+						background-color: white;
+						border-radius: 20%;
+					}
+
+					.tool-name {
+						height: 60rpx;
+						line-height: 60rpx;
+						font-size: 25rpx;
 
-				.tool-name {
-					height: 50rpx;
-					line-height: 50rpx;
-					font-size: 25rpx;
-					flex: 3;
+					}
 				}
 			}
-		}
 
+			.chat-emotion {
+				height: 100%;
+				.emotion-item-list {
+					display: flex;
+					flex-wrap: wrap;
 
+					.emotion-item {
+						width: 60rpx;
+						height: 60rpx;
+						text-align: center;
+						cursor: pointer;
+						padding: 15rpx;
+					}
+				}
+			}
 
+		}
 	}
 </style>
\ No newline at end of file
diff --git a/im-uniapp/pages/chat/chat.vue b/im-uniapp/pages/chat/chat.vue
index bbe6b4f..a5d8a56 100644
--- a/im-uniapp/pages/chat/chat.vue
+++ b/im-uniapp/pages/chat/chat.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="tab-page">
 		<scroll-view class="scroll-bar" scroll-with-animation="true" scroll-y="true">
 			<view v-for="(chat,index) in $store.state.chatStore.chats" :key="index">
 				<chat-item :chat="chat" :index="index"></chat-item>
diff --git a/im-uniapp/pages/common/user-info.vue b/im-uniapp/pages/common/user-info.vue
index e841ad7..551455f 100644
--- a/im-uniapp/pages/common/user-info.vue
+++ b/im-uniapp/pages/common/user-info.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="user-info">
+	<view class="page user-info">
 		<view class="content">
 			<view class="avatar">
 				<image class="head-image" :src="userInfo.headImage" lazy-load="true" mode="aspectFill"></image>
@@ -46,8 +46,8 @@
 					headImage: this.userInfo.headImage,
 				};
 				this.$store.commit("openChat", chat);
-				uni.switchTab({
-					url:"/pages/chat/chat"
+				uni.navigateTo({
+					url:"/pages/chat/chat-box?chatIdx=0"
 				})
 			},
 			addFriend() {
diff --git a/im-uniapp/pages/friend/friend-search.vue b/im-uniapp/pages/friend/friend-search.vue
index 5a5a929..2a5f7e5 100644
--- a/im-uniapp/pages/friend/friend-search.vue
+++ b/im-uniapp/pages/friend/friend-search.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="page">
 		<view>
 		  	<uni-search-bar  v-model="searchText"  :focus="true"  @cancel="onCancel()" placeholder="输入好友昵称搜索"></uni-search-bar>
 		</view>
diff --git a/im-uniapp/pages/friend/friend.vue b/im-uniapp/pages/friend/friend.vue
index 415f0ac..a244465 100644
--- a/im-uniapp/pages/friend/friend.vue
+++ b/im-uniapp/pages/friend/friend.vue
@@ -1,5 +1,5 @@
 <template>
-	<view class="page friend">
+	<view class="tab-page friend">
 		<view class="nav-bar">
 			<view class="nav-search">
 				<uni-search-bar @focus="onFocusSearch" cancelButton="none" placeholder="点击搜索好友" ></uni-search-bar>
@@ -8,7 +8,7 @@
 				<uni-icons type="personadd" size="30"></uni-icons>
 			</view>
 		</view>
-		<view class="items">
+		<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>
@@ -44,11 +44,16 @@
 
 <style lang="scss" scoped>
 	.friend {
+		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;
 			}
@@ -59,9 +64,15 @@
 			}
 		}
 
-		.items {
+		.friend-items {
+			flex: 1;
+			padding: 0;
+			border: #dddddd solid 1px;
+			overflow: hidden;
+			position: relative;
+			
 			.scroll-bar {
-				height: 1200rpx;
+				height: 100%;
 			}
 		}
 	}
diff --git a/im-uniapp/pages/group/group.vue b/im-uniapp/pages/group/group.vue
index 8183fd0..4535a81 100644
--- a/im-uniapp/pages/group/group.vue
+++ b/im-uniapp/pages/group/group.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="tab-page">
 		
 	</view>
 </template>
diff --git a/im-uniapp/pages/login/login.vue b/im-uniapp/pages/login/login.vue
index b58a589..d967279 100644
--- a/im-uniapp/pages/login/login.vue
+++ b/im-uniapp/pages/login/login.vue
@@ -48,166 +48,23 @@
 				}).then(data => {
 					console.log("登录成功,自动跳转到聊天页面...")
 					uni.setStorageSync("loginInfo", data);
-					this.init(data);
-				})
-			},
-			init(loginInfo) {
-				// 加载数据
-				this.$store.dispatch("load").then(() => {
-					// 初始化websocket
-					this.initWebSocket(loginInfo);
-				}).catch((e) => {
-					console.log(e);
-					this.quit();
-				})
-				// 跳转到登录界面
-				uni.switchTab({
-					url: "/pages/chat/chat"
-				})
-			},
-			initWebSocket(loginInfo) {
-				let userId = this.$store.state.userStore.userInfo.id;
-				this.$wsApi.createWebSocket(process.env.WS_URL, loginInfo.accessToken);
-				this.$wsApi.onopen(() => {
-					this.pullUnreadMessage();
-				});
-				this.$wsApi.onmessage((cmd, msgInfo) => {
-					if (cmd == 2) {
-						// 异地登录，强制下线
-						uni.showModal({
-							content: '您已在其他地方登陆，将被强制下线',  
-							showCancel: false,
-						})
-						this.quit();
-					} else if (cmd == 3) {
-						// 标记这条消息是不是自己发的
-						msgInfo.selfSend = userId == msgInfo.sendId;
-						// 插入私聊消息
-						this.handlePrivateMessage(msgInfo);
-					} else if (cmd == 4) {
-						// 标记这条消息是不是自己发的
-						msgInfo.selfSend = userId == msgInfo.sendId;
-						// 插入群聊消息
-						this.handleGroupMessage(msgInfo);
-					}
-				})
-			},
-			pullUnreadMessage() {
-				// 拉取未读私聊消息
-				this.$http({
-					url: "/message/private/pullUnreadMessage",
-					method: 'POST'
-				});
-				// 拉取未读群聊消息
-				this.$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);
-				if (!friend) {
-					// 好友列表不存在好友信息，则发请求获取好友信息
-					this.$http({
-						url: `/friend/find/${msg.sendId}`,
-						method: 'get'
-					}).then((friend) => {
-						this.insertPrivateMessage(friend, msg);
-						this.$store.commit("addFriend", friend);
-					})
-				} else {
-					this.insertPrivateMessage(friend, msg);
-				}
-
-			},
-			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;
-				}
-
-				let chatInfo = {
-					type: 'PRIVATE',
-					targetId: friend.id,
-					showName: friend.nickName,
-					headImage: friend.headImage
-				};
-				// 打开会话
-				this.$store.commit("openChat", chatInfo);
-				// 插入消息
-				this.$store.commit("insertMessage", msg);
-				// 播放提示音
-				!msg.selfSend && this.playAudioTip();
-
-			},
-			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'
-					}).then((group) => {
-						this.insertGroupMessage(group, msg);
-						this.$store.commit("addGroup", group);
+					// 调用App.vue的初始化方法
+					getApp().init(data);
+					// 跳转到聊天页面
+					uni.switchTab({
+						url: "/pages/chat/chat"
 					})
-				} else {
-					this.insertGroupMessage(group, msg);
-				}
-
-			},
-			insertGroupMessage(group, msg) {
-				let chatInfo = {
-					type: 'GROUP',
-					targetId: group.id,
-					showName: group.remark,
-					headImage: group.headImageThumb
-				};
-				// 打开会话
-				this.$store.commit("openChat", chatInfo);
-				// 插入消息
-				this.$store.commit("insertMessage", msg);
-				// 播放提示音
-				!msg.selfSend && this.playAudioTip();
-			},
-			quit() {
-				uni.showToast({
-					title: "退出登录"
-				})
-				console.log("退出登录")
-				this.$wsApi.closeWebSocket();
-				uni.removeStorageSync("loginInfo");
-				uni.navigateTo({
-					url:"/pages/login/login"
 				})
-			},
-			playAudioTip() {
-				let audio = new Audio();
-				let url = "/static/audio/tip.wav";
-				audio.src = url;
-				audio.play();
 			}
 		},
-		mounted() {
-			console.log("login  mounted")
+		onLoad() {
+			console.log("login  onLoad")
 			let loginInfo = uni.getStorageSync("loginInfo");
 			if (loginInfo) {
-				// 已登录,加载数据后跳转
-				this.init(loginInfo);
+				// 跳转到聊天页面
+				uni.switchTab({
+					url: "/pages/chat/chat"
+				})
 				
 			}
 		}
diff --git a/im-uniapp/pages/mine/mine.vue b/im-uniapp/pages/mine/mine.vue
index 8183fd0..4535a81 100644
--- a/im-uniapp/pages/mine/mine.vue
+++ b/im-uniapp/pages/mine/mine.vue
@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="tab-page">
 		
 	</view>
 </template>
diff --git a/im-uniapp/store/chatStore.js b/im-uniapp/store/chatStore.js
index 5cb719f..d63dbd9 100644
--- a/im-uniapp/store/chatStore.js
+++ b/im-uniapp/store/chatStore.js
@@ -6,7 +6,6 @@ export default {
 
 	mutations: {
 		setChats(state,chats){
-			console.log(chats);
 			state.chats = chats;
 		},
 		openChat(state, chatInfo) {
@@ -157,7 +156,6 @@ export default {
 	actions:{
 		loadChat(context) {
 			return new Promise((resolve, reject) => {
-				console.log(".....")
 				uni.getStorage({
 					key:"chats",
 					success(res) {
diff --git a/im-uniapp/store/friendStore.js b/im-uniapp/store/friendStore.js
index f95f992..18790e0 100644
--- a/im-uniapp/store/friendStore.js
+++ b/im-uniapp/store/friendStore.js
@@ -34,7 +34,6 @@ export default {
 		},
 		
 		setOnlineStatus(state, onlineIds) {
-			console.log("setOnlineStatus")
 			state.friends.forEach((f) => {
 				let onlineFriend = onlineIds.find((id) => f.id == id);
 				f.online = onlineFriend != undefined;
diff --git a/im-uniapp/store/userStore.js b/im-uniapp/store/userStore.js
index 7c2470f..024c7e6 100644
--- a/im-uniapp/store/userStore.js
+++ b/im-uniapp/store/userStore.js
@@ -26,7 +26,6 @@ export default {
 				}).then((userInfo) => {
 					context.commit("setUserInfo",userInfo);
 					resolve();
-					console.log("suerstore")
 				}).catch(()=>{
 					reject();
 				});