rtim/pages_im/pages/conversation/chating/components/ChatingHeader.vue

<template>
	<view class="chating_header_container" :style="{ paddingTop: statusBarHeight + 'px' }" @click="click">
		<view class="chating_header_content">
			<view @click="routeBack" class="header_left">
				<image class="back_icon" style="width: 12px; height: 20px;" src="/pages_im/static/images/common_left_arrow.png" mode="aspectFit" />
			</view>
			
			<view class="header_center">
				<view class="chating_info">
					<view class="conversation_info">
						<text class="title">{{ storeCurrentConversation ? storeCurrentConversation.showName : '' }}</text>
						<text v-if="!isSingle && !isNotify" class="sub_title">{{ groupMemberCount }}</text>
						<image style="width: 16px; height: 16px; margin-left: 4px;" v-if="isRecvMsgOpt" src="/pages_im/static/images/conversation_not_accept.png" />
					</view>
					<view v-if="isSingle" class="online_state">
						<!-- <view v-if="isSingle && onlineStr" class="dot" :style="{ backgroundColor: isOnline ? '#10CC64' : '#999' }" />
						<text class="online_str" v-if="isSingle">{{ onlineStr }}</text> -->
					</view>
				</view>
			</view>

			<view class="header_right">
				<view class="right_action">
					<image @click="goSetting" class="action_item" style="width: 23px; height: 23px;" src="/pages_im/static/images/common_more.png" />
				</view>
			</view>
		</view>

		<!-- Group Announcement & Calling (Moved out of header_content for better layout control) -->
		<view v-if="showGroupAnnouncement" @click="toGroupAnnouncement(true)" class="group_announcement_tab">
			<view class="announcement_header">
				<view class="announcement_header_left">
					<image class="announcement_icon" style="width: 16px; height: 16px;" src="/pages_im/static/images/chating_message_notice.png" mode=""></image>
					<text class="announcement_text" style="margin-left: 8rpx">群公告</text>
				</view>
				<view @click.stop="toGroupAnnouncement(false)">
					<image class="announcement_close" style="width: 16px; height: 16px;" src="/pages_im/static/images/announcement_close.png" mode=""></image>
				</view>
			</view>
			<text class="announcement_content_text">
				{{ getGroupAnnouncementContent }}
			</text>
		</view>
		
		<view class="group_calling_tab" v-if="callingData">
			<view class="base_row" @click="showMoreMember = !showMoreMember">
				<image style="width: 20px; height: 20px;" src="/pages_im/static/images/group_calling_icon.png" />
				<text style="font-size: 14px; margin-left: 5px; color: #333;">{{ `${callingData.participant.length}人正在${callingData.invitation.mediaType === 'video' ? '视频' : '语音'}通话` }}</text>
				<image class="arrow" style="width: 9px; height: 6px;" src="/pages_im/static/images/group_calling_arrow.png" />
			</view>
			<view class="member_row" v-show="showMoreMember">
				<my-avatar
					size="42"
					:src="item.userInfo.faceURL"
					:desc="item.userInfo.nickname"
					v-for="item in callingData.participant.slice(0, 11)"
					:key="item.userInfo.userID"/>
			</view>
			<view class="action_row" v-show="showMoreMember" @click="joinRtc">
				<text style="color: #006FFF; font-size: 14px;">加入</text>
			</view>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import { PageEvents } from '../../../../constant';
import IMSDK, { IMMethods, GroupAtType, SessionType, MessageReceiveOptType } from 'openim-uniapp-polyfill';
import { Platform } from '../../../../constant/im';
import MyAvatar from '../../../../components/MyAvatar/index.vue';
import { callingModule, getIMSDK } from '../../../../util/imCommon';

