新增聊天普通输入框,用于处理手机系统版本过低时不支持quill-edior导致的问题
This commit is contained in:
parent
2953d50e4b
commit
bbb5dd99fc
@ -263,9 +263,20 @@
|
|||||||
@editorChange="onEditorChange"
|
@editorChange="onEditorChange"
|
||||||
style="width: 100%; flex: 1; height: 100%;"
|
style="width: 100%; flex: 1; height: 100%;"
|
||||||
@click="onEditorClick"
|
@click="onEditorClick"
|
||||||
|
v-if="state.canUseQuillEditor"
|
||||||
/>
|
/>
|
||||||
<!-- <tm-input type=textarea autoHeight focusColor="#F9F9F9" color="#F9F9F9" :inputPadding="[12]"
|
<tm-input
|
||||||
placeholder=""></tm-input> -->
|
type="textarea"
|
||||||
|
autoHeight
|
||||||
|
focusColor="#F9F9F9"
|
||||||
|
color="#F9F9F9"
|
||||||
|
:inputPadding="[12]"
|
||||||
|
placeholder=""
|
||||||
|
v-if="!state.canUseQuillEditor"
|
||||||
|
@update:modelValue="onTextAreaChange"
|
||||||
|
v-model="state.textAreaValue"
|
||||||
|
@input="onTextAreaInput"
|
||||||
|
></tm-input>
|
||||||
<div class="quote-area" v-if="state?.quoteInfo">
|
<div class="quote-area" v-if="state?.quoteInfo">
|
||||||
<span
|
<span
|
||||||
v-if="state?.quoteInfo?.msg_type === 1"
|
v-if="state?.quoteInfo?.msg_type === 1"
|
||||||
@ -326,7 +337,13 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-if="state.isOpenEmojiPanel" class="mt-[50rpx]">
|
<div v-if="state.isOpenEmojiPanel" class="mt-[50rpx]">
|
||||||
<emojiPanel @on-select="onEmoticonEvent" />
|
<emojiPanel @on-select="(data) => {
|
||||||
|
if (!state.canUseQuillEditor) {
|
||||||
|
onTextAreaEmoticon(data)
|
||||||
|
} else {
|
||||||
|
onEmoticonEvent(data)
|
||||||
|
}
|
||||||
|
}" />
|
||||||
</div>
|
</div>
|
||||||
<div v-if="state.isOpenFilePanel" class="mt-[16rpx]">
|
<div v-if="state.isOpenFilePanel" class="mt-[16rpx]">
|
||||||
<filePanel
|
<filePanel
|
||||||
@ -629,6 +646,8 @@ const state = ref({
|
|||||||
lastMentionPosition: -1, // 添加新的状态来记录上一次@的位置
|
lastMentionPosition: -1, // 添加新的状态来记录上一次@的位置
|
||||||
isLoading: false, //发送按钮loading
|
isLoading: false, //发送按钮loading
|
||||||
lastSelection: 0,
|
lastSelection: 0,
|
||||||
|
canUseQuillEditor: true, //是否可以使用quill编辑器,如果版本不支持,则使用普通输入框
|
||||||
|
textAreaValue: '', //普通输入框的值
|
||||||
})
|
})
|
||||||
|
|
||||||
uniOnload(async (options) => {
|
uniOnload(async (options) => {
|
||||||
@ -728,7 +747,74 @@ const onSendMessage = (data = {}, callBack, showLoading = false) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const onTextAreaChange = (value) => {
|
||||||
|
state.value.textAreaValue = value
|
||||||
|
|
||||||
|
// 更新mentionUserIds数组,确保与输入框中的@内容一致
|
||||||
|
const atPattern = /@([^@\s]+)(?:\s|$)/g
|
||||||
|
const matches = Array.from(value.matchAll(atPattern))
|
||||||
|
const mentionedUsers = matches.map(match => match[1].trim().toLowerCase())
|
||||||
|
|
||||||
|
// 获取当前对话中的所有成员信息
|
||||||
|
const members = dialogueStore.members || []
|
||||||
|
|
||||||
|
// 根据@的用户名找到对应的user_id
|
||||||
|
const newMentionUserIds = mentionedUsers.map(username => {
|
||||||
|
if (username === '所有人') {
|
||||||
|
return 0 // 如果是@所有人,返回0
|
||||||
|
}
|
||||||
|
const member = members.find(m => m.nickname.trim().toLowerCase() === username)
|
||||||
|
return member ? member.id : null
|
||||||
|
}).filter(id => id !== null)
|
||||||
|
|
||||||
|
// 只有在输入框中有@内容时才更新mentionUserIds
|
||||||
|
if (value.includes('@')) {
|
||||||
|
state.value.mentionUserIds = newMentionUserIds
|
||||||
|
} else {
|
||||||
|
state.value.mentionUserIds = []
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理输入框输入事件
|
||||||
|
const onTextAreaInput = (value) => {
|
||||||
|
console.log(value, 'value')
|
||||||
|
if(value.length > 0){
|
||||||
|
if(value[value.length - 1] === '@'){
|
||||||
|
if(talkParams.type === 1){
|
||||||
|
return
|
||||||
|
}
|
||||||
|
state.value.isShowMentionSelect = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const onSendMessageClick = () => {
|
const onSendMessageClick = () => {
|
||||||
|
if (!state.value.canUseQuillEditor) {
|
||||||
|
// 处理普通输入框的发送消息
|
||||||
|
if (state.value.textAreaValue.trim() === '') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (state.value.textAreaValue.length > 1024) {
|
||||||
|
return message.warning('发送内容超长,请分条发送')
|
||||||
|
}
|
||||||
|
let message = {
|
||||||
|
type: 'text',
|
||||||
|
content: state.value.textAreaValue,
|
||||||
|
quote_id: state.value.quoteInfo ? state.value.quoteInfo.msg_id : null, // 添加quote_id
|
||||||
|
mentions: state.value.mentionUserIds, // 使用最终的用户ID数组
|
||||||
|
}
|
||||||
|
console.log(message)
|
||||||
|
onSendMessage(
|
||||||
|
message,
|
||||||
|
(ok) => {
|
||||||
|
if (!ok) return
|
||||||
|
state.value.textAreaValue = ''
|
||||||
|
state.value.quoteInfo = null // 发送后清除引用信息
|
||||||
|
},
|
||||||
|
true,
|
||||||
|
)
|
||||||
|
return
|
||||||
|
}
|
||||||
// 发送前确保 mentionUserIds 是最新的
|
// 发送前确保 mentionUserIds 是最新的
|
||||||
updateMentionUserIds()
|
updateMentionUserIds()
|
||||||
|
|
||||||
@ -1404,6 +1490,10 @@ const confirmMentionSelect = () => {
|
|||||||
selectMemberByAlphabetRef.value.confirmSelectMembers()
|
selectMemberByAlphabetRef.value.confirmSelectMembers()
|
||||||
}
|
}
|
||||||
hideMentionSelect()
|
hideMentionSelect()
|
||||||
|
|
||||||
|
// 重置选中人数和多选状态
|
||||||
|
state.value.selectedMembersNum = 0
|
||||||
|
state.value.mentionIsMulSelect = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1415,6 +1505,14 @@ const getSelectResult = (mentionSelect) => {
|
|||||||
|
|
||||||
//处理要提醒人的消息样式
|
//处理要提醒人的消息样式
|
||||||
const getMentionSelectLists = (mentionSelectList) => {
|
const getMentionSelectLists = (mentionSelectList) => {
|
||||||
|
if(!state.value.canUseQuillEditor){
|
||||||
|
if(mentionSelectList.length > 0){
|
||||||
|
mentionSelectList.forEach(item => {
|
||||||
|
onTextAreaMention(item)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
const quill = getQuill()
|
const quill = getQuill()
|
||||||
const mention = quill.getModule('mention')
|
const mention = quill.getModule('mention')
|
||||||
|
|
||||||
@ -1648,7 +1746,11 @@ let currentPressItem = null
|
|||||||
const handleAvatarTouchStart = (item) => {
|
const handleAvatarTouchStart = (item) => {
|
||||||
currentPressItem = item
|
currentPressItem = item
|
||||||
avatarPressTimer = setTimeout(() => {
|
avatarPressTimer = setTimeout(() => {
|
||||||
|
if (!state.value.canUseQuillEditor) {
|
||||||
|
onTextAreaMention(item)
|
||||||
|
} else {
|
||||||
doMentionUser(item)
|
doMentionUser(item)
|
||||||
|
}
|
||||||
}, 500)
|
}, 500)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1749,6 +1851,36 @@ const showMentionSelectDebounced = (quill) => {
|
|||||||
state.value.isShowMentionSelect = true
|
state.value.isShowMentionSelect = true
|
||||||
// quill.blur()
|
// quill.blur()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 处理普通输入框的表情插入
|
||||||
|
const onTextAreaEmoticon = (data) => {
|
||||||
|
if (data.type == 1) {
|
||||||
|
if (data.img) {
|
||||||
|
// 如果是图片表情,插入对应的文本标记
|
||||||
|
state.value.textAreaValue += `${data.value}`
|
||||||
|
} else {
|
||||||
|
// 如果是文本表情,直接插入
|
||||||
|
state.value.textAreaValue += data.value
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 处理普通输入框的长按@功能
|
||||||
|
const onTextAreaMention = (user) => {
|
||||||
|
if (talkParams.type === 1) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if(state.value.textAreaValue.length > 0){
|
||||||
|
if(state.value.textAreaValue[state.value.textAreaValue.length - 1] === '@'){
|
||||||
|
state.value.textAreaValue = state.value.textAreaValue.slice(0, -1)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
state.value.textAreaValue += `@${user.nickname} `
|
||||||
|
state.value.mentionUserIds.push(user.user_id)
|
||||||
|
if(state.value.isShowMentionSelect){
|
||||||
|
state.value.isShowMentionSelect = false
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.dialog-page {
|
.dialog-page {
|
||||||
@ -2045,6 +2177,11 @@ const showMentionSelectDebounced = (quill) => {
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.round-3) {
|
||||||
|
max-height: 320rpx;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.wd-action-sheet) {
|
:deep(.wd-action-sheet) {
|
||||||
|
Loading…
Reference in New Issue
Block a user