heshanApp/pages_im/pages/conversation/chating1/index.vue

<template>
	<page-meta :root-font-size="$store.getters.storeRootFontSize"></page-meta>
	<view :style="{ backgroundColor: '#F5F7FA' }" class="chating_container">
		<!-- #ifndef APP-PLUS  -->
		    <chating-header @click="pageClick" ref="chatingHeaderRef" :mutipleCheckVisible="mutipleCheckVisible" @mutipleCheckUpdate="mutipleCheckUpdate" />
	    <!-- #endif -->
		<view class="msg-list">
			 <chating-list
			 	@click="pageClick"
			 	:mutipleCheckVisible="mutipleCheckVisible"
			 	ref="chatingListRef"
			 	@initSuccess="initSuccess"
			 	:menuOutsideFlag="menuOutsideFlag"
				:keyboardHeight="keyboardHeight"
			 	@closeMenu="closeMenu" />
			 
		</view>
			
        <chating-footer v-if="imType == 1 || imType == 2 || $companyUserIsLogin() || canShowBot"  v-show="!mutipleCheckVisible" ref="chatingFooterRef" :footerOutsideFlag="footerOutsideFlag" @scrollToBottom="scrollToBottom" @keyboardHeightChange="onKeyboardHeightChange" />
		
		<view v-show="mutipleCheckVisible" class="mutiple_action_container">
			<!-- <view @click="forward('BatchForWard')" class="action_item">
					<image src="@/static/images/mutiple_batch.png" />
					<text style="margin-top: 12rpx;"> 逐条转发 </text>
              </view> -->
			<view @click="forward('MergeForWard')" class="action_item">
				<image src="../../../static/images/mutiple_merge.png" />
				<text style="margin-top: 12rpx">合并转发</text>
			</view>
			<view @click="mutipleRemove" class="action_item">
				<image src="../../../static/images/mutiple_delete.png" />
				<text style="margin-top: 12rpx; color: #ff381f">删除</text>
			</view>
		</view>
		<!-- <u-loading-page :loading="initLoading"></u-loading-page> -->

	</view>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import IMSDK, { SessionType } from 'openim-uniapp-polyfill';
