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

10

Browse Source
This commit is contained in:
cansnow
2025-12-05 16:10:52 +08:00
parent 29be534f22
commit 69a61178e1
64 changed files with 2575 additions and 1141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/conversation/chating/components/ChatingFooter/index.vue
+10 -14
View File
@@ -3,10 +3,8 @@
<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="" />
<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"
@@ -20,14 +18,12 @@
</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"
src="@/static/images/chating_footer_add.png" alt="" srcset="" />
<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" @prepareMediaMessage="prepareMediaMessage"
<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"
@@ -142,17 +138,17 @@
async sendTextMessage() {
if (!this.hasContent) return;
const message = await this.createTextMessage();
this.sendMessage(message);
this.sendMessage(message,this.storeCurrentConversation.userID,this.storeCurrentConversation.groupID);
},
sendMessage(message) {
sendMessage(message,user_id,group_id) {
this.pushNewMessage(message);
if (needClearTypes.includes(message.contentType)) {
this.customEditorCtx.clear();
}
this.$emit("scrollToBottom");
IMSDK.asyncApi(IMMethods.SendMessage, IMSDK.uuid(), {
recvID: this.storeCurrentConversation.userID,
groupID: this.storeCurrentConversation.groupID,
recvID: user_id,
groupID: group_id,
message,
offlinePushInfo,
})
@@ -289,7 +285,7 @@
IMSDK.uuid(),
getPurePath(path)
);
this.sendMessage(message);
this.sendMessage(message,this.storeCurrentConversation.userID,this.storeCurrentConversation.groupID);
});
},
selectClick({idx}) {
pages/conversation/chating/components/ChatingList.vue
+47 -22
View File
@@ -5,13 +5,18 @@
upper-threshold="250" @scrolltoupper="scrolltoupper">
<view id="scroll_wrap">
<u-loadmore nomoreText="" :status="loadMoreStatus" />
<view v-for="item in storeHistoryMessageList" :key="item.clientMsgID">
<view class="msg_item" v-for="item in storeHistoryMessageList" :key="item.clientMsgID" @click="onUserMessageEvent({type:'selected'},item)">
<template v-if="selectFlag">
<uni-icons class="selectedIcon" size="30" color="#07c160" type="checkbox-filled" v-if="selectClientMsgIDItems.indexOf(item.clientMsgID)>-1"></uni-icons>
<uni-icons class="selectedIcon" size="30" color="#ccc" type="circle" v-else></uni-icons>
</template>
<message-item-render
@messageItemRender="messageItemRender"
@longpress="onLongPressMessageItem(item)"
@userEvent="onUserMessageEvent"
:source="item"
:isSender="item.sendID === storeCurrentUserID"
/>
<!-- :isActive="selectClientMsgIDItems.indexOf(item.clientMsgID)>-1" -->
</view>
<view style="visibility: hidden; height: 12px" id="auchormessage_bottom_item"></view>
</view>
@@ -19,10 +24,7 @@
</template>
<script>
import {
mapGetters,
mapActions
} from "vuex";
import {mapGetters,mapActions} from "vuex";
import MessageItemRender from "./MessageItem/index.vue";
export default {
@@ -30,7 +32,18 @@
components: {
MessageItemRender,
},
props: {},
props: {
selectFlag:{
type:Boolean,
default:false
},
selectItems:{
type:Array,
default(){
return [];
}
}
},
data() {
return {
scrollIntoView: "",
@@ -45,7 +58,7 @@
withAnimation: false,
messageLoadState: {
loading: false,
},
}
};
},
computed: {
@@ -62,6 +75,13 @@
}
return this.messageLoadState.loading ? "loading" : "loadmore";
},
selectClientMsgIDItems(){
let arr = [];
this.selectItems.forEach((v,k)=>{
arr.push(v.clientMsgID);
});
return arr;
}
},
mounted() {
this.loadMessageList();
@@ -90,10 +110,7 @@
viewType: 0,
};
try {
const {
emptyFlag
} =
await this.getHistoryMesageList(options);
const {emptyFlag} =await this.getHistoryMesageList(options);
if (emptyFlag) {
this.$emit("initSuccess");
}
@@ -112,10 +129,7 @@
this.$emit("click", e);
},
onScroll(event) {
const {
scrollHeight,
scrollTop
} = event.target;
const {scrollHeight,scrollTop} = event.target;
this.old.scrollTop = scrollTop
this.needScoll =
scrollHeight - scrollTop < uni.getWindowInfo().windowHeight * 1.2;
@@ -162,9 +176,7 @@
});
},
checkInitHeight() {
this.getEl("#scroll_view").then(({
height
}) => {
this.getEl("#scroll_view").then(({height}) => {
this.bgHeight = `${height}px`;
});
},
@@ -179,9 +191,10 @@
.exec();
});
},
onLongPressMessageItem(msg){
}
onUserMessageEvent(e,data){
this.$emit('userEvent',e,data)
},
empty(){}
},
};
</script>
@@ -255,4 +268,16 @@
.fade-enter {
opacity: 0;
}
.msg_item{
display: flex;
flex-direction: row;
align-items: flex-start;
width: 100%;
.message_item{
flex:1;
}
.selectedIcon{
margin-top: 20rpx;
}
}
</style>
pages/conversation/chating/components/MessageItem/index.vue
+46 -40
View File
@@ -15,7 +15,7 @@
<image v-if="isFailedMessage && !isPreview" src="@/static/images/chating_message_failed.png" />
</view>
</view>
<view class="message_content_wrap message_content_wrap_shadow" @longtap="longtap($event)">
<view class="message_content_wrap message_content_wrap_shadow" :id="`message_content_wrap_${source.clientMsgID}`" @longtap.stop.prevent="longtapEvent($event)">
<text-message-render v-if="showTextRender" :message="source" />
<media-message-render v-else-if="showMediaRender" :message="source" />
<error-message-render v-else />
@@ -26,11 +26,12 @@
<!-- 长按菜单 -->
<chunLei-popups v-model="toolTipFlag" :popData="toolTipData" @tapPopup="tapPopup"
:x="toolTipX" :y="toolTipY" :placement="popPostion"
:triangle="false"
direction="row" theme="dark" :dynamic="true">
</chunLei-popups>
</view>
<view v-else class="notice_message_container" :id="`auchor${source.clientMsgID}`">
<view v-else class="notice_message_container" style="margin: 0 auto;" :id="`auchor${source.clientMsgID}`">
<text>{{ getNoticeContent }}</text>
</view>
</template>
@@ -74,7 +75,6 @@
toolTipFlag: false,
popPostion:"default",
toolTipData: [],
};
},
computed: {
@@ -137,9 +137,17 @@
}, 2000);
}
},
longtap(e){
console.log(e.target,e.currentTarget);
this.showToolTip(e);
longtapEvent(e){
console.log('longtapEvent');
// console.log("#"+e.currentTarget.id,e);
// let view = uni.createSelectorQuery().in(this).select("#"+e.currentTarget.id.replace('message_content_wrap_','auchor'));
// console.log(e.touches[0].clientX,e.touches[0].clientY);
// view.boundingClientRect((data) => {
// console.log(data.left,data.top);
// //console.log("得到布局位置信息" + JSON.stringify(data));
// }).exec();
this.$emit('userEvent',{type:"longtapMsgContent"},this.source);
//this.showToolTip(e);
},
//操作项
showToolTip: function(e) {
@@ -158,11 +166,23 @@
disabled: false
},
{
id: 5,
icon: '/static/images/chat/longTipIcon/tag.png',
title: '编辑',
id: 6,
icon: '/static/images/chat/longTipIcon/select.png',
title: '多选',
disabled: false
}
},
{
id: 7,
icon: '/static/images/chat/longTipIcon/delete.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;
@@ -184,18 +204,19 @@
tapPopup(e) {
let that = this;
let currentHandleMsg=that.source;
console.log(currentHandleMsg);
if (e.title == "撤回") {
let editMessage=JSON.parse(JSON.stringify(currentHandleMsg));
that.$emit("revertMsg",editMessage)
that.toolTipFlag = false;
that.$emit('userEvent',{type:'revokeMessage'},that.source);
}
if (e.title == "复制") {
let content = currentHandleMsg.content;
let content = currentHandleMsg.textElem?.content;
if (content) {
let copyContent =content.text;
let formatStr = this.replaceReseverEmoji(copyContent);
that.globalUtil.uniCopy({
content: formatStr,
let formatStr = copyContent;
//let formatStr = this.replaceReseverEmoji(copyContent);
uni.setClipboardData({
data:formatStr,
success: (res) => {
uni.showToast({
title: res,
@@ -215,15 +236,8 @@
return;
}
if (e.title == "转发") {
that.$emit('userEvent',{type:'forward'},that.source);
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=="调换"){
@@ -231,24 +245,16 @@
return;
}
if (e.title == "多选") {
that.$emit('userEvent',{type:'select'},that.source);
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)
if (e.title == "删除") {
that.toolTipFlag = false;
return;
that.$emit('userEvent',{type:'deleteMsg'},that.source);
return
}
},
},
};
@@ -289,7 +295,7 @@
flex-direction: column;
align-items: flex-start;
margin-left: 20rpx;
// text-align: start;
// text-align: flex-start;
max-width: 80%;
position: relative;
@@ -307,7 +313,7 @@
}
.message_content_wrap {
@include vCenterBox();
text-align: start;
text-align: flex-start;
// font-size: 14px;
color: $uni-text-color;
width: fit-content;
@@ -316,7 +322,7 @@
.bg_container {
padding: 16rpx 24rpx;
border-radius: 0rpx 12rpx 12rpx 12rpx;
border-radius: 12rpx;
background-color: #fff;
}
}
pages/conversation/chating/components/SelectFooter.vue
+39
View File
@@ -0,0 +1,39 @@
<template>
<view class="chat_footer">
<uni-icons type="redo" size="30" color="#000" @click.prevent="forwardMsg"></uni-icons>
<uni-icons type="trash" size="30" color="#000" @click.prevent="deleteMsg"></uni-icons>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
forwardMsg() {
this.$emit('userEvent',{type:'forward'});
},
deleteMsg(e) {
this.$emit('userEvent',{type:'deleteMsg'});
},
},
};
</script>
<style lang="scss" scoped>
.chat_footer {
display: flex;
align-items: center;
justify-content: space-evenly;
background: #f6f6f6;
// height: 50px;
max-height: 120px;
padding: 24rpx 20rpx;
image {
width: 26px;
height: 26px;
}
}
</style>
pages/conversation/chating/components/SelectHeader.vue
+64
View File
@@ -0,0 +1,64 @@
<template>
<u-navbar placeholder class="chating_header" bgColor="transparent">
<view @click="leftClick" class="u-nav-slot" slot="left">
取消
</view>
<view class="u-nav-slot" slot="center">
<view class="chating_info">
<view class="conversation_info">
<view class="title">已选择{{ count }}条消息</view>
</view>
</view>
</view>
</view>
<view class="u-nav-slot" slot="right">
</view>
</u-navbar>
</template>
<script>
export default {
name: "SelectHeader",
props: {
count:{
type:Number,
default(){
return 0;
}
}
},
computed: {
},
methods: {
leftClick(e) {
this.$emit("leftClick", e);
},
},
};
</script>
<style lang="scss" scoped>
.chating_header {
border: 2rpx solid #e1e1e1;
.u-nav-slot {
padding: 24rpx;
}
.chating_info {
@include vCenterBox();
flex-direction: column;
.conversation_info {
flex-direction: row;
justify-content: center;
@include vCenterBox();
.title {
@include nomalEllipsis();
max-width: 280rpx;
font-size: 30rpx;
font-weight: 500;
}
}
}
}
</style>
pages/conversation/chating/index.vue
+262 -16
View File
@@ -1,32 +1,40 @@
<template>
<view class="chating_container">
<chating-header @click="pageClick" ref="chatingHeaderRef" />
<chating-list @click="pageClick" ref="chatingListRef" @initSuccess="initSuccess" />
<chating-footer ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
<SelectHeader v-if="selectFlag" :count="selectItems.length" @leftClick="onUserMessageEvent({type:'cancelSelect'})" ref="selectHeaderRef" />
<chating-header v-else @click="pageClick" ref="chatingHeaderRef" />
<chating-list
@userEvent="onUserMessageEvent"
@click="pageClick"
:selectItems="selectItems"
:selectFlag="selectFlag"
ref="chatingListRef"
@initSuccess="initSuccess" />
<SelectFooter v-if="selectFlag" ref="selectFooterRef" @userEvent="onUserMessageEvent" />
<chating-footer v-else ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
@scrollToBottom="scrollToBottom" />
<u-loading-page :loading="initLoading"></u-loading-page>
</view>
</template>
<script>
import {
mapActions
} from "vuex";
import {
PageEvents,
} from "@/constant";
import {mapActions,mapGetters} from "vuex";
import {offlinePushInfo} from "@/util/imCommon";
import {PageEvents,ContactChooseTypes} from "@/constant";
import ChatingHeader from "./components/ChatingHeader.vue";
import ChatingFooter from "./components/ChatingFooter/index.vue";
import ChatingList from "./components/ChatingList.vue";
import {
markConversationAsRead
} from "@/util/imCommon";
import SelectHeader from "./components/SelectHeader.vue";
import SelectFooter from "./components/SelectFooter.vue";
import {markConversationAsRead} from "@/util/imCommon";
import IMSDK,{MessageType} from "openim-uniapp-polyfill";
export default {
components: {
ChatingHeader,
ChatingFooter,
ChatingList,
SelectHeader,
SelectFooter
},
data() {
return {
@@ -34,17 +42,26 @@
footerOutsideFlag: 0,
initLoading: true,
back2Tab: false,
selectFlag:false,
selectItems:[],
forwardItems:[],
forwardMerge:false
};
},
computed:{
...mapGetters([
"storeCurrentConversation",
]),
},
onLoad(options) {
console.log("onload");
//console.log("onload");
this.setPageListener();
if (options?.back2Tab) {
this.back2Tab = JSON.parse(options.back2Tab);
}
},
onUnload() {
console.log("unload");
//console.log("unload");
this.disposePageListener();
markConversationAsRead({
...this.$store.getters.storeCurrentConversation,
@@ -55,7 +72,7 @@
this.resetMessageState();
},
methods: {
...mapActions("message", ["resetMessageState", "deleteMessages"]),
...mapActions("message", ["resetMessageState", "deleteMessages","pushNewMessage", "updateOneMessage"]),
...mapActions("conversation", ["resetConversationState"]),
scrollToBottom(isRecv = false) {
this.$refs.chatingListRef.scrollToBottom(false, isRecv);
@@ -64,7 +81,6 @@
this.footerOutsideFlag += 1;
},
initSuccess() {
console.log("initSuccess");
this.initLoading = false;
},
@@ -75,6 +91,236 @@
disposePageListener() {
uni.$off(PageEvents.ScrollToBottom, this.scrollToBottom);
},
//选择会话列表的回调
async onForwardTargetSelected(userList,groupList){
const _this = this;
//console.log(userList,groupList);
if(this.forwardItems.length === 0){
return false;
}
if(this.forwardMerge && this.forwardItems.length>1){
const res = await IMSDK.asyncApi(IMSDK.IMMethods.CreateMergerMessage, IMSDK.uuid(), {
messageList: _this.forwardItems,
title: "转发的消息",
summaryList: ["summaryList","summaryList"]
});
//console.log(res );
if(res){
await _this.doForwarMsg(userList,groupList,res);
}
}else{
for (var mi = 0; mi < this.forwardItems.length; mi++) {
var msg = this.forwardItems[mi];
const res = await IMSDK.asyncApi(IMSDK.IMMethods.CreateForwardMessage, IMSDK.uuid(), msg);
//console.log(res );
if(res){
await _this.doForwarMsg(userList,groupList,res);
}
}
}
this.onUserMessageEvent({type:'cancelSelect'});
},
async doForwarMsg(userList,groupList,msgiem)
{
//console.log(userList,groupList);
const _this = this;
for (var i = 0; i < userList.length; i++) {
this.sendMessage(msgiem,userList[i].userID,"");
}
for (var i = 0; i < groupList.length; i++) {
this.sendMessage(msgiem,"",groupList[i].groupID);
}
},
sendMessage(message,user_id,group_id) {
//this.scrollToBottom();
//console.log(message);
//console.log(user_id,group_id);
IMSDK.asyncApi(IMSDK.IMMethods.SendMessage, IMSDK.uuid(), {
recvID: user_id,
groupID: group_id,
message,
offlinePushInfo,
})
.then(({data}) => {
console.log(data);
this.pushNewMessage(message);
})
.catch((res={data,errCode,errMsg}) => {
console.log(res);
uni.$u.toast(errMsg);
});
},
onUserMessageEvent(e,data){
const _this = this;
if(e.type == 'select'){
this.selectFlag = true;
this.selectItems = [data];
this.$refs.chatingListRef.scrollToAnchor(`auchor${data.clientMsgID}`);
return ;
}
if(e.type == 'cancelSelect'){
this.selectFlag = false;
this.selectItems = [];
return ;
}
if(e.type == 'selected'){
if(this.selectFlag == true){
let founded = false;
let arr = [];
for (var index = 0; index < this.selectItems.length; index++) {
var v = this.selectItems[index];
if(v.clientMsgID == data.clientMsgID){
founded = true;
}else{
arr.push(v);
}
}
if(!founded){
arr.push(data);
}
console.log(arr.length);
this.selectItems = [...arr];
}
return ;
}
if(e.type == 'deleteMsg'){
let deleteMsgs = [];
if(!data){
deleteMsgs = [...this.selectItems];
}else{
deleteMsgs = [{...data}];
}
for (let i = 0; i < deleteMsgs.length; i++) {
let element = deleteMsgs[i];
IMSDK.asyncApi('deleteMessageFromLocalStorage',IMSDK.uuid(), {
conversationID: _this.storeCurrentConversation.conversationID,
clientMsgID: element.clientMsgID
}).then(res=>{
//console.log(res);
}).catch(res=>{
//console.log(res);
}).finally(()=>{
//console.log(arguments);
})
}
this.selectItems = [];
this.$refs.chatingListRef.loadMessageList();
return ;
}
if(e.type == 'forward'){
if(!data){
this.forwardItems = [...this.selectItems];
let menu = ['逐条转发','合并转发'];
uni.showActionSheet({
itemList:menu,
success({tapIndex}){
if(menu[tapIndex] == '逐条转发'){
this.forwardMerge = false;
}
if(menu[tapIndex] == '合并转发'){
this.forwardMerge = true;
}
uni.navigateTo({
url: `/pages/common/contactChoose/choose?type=${ContactChooseTypes.GetList}&checkedUserIDList=[]`,
events:{
onSelectedConfirm(userList,groupList){
//console.log(userList,groupList);
_this.onForwardTargetSelected(userList,groupList)
}
}
});
}
});
}else{
this.forwardItems = [{...data}];
this.forwardMerge = false;
uni.navigateTo({
url: `/pages/common/contactChoose/choose?type=${ContactChooseTypes.GetList}&checkedUserIDList=[]`,
events:{
onSelectedConfirm(userList,groupList){
//console.log(userList,groupList);
_this.onForwardTargetSelected(userList,groupList)
}
}
});
}
return ;
}
if(e.type == 'revokeMessage'){
IMSDK.asyncApi('revokeMessage', IMSDK.uuid(), {
conversationID: _this.storeCurrentConversation.conversationID,
clientMsgID: data.clientMsgID
}).then(res=>{
console.log(res);
}).catch(res=>{
console.log(res);
}).finally(()=>{
console.log(arguments);
})
return ;
}
if(e.type == 'longtapMsgContent'){
let menu = [];
if(data.contentType == MessageType.TextMessage){
menu.push('复制')
}
menu.push('转发');
menu.push('多选');
menu.push('删除');
let nowTime=new Date().getTime();
let msgTime=data.createTime;
let diff= nowTime-msgTime;
if(this.isSender&&diff<120000){
menu.push('撤回')
}
uni.showActionSheet({
itemList:menu,
success({tapIndex}){
const title = menu[tapIndex];
switch (title) {
case "撤回":
_this.onUserMessageEvent({type:'revokeMessage'},data);
break;
case "复制":
let content = data.textElem?.content;
if (content) {
//let formatStr = this.replaceReseverEmoji(copyContent);
uni.setClipboardData({
data:content,
success: (res) => {
uni.showToast({
title: res,
icon: 'none'
})
},
error: (e) => {
uni.showToast({
title: e,
icon: 'none',
duration: 3000,
})
}
})
}
break;
case "转发":
_this.onUserMessageEvent({type:'forward'},data);
break;
case "多选":
_this.onUserMessageEvent({type:'select'},data);
break;
case "删除":
_this.onUserMessageEvent({type:'deleteMsg'},data);
break;
default:
break;
}
}
})
return ;
}
}
},
onBackPress() {
uni.switchTab({