baiyuApp/pages_im/pages/conversation/conversationList/components/ChatHeader.vue

<template>
	<view class="chat_header" :class="$companyUserIsLogin()?'ybc':'yc'">
		<view class="self_info"> 
			<block v-if="$companyUserIsLogin()">
				<my-avatar :src="storeSelfInfo.faceURL" :desc="storeSelfInfo.nickname" size="46" />
				<view class="msgIcon">
					<view class="msgTitle">{{ storeSelfInfo.nickname }}</view>
					<view class="msgSubTitle">管家</view>
				</view>
				<!-- <text class="nickname">消息{{getUnReadCount()}}</text> -->
			</block>

			<block v-else>
				<!-- <my-avatar :src="storeSelfInfo.faceURL" :desc="storeSelfInfo.nickname" size="46" />
				<text class="nickname">{{ storeSelfInfo.nickname }}</text> -->
				<text class="nickname">消息{{getUnReadCount()}}</text> 
			</block>

			<view class="self_info_desc">
				<view class="user_state">
					<!-- <text class="nickname">{{ storeSelfInfo.nickname }}</text> -->
					<view v-if="!storeReinstall">
						<view class="tag" v-if="storeIsSyncing">
							<image class="loading" style="height: 24rpx; width: 24rpx" src="../../../../static/images/loading.png" alt="" />
							<text class="status">同步中</text>
						</view>
						<view class="tag" v-if="connectStart == 0">
							<image class="loading" style="height: 24rpx; width: 24rpx" src="../../../../static/images/loading.png" alt="" />
							<text class="status">连接中</text>
						</view>
						<view class="err-tag" v-if="connectStart == -1">
							<image style="height: 24rpx; width: 24rpx" src="../../../../static/images/sync_error.png" alt="" />
							<text class="status">连接失败</text>
						</view>
					</view>
				</view>
			</view>
	
		</view>
		
		
		<view class="right_action">
			<!-- <view @click="toNativeCallHistory" class="call_icon">
		        <image src="../../../../static/images/common_call.png" ></image>
	       </view> -->

			<view @click="showMore" v-if="showMoreMenu" class="more_icon">
				<image src="../../../../static/images/new/add_icon24.svg"></image>
			</view>

			<u-overlay :show="moreMenuVisible" @click="moreMenuVisible = false" opacity="0">
				<view :style="{ top: popMenuPosition.top, right: popMenuPosition.right }" class="more_menu">
					<view @click="clickMenu(item)" v-for="item in moreMenus" :key="item.idx" class="menu_item">
						<image :src="item.icon" mode=""></image>
						<text class="es-mr-10">{{ item.title }}</text>
						<view v-if="item.num>0" style="background: red;color: white;border-radius: 50%;padding: 10rpx;"></view>
					</view>
				</view>
			</u-overlay>
		</view>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import MyAvatar from '../../../../components/MyAvatar/index.vue';
import IMSDK from 'openim-uniapp-polyfill';
import { scanQrCodeResult } from '../../../../util/imCommon';
import { callingModule } from '../../../../util/imCommon';

