im/pages/conversation/conversationList/components/ChatHeader.vue

<template>
	<view class="chat_header">
		<uni-nav-bar 
			right-icon="plus"
			@clickRight="showMore"
			:border="false"
			title="标题"
			backgroundColor="transparent"
			>
			<template #right>
				<uni-icons @click="showMore" type="plus" size="26" class="more_icon"></uni-icons>
			</template>
		</uni-nav-bar>
		<view class="right_action">
			<u-overlay :show="moreMenuVisible" @click="moreMenuVisible = false" opacity="0">
				<view :style="{ top: popMenuPosition.top, right: popMenuPosition.right }" class="more_menu">
					<view @click="clickMenu({name:'createGroup'})" class="menu_item">
						<uni-icons size="24" color="#FFF" type="chat"></uni-icons>
						<text>创建群聊</text>
					</view>
					<view @click="clickMenu({name:'addFriend'})" class="menu_item">
						<uni-icons size="24" color="#FFF" type="personadd"></uni-icons>
						<text>添加好友</text>
					</view>
					<view @click="clickMenu({name:'createGroup'})" class="menu_item">
						<uni-icons size="24" color="#FFF" type="scan"></uni-icons>
						<text>扫一扫</text>
					</view>
				</view>
			</u-overlay>
		</view>
		<SearchbarPlace @click="toSearch">搜索</SearchbarPlace>
		<view class="status_notice">
			<view class="tag" v-if="storeIsSyncing">
				<img 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">
				<img 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">
				<img style="height: 24rpx; width: 24rpx" src="static/images/sync_error.png" alt="" />
				<text class="status">连接失败</text>
			</view>
		</view>

		<view class="self_info" v-if="1==2">
			<my-avatar :src="storeSelfInfo.faceURL" :desc="storeSelfInfo.nickname || storeSelfInfo.remark" size="46" />
			<view class="self_info_desc">
				<view class="user_state">
					<text class="nickname">{{ storeSelfInfo.nickname || storeSelfInfo.remark }}</text>
					<view v-if="!storeReinstall">
						<view class="tag" v-if="storeIsSyncing">
							<img 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">
							<img 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">
							<img style="height: 24rpx; width: 24rpx" src="static/images/sync_error.png" alt="" />
							<text class="status">连接失败</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import MyAvatar from "@/components/MyAvatar/index.vue";
	import IMSDK from "openim-uniapp-polyfill";
	import util from "@/util";
	import SearchbarPlace from "@/components/searchbar_place.vue";
	export default {
		name: "ChatHeader",
		components: {
			MyAvatar,SearchbarPlace
		},
		props: {},
		data() {
			return {
				connectStart: -2,
				moreMenuVisible: false,
				popMenuPosition: {
					top: 0,
					right: 0,
				}
			};
		},
		computed: {
			...mapGetters(["storeSelfInfo", "storeIsSyncing", "storeReinstall"]),
		},
		mounted() {
			this.subscribeAll();
		},
		beforeDestroy() {
			this.unsubscribeAll();
		},
		methods: {
			toSearch(){
				uni.navigateTo({
					url:"/pages/common/search/index"
				})
			},
			setStateStart() {
				this.connectStart = 0;
			},
			setStateSuccess() {
				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({name}) {
				switch (name) {
					case 'createGroup':
						uni.navigateTo({
							url: `/pages/common/createGroup/index`,
						});
						break;
					case 'addFriend':
						uni.navigateTo({
							url: `/pages/common/searchUserOrGroup/index?isSearchGroup=false`,
						});
						break;
					case 'scan':
						util.scan();
						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();
				});
			},
		},
	};
</script>

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

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

	.chat_header {
		@include colBox(true);
		padding: 36rpx 24rpx 10rpx;
		//margin-top: var(--status-bar-height);
		background: #f4f4f4;

		.self_info {
			@include btwBox();

			&_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 {
			display: flex;
			position: relative;

			.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: rgba(76 ,76, 76, 0.9);

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

					.uni-icons {
						margin-right: 16rpx;
						color: #FFF;
					}

					&:last-child {
						border: none;
					}
				}
			}
		}
	}
</style>