export default {
	name: 'ChatingHeader',
	components: {
		MyAvatar
	},
	props: {
		mutipleCheckVisible: Boolean,
		storeCurrentConversation: {
			type: Object,
			default:{}
		}
	},
	data() {
		let statusBarHeight = 20;
		try {
			statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20;
		} catch (e) {}
		return {
			statusBarHeight: statusBarHeight,
			isOnline: false,
			isTyping: false,
			onlineStr: '',
			callingData: null,
			showMoreMember: false,
			joinLock: false,
			inThisGroup: false
		};
	},
	computed: {
		...mapGetters([ 'storeCurrentGroup', 'storeCurrentMemberInGroup', 'storeSelfInfo', 'storeBlackList']),
		isRecvMsgOpt() {
			// 默认不显示，只有明确设置为非 Normal 状态才显示
			const opt = this.storeCurrentConversation?.recvMsgOpt;
			return opt !== undefined && opt !== MessageReceiveOptType.Normal;
		},
		isSingle() {
			return this.storeCurrentConversation?.conversationType === SessionType.Single;
		},
		isBlack() {
			if (!this.isSingle) {
				return true;
			}
			return this.storeBlackList.some((black) => black.userID === this.storeCurrentConversation.userID);
		},
		isNotify() {
			return this.storeCurrentConversation.conversationType === SessionType.Notification;
		},
		groupMemberCount() {
			const count = this.storeCurrentGroup?.memberCount;
			return (count && count > 0) ? `(${count})` : '';
		},
		showGroupAnnouncement() {
			return this.$store.getters.storeCurrentConversation.groupAtType === GroupAtType.AtGroupNotice;
		},
		getGroupAnnouncementContent() {
			if (this.showGroupAnnouncement) {
				const content = this.$store.getters.storeCurrentGroup.notification;
				if (content) {
					// nvue text组件不支持html标签，需要过滤掉
					return content.replace(/<[^>]+>/g, '');
				}
			}
			return '';
		},
		canGoSetting() {
			if (this.isSingle) {
				return true;
			}
			return this.storeCurrentMemberInGroup.groupID === this.storeCurrentConversation.groupID;
		}
	},
	mounted() {
		// console.log("qxj storeCurrentConversation",this.storeCurrentConversation);
		// 延迟加载 IM 监听，避免阻塞 UI 渲染
		setTimeout(() => {
			this.setIMListenter();
			if (this.storeCurrentConversation.groupID) {
				this.joinedGroupChangeHandler({
					data: { groupID: this.storeCurrentConversation.groupID }
				});
			} else {
				this.getOnlineState();
			}
		}, 200);
	},
	beforeDestroy() {
		this.disposeIMListener();
		const _IMSDK = getIMSDK();
		_IMSDK.asyncApi('unsubscribeUsersStatus', _IMSDK.uuid(), [this.storeCurrentConversation.userID]);
	},
	methods: {
		click(e) {
			this.$emit('click', e);
		},
		routeBack() {
			if (this.mutipleCheckVisible) {
				this.$emit('mutipleCheckUpdate');
				return;
			}
			this.$emit('back');
			// uni.navigateBack()
			uni.switchTab({
				url: '/pages_im/pages/conversation/conversationList/index'
			});
		},
		goSetting() {
			this.$emit('enterSubPage');
			const url = this.isSingle ? '/pages_im/pages/conversation/singleSettings/index' : '/pages_im/pages/conversation/groupSettings/index';
			uni.navigateTo({url});
		},
		joinRtc() {
			this.$emit('enterSubPage');
			callingModule.joinRoomLiveChat(this.callingData);
		},
		routeCall() {
			if (!this.$store.getters.storeCurrentConversation.groupID) {
				this.$emit('enterSubPage');
				uni.$emit(PageEvents.RtcCall);
				return;
			}
			IMSDK.asyncApi('signalingGetRoomByGroupID', IMSDK.uuid(), this.$store.getters.storeCurrentConversation.groupID).then(({ data }) => {
				if (data.invitation) {
					uni.showModal({
						title: '提示',
						content: '群通话进行中，是否直接加入？',
						confirmText: '确认',
						cancelText: '取消',
						success: (res) => {
							if (res.confirm) {
								this.$emit('enterSubPage');
								callingModule.joinRoomLiveChat(data);
							}
						}
					});
				} else {
					this.$emit('enterSubPage');
					uni.$emit(PageEvents.RtcCall);
				}
			});
		},
		getOnlineState() {
			IMSDK.asyncApi('subscribeUsersStatus', IMSDK.uuid(), [this.storeCurrentConversation.userID])
				.then(({ data }) => {
					this.isOnline = !!data[0].status;
					if (data[0].status) {
						const platformStr = data[0].platformIDs.map((id) => Platform[id]).join('/');
						this.onlineStr = platformStr + '在线';
					} else {
						this.onlineStr = '离线';
					}
				}).catch((err) => {
					
				});
		},
		checkOnline() {
			if (this.isSingle) {
				this.getOnlineState();
			}
		},
		toGroupAnnouncement(bool) {
			if (bool) {
				uni.navigateTo({
					url: '/pages_im/pages/conversation/groupAnnouncement/index'
				});
			} else {
				IMSDK.asyncApi('setConversationPrivateChat', IMSDK.uuid(), {
					conversationID: this.storeCurrentConversation.conversationID,
					isPrivate: false
				}).then(() => {
					this.$store.commit('conversation/UPDATE_CURRENT_CONVERSATION', {
						key: 'groupAtType',
						value: GroupAtType.AtNormal
					});
				});
			}
		},
		setIMListenter() {
			// this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight; // 移除此处的重复设置，防止布局跳动
			IMSDK.subscribe(IMSDK.IMEvents.OnUserStatusChanged, this.userStatusChangeHandler);
			uni.$on(IMSDK.IMEvents.OnJoinedGroupDeleted, this.joinedGroupChangeHandler);
			uni.$on(IMSDK.IMEvents.OnJoinedGroupAdded, this.joinedGroupChangeHandler);
		},
		userStatusChangeHandler({ data }) {
			if (data.userID === this.storeCurrentConversation.userID) {
				this.isOnline = data.status === 1;
				if (data.status === 1) {
					const platformStr = data.platformIDs.map((id) => Platform[id]).join('/');
					this.onlineStr = platformStr + '在线';
				} else {
					this.onlineStr = '离线';
				}
			}
		},
		updateTyping() {
			this.isTyping = true;
			if (this.typingTimer) clearTimeout(this.typingTimer);
			this.typingTimer = setTimeout(() => {
				this.isTyping = false;
			}, 2000);
		},
		updateCallingData(data) {
			this.callingData = data;
		},
		joinedGroupChangeHandler({ data }) {
			if (data.groupID === this.storeCurrentConversation.groupID) {
				IMSDK.asyncApi(IMMethods.IsJoinGroup, IMSDK.uuid(), data.groupID).then((res) => {
					this.inThisGroup = res.data;
				});
			}
		},
		disposeIMListener() {
			IMSDK.unsubscribe(IMSDK.IMEvents.OnUserStatusChanged, this.userStatusChangeHandler);
			uni.$off(IMSDK.IMEvents.OnJoinedGroupDeleted, this.joinedGroupChangeHandler);
			uni.$off(IMSDK.IMEvents.OnJoinedGroupAdded, this.joinedGroupChangeHandler);
		}
	}
};
</script>