export default {
	name: 'ChatHeader',
	components: {
		MyAvatar
	},
	props: {},
	data() {
		return {
			connectStart: -2,
			moreMenuVisible: false,
			popMenuPosition: {
				top: 0,
				right: 0
			},
			showMoreMenu:true,
			moreMenus: [
				
				// {
				// 	idx: 0,
				// 	title: '扫一扫',
				// 	icon: require('../../../../static/images/new/scan_icon24.svg')
				// },
				// {
				// 	idx: 1,
				// 	title: '添加好友',
				// 	icon: require('../../../../static/images/new/add_friend_icon24.svg')
				// },
				// {
				// 	idx: 2,
				// 	title: '添加群聊',
				// 	icon: require('../../../../static/images/new/add_group_chat_icon24.svg')
				// }
				// ,{
				// 	idx: 3,
				// 	title: '创建群聊',
				// 	icon: require('../../../../static/images/new/create_group_chat_icon24.svg')
				// }
				// ,{
				// 	idx: 4,
				// 	title: '视频会议',
				// 	icon: require('../../../../static/images/new/video_conference_icon24.svg')
				// }
				
			]
		};
	},
	computed: {
		...mapGetters(['storeSelfInfo', 'storeIsSyncing', 'storeReinstall','storeUnReadCount','storeUnHandleFriendApplicationNum','storeUnHandleGroupApplicationNum'])
	},
	mounted() {
		this.subscribeAll();
		this.initMenu();
		uni.$on('refreshIMMenu', () => {
			this.initMenu();
		});
	},
	beforeDestroy() {
		this.unsubscribeAll();
	},
	methods: {
		initMenu(){
			this.moreMenus=[];
			if (this.$companyUserIsLogin()) {
				this.showMoreMenu=true;
				this.addCompanyMenu();
			} else {
				this.showMoreMenu=true;
				this.addUserMenu();
			}
		},
		addCompanyMenu() {
			this.moreMenus.push({idx: 0,title: '扫一扫',icon: require('../../../../static/images/new/scan_icon24.svg')});
			this.moreMenus.push({idx: 1,title: '添加好友',icon: require('../../../../static/images/new/add_friend_icon24.svg')});
			// this.moreMenus.push({idx: 2,title: '添加群组',icon: require('../../../../static/images/new/add_group_chat_icon24.svg')});
			this.moreMenus.push({idx: 3, title: '我的好友', icon: require('../../../../static/images/new/add_friend_icon24.svg') });
			// this.moreMenus.push({idx: 4, title: '创建群组', icon: require('../../../../static/images/new/add_group_chat_icon24.svg') });
			const num = this.storeUnHandleFriendApplicationNum*1+this.storeUnHandleGroupApplicationNum*1
			this.moreMenus.push({idx: 5, title: '通讯录', icon: require('../../../../static/images/new/add_friend_icon24.svg') ,num});
		},
		addUserMenu() {
			this.moreMenus.push({idx: 0,title: '扫一扫',icon: require('../../../../static/images/new/scan_icon24.svg')});
			this.moreMenus.push({idx: 1,title: '添加好友',icon: require('../../../../static/images/new/add_friend_icon24.svg')});
			// this.moreMenus.push({idx: 2,title: '添加群组',icon: require('../../../../static/images/new/add_group_chat_icon24.svg')});
			this.moreMenus.push({idx: 3, title: '我的好友', icon: require('../../../../static/images/new/add_friend_icon24.svg') });
			const num = this.storeUnHandleFriendApplicationNum*1+this.storeUnHandleGroupApplicationNum*1
			this.moreMenus.push({idx: 5, title: '通讯录', icon: require('../../../../static/images/new/add_friend_icon24.svg') ,num});
		},
		toNativeCallHistory() {
			uni.navigateTo({
				url: '/pages/moments/index/indexs'
			});
		},
		setStateStart() {
			this.connectStart = 0;
		},
		setStateSuccess() {
		    // #ifdef APP-PLUS
		       IMSDK.asyncApi('getSignalingInvitationInfoStartApp', IMSDK.uuid()).then(({ data }) => {
		       	   callingModule.launchLiveChat(data);
		       });
		    // #endif
			
			this.connectStart = 1;
		},
		setStateError() {
			this.connectStart = -1;
		},
		subscribeAll() {
			IMSDK.subscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
			IMSDK.subscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
			IMSDK.subscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
		},
		unsubscribeAll() {
			IMSDK.unsubscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
			IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
			IMSDK.unsubscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
		},
		clickMenu({ idx }) {
			switch (idx) {
				case 0:
					// uni.scanCode({
					// 	scanType: ['qrCode'],
					// 	success: ({ result }) => scanQrCodeResult(result)
					// });
					uni.navigateTo({
						url: '/pages_watch/healthMonitoring/scanCode?typeFun=getIndexScanCode&isFromIm=1'
					});
					
					break;
				case 1:
				case 2:
					{
						uni.navigateTo({
							url: `/pages_im/pages/common/searchUserOrGroup/index?isSearchGroup=${idx === 2}`
						});
					}
					break;
				case 3:
					uni.navigateTo({
					     //url: `/pages_im/pages/contact/index/index`,
						 url: `/pages_im/pages/contact/friendList/index`
					});
					break;
				case 4:
					uni.navigateTo({
						url: `/pages_im/pages/common/createGroup/index`
					});
					break;
				// case 4:
				// 	uni.$u.route('/pages_im/pages/common/meetingCenter/index');
				// 	break;
				case 5:
					uni.navigateTo({
						url: `/pages_im/pages/contact/index/index`
					});
					break;
				default:
					break;
			}
		},
		async showMore() {
			const { right, bottom } = await this.getEl('.more_icon');
			this.popMenuPosition.right = uni.getWindowInfo().windowWidth - right + 'px';
			this.popMenuPosition.top = bottom + 'px';
			this.moreMenuVisible = true;
		},
		getEl(el) {
			return new Promise((resolve) => {
				const query = uni.createSelectorQuery().in(this);
				query.select(el).boundingClientRect((data) => {
						// 存在data，且存在宽和高，视为渲染完毕
						resolve(data);
					}).exec();
			});
		},
		getUnReadCount(){
			if(this.storeUnReadCount>0){
				return "("+this.storeUnReadCount+")";
			}else{
				return "";
			}
			
		}
	}
};
</script>

