im/pages/conversation/chating/index.vue

<template>
	<view class="chating_container">
		<SelectHeader v-if="selectFlag" :count="selectItems.length" @leftClick="onUserMessageEvent({type:'cancelSelect'})" ref="selectHeaderRef" />
		<ChatingHeader v-else @click="pageClick" ref="chatingHeaderRef" />
		<ChatingList 
			@userEvent="onUserMessageEvent" 
			@click="pageClick" 
			:selectItems="selectItems"
			:selectFlag="selectFlag"
			ref="chatingListRef" 
			@initSuccess="initSuccess" />
		<SelectFooter v-if="selectFlag" ref="selectFooterRef" @userEvent="onUserMessageEvent"  />
		<ChatingFooter v-else ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag"
			@scrollToBottom="scrollToBottom" />
		<u-loading-page :loading="initLoading"></u-loading-page>
	</view>
</template>

<script>
	import {mapActions,mapGetters} from "vuex";
	import {offlinePushInfo} from "@/util/imCommon";
	import {PageEvents,ContactChooseTypes,noticeMessageTypes} from "@/constant";
	import ChatingHeader from "./components/ChatingHeader";
	import ChatingFooter from "./components/ChatingFooter/index";
	import ChatingList from "./components/ChatingList";
	import SelectHeader from "./components/SelectHeader";
	import SelectFooter from "./components/SelectFooter";
	import {markConversationAsRead} from "@/util/imCommon";
	import IMSDK, {MessageType,GroupMemberRole,SessionType} from "openim-uniapp-polyfill";
	import util from "@/util/index.js"
	export default {
		components: {
			ChatingHeader,
			ChatingFooter,
			ChatingList,
			SelectHeader,
			SelectFooter
		},
		data() {
			return {
				listHeight: 0,
				footerOutsideFlag: 0,
				initLoading: true,
				back2Tab: false,
				selectFlag: false,
				selectItems: [],
				forwardItems: [],
				forwardMerge: false,
				Audio:null
			};
		},
		computed: {
			...mapGetters([
				"storeHistoryMessageList",
				"storeCurrentUserID",
				"storeCurrentConversation",
				"storeCurrentMsg",
				'storeCurrentMsgID',
				"storeCurrentGroup",
				"storeCurrentMemberInGroup"
			]),
			isSingle() {
				return (
					this.storeCurrentConversation.conversationType === SessionType.Single
				);
			},
			isOwner() {
				return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Owner;
			},
			isAdmin() {
				return this.storeCurrentMemberInGroup.roleLevel === GroupMemberRole.Admin;
			},
		},
		created() {
			this.Audio = uni.createInnerAudioContext(); //音频
			/*
			设置音频播放模式，可取值：
			"ambient" - 不中止其他声音播放，不能后台播放，静音后无声音； 
			"soloAmbient" - 中止其他声音播放，不能后台播放，静音后无声音； 
			"playback" - 中止其他声音，可以后台播放，静音后有声音。 
			默认值为"playback"。
			*/
			this.Audio.sessionCategory="soloAmbient";
			this.Audio.onError((r)=>{
				console.log(r);
				this.updateCurrentMsg({});
			})
			this.Audio.onEnded((r)=>{
				console.log(r);
				this.updateCurrentMsg({});
			})
		},
		watch:{
			storeCurrentMsgID(nv,ov){
				if(nv!=ov && nv){
					if(this.storeCurrentMsg.soundElem.soundPath){
						this.Audio.src= this.storeCurrentMsg.soundElem.soundPath;
						this.Audio.play();
						return ;
					}
					this.updateCurrentMsg({});
				}
				console.log(nv,ov,this.Audio,this.storeCurrentMsg);
			}
		},
		onLoad(options) {
			//console.log("onload",this.storeCurrentConversation);
			this.setPageListener();
			if (options?.back2Tab) {
				this.back2Tab = JSON.parse(options.back2Tab);
			}
			// IMSDK.subscribe(IMSDK.IMEvents.OnMsgDeleted,({data})=>{
			// 	let list = this.storeHistoryMessageList;
			// 	//console.log(data);
			// 	list = list.filter((item)=>{
			// 		return item.serverMsgID != data.serverMsgID;
			// 	})
			// 	this.$store.commit('message/SET_HISTORY_MESSAGE_LIST',list);
			// });
		},
		onUnload() {
			//IMSDK.unsubscribe(IMSDK.IMEvents.OnMsgDeleted);
			//console.log("unload");
			this.disposePageListener();
			markConversationAsRead({...this.$store.getters.storeCurrentConversation,},true);
			this.resetConversationState();
			this.resetMessageState();
			// #ifdef APP-PLUS
			if (this.Audio) {
				this.Audio.stop();
				this.Audio.destroy();
				this.Audio = null;
			}
			// #endif
		},
		onHide() {
			// #ifdef APP-PLUS
			if (this.Audio) {
				this.Audio.stop();
			}
			// #endif
		},
		methods: {
			...mapActions("message", ["updateCurrentMsg","resetMessageState", "deleteMessages", "pushNewMessage", "updateOneMessage"]),
			...mapActions("conversation", ["resetConversationState"]),
			scrollToBottom(isRecv = false) {
				this.$refs.chatingListRef.scrollToBottom(false, isRecv);
			},
			pageClick(e) {
				this.footerOutsideFlag += 1;
			},
			initSuccess() {
				this.initLoading = false;
			},

			// page event
			setPageListener() {
				uni.$on(PageEvents.ScrollToBottom, this.scrollToBottom);
			},
			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) {
				IMSDK.asyncApi(IMSDK.IMMethods.SendMessage, IMSDK.uuid(), {
						recvID: user_id,
						groupID: group_id,
						message,
						offlinePushInfo,
					})
					.then(({data}) => {
						if(user_id && this.storeCurrentConversation.userID  == user_id){
							this.pushNewMessage(message);
							this.scrollToBottom();
							return ;
						}
						if(group_id && this.storeCurrentConversation.groupID  == group_id){
							this.pushNewMessage(message);
							this.scrollToBottom();
							return ;
						}
					})
					.catch((res = {data,errCode,errMsg}) => {
						console.log(res);
						uni.$u.toast(errMsg);
					});
			},
			async 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) {
						if(noticeMessageTypes.includes(data.contentType)){
							return ;
						}
						let arr = this.selectItems.filter((item)=>item.clientMsgID != data.clientMsgID);
						if(arr.length === this.selectItems.length){
							arr.push(data)
						}
						this.selectItems = [...arr];
					}
					return;
				}
				if (e.type == 'deleteMsg' || e.type == 'deleteServerMsg') {
					let method = IMSDK.IMMethods.DeleteMessageFromLocalStorage;
					if(e.type == 'deleteServerMsg'){
						method = IMSDK.IMMethods.RevokeMessage
					}
					//console.log(method);
					let deleteMsgs = [];
					if (!data) {
						deleteMsgs = [...this.selectItems];
					} else {
						deleteMsgs = [{...data}];
					}
					for (let i = 0; i < deleteMsgs.length; i++) {
						let element = deleteMsgs[i];
						let a = await IMSDK.asyncApi(method, IMSDK.uuid(), {
							conversationID: _this.storeCurrentConversation.conversationID,
							clientMsgID: element.clientMsgID
						});
						//console.log(a);
					}
					this.selectItems = [];
					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 => {
						let list = _this.storeHistoryMessageList;
						list = list.filter((item)=>{
							return item.clientMsgID != data.clientMsgID;
						});
						_this.$store.commit('message/SET_HISTORY_MESSAGE_LIST',list);
					}).catch(res => {
						console.log(res);
					}).finally(() => {
						console.log(arguments);
					})
					return;
				}
				if (e.type == 'audio_msg_click'){
					if(_this.storeCurrentMsgID){
						_this.updateCurrentMsg({clientMsgID:""});
					}else{
						_this.updateCurrentMsg(e.message);
					}
					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.storeCurrentUserID == data.sendID && diff < 120000) {
						menu.push('撤回')
					}
					if(_this.isAdmin | _this.isOwner){
						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;
								case "撤回（管理员功能）":
									_this.onUserMessageEvent({type: 'deleteServerMsg'}, data);
									break;
								default:
									break;
							}
						}
					})
					return;
				}
				if (e.type == 'avatarClick'){
					if(data.sendID == this.storeCurrentUserID){
						return ;
					}
					if(!_this.isSingle){
						if(this.storeCurrentMemberInGroup.roleLevel < 60 && this.storeCurrentGroup.lookMemberInfo!=0){
							return ;
						}
					}
					uni.navigateTo({
						url:"/pages/common/userCard/index?sourceID="+data.sendID
					})
					return ;
				}
			}
		},
		onBackPress() {
			uni.switchTab({
				url: "/pages/conversation/conversationList/index",
			});
			return true;
		},
		beforeDestroy() {
			uni.switchTab({
				url: "/pages/conversation/conversationList/index",
			});
		},
	};