<style lang="scss" scoped>
.chating_header_container {
	background-color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-color: #e8eaef;
	position: relative; /* Ensure absolute children position relative to this */
	flex-direction: column;
}

.chating_header_content {
	height: 44px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.header_left {
	width: 60px;
	height: 44px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	padding-left: 12px;
}

.header_center {
	flex: 1;
	height: 44px;
	justify-content: center;
	align-items: center;
}

.header_right {
	width: 60px;
	height: 44px;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	padding-right: 12px;
}

.back_icon {
	width: 12px;
	height: 20px;
}

.action_item {
	width: 23px;
	height: 23px;
}

.chating_info {
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.conversation_info {
	flex-direction: row;
	align-items: center;
	justify-content: center;
}

.title {
	font-size: 19px;
	font-weight: 500;
	lines: 1;
	text-overflow: ellipsis;
	color: #333333;
}

.sub_title {
	margin-left: 4px;
	font-size: 14px;
	color: #333333;
}

.online_state {
	flex-direction: row;
	align-items: center;
	margin-top: 2px;
}

.right_action {
	flex-direction: row;
	align-items: center;
}

/* Group Announcement */
.group_announcement_tab {
	/* Position changed to flow layout */
	padding: 10px 16px;
	background-color: #f0f6ff;
	border-radius: 6px;
	flex-direction: column;
	margin: 10px 10px 0 10px; /* Add top margin */
}

.announcement_header {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8px;
}

.announcement_header_left {
	flex-direction: row;
	align-items: center;
}

.announcement_text {
	font-size: 14px;
	color: #333;
}

.announcement_content_text {
	lines: 2;
	text-overflow: ellipsis;
	font-size: 12px;
	color: #617183;
}

/* Group Calling */
.group_calling_tab {
	/* Position changed to flow layout */
	padding: 12px;
	background-color: #f4f9ff;
	border-radius: 4px;
	margin: 10px 10px 0 10px; /* Add top margin */
}

.base_row {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.member_row {
	flex-direction: row;
	flex-wrap: wrap;
	padding: 12px 14px;
	margin-top: 12px;
	background-color: #ffffff;
	border-bottom-width: 1px;
	border-bottom-color: rgba(151, 151, 151, 0.16);
}

.action_row {
	flex-direction: row;
	justify-content: center;
	padding: 12px;
	background-color: #ffffff;
}
</style>