peiwan-uniapp/pages/im/components/navigationBar.vue

<template>
  <view>
	 <tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
	 	<view>
			<view class="nav-box">
				<view class="title">
					<text class="nickname">{{user.nickname}}</text>
					<view class="sex-badge" v-if="user.sex == 2">
						<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
					</view>
					<view class="sex-man" v-if="user.sex == 1">
						<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
					</view>
				</view>
				<view class="online" v-if="user.online">
					<view v-if="isReconnecting">会话重连中</view>
					<view class="text" v-else>
						<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
						<text class="time">在线</text>
						<!-- <u-icon name="arrow-right" size="16"></u-icon> -->
					</view>
				</view>
				<!-- <view class="online" v-else>
					<view v-if="isReconnecting">会话重连中</view>
					<view v-else>
						<text class="time">{{user.time}}</text>
					</view>
				</view> -->
				<view class="action" @click="goBack">
					<u-icon name="nav-back" size="44"></u-icon>
				</view>
			</view>
			<view>
				<slot name="card-swiper"></slot>
			</view>
			<view>
				<slot name="card-notice"></slot>
			</view>
			<!-- <view class="more">
				<view class="more-btn" @click="more">
					<view class="line"></view>
					<view class="line"></view>
				</view>
			</view> -->
		</view>
	 </tui-navigation-bar>
  </view>
</template>

<script>
	import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
	import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
	export default {
		components: {
			tuiBadge, 
			tuiNavigationBar,
		},
		props: {
			user: {},
			isReconnecting: false,
		},
		data() {
			return {
				top: 0, //标题图标距离顶部距离
				opacity: 1,
				height: 0,
				scrollTop: 0.5,
			}
		},
		methods: {
			initNavigation(e) {
				this.height = e.height;
				this.opacity = e.opacity;
				this.top = e.top;
				this.$emit('initNav', e);
			},
			opacityChange(e) {
				this.opacity = e.opacity;
			},
			goBack() {
				uni.navigateBack();
			},
			more() {
				this.$emit('more');
			},
		}
	}
</script>

<style lang="scss" scoped>
	.nav-box {
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		flex-direction: column;
		font-size: 22rpx;
		position: relative;
		
		.title {
			justify-content: center;
			align-items: center;
			text-align: center;
			margin-bottom: 3px;
			display: flex;
			width: 100%;
			
			.nickname {
				text-overflow: ellipsis;
				white-space: nowrap;
				overflow: hidden;
				max-width: calc(100% - 440rpx);
				font-size: 12px;
			}
		}
		
		.online {
			font-size: 10px;
			line-height: 10px;
			color: #303133;
			display: flex;
			align-items: center;
			
			.time {
				margin: 0 3px;
			}
			
			.text {
				display: flex;
				align-items: center;
			}
		}
		
		.action {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			display: flex;
			padding: 0 10px;
			align-items: center;
			width: 50px;
		}
	}
	
	.sex-badge {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #e03997;
		color: #ffffff;
		border-radius: 3px;
		font-size: 8px;
		height: 30rpx;
		width: 30rpx;
		margin: 0 10rpx;
	}
	
	.sex-man {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #0081ff;
		color: #ffffff;
		border-radius: 3px;
		font-size: 8px;
		height: 30rpx;
		width: 30rpx;
		margin: 0 10rpx;
	}
	
	.more {
		display: flex;
		justify-content: center;
		align-items: center;
		
		.more-btn {
			background-color: #fff;
			padding: 0 7px;
			width: 31px;
			height: 15px;
			border-radius: 0 0 3px 3px;
			
			.line {
				background-color: rgba(0, 0, 0, 0.1);
				margin: 3px 0;
				height: 1px;
				width: 100%;
			}
		}
	}
	
</style>