<style lang="scss" scoped>
@keyframes loading {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

.chat_header {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 36rpx 44rpx;
	margin-top: var(--status-bar-height);
	background: #F5F7FA;
	
	.self_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.nickname {
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
		}

		&_desc {
			@include colBox(true);
			// margin-left: 24rpx;
			color: $uni-text-color;
			.company {
				@include nomalEllipsis();
				font-size: 24rpx;
				margin-bottom: 10rpx;
				max-width: 300rpx;
			}

			.user_state {
				@include vCenterBox();
				.nickname {
					@include nomalEllipsis();
					font-size: 26rpx;
					max-width: 240rpx;
				}

				.err-tag {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 152rpx;
					height: 44rpx;
					background: #ffe1dd;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-left: 8rpx;
					.status {
						font-size: 24rpx;
						margin-left: 8rpx;
						font-weight: 400;
						color: #ff381f;
					}
				}

				.tag {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 152rpx;
					height: 44rpx;
					background: #f2f8ff;
					border-radius: 12rpx 12rpx 12rpx 12rpx;
					margin-left: 8rpx;
					.loading {
						animation: loading 1.5s infinite;
					}
					.status {
						font-size: 24rpx;
						margin-left: 8rpx;
						font-weight: 400;
						color: #0089ff;
					}
				}

				.online_state {
					@include vCenterBox();
					margin-left: 24rpx;
					font-size: 24rpx;
					.dot {
						background-color: #10cc64;
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						margin-right: 12rpx;
					}
				}
			}
		}
	}

	.right_action {
		position: absolute;
		right: 40rpx;
		display: flex;
		.call_icon {
			margin-right: 24rpx;
			image {
				width: 56rpx;
				height: 56rpx;
			}
		}
		.more_icon {
			image {
				width: 56rpx;
				height: 56rpx;
			}
		}

		.more_menu {
			position: absolute;
			// bottom: 0;
			// left: 100%;
			z-index: 999;
			// transform: translate(-100%, 100%);
			box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.16);
			width: max-content;
			border-radius: 12rpx;
			background-color: #fff;

			.menu_item {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				padding: 20rpx 24rpx;
				font-size: 32rpx;
				color: $uni-text-color;
				border-bottom: 1px solid #f0f0f0;

				image {
					width: 24px;
					height: 24px;
					margin-right: 24rpx;
				}

				&:last-child {
					border: none;
				}
			}
		}
	}

	.nickname {
		font-size: 36rpx;
		color: #222;
		font-weight: 400;
		margin-left: 0rpx;
	}

	.msgTitle {
		font-size: 34rpx;
		color: #000;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.msgSubTitle {
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		margin-left: 20rpx;
	}

	.msgIcon {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
}

.ybc {
   justify-content: space-between;
}
	
.yc{
   justify-content: center;
}
	


</style>