</script>

<style lang="scss" scoped>
	.chating_container {
		@include colBox(false);
		height: 100vh;
		overflow: hidden;
		background-color: #ececec !important;
		position: relative;

		.watermark {
			font-size: 16px;
			/* 水印文字大小 */
			color: rgba(0, 0, 0, 0.2);
			/* 水印文字颜色，使用透明度控制可见度 */
			position: absolute;
			/* 水印相对定位 */
			transform: rotate(-45deg);
			pointer-events: none;
			/* 防止水印文字干扰交互 */

			/* 为不同的水印元素设置不同的偏移，以避免重叠 */
			// transform-origin: top right;
			// margin-top: 20px;
			// margin-right: 20px;
		}

		// ::before {
		//   content: "Your Watermark Text"; /* 替换为你想要的水印文字 */
		//   font-size: 16px; /* 水印文字大小 */
		//   color: rgba(0, 0, 0, 0.2); /* 水印文字颜色，使用透明度控制可见度 */
		//   position: absolute; /* 水印相对定位 */
		//   top: 20px; /* 距离顶部的距离 */
		//   right: 20px; /* 距离右侧的距离 */
		//   transform: rotate(-45deg); /* 将水印旋转为倾斜状态 */
		//   pointer-events: none; /* 防止水印文字干扰交互 */
		//   z-index: -1; /* 将水印置于底层 */
		// }

		.mutiple_action_container {
			display: flex;
			border-top: 1px solid #eaebed;
			background: #f0f2f6;
			justify-content: space-evenly;
			padding: 12px 24px;

			.action_item {
				@include centerBox();
				flex-direction: column;

				image {
					width: 48px;
					height: 48px;
				}
			}
		}
	}
</style>