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

9

Browse Source
This commit is contained in:
cansnow
2025-12-02 03:05:52 +08:00
parent b4c9ae1b67
commit 29be534f22
24 changed files with 1118 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/conversation/chating/components/ChatingFooter/ChatingActionBar.vue
+71 -6
View File
@@ -1,6 +1,28 @@
<template>
<view class="chat_action_bar">
<u-row class="action_row">
<view class="fun-box u-border-top show-fun-box" v-if="isEmoji">
<swiper class="emoji-swiper" :indicator-dots="true" :duration="50" :circular="true">
<swiper-item v-for="(page,index1) in Math.ceil(emojiList.length/pagesize)" :key="index1">
<view @tap="emojiClick(emojiList[pagesize*(page-1)+n])" v-for="(n,index2) in pagesize" :key="index2">
{{emojiList[pagesize*(page-1)+n]}}
</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>
<u-button @click="$noClicks(sendText)" type="success" :custom-style="{padding:'20rpx'}">发送
</u-button>
</view> -->
</view>
</view>
<u-row class="action_row" v-else>
<u-col v-for="item in actionList" :key="item.idx" @click="actionClick(item)" span="3">
<view class="action_item">
<image :src="item.icon" alt="" srcset="" />
@@ -13,11 +35,25 @@
<script>
import {ChatingFooterActionTypes,} from "@/constant";
import emojis from "@/common/emojis.js"
export default {
components: {},
props:{
isEmoji:{
type:Boolean,
default:false
}
},
watch:{
isEmoji(v){
console.log(v);
this.emojiMode = v;
}
},
data() {
return {
pagesize:24,
emojiList:emojis,
actionList: [
{
idx: 0,
@@ -29,19 +65,19 @@
idx: 1,
type: ChatingFooterActionTypes.Camera,
title: "拍摄",
icon: require("static/images/chating_action_image.png"),
icon: require("static/images/chating_action_camera.png"),
},
{
idx: 2,
type: ChatingFooterActionTypes.Video,
title: "视频通话",
icon: require("static/images/chating_action_image.png"),
icon: require("static/images/chating_action_call.png"),
},
{
idx: 3,
type: ChatingFooterActionTypes.Location,
title: "位置",
icon: require("static/images/chating_action_image.png"),
icon: require("static/images/chating_action_location.png"),
},
// {
// idx: 0,
@@ -59,6 +95,11 @@
};
},
methods: {
delSendStr(){},
clearSendStr(){},
async emojiClick(emoji){
this.$emit("prepareMediaMessage", 'emoji',emoji);
},
async actionClick(action) {
switch (action.type) {
case ChatingFooterActionTypes.Video:
@@ -84,7 +125,7 @@
<style lang="scss" scoped>
.chat_action_bar {
position: relative;
background: #f0f2f6;
background: #ececec;
padding: 24rpx 36rpx;
.action_row {
@@ -108,5 +149,29 @@
margin-top: 6rpx;
}
}
.emoji_row{
.emoji{
}
}
.emoji-swiper {
height: 400rpx;
swiper-item {
display: flex;
align-content: flex-start;
flex-wrap: wrap;
view {
width: 12%;
height: 16vw;
font-size: 48rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
}
</style>
pages/conversation/chating/components/ChatingFooter/index.vue
+197 -11
View File
@@ -2,25 +2,56 @@
<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">
<CustomEditor class="custom_editor" ref="customEditor" @ready="editorReady" @focus="editorFocus"
<!-- #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">
<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"
src="@/static/images/chating_footer_add.png" alt="" srcset="" />
<image v-show="hasContent" @touchend.prevent="sendTextMessage" src="@/static/images/send_btn.png"
alt="" srcset="" />
<button class="send_btn" type="primary" v-show="hasContent" @touchend.prevent="sendTextMessage">发送</button>
</view>
</view>
<chating-action-bar @sendMessage="sendMessage" @prepareMediaMessage="prepareMediaMessage"
<chating-action-bar :isEmoji="isEmoji" @sendMessage="sendMessage" @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>
<!-- 录音动画 -->
<!-- #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>
@@ -60,6 +91,12 @@
},
data() {
return {
recording:false,
sendMsgTimmer: null, //发送时间定时器
sendDuring: 0, //发送时间计数器 1分钟以内的信息不显示时间
sendTimeBetween: 60, //发送信息显示的间隔，60秒以内信息不显示发送时间
isEmoji:false,
isAudio:false,
customEditorCtx: null,
inputHtml: "",
actionBarVisible: false,
@@ -143,15 +180,25 @@
});
});
},
recordAudioMsg(){
if (uni.getSystemInfoSync().platform == "android") {
permission.requestAndroid("android.permission.RECORD_AUDIO"); //Android请求录音权限
} else {
permission.requestIOS("record"); //ios请求录音权限
}
},
// action
onClickActionBarOutside() {
if (this.actionBarVisible) {
this.actionBarVisible = false;
}
},
updateActionBar() {
updateActionBar(isEmoji) {
this.actionBarVisible = !this.actionBarVisible;
console.log(this.isEmoji);
this.isEmoji = !!isEmoji;
console.log(this.isEmoji);
},
editorReady(e) {
this.customEditorCtx = e.context;
@@ -167,7 +214,7 @@
editorInput(e) {
this.inputHtml = e.detail.html;
},
prepareMediaMessage(type) {
prepareMediaMessage(type,extra) {
console.log(type)
if (type === ChatingFooterActionTypes.Video) {
this.actionSheetMenu = [...rtcChoose];
@@ -195,6 +242,18 @@
//longitude:1,
})
}
if (type === "emoji") {
//TODO 在光标处插入文字extra
this.customEditorCtx.insertText({
text: extra,
success: () => {
console.log("插入文字成功");
},
fail: (err) => {
console.log("插入文字失败", err);
}
});
}
},
// from comp
@@ -279,6 +338,133 @@
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---------------------------------------------------*/
},
};
</script>
@@ -303,9 +489,9 @@
.chat_footer {
display: flex;
align-items: center;
align-items: flex-end;
// background-color: #e9f4ff;
background: #f0f2f6;
background: #f6f6f6;
// height: 50px;
max-height: 120px;
padding: 24rpx 20rpx;
@@ -361,7 +547,7 @@
.send_btn {
height: 30px;
line-height: 30px;
background-color: #4a9cfc;
background-color: $uni-color-success;
padding: 0 8px;
border-radius: 4px;
color: #fff;
pages/conversation/chating/components/ChatingHeader.vue
+2 -2
View File
@@ -1,5 +1,5 @@
<template>
<u-navbar @click="click" placeholder class="chating_header">
<u-navbar @click="click" placeholder class="chating_header" bgColor="transparent">
<view @click="routeBack" class="u-nav-slot" slot="left">
<img class="back_icon" width="12" height="20" src="static/images/common_left_arrow.png" alt="" srcset="" />
</view>
@@ -99,7 +99,7 @@
<style lang="scss" scoped>
.chating_header {
border: 2rpx solid #e8eaef;
border: 2rpx solid #e1e1e1;
::v-deep .u-navbar__content__left {
padding: 0;
pages/conversation/chating/components/ChatingList.vue
+9 -2
View File
@@ -6,8 +6,12 @@
<view id="scroll_wrap">
<u-loadmore nomoreText="" :status="loadMoreStatus" />
<view v-for="item in storeHistoryMessageList" :key="item.clientMsgID">
<message-item-render @messageItemRender="messageItemRender" :source="item"
:isSender="item.sendID === storeCurrentUserID" />
<message-item-render
@messageItemRender="messageItemRender"
@longpress="onLongPressMessageItem(item)"
:source="item"
:isSender="item.sendID === storeCurrentUserID"
/>
</view>
<view style="visibility: hidden; height: 12px" id="auchormessage_bottom_item"></view>
</view>
@@ -175,6 +179,9 @@
.exec();
});
},
onLongPressMessageItem(msg){
}
},
};
</script>
pages/conversation/chating/components/MessageItem/TextMessageRender.vue
+1
View File
@@ -4,6 +4,7 @@
:previewImg="false"
:showImgMenu="false"
:lazyLoad="false"
selectable
:content="getContent"
/>
</view>
pages/conversation/chating/components/MessageItem/index.vue
+144 -22
View File
@@ -15,13 +15,19 @@
<image v-if="isFailedMessage && !isPreview" src="@/static/images/chating_message_failed.png" />
</view>
</view>
<view class="message_content_wrap message_content_wrap_shadow">
<view class="message_content_wrap message_content_wrap_shadow" @longtap="longtap($event)">
<text-message-render v-if="showTextRender" :message="source" />
<media-message-render v-else-if="showMediaRender" :message="source" />
<error-message-render v-else />
</view>
</view>
</view>
<!-- 长按菜单 -->
<chunLei-popups v-model="toolTipFlag" :popData="toolTipData" @tapPopup="tapPopup"
:x="toolTipX" :y="toolTipY" :placement="popPostion"
direction="row" theme="dark" :dynamic="true">
</chunLei-popups>
</view>
<view v-else class="notice_message_container" :id="`auchor${source.clientMsgID}`">
@@ -30,25 +36,15 @@
</template>
<script>
import {
mapGetters
} from "vuex";
import {
MessageStatus,
MessageType,
SessionType,
} from "openim-uniapp-polyfill";
import {mapGetters} from "vuex";
import {MessageStatus,MessageType,SessionType,} from "openim-uniapp-polyfill";
import chunLeiPopups from "@/components/chunLei-popups.vue";
import MyAvatar from "@/components/MyAvatar/index.vue";
import TextMessageRender from "./TextMessageRender.vue";
import MediaMessageRender from "./MediaMessageRender.vue";
import ErrorMessageRender from "./ErrorMessageRender.vue";
import {
noticeMessageTypes
} from "@/constant";
import {
tipMessaggeFormat,
formatMessageTime
} from "@/util/imCommon";
import {noticeMessageTypes} from "@/constant";
import {tipMessaggeFormat,formatMessageTime} from "@/util/imCommon";
const textRenderTypes = [MessageType.TextMessage];
@@ -60,6 +56,7 @@
TextMessageRender,
MediaMessageRender,
ErrorMessageRender,
chunLeiPopups
},
props: {
source: Object,
@@ -71,7 +68,14 @@
isActive: Boolean,
},
data() {
return {};
return {
toolTipX: 0,
toolTipY: 0,
toolTipFlag: false,
popPostion:"default",
toolTipData: [],
};
},
computed: {
...mapGetters([
@@ -133,6 +137,119 @@
}, 2000);
}
},
longtap(e){
console.log(e.target,e.currentTarget);
this.showToolTip(e);
},
//操作项
showToolTip: function(e) {
let that = this;
that.toolTipData=[
{
id: 1,
icon: '/static/images/chat/longTipIcon/copy.png',
title: '复制',
disabled: false
},
{
id: 4,
icon: '/static/images/chat/longTipIcon/zhuanfa.png',
title: '转发',
disabled: false
},
{
id: 5,
icon: '/static/images/chat/longTipIcon/tag.png',
title: '编辑',
disabled: false
}
];
that.toolTipX =e.touches[0].clientX;
that.toolTipY = e.touches[0].clientY-20;
that.toolTipFlag = !that.toolTipFlag;
if(that.toolTipFlag==true){
let nowTime=new Date().getTime();
let msgTime=that.source.createTime;
let diff= nowTime-msgTime;
if(this.isSender&&diff<120000){
that.toolTipData.push({
id: 3,
icon: '/static/images/chat/longTipIcon/revert.png',
title: '撤回',
disabled: false
})
}
}
},
tapPopup(e) {
let that = this;
let currentHandleMsg=that.source;
if (e.title == "撤回") {
let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
that.$emit("revertMsg",editMessage)
that.toolTipFlag = false;
}
if (e.title == "复制") {
let content = currentHandleMsg.content;
if (content) {
let copyContent =content.text;
let formatStr = this.replaceReseverEmoji(copyContent);
that.globalUtil.uniCopy({
content: formatStr,
success: (res) => {
uni.showToast({
title: res,
icon: 'none'
})
},
error: (e) => {
uni.showToast({
title: e,
icon: 'none',
duration: 3000,
})
}
})
}
that.toolTipFlag = false;
return;
}
if (e.title == "转发") {
that.toolTipFlag = false;
/* that.$u.route({
url: '/pages/chat/chatGroup/msgForward',
params: {
msgList:encodeURIComponent(JSON.stringify([currentHandleMsg])),
sendType: 1, //1 单条转发 2多条转发
fromChatGroupId: currentHandleMsg.groupId
}
}) */
return
}
if(e.title=="调换"){
that.toolTipFlag = false;
return;
}
if (e.title == "多选") {
that.toolTipFlag = false;
/* that.$u.route({
url: '/pages/chat/chatting/chatting-checkbox',
params: {
groupId:currentHandleMsg.groupId,
pageNum:1,
selectMsgId: currentHandleMsg.id,
}
}) */
return
}
if(e.title=="编辑"){
let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
editMessage.formatTimeStr=currentHandleMsg.createTime;
that.$emit("showUpdateMsg",editMessage)
that.toolTipFlag = false;
return;
}
},
},
};
</script>
@@ -185,19 +302,22 @@
color: #666;
margin-bottom: 6rpx;
}
.message_content_wrap_shadow {
box-shadow: 0px 0px 2px rgba(0,0,0,0.1);
}
.message_content_wrap {
@include vCenterBox();
text-align: start;
// font-size: 14px;
color: $uni-text-color;
width: fit-content;
max-width: 100%;
word-wrap: break-word;
word-break: break-word;
.bg_container {
padding: 16rpx 24rpx;
border-radius: 0rpx 12rpx 12rpx 12rpx;
background-color: #f0f0f0;
background-color: #fff;
}
}
}
@@ -245,13 +365,15 @@
margin-right: 20rpx;
// text-align: end;
align-items: flex-end;
.message_content_wrap_shadow {
box-shadow: 0px 0px 2px #95e261;
}
.message_content_wrap {
flex-direction: row-reverse;
.bg_container {
border-radius: 12rpx 0 12rpx 12rpx;
background-color: #dcebfe !important;
background-color: #94ec68 !important;
}
}
}