GCLS_Page_Mobile/components/navbar/navbar.vue

<template>
	<!-- 自定义导航栏 -->
	<view class="nav-bar-box">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
		<!-- 真正的导航栏内容 -->
		<view class="nav-bar">
			<view class="nav-bar-left">
				<view class="left-bg" v-if="back && back!='false'" @click="onBack">
					<uni-icons type="back" size="16" color="#34343A" />
				</view>
			</view>
			<view class="nav-bar-center" v-if="viewLogo">
				<image :src="$store.state.app.config.logo_image_url_mobile" mode="heightFix" />
			</view>
			<view class="nav-bar-center" v-else>
				<text class="title">{{title}}</text>
			</view>
			<view class="nav-bar-right"></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'navbar',
		props: {
			// 是否采用自定义导航模式
			custom: {
				type: [Boolean, String],
				default: false
			},
			// 是否返回
			back: {
				type: [Boolean, String],
				default: true
			},
			// 标题
			title: {
				type: String,
				default: ''
			},
			// 标题颜色
			color: {
				type: String,
				default: '#353535'
			},
			// 背景色
			bgcolor: {
				type: String,
				default: '#fff'
			},
			// 标题是否居中
			center: {
				type: [Boolean, String],
				default: false
			},
			// 搜索框
			search: {
				type: [Boolean, String],
				default: false
			},
			// 是否固定导航
			fixed: {
				type: [Boolean, String],
				default: false
			},
			// 是否背景透明
			transparent: {
				type: [Boolean, String],
				default: false
			},
			// 设置层叠
			zIndex: {
				type: [Number, String],
				default: '2022'
			},
			viewLogo: {
				type: [Boolean, String],
				default: true
			},
			backPath: {
				type: [String],
				default: ''
			}
		},
		data() {
			return {
				// 状态栏高度
				statusBarHeight: 0,
				// 导航栏高度
				navBarHeight: 82 + 11
			}
		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
		},
		methods: {
			onBack() {
				let routes = getCurrentPages();
				//获取当前页路径
				let curPage = routes[routes.length - 1].route;
				if (!this.backPath && (curPage.indexOf('tabbar') != -1 || curPage.indexOf('start_answering') != -1)) {
					//如果是tabbar页返回直接退出登录
					this.$store.dispatch('user/signOut');
					window.location.href = '/';
				} else {
					if (this.backPath) {
						uni.reLaunch({
							url: this.backPath
						})
					} else {
						uni.navigateBack({
							delta: 1
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav-bar-box {
		width: 100%;
		position: fixed;
		z-index: 99;
		top: 0;

		.nav-bar {
			background-color: #ffffff;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 92rpx;

			.nav-bar-left {
				flex: 1;
				padding: 0 16rpx;

				.left-bg {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 60rpx;
					height: 60rpx;
					border-radius: 80rpx;
					background-color: $uni-bg-color-grey;
				}
			}

			.nav-bar-center {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					height: 92rpx;
				}

				.title {
					font-size: 18px;
					font-weight: 500;
				}
			}

			.nav-bar-right {
				flex: 1;
				padding: 0 16rpx;
			}

		}
	}
</style>