commie/im
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

emoji

Browse Source
This commit is contained in:
cansnow
2025-12-09 09:27:29 +08:00
parent 4cb71e2b55
commit 375917f06c
5 changed files with 481 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/conversation/chating/components/ChatingFooter/index.vue
+101 -49
View File
@@ -1,35 +1,43 @@
<template>
<view>
<view>
<view class="chat_footer">
<!-- 语音信息 -->
<image v-if="1==2" v-show="!isAudio" @click.prevent="isAudio=!isAudio" src="@/static/images/chating_footer_audio.png" alt="" srcset="" />
<image v-if="1==2" v-show="isAudio" @click.prevent="isAudio=!isAudio" src="@/static/images/chating_footer_audio_recording.png" alt="" srcset="" />
<view class="input_content">
<!-- #ifdef APP-PLUS -->
<view v-if="isAudio" class="voice_title" @touchstart.stop.prevent="startVoice"
@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
<text>{{ voiceTitle }}</text>
</view>
<!-- #endif -->
<CustomEditor v-if="!isAudio" class="custom_editor" ref="customEditor" @ready="editorReady" @focus="editorFocus"
@blur="editorBlur" @input="editorInput" />
</view>
<view class="footer_action_area" v-show="!isAudio">
<image class="emoji_action" @click.prevent="updateActionBar(true)" src="@/static/images/chating_footer_emoji.png" alt="" srcset="" />
<image v-show="!hasContent" @click.prevent="updateActionBar(false)" src="@/static/images/chating_footer_add.png" alt="" srcset="" />
<button class="send_btn" type="primary" v-show="hasContent" @touchend.prevent="sendTextMessage">发送</button>
<view class="chat_footer">
<!-- 语音信息 -->
<image v-if="1==2" v-show="!isAudio" @click.prevent="isAudio=!isAudio" src="@/static/images/chating_footer_audio.png" alt="" srcset="" />
<image v-if="1==2" v-show="isAudio" @click.prevent="isAudio=!isAudio" src="@/static/images/chating_footer_audio_recording.png" alt="" srcset="" />
<view class="input_content">
<!-- #ifdef APP-PLUS -->
<view v-if="isAudio" class="voice_title" @touchstart.stop.prevent="startVoice"
@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
<text>{{ voiceTitle }}</text>
</view>
<!-- #endif -->
<!-- 使用 SimpleEditor 替代 CustomEditor，更简单可靠 -->
<SimpleEditor
v-if="!isAudio"
class="custom_editor"
ref="customEditor"
:value="inputHtml"
@focus="editorFocus"
@blur="editorBlur"
@input="editorInput" />
</view>
<view class="footer_action_area" v-show="!isAudio">
<image class="emoji_action" @click.prevent="updateActionBar(true)" src="@/static/images/chating_footer_emoji.png" alt="" srcset="" />
<image v-show="!hasContent" @click.prevent="updateActionBar(false)" src="@/static/images/chating_footer_add.png" alt="" srcset="" />
<button class="send_btn" type="primary" v-show="hasContent" @touchend.prevent="sendTextMessage">发送</button>
</view>
<chating-action-bar :isEmoji="isEmoji" @sendMessage="sendMessage($event,storeCurrentConversation.userID,storeCurrentConversation.groupID)" @prepareMediaMessage="prepareMediaMessage"
v-show="actionBarVisible" />
<u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
:closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
@close="showActionSheet = false">
</u-action-sheet>
</view>
<chating-action-bar :isEmoji="isEmoji"
@sendMessage="sendMessage($event,storeCurrentConversation.userID,storeCurrentConversation.groupID)"
@prepareMediaMessage="prepareMediaMessage"
@onUserEvent="onUserEvent"
v-show="actionBarVisible" />
<u-action-sheet :safeAreaInsetBottom="true" round="12" :actions="actionSheetMenu" @select="selectClick"
:closeOnClickOverlay="true" :closeOnClickAction="true" :show="showActionSheet"
@close="showActionSheet = false">
</u-action-sheet>
<!-- 录音动画 -->
<!-- #ifdef APP-PLUS -->
@@ -57,8 +65,9 @@
import {offlinePushInfo} from "@/util/imCommon";
import {ChatingFooterActionTypes,UpdateMessageTypes,} from "@/constant";
import IMSDK, {IMMethods,MessageStatus,MessageType,} from "openim-uniapp-polyfill";
import UParse from "@/components/gaoyia-parse/parse.vue";
//import UParse from "@/components/gaoyia-parse/parse.vue";
import CustomEditor from "./CustomEditor";
import SimpleEditor from "./SimpleEditor";
import ChatingActionBar from "./ChatingActionBar";
const needClearTypes = [MessageType.TextMessage];
@@ -79,8 +88,9 @@
export default {
components: {
CustomEditor,
SimpleEditor,
ChatingActionBar,
UParse,
//UParse,
},
props: {
footerOutsideFlag: Number,
@@ -93,12 +103,12 @@
sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
isEmoji:false,
isAudio:false,
customEditorCtx: null,
inputHtml: "",
actionBarVisible: false,
isInputFocus: false,
actionSheetMenu: [],
showActionSheet: false,
isInsertingEmoji: false, // 标记是否正在插入表情
};
},
computed: {
@@ -143,7 +153,7 @@
sendMessage(message,user_id,group_id) {
this.pushNewMessage(message);
if (needClearTypes.includes(message.contentType)) {
this.customEditorCtx.clear();
this.$refs.customEditor.clear();
}
this.$emit("scrollToBottom");
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
@@ -186,19 +196,25 @@
},
// action
onClickActionBarOutside() {
// 如果正在插入表情，不隐藏表情栏
if (this.isInsertingEmoji) {
return;
}
if (this.actionBarVisible) {
this.actionBarVisible = false;
}
},
updateActionBar(isEmoji) {
this.actionBarVisible = !this.actionBarVisible;
console.log(this.isEmoji);
this.isEmoji = !!isEmoji;
console.log(this.isEmoji);
},
editorReady(e) {
this.customEditorCtx = e.context;
this.customEditorCtx.clear();
if(this.actionBarVisible){
if(this.isEmoji!== !!isEmoji){
this.isEmoji = !!isEmoji;
}else{
this.actionBarVisible = false;
}
}else{
this.actionBarVisible = true;
this.isEmoji = !!isEmoji;
}
},
editorFocus() {
this.isInputFocus = true;
@@ -208,10 +224,11 @@
this.isInputFocus = false;
},
editorInput(e) {
this.inputHtml = e.detail.html;
// SimpleEditor 返回的是纯文本，直接使用
this.inputHtml = e.detail.value || e.detail.text || e.detail.html || "";
},
prepareMediaMessage(type,extra) {
console.log(type)
console.log(type,extra)
if (type === ChatingFooterActionTypes.Video) {
this.actionSheetMenu = [...rtcChoose];
this.showActionSheet = true;
@@ -240,14 +257,34 @@
}
if (type === "emoji") {
//TODO 在光标处插入文字extra
this.customEditorCtx.insertText({
text: extra,
success: () => {
console.log("插入文字成功");
},
fail: (err) => {
console.log("插入文字失败", err);
//editorContext.insertImage(
// 标记正在插入表情（先设置标志，保护表情栏不被隐藏）
this.isInsertingEmoji = true;
// 确保表情栏显示（只在真正需要时才更新状态，避免不必要的响应式触发）
const wasVisible = this.actionBarVisible;
const wasEmoji = this.isEmoji;
if (!wasVisible || !wasEmoji) {
// 只有在需要时才更新状态，减少响应式触发
if (!wasVisible) {
this.actionBarVisible = true;
}
if (!wasEmoji) {
this.isEmoji = true;
}
}
// 直接插入文本，不等待 nextTick，减少延迟
this.$refs.customEditor.insertText(extra,() =>{
console.log("插入文字成功");
// 延迟重置标志，确保其他事件不会隐藏表情栏
setTimeout(() => {
this.isInsertingEmoji = false;
}, 300);
},(err) => {
console.log("插入文字失败", err);
this.isInsertingEmoji = false;
});
}
},
@@ -322,6 +359,11 @@
// keyboard
keyboardChangeHander({height}) {
//console.log(height);
// 如果正在插入表情，不隐藏表情栏
if (this.isInsertingEmoji) {
return;
}
if (height > 0) {
if (this.actionBarVisible) {
this.actionBarVisible = false;
@@ -460,7 +502,17 @@
item.content.anmitionPlay = false;
},
/*-------------------------------------录音相关方法块 end---------------------------------------------------*/
onUserEvent(e){
switch(e.type){
case "clearSendStr":
this.$refs.customEditor.clear();
break;
case "delSendStr":
this.$refs.customEditor.delete();
break;
}
console.log(e);
}
},
};
</script>