uniapp 输入@触发选择弹窗

im-uniapp/App.vue

@@ -73,7 +73,6 @@
 							this.insertPrivateMessage(friend,msgInfo);
 						}	
 					})
-					store.commit("refreshChats");
 					if (msgInfos.length == 100) {
 						// 继续拉取
 						this.loadPrivateMessage(msgInfos[99].id);
@@ -96,7 +95,6 @@
 							this.insertGroupMessage(group,msgInfo);
 						}
 					})
-					store.commit("refreshChats");
 					if (msgInfos.length == 100) {
 						// 继续拉取
 						this.loadGroupMessage(msgInfos[99].id);

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

@@ -11,8 +11,8 @@
 				<view v-for="(msgInfo,idx) in chat.messages" :key="idx">
 					<chat-message-item v-if="idx>=showMinIdx" :headImage="headImage(msgInfo)"
 						:showName="showName(msgInfo)" @recall="onRecallMessage" @delete="onDeleteMessage"
-						@longPressHead="onLongPressHead(msgInfo)"
-						@download="onDownloadFile" :id="'chat-item-'+idx" :msgInfo="msgInfo">
+						@longPressHead="onLongPressHead(msgInfo)" @download="onDownloadFile" :id="'chat-item-'+idx"
+						:msgInfo="msgInfo">
 					</chat-message-item>
 				</view>
 			</scroll-view>
@@ -31,14 +31,14 @@
 			<view class="send-text">
 				<textarea class="send-text-area" v-model="sendText" auto-height :show-confirm-bar="false"
 					:adjust-position="false" @confirm="sendTextMessage()" @keyboardheightchange="onKeyboardheightchange"
-					confirm-type="send" confirm-hold :hold-keyboard="true"></textarea>
+					@input="onTextInput" confirm-type="send" confirm-hold :hold-keyboard="true"></textarea>
 			</view>
 			<view v-if="chat.type=='GROUP'" class="iconfont icon-at" @click="openAtBox()"></view>
 			<view class="iconfont icon-icon_emoji" @click="switchChatTabBox('emo',true)"></view>
 			<view v-if="sendText==''" class="iconfont icon-add" @click="switchChatTabBox('tools',true)">
 			</view>
-			<button v-if="sendText!=''||atUserIds.length>0" class="btn-send" type="primary" @touchend.prevent="sendTextMessage()"
-				size="mini">发送</button>
+			<button v-if="sendText!=''||atUserIds.length>0" class="btn-send" type="primary"
+				@touchend.prevent="sendTextMessage()" size="mini">发送</button>
 		</view>
 
 		<view class="chat-tab-bar" v-show="chatTabBox!='none' ||showKeyBoard " :style="{height:`${keyboardHeight}px`}">
@@ -119,8 +119,8 @@
 			onAtComplete(atUserIds) {
 				this.atUserIds = atUserIds;
 			},
-			onLongPressHead(msgInfo){
-				if(!msgInfo.selfSend && this.chat.type=="GROUP" && this.atUserIds.indexOf(msgInfo.sendId)<0){
+			onLongPressHead(msgInfo) {
+				if (!msgInfo.selfSend && this.chat.type == "GROUP" && this.atUserIds.indexOf(msgInfo.sendId) < 0) {
 					this.atUserIds.push(msgInfo.sendId);
 				}
 			},
@@ -141,7 +141,7 @@
 				}
 			},
 			sendTextMessage() {
-				if (!this.sendText.trim() && this.atUserIds.length==0) {
+				if (!this.sendText.trim() && this.atUserIds.length == 0) {
 					return uni.showToast({
 						title: "不能发送空白信息",
 						icon: "none"
@@ -179,10 +179,10 @@
 			createAtText() {
 				let atText = "";
 				this.atUserIds.forEach((id) => {
-					if(id==-1){
+					if (id == -1) {
 						atText += ` @全体成员`;
-					}else{
-						let member = this.groupMembers.find((m)=>m.userId==id);
+					} else {
+						let member = this.groupMembers.find((m) => m.userId == id);
 						if (member) {
 							atText += ` @${member.aliasName}`;
 						}
@@ -414,6 +414,16 @@
 					})
 				}
 			},
+			onTextInput(e) {
+				let idx = e.detail.cursor - 1;
+				if (this.chat.type == 'GROUP' && e.detail.value[idx] == '@') {
+					this.openAtBox();
+					let sendText = e.detail.value.replace("@", '');
+					this.$nextTick(() => {
+						this.sendText = sendText;
+					})
+				}
+			},
 			readedMessage() {
 				if (this.chat.type == "GROUP") {
 					var url = `/message/group/readed?groupId=${this.chat.targetId}`
@@ -491,15 +501,18 @@
 			unreadCount() {
 				return this.chat.unreadCount;
 			},
-			atUserItems(){
+			atUserItems() {
 				let atUsers = [];
-				this.atUserIds.forEach((id)=>{
-					if(id==-1){
-						atUsers.push({id:-1,aliasName:"全体成员"})
+				this.atUserIds.forEach((id) => {
+					if (id == -1) {
+						atUsers.push({
+							id: -1,
+							aliasName: "全体成员"
+						})
 						return;
 					}
-					let member = this.groupMembers.find((m)=>m.userId==id);
-					if(member){
+					let member = this.groupMembers.find((m) => m.userId == id);
+					if (member) {
 						atUsers.push(member);
 					}
 				})
@@ -612,6 +625,7 @@
 			.chat-at-scroll-box {
 				flex: 1;
 				width: 80%;
+
 				.chat-at-items {
 					display: flex;
 					align-items: center;

im-uniapp/store/chatStore.js

@@ -31,15 +31,12 @@ export default {
 		},
 		openChat(state, chatInfo) {
 			let chat = null;
-			for (let i in state.chats) {
-				if (state.chats[i].type == chatInfo.type &&
-					state.chats[i].targetId === chatInfo.targetId) {
-					chat = state.chats[i];
-					// 放置头部（这个操作非常耗资源，正在加载消息时不执行）
-					if(!state.loadingPrivateMsg && !state.loadingPrivateMsg){
-						state.chats.splice(i, 1);
-						state.chats.unshift(chat);
-					}
+			for (let idx in state.chats) {
+				if (state.chats[idx].type == chatInfo.type &&
+					state.chats[idx].targetId === chatInfo.targetId) {
+					chat = state.chats[idx];
+					// 放置头部
+					this.commit("moveTop",idx)
 					break;
 				}
 			}
@@ -110,22 +107,27 @@ export default {
 			}
 		},
 		moveTop(state, idx) {
+			// 加载中不移动，很耗性能
+			if(state.loadingPrivateMsg || state.loadingGroupMsg){
+				return ;
+			}
+			if (idx > 0) {
 				let chat = state.chats[idx];
-			// 放置头部
 				state.chats.splice(idx, 1);
 				state.chats.unshift(chat);
+				this.commit("saveToStorage");
+			}
 		},
 		insertMessage(state, msgInfo) {
 			// 获取对方id或群id
 			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;
+					this.commit("moveTop", idx)
 					break;
 				}
 			}
@@ -158,7 +160,6 @@ export default {
 					chat.atAll = true;
 				}
 			}
-			
 			// 记录消息的最大id
 			if (msgInfo.id && type == "PRIVATE" && msgInfo.id > state.privateMsgMaxId) {
 				state.privateMsgMaxId = msgInfo.id;
@@ -246,9 +247,15 @@ export default {
 		},
 		loadingPrivateMsg(state, loadding) {
 			state.loadingPrivateMsg = loadding;
+			if(!state.loadingPrivateMsg && !state.loadingGroupMsg){
+				this.commit("refreshChats")
+			}
 		},
 		loadingGroupMsg(state, loadding) {
 			state.loadingGroupMsg = loadding;
+			if(!state.loadingPrivateMsg && !state.loadingGroupMsg){
+				this.commit("refreshChats")
+			}
 		},
 		refreshChats(state){
 			state.chats.forEach((chat)=>{