17

pages/conversation/chating/components/ChatingFooter/index.vue

@@ -5,15 +5,13 @@
 			<image class="action_btn" v-show="inputType == 'keyboard'" @click.prevent="swtichInputType('record')" mode="heightFix" src="@/static/images/chating_footer_audio.png" alt="" srcset="" />
 			<image class="action_btn" v-show="inputType == 'record'" @click.prevent="swtichInputType('keyboard')" mode="heightFix" src="@/static/images/chating_footer_audio_recording.png" alt="" srcset="" />
 			<view class="input_content">
-				<Recoder v-if="inputType == 'record'" @RecodeEvent="onRecodeEvent"></Recoder>
+				<Recoder v-if="inputType == 'record'" @RecodEvent="onRecodEvent"></Recoder>
 				<SimpleEditor 
 					v-if="inputType == 'keyboard'" 
 					class="custom_editor" 
 					ref="customEditor" 
-					:value="inputHtml"
-					@focus="editorFocus"
-					@blur="editorBlur" 
-					@input="editorInput" />
+					@onUserEvent="onEditorEvent"
+					:value="inputHtml"/>
 			</view>
 
 			<view class="footer_action_area" v-show="inputType == 'keyboard'">
@@ -53,6 +51,7 @@
 	import {offlinePushInfo} from "@/util/imCommon";
 	import {ChatingFooterActionTypes,UpdateMessageTypes,} from "@/constant";
 	import IMSDK, {IMMethods,MessageStatus,MessageType,} from "openim-uniapp-polyfill";
+	import CustomEditor from "./CustomEditor";
 	import SimpleEditor from "./SimpleEditor";
 	import ChatingActionBar from "./ChatingActionBar";
 	import Recoder from "./Recoder";
@@ -74,7 +73,7 @@
 
 	export default {
 		components: {
-			SimpleEditor,
+			CustomEditor,SimpleEditor,
 			ChatingActionBar,
 			Recoder,
 		},
@@ -87,7 +86,7 @@
 				voiceIconText : "正在录音...",
 				inputType:"keyboard",
 				isEmoji:false,
-				inputHtml: '<span>@cansnow</span><span>@baidu</span><span>@jingds</span>',
+				inputHtml: '',
 				actionBarVisible: false,
 				isInputFocus: false,
 				actionSheetMenu: [],
@@ -102,6 +101,7 @@
 				"storeCurrentConversation",
 				"storeCurrentGroup",
 				"storeBlackList",
+				"storeCurrentUserID"
 			]),
 			hasContent() {
 				return html2Text(this.inputHtml) !== "";
@@ -212,17 +212,7 @@
 					this.isEmoji = false;
 				}
 			},
-			editorFocus() {
-				this.isInputFocus = true;
-				this.$emit("scrollToBottom");
-			},
-			editorBlur() {
-				this.isInputFocus = false;
-			},
-			editorInput(e) {
-				// SimpleEditor 返回的是纯文本，直接使用
-				this.inputHtml = e.detail.value || e.detail.text || e.detail.html || "";
-			},
+
 			async sendLocationMessage(res){
 				console.log(res);
                 const _this = this;
@@ -318,8 +308,45 @@
 			disposeKeyboardListener() {
 				uni.offKeyboardHeightChange(this.keyboardChangeHander);
 			},
-			
-			onRecodeEvent(e){
+			onEditorEvent(e){
+				const _this = this;
+				if(e.type=="atevent" && this.storeCurrentConversation.groupID){
+					uni.navigateTo({
+						url: `/pages/common/contactChoose/chooseGroupMember?groupID=${this.storeCurrentConversation.groupID}&checkedUserIDList=[]&hideUserIDList=[${this.storeCurrentUserID}]`,
+						events: {
+							onSelectedConfirm(userList) {
+								userList.forEach((user)=>{
+									_this.$refs.customEditor.insertMention(user.remark || user.nickname || user.showName,user.userID);
+									_this.$refs.customEditor.focus();
+								})
+							}
+						}
+					});
+					return ;
+				}
+				if(e.type=="ready"){
+					return ;
+				}
+				if(e.type=="focus"){
+					this.isInputFocus = true;
+					this.$emit("scrollToBottom");
+					return ;
+				}
+				if(e.type=="blur"){
+					this.isInputFocus = false;
+					return ;
+				}
+				if(e.type=="onChange"){
+					return ;
+				}
+				if(e.type=="input"){
+					// SimpleEditor 返回的是纯文本，直接使用
+					this.inputHtml = e.html || e.text || "";
+					return ;
+				}
+				console.log(e);
+			},
+			onRecodEvent(e){
                 const _this = this;
 				switch(e.type){
 					case "voiceIconTextChange":
@@ -366,13 +393,13 @@
                         
                         // 直接插入文本，不等待 nextTick，减少延迟
                         this.$refs.customEditor.insertText(e.emoji,() =>{
-                            console.log("插入文字成功");
+                            //console.log("插入文字成功");
                             // 延迟重置标志，确保其他事件不会隐藏表情栏
                             setTimeout(() => {
                                 this.isInsertingEmoji = false;
                             }, 300);
                         },(err) => {
-                            console.log("插入文字失败", err);
+                            //console.log("插入文字失败", err);
                             this.isInsertingEmoji = false;
                         });
 						break;
@@ -450,11 +477,10 @@
 
 <style lang="scss" scoped>
 	.custom_editor {
-		img {
-			vertical-align: sub;
-		}
+		min-height: 60rpx;
+		max-height: 240rpx;
 	}
-
+	
 	.forbidden_footer {
 		width: 100%;
 		height: 112rpx;
@@ -465,7 +491,7 @@
 		align-items: center;
 		background: #f0f2f6;
 	}
-
+	
 	.chat_footer {
 		display: flex;
 		align-items: flex-end;
@@ -473,16 +499,14 @@
 		background: #f6f6f6;
 		// height: 50px;
 		max-height: 120px;
-		padding: 0 20rpx;
+		padding: 10rpx 20rpx;
 		gap: 20rpx;
-
+	
 		.input_content {
 			flex: 1;
-			min-height: 80rpx;
-			max-height: 240rpx;
 			border-radius: 8rpx;
 			position: relative;
-
+	
 			.record_btn {
 				// background-color: #3c9cff;
 				background: #fff;
@@ -491,37 +515,21 @@
 				font-size: 24rpx;
 			}
 		}
-
-		.quote_message {
-			@include vCenterBox();
-			justify-content: space-between;
-			margin-top: 12rpx;
-			padding: 8rpx;
-			// padding-top: 20rpx;
-			border-radius: 6rpx;
-			background-color: #fff;
-			color: #666;
-
-			.content {
-				::v-deep uni-view {
-					@include ellipsisWithLine(2);
-				}
-			}
-		}
+	
 		.action_btn{
-			width: 26px;
-			height: 26px;
-			margin: 24rpx auto;
+			width: 50rpx;
+			height: 50rpx;
+			margin-bottom: 6rpx;
 		}
 		.footer_action_area {
 			display: flex;
 			align-items: center;
 			gap: 20rpx;
 		}
-
+	
 		.send_btn {
-			height: 30px;
-			line-height: 30px;
+			height: 50rpx;
+			line-height: 50rpx;
 			background-color: $uni-color-success;
 			padding: 0 8px;
 			border-radius: 4px;