im/pages/conversation/chating/index.vue

<template>
	<view class="chating_container">
		<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,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 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 {
				listHeight: 0,
				footerOutsideFlag: 0,
				initLoading: true,
				back2Tab: false,
				selectFlag:false,
				selectItems:[],
				forwardItems:[],
				forwardMerge:false
			};
		},
		computed:{
			...mapGetters([
				"storeCurrentConversation",
			]),	
		},
		onLoad(options) {
			//console.log("onload");
			this.setPageListener();
			if (options?.back2Tab) {
				this.back2Tab = JSON.parse(options.back2Tab);
			}
		},
		onUnload() {
			//console.log("unload");
			this.disposePageListener();
			markConversationAsRead({
					...this.$store.getters.storeCurrentConversation,
				},
				true
			);
			this.resetConversationState();
			this.resetMessageState();
		},
		methods: {
			...mapActions("message", ["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) {
				//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({
				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>