emoji
This commit is contained in:
@@ -3,6 +3,7 @@
|
|||||||
"@openim/client-sdk": "^0.0.11-ahpha.1",
|
"@openim/client-sdk": "^0.0.11-ahpha.1",
|
||||||
"date-fns": "^2.30.0",
|
"date-fns": "^2.30.0",
|
||||||
"dayjs": "^1.11.6",
|
"dayjs": "^1.11.6",
|
||||||
|
"grapheme-splitter": "^1.0.4",
|
||||||
"image-tools": "^1.4.0",
|
"image-tools": "^1.4.0",
|
||||||
"md5": "^2.3.0",
|
"md5": "^2.3.0",
|
||||||
"openim-uniapp-polyfill": "^1.4.1",
|
"openim-uniapp-polyfill": "^1.4.1",
|
||||||
|
|||||||
@@ -1,26 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="chat_action_bar">
|
<view class="chat_action_bar">
|
||||||
<view class="fun-box u-border-top show-fun-box" v-if="isEmoji">
|
<view class="fun-box u-border-top show-fun-box" v-if="isEmoji">
|
||||||
<swiper class="emoji-swiper" :indicator-dots="true" :duration="50" :circular="true">
|
<scroll-view scroll-y="true">
|
||||||
<swiper-item v-for="(page,index1) in Math.ceil(emojiList.length/pagesize)" :key="index1">
|
<view class="emoji-list">
|
||||||
<view @tap="emojiClick(emojiList[pagesize*(page-1)+n])" v-for="(n,index2) in pagesize" :key="index2">
|
<view @tap.stop="emojiClick(emojiList[i])" v-for="(emojiItem,i) in emojiList" :key="i">
|
||||||
{{emojiList[pagesize*(page-1)+n]}}
|
{{emojiItem}}
|
||||||
</view>
|
|
||||||
</swiper-item>
|
|
||||||
</swiper>
|
|
||||||
<view style="padding:0rpx 20rpx;position: absolute;bottom: 1rpx;right: 10rpx;
|
|
||||||
width: 250rpx;height: 150rpx;z-index: 1000;opacity: 0.9;"
|
|
||||||
class="u-flex u-row-right u-col-center">
|
|
||||||
<view class="u-flex u-row-center u-col-center"
|
|
||||||
style="border: 1px solid #f1f1f1;border-radius: 10rpx; background-color: #82848a;width: 100rpx;padding: 15rpx 20rpx;margin-right: 8rpx;">
|
|
||||||
<view @click="delSendStr()" @longpress="clearSendStr()">
|
|
||||||
<u-icon name="backspace" size="46" color="#ffffff"></u-icon>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<!-- <view>
|
</scroll-view>
|
||||||
<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
|
<view class="delete-btn">
|
||||||
</u-button>
|
<view @click="delSendStr()" @longpress="clearSendStr()">
|
||||||
</view> -->
|
<u-icon name="backspace" size="32" color="#ffffff"></u-icon>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<u-row class="action_row" v-else>
|
<u-row class="action_row" v-else>
|
||||||
@@ -51,13 +42,11 @@
|
|||||||
},
|
},
|
||||||
watch:{
|
watch:{
|
||||||
isEmoji(v){
|
isEmoji(v){
|
||||||
console.log(v);
|
|
||||||
this.emojiMode = v;
|
this.emojiMode = v;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
pagesize:24,
|
|
||||||
emojiList:emojis,
|
emojiList:emojis,
|
||||||
actionList: [
|
actionList: [
|
||||||
{
|
{
|
||||||
@@ -100,8 +89,14 @@
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
delSendStr(){},
|
//删除表情和文字
|
||||||
clearSendStr(){},
|
delSendStr: function() {
|
||||||
|
this.$emit("onUserEvent",{type:"delSendStr"});
|
||||||
|
},
|
||||||
|
//清除文本
|
||||||
|
clearSendStr: function() {
|
||||||
|
this.$emit("onUserEvent",{type:"clearSendStr"});
|
||||||
|
},
|
||||||
async emojiClick(emoji){
|
async emojiClick(emoji){
|
||||||
this.$emit("prepareMediaMessage", 'emoji',emoji);
|
this.$emit("prepareMediaMessage", 'emoji',emoji);
|
||||||
},
|
},
|
||||||
@@ -154,27 +149,40 @@
|
|||||||
margin-top: 6rpx;
|
margin-top: 6rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.emoji_row{
|
|
||||||
.emoji{
|
|
||||||
|
|
||||||
|
.emoji-list {
|
||||||
|
height: 400rpx;
|
||||||
|
display: flex;
|
||||||
|
align-content: flex-start;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
view {
|
||||||
|
width: 90rpx;
|
||||||
|
height: 90rpx;
|
||||||
|
font-size: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.delete-btn{
|
||||||
.emoji-swiper {
|
position: absolute;
|
||||||
height: 400rpx;
|
bottom: 90rpx;
|
||||||
|
right: 10rpx;
|
||||||
swiper-item {
|
z-index: 1000;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-content: flex-start;
|
justify-content: flex-end;
|
||||||
flex-wrap: wrap;
|
align-items: flex-end;
|
||||||
|
>view{
|
||||||
view {
|
border: 1px solid #f1f1f1;
|
||||||
width: 12%;
|
border-radius: 10rpx;
|
||||||
height: 16vw;
|
background-color: rgba(0, 0, 0, 0.6);
|
||||||
font-size: 48rpx;
|
text-align: center;
|
||||||
display: flex;
|
padding:20rpx 50rpx;
|
||||||
justify-content: center;
|
margin-right: 8rpx;
|
||||||
align-items: center;
|
.u-icon{justify-content: center;}
|
||||||
|
::v-deep .uicon-backspace{
|
||||||
|
font-size: 64rpx !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,14 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="editor_wrap">
|
<view class="editor_wrap">
|
||||||
<editor :placeholder="placeholder" id="editor2" @ready="editorReady" @focus="editorFocus" @blur="editorBlur"
|
<editor
|
||||||
|
:placeholder="placeholder"
|
||||||
|
id="editor2"
|
||||||
|
@ready="editorReady"
|
||||||
|
@focus="editorFocus"
|
||||||
|
@blur="editorBlur"
|
||||||
@input="editorInput" />
|
@input="editorInput" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { forIn } from "lodash";
|
||||||
html2Text
|
import {html2Text} from "@/util/common";
|
||||||
} from "@/util/common";
|
|
||||||
export default {
|
export default {
|
||||||
props: {
|
props: {
|
||||||
placeholder: {
|
placeholder: {
|
||||||
@@ -20,6 +24,8 @@
|
|||||||
return {
|
return {
|
||||||
editorCtx: null,
|
editorCtx: null,
|
||||||
lastStr: "",
|
lastStr: "",
|
||||||
|
isInsertingEmoji: false, // 标记是否正在插入表情
|
||||||
|
hasFocus: false, // 记录编辑器是否有焦点
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
@@ -28,17 +34,103 @@
|
|||||||
.createSelectorQuery()
|
.createSelectorQuery()
|
||||||
.select("#editor2")
|
.select("#editor2")
|
||||||
.context((res) => {
|
.context((res) => {
|
||||||
this.$emit("ready", res);
|
//this.$emit("ready", res);
|
||||||
this.editorCtx = res.context;
|
this.editorCtx = res.context;
|
||||||
})
|
})
|
||||||
.exec();
|
.exec();
|
||||||
},
|
},
|
||||||
editorFocus() {
|
editorFocus() {
|
||||||
|
this.hasFocus = true;
|
||||||
|
// 如果正在插入表情,不触发 focus 事件,并立即隐藏键盘
|
||||||
|
if (this.isInsertingEmoji) {
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
uni.hideKeyboard();
|
||||||
|
// #endif
|
||||||
|
return;
|
||||||
|
}
|
||||||
this.$emit("focus");
|
this.$emit("focus");
|
||||||
},
|
},
|
||||||
editorBlur() {
|
editorBlur() {
|
||||||
|
this.hasFocus = false;
|
||||||
this.$emit("blur");
|
this.$emit("blur");
|
||||||
},
|
},
|
||||||
|
clear(){
|
||||||
|
this.editorCtx.clear()
|
||||||
|
},
|
||||||
|
insertText(text,successFn,errFn){
|
||||||
|
// 标记正在插入表情,阻止 focus 事件触发
|
||||||
|
this.isInsertingEmoji = true;
|
||||||
|
|
||||||
|
// 先隐藏键盘,避免插入时键盘弹出
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
uni.hideKeyboard();
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 如果编辑器当前有焦点,先让它失焦(通过点击外部区域)
|
||||||
|
// 但这种方式可能不太可靠,所以我们主要依赖 isInsertingEmoji 标志
|
||||||
|
|
||||||
|
// 使用 insertText 插入文本(这是最可靠的方法)
|
||||||
|
// 虽然会触发焦点,但我们已经通过 isInsertingEmoji 标志阻止了 focus 事件
|
||||||
|
this.editorCtx.insertText({
|
||||||
|
text: text,
|
||||||
|
success: (res) => {
|
||||||
|
successFn && successFn.call(this, [res]);
|
||||||
|
console.log("插入文字成功");
|
||||||
|
|
||||||
|
// 插入后立即隐藏键盘,防止键盘弹出
|
||||||
|
// #ifdef APP-PLUS || H5
|
||||||
|
// 使用多个延迟确保键盘被隐藏
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideKeyboard();
|
||||||
|
}, 10);
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideKeyboard();
|
||||||
|
}, 50);
|
||||||
|
setTimeout(() => {
|
||||||
|
uni.hideKeyboard();
|
||||||
|
}, 100);
|
||||||
|
// #endif
|
||||||
|
|
||||||
|
// 延迟重置标志,确保 focus 事件被完全忽略
|
||||||
|
setTimeout(() => {
|
||||||
|
this.isInsertingEmoji = false;
|
||||||
|
}, 300);
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
errFn && errFn.call(this, [err]);
|
||||||
|
console.log("插入文字失败", err);
|
||||||
|
this.isInsertingEmoji = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
delete(){
|
||||||
|
this.editorCtx.getContents({
|
||||||
|
success({html,text,delta}){
|
||||||
|
console.log(html,text,delta);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
return ;
|
||||||
|
//setContents(OBJECT)
|
||||||
|
let emojiStr = this.editorCtx.getContents();
|
||||||
|
let emojiArr = [];
|
||||||
|
emojiStr = emojiStr.replace(/\[([^(\]|\[)]*)\]/g, function(item, index) {
|
||||||
|
emojiArr.unshift(item);
|
||||||
|
});
|
||||||
|
let sendStr ="";
|
||||||
|
if (emojiArr.length > 0) {
|
||||||
|
if (this.sendStr.endsWith(emojiArr[0])) {
|
||||||
|
this.sendStr = this.sendStr.replace(emojiArr[0], "");
|
||||||
|
} else {
|
||||||
|
this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.sendStr = this.sendStr.slice(0, this.sendStr.length - 1);
|
||||||
|
}
|
||||||
|
this.editorCtx.setContents({
|
||||||
|
html:sendStr
|
||||||
|
})
|
||||||
|
console.log('delete')
|
||||||
|
},
|
||||||
editorInput(e) {
|
editorInput(e) {
|
||||||
let str = e.detail.html;
|
let str = e.detail.html;
|
||||||
const oldArr = (this.lastStr ?? '').split("");
|
const oldArr = (this.lastStr ?? '').split("");
|
||||||
|
|||||||
@@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<view class="simple_editor_wrap">
|
||||||
|
<textarea
|
||||||
|
class="simple_editor_textarea"
|
||||||
|
:value="textValue"
|
||||||
|
:placeholder="placeholder"
|
||||||
|
:auto-height="true"
|
||||||
|
:maxlength="maxlength"
|
||||||
|
:show-confirm-bar="false"
|
||||||
|
:hold-keyboard="true"
|
||||||
|
:adjust-position="false"
|
||||||
|
@input="onInput"
|
||||||
|
@focus="onFocus"
|
||||||
|
@blur="onBlur"
|
||||||
|
:selection-start="cursorPos"
|
||||||
|
:selection-end="cursorPos"
|
||||||
|
:id="textareaId"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import GraphemeSplitter from 'grapheme-splitter';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
value: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
maxlength: {
|
||||||
|
type: Number,
|
||||||
|
default: -1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
textValue: "",
|
||||||
|
cursorPos: -1, // 光标位置
|
||||||
|
textareaId: "simple_editor_" + Date.now(), // 唯一ID
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal !== this.textValue) {
|
||||||
|
this.textValue = newVal;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onInput(e) {
|
||||||
|
this.textValue = e.detail.value;
|
||||||
|
// 更新光标位置
|
||||||
|
this.cursorPos = e.detail.cursor || this.textValue.length;
|
||||||
|
this.$emit("input", {
|
||||||
|
detail: {
|
||||||
|
value: this.textValue,
|
||||||
|
text: this.textValue,
|
||||||
|
html: this.textValue // 简单编辑器,HTML 就是文本
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
onFocus(e) {
|
||||||
|
this.$emit("focus", e);
|
||||||
|
},
|
||||||
|
onBlur(e) {
|
||||||
|
// 保存光标位置
|
||||||
|
this.cursorPos = e.detail.cursor || this.textValue.length;
|
||||||
|
this.$emit("blur", e);
|
||||||
|
},
|
||||||
|
// 插入文本(表情或普通文本)
|
||||||
|
insertText(text, successFn, errFn) {
|
||||||
|
try {
|
||||||
|
// 获取当前光标位置(从 textarea 获取)
|
||||||
|
this.getCursorPosition((currentPos) => {
|
||||||
|
// 在光标位置插入文本
|
||||||
|
const beforeText = this.textValue.substring(0, currentPos);
|
||||||
|
const afterText = this.textValue.substring(currentPos);
|
||||||
|
const newText = beforeText + text + afterText;
|
||||||
|
|
||||||
|
// 更新文本值
|
||||||
|
this.textValue = newText;
|
||||||
|
|
||||||
|
// 更新光标位置(插入文本后)
|
||||||
|
const newCursorPos = currentPos + text.length;
|
||||||
|
this.cursorPos = newCursorPos;
|
||||||
|
|
||||||
|
// 触发 input 事件
|
||||||
|
this.$emit("input", {
|
||||||
|
detail: {
|
||||||
|
value: newText,
|
||||||
|
text: newText,
|
||||||
|
html: newText
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用 $nextTick 确保 DOM 更新后再设置光标
|
||||||
|
this.$nextTick(() => {
|
||||||
|
// 设置 textarea 的光标位置
|
||||||
|
this.setCursorPosition(newCursorPos);
|
||||||
|
|
||||||
|
if (successFn) {
|
||||||
|
successFn.call(this, [{ success: true }]);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
} catch (err) {
|
||||||
|
console.error("插入文本失败", err);
|
||||||
|
if (errFn) {
|
||||||
|
errFn.call(this, [err]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取光标位置
|
||||||
|
getCursorPosition(callback) {
|
||||||
|
// 尝试通过查询获取光标位置
|
||||||
|
// 如果无法获取,使用保存的位置或文本长度
|
||||||
|
const pos = this.cursorPos >= 0 ? this.cursorPos : this.textValue.length;
|
||||||
|
if (callback) {
|
||||||
|
callback(pos);
|
||||||
|
}
|
||||||
|
return pos;
|
||||||
|
},
|
||||||
|
// 设置光标位置
|
||||||
|
setCursorPosition(pos) {
|
||||||
|
this.cursorPos = pos;
|
||||||
|
// 尝试通过选择范围来设置光标
|
||||||
|
// 注意:uni-app 的 textarea 可能不支持动态设置 selection-start/end
|
||||||
|
// 所以这里主要是更新内部状态
|
||||||
|
},
|
||||||
|
// 清空内容
|
||||||
|
clear() {
|
||||||
|
this.textValue = "";
|
||||||
|
this.cursorPos = 0;
|
||||||
|
this.$emit("input", {
|
||||||
|
detail: {
|
||||||
|
value: "",
|
||||||
|
text: "",
|
||||||
|
html: ""
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除(退格)
|
||||||
|
delete() {
|
||||||
|
if (this.textValue.length === 0) return;
|
||||||
|
|
||||||
|
const currentPos = this.cursorPos >= 0 ? this.cursorPos : this.textValue.length;
|
||||||
|
if (currentPos <= 0) return;
|
||||||
|
|
||||||
|
const splitter = new GraphemeSplitter();
|
||||||
|
const graphemes = splitter.splitGraphemes(this.textValue);
|
||||||
|
|
||||||
|
let currentIndex = 0;
|
||||||
|
let graphemeIndex = 0;
|
||||||
|
|
||||||
|
// 找到光标位置对应的字素簇
|
||||||
|
for (; graphemeIndex < graphemes.length; graphemeIndex++) {
|
||||||
|
currentIndex += graphemes[graphemeIndex].length;
|
||||||
|
if (currentIndex >= currentPos) break;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (graphemeIndex > 0) {
|
||||||
|
// 计算被删除的字符长度
|
||||||
|
const deletedLength = graphemes[graphemeIndex - 1].length;
|
||||||
|
|
||||||
|
// 删除字素簇
|
||||||
|
graphemes.splice(graphemeIndex - 1, 1);
|
||||||
|
|
||||||
|
// 更新文本
|
||||||
|
this.textValue = graphemes.join('');
|
||||||
|
|
||||||
|
// 更新光标位置
|
||||||
|
this.cursorPos = currentPos - deletedLength;
|
||||||
|
|
||||||
|
// 触发 input 事件
|
||||||
|
this.$emit("input", {
|
||||||
|
detail: {
|
||||||
|
value: this.textValue,
|
||||||
|
text: this.textValue,
|
||||||
|
html: this.textValue
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// 使用 $nextTick 确保 DOM 更新后再设置光标
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.setCursorPosition(this.cursorPos);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 获取纯文本内容
|
||||||
|
getText() {
|
||||||
|
return this.textValue;
|
||||||
|
},
|
||||||
|
// 获取内容(兼容 editor 组件的接口)
|
||||||
|
getContents(successFn) {
|
||||||
|
if (successFn) {
|
||||||
|
successFn({
|
||||||
|
text: this.textValue,
|
||||||
|
html: this.textValue,
|
||||||
|
delta: null
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.simple_editor_wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.simple_editor_textarea {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 30px;
|
||||||
|
max-height: 120px;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.5;
|
||||||
|
padding: 4px;
|
||||||
|
word-break: break-all;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
@@ -1,35 +1,43 @@
|
|||||||
<template>
|
<template>
|
||||||
<view>
|
<view>
|
||||||
<view>
|
<view class="chat_footer">
|
||||||
<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.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="" />
|
||||||
<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">
|
||||||
<view class="input_content">
|
<!-- #ifdef APP-PLUS -->
|
||||||
<!-- #ifdef APP-PLUS -->
|
<view v-if="isAudio" class="voice_title" @touchstart.stop.prevent="startVoice"
|
||||||
<view v-if="isAudio" class="voice_title" @touchstart.stop.prevent="startVoice"
|
@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
|
||||||
@touchmove.stop.prevent="moveVoice" @touchend.stop="endVoice"
|
@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
|
||||||
@touchcancel.stop="cancelVoice" :style="{ background: recording ? '#c7c6c6' : '#FFFFFF' }">
|
<text>{{ voiceTitle }}</text>
|
||||||
<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>
|
</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>
|
</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>
|
</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 -->
|
<!-- #ifdef APP-PLUS -->
|
||||||
@@ -57,8 +65,9 @@
|
|||||||
import {offlinePushInfo} from "@/util/imCommon";
|
import {offlinePushInfo} from "@/util/imCommon";
|
||||||
import {ChatingFooterActionTypes,UpdateMessageTypes,} from "@/constant";
|
import {ChatingFooterActionTypes,UpdateMessageTypes,} from "@/constant";
|
||||||
import IMSDK, {IMMethods,MessageStatus,MessageType,} from "openim-uniapp-polyfill";
|
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 CustomEditor from "./CustomEditor";
|
||||||
|
import SimpleEditor from "./SimpleEditor";
|
||||||
import ChatingActionBar from "./ChatingActionBar";
|
import ChatingActionBar from "./ChatingActionBar";
|
||||||
|
|
||||||
const needClearTypes = [MessageType.TextMessage];
|
const needClearTypes = [MessageType.TextMessage];
|
||||||
@@ -79,8 +88,9 @@
|
|||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
CustomEditor,
|
CustomEditor,
|
||||||
|
SimpleEditor,
|
||||||
ChatingActionBar,
|
ChatingActionBar,
|
||||||
UParse,
|
//UParse,
|
||||||
},
|
},
|
||||||
props: {
|
props: {
|
||||||
footerOutsideFlag: Number,
|
footerOutsideFlag: Number,
|
||||||
@@ -93,12 +103,12 @@
|
|||||||
sendTimeBetween: 60, //发送信息显示的间隔,60秒以内信息不显示发送时间
|
sendTimeBetween: 60, //发送信息显示的间隔,60秒以内信息不显示发送时间
|
||||||
isEmoji:false,
|
isEmoji:false,
|
||||||
isAudio:false,
|
isAudio:false,
|
||||||
customEditorCtx: null,
|
|
||||||
inputHtml: "",
|
inputHtml: "",
|
||||||
actionBarVisible: false,
|
actionBarVisible: false,
|
||||||
isInputFocus: false,
|
isInputFocus: false,
|
||||||
actionSheetMenu: [],
|
actionSheetMenu: [],
|
||||||
showActionSheet: false,
|
showActionSheet: false,
|
||||||
|
isInsertingEmoji: false, // 标记是否正在插入表情
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -143,7 +153,7 @@
|
|||||||
sendMessage(message,user_id,group_id) {
|
sendMessage(message,user_id,group_id) {
|
||||||
this.pushNewMessage(message);
|
this.pushNewMessage(message);
|
||||||
if (needClearTypes.includes(message.contentType)) {
|
if (needClearTypes.includes(message.contentType)) {
|
||||||
this.customEditorCtx.clear();
|
this.$refs.customEditor.clear();
|
||||||
}
|
}
|
||||||
this.$emit("scrollToBottom");
|
this.$emit("scrollToBottom");
|
||||||
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
|
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
|
||||||
@@ -186,19 +196,25 @@
|
|||||||
},
|
},
|
||||||
// action
|
// action
|
||||||
onClickActionBarOutside() {
|
onClickActionBarOutside() {
|
||||||
|
// 如果正在插入表情,不隐藏表情栏
|
||||||
|
if (this.isInsertingEmoji) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (this.actionBarVisible) {
|
if (this.actionBarVisible) {
|
||||||
this.actionBarVisible = false;
|
this.actionBarVisible = false;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
updateActionBar(isEmoji) {
|
updateActionBar(isEmoji) {
|
||||||
this.actionBarVisible = !this.actionBarVisible;
|
if(this.actionBarVisible){
|
||||||
console.log(this.isEmoji);
|
if(this.isEmoji!== !!isEmoji){
|
||||||
this.isEmoji = !!isEmoji;
|
this.isEmoji = !!isEmoji;
|
||||||
console.log(this.isEmoji);
|
}else{
|
||||||
},
|
this.actionBarVisible = false;
|
||||||
editorReady(e) {
|
}
|
||||||
this.customEditorCtx = e.context;
|
}else{
|
||||||
this.customEditorCtx.clear();
|
this.actionBarVisible = true;
|
||||||
|
this.isEmoji = !!isEmoji;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
editorFocus() {
|
editorFocus() {
|
||||||
this.isInputFocus = true;
|
this.isInputFocus = true;
|
||||||
@@ -208,10 +224,11 @@
|
|||||||
this.isInputFocus = false;
|
this.isInputFocus = false;
|
||||||
},
|
},
|
||||||
editorInput(e) {
|
editorInput(e) {
|
||||||
this.inputHtml = e.detail.html;
|
// SimpleEditor 返回的是纯文本,直接使用
|
||||||
|
this.inputHtml = e.detail.value || e.detail.text || e.detail.html || "";
|
||||||
},
|
},
|
||||||
prepareMediaMessage(type,extra) {
|
prepareMediaMessage(type,extra) {
|
||||||
console.log(type)
|
console.log(type,extra)
|
||||||
if (type === ChatingFooterActionTypes.Video) {
|
if (type === ChatingFooterActionTypes.Video) {
|
||||||
this.actionSheetMenu = [...rtcChoose];
|
this.actionSheetMenu = [...rtcChoose];
|
||||||
this.showActionSheet = true;
|
this.showActionSheet = true;
|
||||||
@@ -240,14 +257,34 @@
|
|||||||
}
|
}
|
||||||
if (type === "emoji") {
|
if (type === "emoji") {
|
||||||
//TODO 在光标处插入文字extra
|
//TODO 在光标处插入文字extra
|
||||||
this.customEditorCtx.insertText({
|
//editorContext.insertImage(
|
||||||
text: extra,
|
// 标记正在插入表情(先设置标志,保护表情栏不被隐藏)
|
||||||
success: () => {
|
this.isInsertingEmoji = true;
|
||||||
console.log("插入文字成功");
|
|
||||||
},
|
// 确保表情栏显示(只在真正需要时才更新状态,避免不必要的响应式触发)
|
||||||
fail: (err) => {
|
const wasVisible = this.actionBarVisible;
|
||||||
console.log("插入文字失败", err);
|
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
|
// keyboard
|
||||||
keyboardChangeHander({height}) {
|
keyboardChangeHander({height}) {
|
||||||
|
//console.log(height);
|
||||||
|
// 如果正在插入表情,不隐藏表情栏
|
||||||
|
if (this.isInsertingEmoji) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (height > 0) {
|
if (height > 0) {
|
||||||
if (this.actionBarVisible) {
|
if (this.actionBarVisible) {
|
||||||
this.actionBarVisible = false;
|
this.actionBarVisible = false;
|
||||||
@@ -460,7 +502,17 @@
|
|||||||
item.content.anmitionPlay = false;
|
item.content.anmitionPlay = false;
|
||||||
},
|
},
|
||||||
/*-------------------------------------录音相关方法块 end---------------------------------------------------*/
|
/*-------------------------------------录音相关方法块 end---------------------------------------------------*/
|
||||||
|
onUserEvent(e){
|
||||||
|
switch(e.type){
|
||||||
|
case "clearSendStr":
|
||||||
|
this.$refs.customEditor.clear();
|
||||||
|
break;
|
||||||
|
case "delSendStr":
|
||||||
|
this.$refs.customEditor.delete();
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user