cansnow
624 lines
19 KiB
Vue
624 lines
19 KiB
Vue
<template>
|
||
<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 -->
|
||
<!-- 使用 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"
|
||
@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 -->
|
||
<view class="voice_an" v-if="recording">
|
||
<view class="voice_an_icon">
|
||
<view id="one" class="wave"></view>
|
||
<view id="two" class="wave"></view>
|
||
<view id="three" class="wave"></view>
|
||
<view id="four" class="wave"></view>
|
||
<view id="five" class="wave"></view>
|
||
<view id="six" class="wave"></view>
|
||
<view id="seven" class="wave"></view>
|
||
</view>
|
||
<view class="text">
|
||
<text>{{voiceIconText}}</text>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {mapGetters,mapActions} from "vuex";
|
||
import {getPurePath,html2Text,getVideoCover,getVideoInfo} from "@/util/common";
|
||
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 CustomEditor from "./CustomEditor";
|
||
import SimpleEditor from "./SimpleEditor";
|
||
import ChatingActionBar from "./ChatingActionBar";
|
||
|
||
const needClearTypes = [MessageType.TextMessage];
|
||
|
||
const rtcChoose = [
|
||
{
|
||
name: "视频通话",
|
||
type: 'video',
|
||
idx: 0,
|
||
},
|
||
{
|
||
name: "语言通话",
|
||
type: 'voice',
|
||
idx: 1,
|
||
},
|
||
];
|
||
|
||
export default {
|
||
components: {
|
||
CustomEditor,
|
||
SimpleEditor,
|
||
ChatingActionBar,
|
||
//UParse,
|
||
},
|
||
props: {
|
||
footerOutsideFlag: Number,
|
||
},
|
||
data() {
|
||
return {
|
||
recording:false,
|
||
sendMsgTimmer: null, //发送时间定时器
|
||
sendDuring: 0, //发送时间计数器 1分钟以内的信息不显示时间
|
||
sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
|
||
isEmoji:false,
|
||
isAudio:false,
|
||
inputHtml: "",
|
||
actionBarVisible: false,
|
||
isInputFocus: false,
|
||
actionSheetMenu: [],
|
||
showActionSheet: false,
|
||
isInsertingEmoji: false, // 标记是否正在插入表情
|
||
|
||
fileSelectedArray:[]
|
||
};
|
||
},
|
||
computed: {
|
||
...mapGetters([
|
||
"storeCurrentConversation",
|
||
"storeCurrentGroup",
|
||
"storeBlackList",
|
||
]),
|
||
hasContent() {
|
||
return html2Text(this.inputHtml) !== "";
|
||
},
|
||
},
|
||
watch: {
|
||
footerOutsideFlag(newVal) {
|
||
this.onClickActionBarOutside();
|
||
},
|
||
},
|
||
mounted() {
|
||
this.setKeyboardListener();
|
||
},
|
||
beforeDestroy() {
|
||
this.disposeKeyboardListener();
|
||
},
|
||
methods: {
|
||
...mapActions("message", ["pushNewMessage", "updateOneMessage"]),
|
||
async createTextMessage() {
|
||
let message = "";
|
||
const text = html2Text(this.inputHtml);
|
||
message = await IMSDK.asyncApi(
|
||
IMMethods.CreateTextMessage,
|
||
IMSDK.uuid(),
|
||
text
|
||
);
|
||
console.log(message);
|
||
return message;
|
||
},
|
||
async sendTextMessage() {
|
||
if (!this.hasContent) return;
|
||
const message = await this.createTextMessage();
|
||
this.sendMessage(message,this.storeCurrentConversation.userID,this.storeCurrentConversation.groupID);
|
||
},
|
||
sendMessage(message,user_id,group_id) {
|
||
this.pushNewMessage(message);
|
||
if (needClearTypes.includes(message.contentType)) {
|
||
this.$refs.customEditor.clear();
|
||
}
|
||
this.$emit("scrollToBottom");
|
||
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
|
||
recvID: user_id,
|
||
groupID: group_id,
|
||
message,
|
||
offlinePushInfo,
|
||
})
|
||
.then(({data}) => {
|
||
console.log(data);
|
||
this.updateOneMessage({
|
||
message: data,
|
||
isSuccess: true,
|
||
});
|
||
})
|
||
.catch(({data,errCode,errMsg}) => {
|
||
console.log(errCode,errMsg);
|
||
uni.$u.toast(errMsg);
|
||
this.updateOneMessage({
|
||
message: data,
|
||
type: UpdateMessageTypes.KeyWords,
|
||
keyWords: [
|
||
{
|
||
key: "status",
|
||
value: MessageStatus.Failed,
|
||
},
|
||
{
|
||
key: "errCode",
|
||
value: errCode,
|
||
},
|
||
],
|
||
});
|
||
});
|
||
},
|
||
recordAudioMsg(){
|
||
|
||
if (uni.getSystemInfoSync().platform == "android") {
|
||
permission.requestAndroid("android.permission.RECORD_AUDIO"); //Android请求录音权限
|
||
} else {
|
||
permission.requestIOS("record"); //ios请求录音权限
|
||
}
|
||
},
|
||
// action
|
||
onClickActionBarOutside() {
|
||
// 如果正在插入表情，不隐藏表情栏
|
||
if (this.isInsertingEmoji) {
|
||
return;
|
||
}
|
||
if (this.actionBarVisible) {
|
||
this.actionBarVisible = false;
|
||
}
|
||
},
|
||
updateActionBar(isEmoji) {
|
||
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;
|
||
this.$emit("scrollToBottom");
|
||
},
|
||
editorBlur() {
|
||
this.isInputFocus = false;
|
||
},
|
||
editorInput(e) {
|
||
// SimpleEditor 返回的是纯文本，直接使用
|
||
this.inputHtml = e.detail.value || e.detail.text || e.detail.html || "";
|
||
},
|
||
// from comp
|
||
sendMediaMesage(paths) {
|
||
const _this = this;
|
||
paths.forEach(async (item) => {
|
||
try {
|
||
let message = null;
|
||
if(item.search('.mp4')>0){
|
||
const realVideoPath = await getPurePath(item);
|
||
console.log('处理后的可用路径', realVideoPath);
|
||
const info = await getVideoInfo(realVideoPath);
|
||
const cover = await getVideoCover(item);
|
||
const videoParams = {
|
||
videoPath: realVideoPath,
|
||
videoType: "mp4",
|
||
duration: info.duration,
|
||
snapshotPath: getPurePath(cover),
|
||
};
|
||
console.log('videoParams', videoParams);
|
||
message = await IMSDK.asyncApi(
|
||
IMMethods.CreateVideoMessageFromFullPath,
|
||
IMSDK.uuid(),
|
||
videoParams
|
||
);
|
||
}else{
|
||
message = await IMSDK.asyncApi(
|
||
IMMethods.CreateImageMessageFromFullPath,
|
||
IMSDK.uuid(),
|
||
getPurePath(item)
|
||
);
|
||
}
|
||
console.log(message);
|
||
if(message){
|
||
_this.sendMessage(message,_this.storeCurrentConversation.userID,_this.storeCurrentConversation.groupID);
|
||
}
|
||
} catch (error) {
|
||
console.log(error);
|
||
}
|
||
});
|
||
},
|
||
selectClick({idx}) {
|
||
if (idx === 0) {
|
||
uni.$u.toast('根据相关政策,暂时禁用视频通话');
|
||
//发送视频通话
|
||
} else {
|
||
uni.$u.toast('根据相关政策,暂时禁用音频通话');
|
||
//发送音频通话
|
||
}
|
||
},
|
||
// keyboard
|
||
keyboardChangeHander({height}) {
|
||
//console.log(height);
|
||
// 如果正在插入表情，不隐藏表情栏
|
||
if (this.isInsertingEmoji) {
|
||
return;
|
||
}
|
||
if (height > 0) {
|
||
if (this.actionBarVisible) {
|
||
this.actionBarVisible = false;
|
||
}
|
||
}
|
||
},
|
||
setKeyboardListener() {
|
||
uni.onKeyboardHeightChange(this.keyboardChangeHander);
|
||
},
|
||
disposeKeyboardListener() {
|
||
uni.offKeyboardHeightChange(this.keyboardChangeHander);
|
||
},
|
||
/*----------------------------------------------------（H5不支持）录音相关 start-------------------------------------- */
|
||
//准备开始录音
|
||
startVoice(e) {
|
||
if (!this.Audio.paused) {
|
||
//如果音频正在播放 先暂停。
|
||
this.stopAudio(this.AudioExam)
|
||
}
|
||
this.recording = true;
|
||
this.isStopVoice = false;
|
||
this.voiceCanSend = true;
|
||
this.voiceIconText = "正在录音..."
|
||
this.PointY = e.touches[0].clientY;
|
||
this.Recorder.start({
|
||
format: 'mp3'
|
||
});
|
||
},
|
||
//录音已经开始
|
||
beginVoice() {
|
||
let that = this;
|
||
if (that.isStopVoice) {
|
||
that.Recorder.stop();
|
||
return;
|
||
}
|
||
that.voiceTitle = '松开 结束'
|
||
that.voiceInterval = setInterval(() => {
|
||
console.log("that.voiceTime", that.voiceTime);
|
||
if (that.voiceTime > 49) {
|
||
that.voiceIconText = "录音结束倒计时[" + (60 - that.voiceTime) + "]s";
|
||
};
|
||
if (that.voiceTime == 60) {
|
||
clearInterval(that.voiceInterval);
|
||
that.endVoice();
|
||
}
|
||
that.voiceTime++;
|
||
}, 1000)
|
||
},
|
||
//move 正在录音中
|
||
moveVoice(e) {
|
||
const PointY = e.touches[0].clientY;
|
||
const slideY = this.PointY - PointY;
|
||
if (slideY > uni.upx2px(120)) {
|
||
this.voiceCanSend = false;
|
||
this.voiceIconText = '松开手指 取消发送 '
|
||
} else if (slideY > uni.upx2px(60)) {
|
||
this.voiceCanSend = true;
|
||
this.voiceIconText = '手指上滑 取消发送 '
|
||
} else {
|
||
this.voiceIconText = '正在录音... '
|
||
}
|
||
},
|
||
//结束录音
|
||
endVoice() {
|
||
this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
|
||
this.Recorder.stop();
|
||
this.voiceTitle = '按住 说话'
|
||
},
|
||
//录音被打断
|
||
cancelVoice(e) {
|
||
console.log("路由被打断", e);
|
||
this.voiceTime = 0;
|
||
this.voiceTitle = '按住 说话';
|
||
this.voiceCanSend = false;
|
||
this.Recorder.stop();
|
||
},
|
||
//处理录音文件
|
||
handleRecorder({tempFilePath,duration }) {
|
||
if (this.voiceTime < 1) {
|
||
this.voiceIconText = "说话时间过短";
|
||
setTimeout(() => {
|
||
this.recording = false;
|
||
}, 500)
|
||
return;
|
||
}
|
||
let contentDuration = this.voiceTime;
|
||
this.voiceTime = 0;
|
||
this.recording = false;
|
||
clearInterval(this.voiceInterval);
|
||
console.log("录音文件", tempFilePath);
|
||
console.log("是否发送语音信息", this.voiceCanSend);
|
||
let voiceFile = {
|
||
tempFilePath: tempFilePath,
|
||
contentDuration: Math.ceil(contentDuration),
|
||
anmitionPlay: false,
|
||
};
|
||
if (this.voiceCanSend) {
|
||
console.log("=====上传语音文件，并发送语音信息====");
|
||
let audioType = this.messageApi.CONTENT_TYPE.AUDIO_CONTENT_TYPE;
|
||
this.uploadFile(voiceFile, audioType);
|
||
return;
|
||
} else {
|
||
console.log("=====已经取消发送语音信息====")
|
||
return;
|
||
}
|
||
},
|
||
//控制播放还是暂停音频文件
|
||
handleAudio(item) {
|
||
this.AudioExam = item;
|
||
this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
|
||
},
|
||
//播放音频
|
||
playAudio(item) {
|
||
let target = item.content.fileSaveTarget;
|
||
let src = item.content.fullPath;
|
||
if (target == "local") {
|
||
src = this.$u.api.multipartAddress.getFileByPath + src;
|
||
}
|
||
this.Audio.src = src;
|
||
this.Audio.hasBeenSentId = item.id;
|
||
this.Audio.play();
|
||
let currentAudioMsg = this.messageList.find(it => it.id == item.id);
|
||
currentAudioMsg.content.anmitionPlay = true;
|
||
},
|
||
//停止音频
|
||
stopAudio(item) {
|
||
let currentAudioMsg = this.messageList.find(it => it.id == item.id);
|
||
currentAudioMsg.content.anmitionPlay = false;
|
||
this.Audio.src = '';
|
||
this.Audio.stop();
|
||
},
|
||
//关闭动画
|
||
closeAnmition() {
|
||
const hasBeenSentId = this.Audio.hasBeenSentId;
|
||
let item = this.messageList.find(it => it.id == hasBeenSentId);
|
||
item.content.anmitionPlay = false;
|
||
},
|
||
/*-------------------------------------录音相关方法块 end---------------------------------------------------*/
|
||
onUserEvent(e){
|
||
const _this = this;
|
||
switch(e.type){
|
||
case "clearSendStr":
|
||
this.$refs.customEditor.clear();
|
||
break;
|
||
case "delSendStr":
|
||
this.$refs.customEditor.delete();
|
||
break;
|
||
case "insertEmoji":
|
||
//TODO 在光标处插入文字extra
|
||
//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(e.emoji,() =>{
|
||
console.log("插入文字成功");
|
||
// 延迟重置标志，确保其他事件不会隐藏表情栏
|
||
setTimeout(() => {
|
||
this.isInsertingEmoji = false;
|
||
}, 300);
|
||
},(err) => {
|
||
console.log("插入文字失败", err);
|
||
this.isInsertingEmoji = false;
|
||
});
|
||
break;
|
||
case "prepend_image_message":
|
||
if(e.source == "camera"){
|
||
var cmr = plus.camera.getCamera();
|
||
cmr.captureImage((src) =>{
|
||
_this.sendMediaMesage([plus.io.convertLocalFileSystemURL(src)]);
|
||
}, (err) =>{
|
||
console.log(err);
|
||
}, {
|
||
filename:"_doc/camera/"
|
||
});
|
||
return ;
|
||
}
|
||
if(e.source == "album"){
|
||
plus.gallery.pick(({files})=>{
|
||
_this.sendMediaMesage(files);
|
||
}, (error )=>{
|
||
reject(error);
|
||
}, {
|
||
animation:true,
|
||
confirmText:"确定",
|
||
//crop:null,
|
||
editable:true,
|
||
filename:"_doc/",
|
||
filter:"none",
|
||
maximum:9,
|
||
multiple:true,
|
||
permissionAlert:true,
|
||
//popover:{},
|
||
//selected:[""],
|
||
onmaxed(){
|
||
console.log("超出最大选择数");
|
||
},
|
||
});
|
||
}
|
||
break;
|
||
case "prepend_call_message":
|
||
this.actionSheetMenu = [...rtcChoose];
|
||
this.showActionSheet = true;
|
||
break;
|
||
case "prepend_file_message":
|
||
uni.chooseFile({
|
||
count:9,
|
||
multiple: true,
|
||
success: (res) => {
|
||
console.log('选择文件成功', res);
|
||
//const filePaths = res.tempFiles.map(file => file.path);
|
||
//_this.sendMediaMesage(filePaths);
|
||
},
|
||
fail: (err) => {
|
||
console.log('选择文件失败', err);
|
||
}
|
||
});
|
||
break;
|
||
case "prepend_location_message":
|
||
uni.chooseLocation({
|
||
complete(res) {
|
||
console.log(res);
|
||
},
|
||
fail(res) {
|
||
console.log(res);
|
||
}
|
||
//latitude:1,
|
||
//longitude:1,
|
||
});
|
||
break;
|
||
default:
|
||
console.log(e);
|
||
break;
|
||
}
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.custom_editor {
|
||
img {
|
||
vertical-align: sub;
|
||
}
|
||
}
|
||
|
||
.forbidden_footer {
|
||
width: 100%;
|
||
height: 112rpx;
|
||
color: #8e9ab0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: #f0f2f6;
|
||
}
|
||
|
||
.chat_footer {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
// background-color: #e9f4ff;
|
||
background: #f6f6f6;
|
||
// height: 50px;
|
||
max-height: 120px;
|
||
padding: 24rpx 20rpx;
|
||
|
||
.input_content {
|
||
flex: 1;
|
||
min-height: 30px;
|
||
max-height: 120px;
|
||
margin: 0 24rpx;
|
||
border-radius: 8rpx;
|
||
position: relative;
|
||
|
||
.record_btn {
|
||
// background-color: #3c9cff;
|
||
background: #fff;
|
||
color: black;
|
||
height: 30px;
|
||
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);
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer_action_area {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.emoji_action {
|
||
margin-right: 24rpx;
|
||
}
|
||
|
||
image {
|
||
width: 26px;
|
||
height: 26px;
|
||
}
|
||
}
|
||
|
||
.send_btn {
|
||
height: 30px;
|
||
line-height: 30px;
|
||
background-color: $uni-color-success;
|
||
padding: 0 8px;
|
||
border-radius: 4px;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style> |