import { ContactChooseTypes, GroupMemberListTypes, PageEvents } from '../../../constant';
import ChatingHeader from './components/ChatingHeader.vue';
import ChatingFooter from './components/ChatingFooter/index.vue';
import ChatingList from './components/ChatingList.vue';
import { markConversationAsRead, parseMessageByType, callingModule } from '../../../util/imCommon';
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
	mixins: [ MescrollMixin ], //mescroll-body写在子组件时
	components: {
		ChatingHeader,
		ChatingFooter,
		ChatingList
	},
	data() {
		return {
			listHeight: 0,
			footerOutsideFlag: 0,
			menuOutsideFlag: 0,
			initLoading: true,
			mutipleCheckVisible: false,
			back2Tab: false,
			timer: null,
			fontSize:"40px",
			canShowBot:false,
			keyboardHeight: 0,
		};
	},
	computed: {
	  ...mapGetters(["timStore","storeFriendList","storeCurrentConversation","storeCurrentGroup"]),
	  // 响应式派生数据
	  imType() {
		   return this.timStore?.imType || '';
	  },
	  orderId() {
	  	   return this.timStore?.orderId || '';
	  },
	  isSingle() {
	       return this.storeCurrentConversation.conversationType === SessionType.Single;
	  },
	  isGroup() {
	       return this.storeCurrentConversation.conversationType === SessionType.Group;
	  },
	  isNotify() {
	     	return this.storeCurrentConversation.conversationType === SessionType.Notification;
	  },
	  groupMemberCount() {
	  	    return `(${this.storeCurrentGroup?.memberCount ?? 0})`;
	  },
	  getGroupAnnouncementContent() {
		if (this.showGroupAnnouncement) {
			return this.$store.getters.storeCurrentGroup.notification;
		}
		return '';
	  },
	},
	onLoad(options) {
		this.setPageListener();
		this.checkCalling();
		if (options?.back2Tab) {
			this.back2Tab = JSON.parse(options.back2Tab);
		}
		let userID = this.$store.getters.storeCurrentConversation.userID;
		//this.userID = userID.substring(1);
		//this.isUser = userID.indexOf('U') != -1;
		let isCompanyUser=userID.indexOf('C') != -1;
		this.canShowBot=this.isUserInFriendList(userID,this.storeFriendList) || this.isGroup || isCompanyUser;
		
	},
	onShow() {
		
	},
	onReady() {
		let title = this.$store.getters.storeCurrentConversation?.showName || '';
		if(!this.isSingle && !this.isNotify){
			title=title+this.groupMemberCount;
		}
		uni.setNavigationBarTitle({ title });
	},
	onUnload() {
		this.disposePageListener();
		markConversationAsRead(
		    {...this.$store.getters.storeCurrentConversation},
			true
		);
		this.resetConversationState();
		this.resetMessageState();
		if (this.timer) {
			clearInterval(this.timer);
		}
	},
	
	methods: {
		...mapActions('message', ['resetMessageState', 'deleteMessages']),
		...mapActions('conversation', ['resetConversationState']),
		scrollToBottom(isRecv = false) {
			//this.$refs.chatingListRef.scrollToAnchor(`auchor${clientMsgID}`, isRecv);
			//this.$refs.chatingListRef.scrollToBottom(false, isRecv);
			this.$refs.chatingListRef.scrollToBottom();
		},
		onKeyboardHeightChange(height) {
			//console.log("qxj onKeyboardHeightChange height",height);
			this.keyboardHeight = height;
		},
		nativeCallEndHandler() {
			if (typeof plus === 'undefined') {
				return;
			}
			if (!this.$store.getters.storeCurrentConversation.groupID) {
				return;
			}
			IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
				if (this.$refs.chatingHeaderRef) {
					if (data.invitation) {
						this.$refs.chatingHeaderRef.updateCallingData(data);
					} else {
						this.$refs.chatingHeaderRef.updateCallingData(null);
					}
				}
			});
		},
		checkCalling() {
			if (typeof plus === 'undefined') {
				return;
			}
			if (!this.$store.getters.storeCurrentConversation.groupID) {
				return;
			}
			if (this.timer) {
				clearInterval(this.timer);
			}
			this.nativeCallEndHandler();
			
		},
		mutipleRemove() {
			const checkedMessages = this.$store.getters.storeHistoryMessageList.filter((message) => message.checked);
			if (checkedMessages.length === 0) {
				uni.$u.toast('请先选择要操作的消息');
				return;
			}
			let count = 0;
			checkedMessages.map((message) => {
				IMSDK.asyncApi(IMSDK.IMMethods.DeleteMessage, IMSDK.uuid(), {
					conversationID: this.$store.getters.storeCurrentConversation.conversationID,
					clientMsgID: message.clientMsgID
				}).then(() => {
					count++;
					if (count === checkedMessages.length) {
						this.deleteMessages(checkedMessages);
						this.mutipleCheckUpdateHandler(false);
						uni.$u.toast('删除成功');
					}
				});
			});
		},
		forward(type) {
			const checkedMessages = this.$store.getters.storeHistoryMessageList.filter((message) => message.checked);
			if (checkedMessages.length === 0) {
				uni.$u.toast('请先选择要操作的消息');
				return;
			}
			const currentConversation = this.$store.getters.storeCurrentConversation;
			const title = currentConversation.groupID ? `群聊${currentConversation.showName}的聊天记录` : `和${currentConversation.showName}的聊天记录`;

			const mergeInfo = {
				messageList: [...checkedMessages],
				summaryList: checkedMessages.map((message) => `${message.senderNickname}：${parseMessageByType(message)}`),
				title
			};
			uni.navigateTo({
				url: `/pages_im/pages/common/contactChoose/index?type=${type}&mergeInfo=${encodeURIComponent(JSON.stringify(mergeInfo))}`
			});
		},
		closeMenu() {
			this.getEl('.message_menu_container').then((res) => {
				if (res) {
					this.menuOutsideFlag += 1;
				}
			});
		},
		
		async pageClick(e) {
			this.getEl('.message_menu_container').then((res) => {
				if (res) {
					this.menuOutsideFlag += 1;
				}
			});
			this.footerOutsideFlag += 1;
		},
		getEl(el) {
			return new Promise((resolve) => {
				const query = uni.createSelectorQuery().in(this);
				query.select(el).boundingClientRect((data) => {
						resolve(data);
					}).exec();
			});
		},
		initSuccess() {
			this.initLoading = false;
		},
		async getCheckedUsers(data) {
			// this.$refs.chatingFooterRef.customEditorCtx.undo();
			if (this.$refs.chatingFooterRef && this.$refs.chatingFooterRef.backspace) {
				this.$refs.chatingFooterRef.backspace();
			}
			for (const item of data) {
				this.$refs.chatingFooterRef.insertAt(item.userID, item.nickname);
				await uni.$u.sleep(200);
			}
		},
		sendRtcInvite(mediaType, userIDList) {
			const isVideo = mediaType === 'video';
			const inviteeUserIDList = userIDList ?? [this.$store.getters.storeCurrentConversation.userID];
			callingModule.startLiveChat(isVideo, inviteeUserIDList, this.$store.getters.storeCurrentConversation.groupID, this.$store.getters.storeCurrentUserID);
		},
		chooseCallMediaType(mediaType) {
			return new Promise((resolve, reject) => {
				resolve(mediaType);
				if (mediaType) {
					resolve(mediaType);
					return;
				}
				// uni.showActionSheet({
				// 	itemList: ['语音通话', '视频通话'],
				// 	success: ({ tapIndex }) => {
				// 		resolve(tapIndex ? 'video' : 'audio');
				// 	},
				// 	fail: () => reject()
				// });
			});
		},
		// page event
		typingHandler() {
			if (this.$refs.chatingHeaderRef) {
				this.$refs.chatingHeaderRef.updateTyping();
			}
		},
		onlineCheckHandler() {
			if (this.$refs.chatingHeaderRef) {
				this.$refs.chatingHeaderRef.checkOnline();
			}
		},
		atSomeOneHandler({ userID, nickname }) {
			if (typeof plus !== 'undefined') {
				if (plus.os.name == 'iOS') {
					var UIImpactFeedbackGenerator = plus.ios.importClass('UIImpactFeedbackGenerator');
					var impact = new UIImpactFeedbackGenerator();
					impact.prepare();
					impact.init(1);
					impact.impactOccurred();
				} else {
					uni.vibrateLong();
				}
			} else {
				uni.vibrateLong();
			}
			if (this.$refs.chatingFooterRef) {
				this.$refs.chatingFooterRef.insertAt(userID, nickname);
			}
		},
		mutipleCheckUpdateHandler({ flag, message }) {
			this.mutipleCheckVisible = flag;
			if (message) {
				this.$store.dispatch('message/updateOneMessage', {
					message: {
						...message,
						checked: true
					}
				});
			}
			if (!flag) {
				const tmpMessageList = [...this.$store.getters.storeHistoryMessageList];
				tmpMessageList.map((message) => (message.checked = false));
				this.$store.commit('message/SET_HISTORY_MESSAGE_LIST', tmpMessageList);
			}
		},
		rtcInvitePrepare(mediaType) {
			this.chooseCallMediaType(mediaType).then((callMediaType) => {
				if (this.$store.getters.storeCurrentConversation.userID) {
					this.sendRtcInvite(callMediaType);
				} else {
					uni.$u.route('/pages_im/pages/conversation/groupMemberList/index', {
						type: GroupMemberListTypes.CallInvite,
						groupID: this.$store.getters.storeCurrentConversation.groupID,
						callMediaType: callMediaType
					});
				}
			});
		},
		setPageListener() {
			IMSDK.subscribe('onRecvC2CReadReceipt', ({ data: receiptList }) => {
				//console.log('onRecvC2CReadReceipt', receiptList);
			});
			uni.$on(PageEvents.TypingUpdate, this.typingHandler);
			uni.$on(PageEvents.OnlineStateCheck, this.onlineCheckHandler);
			uni.$on(PageEvents.ScrollToBottom, this.scrollToBottom);
			uni.$on(PageEvents.AtSomeOne, this.atSomeOneHandler);
			uni.$on(PageEvents.MutipleCheckUpdate, this.mutipleCheckUpdateHandler);
			uni.$on(PageEvents.RtcCall, this.rtcInvitePrepare);
			uni.$on(PageEvents.NativeCallEnd, this.nativeCallEndHandler);
		},
		disposePageListener() {
			uni.$off(PageEvents.TypingUpdate, this.typingHandler);
			uni.$off(PageEvents.OnlineStateCheck, this.onlineCheckHandler);
			uni.$off(PageEvents.ScrollToBottom, this.scrollToBottom);
			uni.$off(PageEvents.AtSomeOne, this.atSomeOneHandler);
			uni.$off(PageEvents.MutipleCheckUpdate, this.mutipleCheckUpdateHandler);
			uni.$off(PageEvents.RtcCall, this.rtcInvitePrepare);
			uni.$off(PageEvents.NativeCallEnd, this.nativeCallEndHandler);
		},
		mutipleCheckUpdate() {
			this.mutipleCheckUpdateHandler({ flag: false });
		},
		isUserInFriendList(sorUserId,storeList) {
		    if (!storeList || !Array.isArray(storeList)) {
		        return false;
		    }
		    return storeList.some(item => item.userID === sorUserId);
		}

	},
	// 原生导航栏按钮点击事件（titleNView.buttons）
	onNavigationBarButtonTap(e) {
		if (e?.id === 'more' || e?.index === 0) {
			const isSingle = this.$store.getters.storeCurrentConversation?.conversationType === SessionType.Single;
			const url = isSingle ? '/pages_im/pages/conversation/singleSettings/index' : '/pages_im/pages/conversation/groupSettings/index';
			uni.navigateTo({ url });
		}
	},
    onBackPress() {
		if (this.mutipleCheckVisible) {
			this.mutipleCheckUpdateHandler({ flag: false });
			return true;
		} else {
			uni.switchTab({
				url: '/pages_im/pages/conversation/conversationList/index'
			});
			return true;
		}
    },
	beforeDestroy() {
		uni.switchTab({
			url: '/pages_im/pages/conversation/conversationList/index'
		});
	}
	
};
</script>

<style lang="scss" scoped>
	
 view,label {
		display: flex;
		// flex-shrink: 0;
		// flex-grow: 0;
		// flex-basis: auto;
		// align-items: stretch;
		// align-content: flex-start;
	}
	view,label,swiper-item {
		flex-direction: column;
	}
	page,scroll-view{
		box-sizing: border-box;
	}

	page {
		height: 100%;
	}
	
.chating_container {
	    @include colBox(false);
	    height: 100vh;
		width: 100%;
		//overflow-y: hidden;
		//touch-action: none; // 禁止触摸时的默认滚动/回弹行为
		box-sizing: border-box;
		background-repeat: no-repeat;
		background-size: 100%;
		position: relative;
		z-index: 2;
		background: #f5f7fa;
		
	.msg-list {
	      /* height: 1px; 覆盖掉 组件内的height：100%，使得flex-grow: 1作用在容器内被撑开*/
		  height: 1px !important;
		  flex: 1;
		  display: flex;
		  flex-direction: column;
		  overflow: hidden;
		  min-height: 0;
	}	
	.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>