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

<template>
	<view class="chat_header" :class="$companyUserIsLogin()?'ybc':'ybc'">
		<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>
				<view v-if="false" style="position: absolute; left: 51%; transform: translateX(-50%); display: flex; align-items: center;">
					<text class="nickname">消息{{getUnReadCount()}}</text> 
					<view class="self_info_desc" v-if="false" style="margin-left: 10rpx;">
						<view class="user_state">
							<!-- <text class="nickname">{{ storeSelfInfo.nickname }}</text> -->
							<view v-if="!storeReinstall && false">
								<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>
			</block>

			<block v-else>
				<my-avatar :src="storeSelfInfo.faceURL" :desc="storeSelfInfo.nickname" size="40" />
				<view class="msgIcon">
					<view class="msgTitle">{{  truncatedName }}</view>
					<view class="msgSubTitle">{{$getUserInfo().userId}}</view>
				</view>
				<view style="position: absolute; left: 51%; transform: translateX(-50%); display: flex; align-items: center;">
					<text class="nickname">消息{{getUnReadCount()}}</text> 
					<view class="self_info_desc" v-if="false" style="margin-left: 10rpx;">
						<view class="user_state">
							<!-- <text class="nickname">{{ storeSelfInfo.nickname }}</text> -->
							<view v-if="!storeReinstall && false">
								<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>
			</block>
		</view>
		
		<view class="right_action">
			<view @click="toSearchIM()" class="search_icon">
		        <image src="/pages_im/static/images/common_search.png" ></image>
	       </view>

			<view @click="showMore" v-if="showMoreMenu" class="more_icon">
				<image src="/pages_im/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>{{ item.title }}</text>
					</view>
				</view>
			</u-overlay>
		</view>
		
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import MyAvatar from '../../../../components/MyAvatar/index.vue';
import { scanQrCodeResult,IMSDK } 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:false,
			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']),
		truncatedName(){
			let name = (this.storeSelfInfo && this.storeSelfInfo.nickname) || '用户';
			
			if (name.length > 6) {
				return name.substring(0, 6) + '...';
			}
			return name;
		},
	},
	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: '/pages_im/static/images/new/add_group_chat_icon24.svg'});
			this.moreMenus.push({idx: 3, title: '通讯录', icon: '/pages_im/static/images/new/add_friend_icon24.svg' });
		},
		addUserMenu() {
			// 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: '/pages_im/static/images/new/add_friend_icon24.svg' });	
		},
		toNativeCallHistory() {
			uni.navigateTo({
				url: '/pages/moments/index/index'
			});
		},
		toSearchIM() {
			uni.navigateTo({
				url: '/pages_im/pages/common/globalSearch/index'
			});
		},
		setStateStart() {
			this.connectStart = 0;
		},
		setStateSuccess() {
			const _IMSDK = IMSDK;
			_IMSDK.asyncApi('getSignalingInvitationInfoStartApp', _IMSDK.uuid()).then(({ data }) => {
				callingModule.launchLiveChat(data);
			});
			this.connectStart = 1;
		},
		setStateError() {
			this.connectStart = -1;
		},
		subscribeAll() {
			// const _IMSDK = IMSDK;
			IMSDK.subscribe(IMSDK.IMEvents.OnConnecting, this.setStateStart);
			IMSDK.subscribe(IMSDK.IMEvents.OnConnectSuccess, this.setStateSuccess);
			IMSDK.subscribe(IMSDK.IMEvents.OnConnectFailed, this.setStateError);
		},
		unsubscribeAll() {
			// const _IMSDK = IMSDK;
			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'
					});
					
					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 5:
					uni.navigateTo({
						url: `/pages_im/pages/common/createGroup/index`
					});
					break;
				// case 4:
				// 	uni.$u.route('/pages_im/pages/common/meetingCenter/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: 20rpx 20rpx;
	padding-right:0rpx;
	padding-top: var(--status-bar-height);
	background: #fff;
	
	.self_info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		&_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: 20rpx;
		display: flex;
		.search_icon {
			margin-right: 24rpx;
			image {
				width: 62rpx;
				height: 62rpx;
			}
		}
		.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: 34rpx;
		color: #222;
		font-weight: 600;
		margin-left: 0rpx;
		margin-bottom:20rpx;
	}

	.msgTitle {
		font-size: 30rpx;
		color: #333;
		font-weight: 600;
		margin-left: 14rpx;
		margin-bottom:2rpx;
	}

	.msgSubTitle {
		font-size: 26rpx;
		color: #757575;
		font-weight: normal;
		margin-left: 14rpx;
	}

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

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


</style>