intelligent-medicine-cabinet/mini-pro-web/src/components/layout/NavLayout.vue

<template>
	<div class="app-wrapper">
		<van-nav-bar
			class="app-nav-bar"
			:z-index="11"
			v-if="hasTop"
			:title="title"
			:left-arrow="hasBack"
			@click-left="onClickLeft"
			>
		</van-nav-bar>
		<div class="main-container" :class="{pt46:hasTop, mainNobotHasTop: hasTop, 'has-bot': hasBot}">
			<app-main/>
		</div>
		<AppBotNav v-if="hasBot"></AppBotNav>
	</div>
</template>

<script>
import { AppMain, AppBotNav } from "./components";

export default {
	name: "NavLayout",
	components: {
		AppMain,
		AppBotNav
	},
	watch:{
		hasBot: {
			handler(bool) {
				if(bool) {
					$("body").addClass("hide-watermark")
				} else {
					$("body").removeClass("hide-watermark")
				}
			},
			immediate: true
		}
	},
	data(){
		return {
			indexPages:  ["/home/index", "/healthChannel/index", "/message/index", "/me/index"]
		}
	},
	computed: {
		hasTop(){
			// return false
			return !(this.$route.meta&&this.$route.meta.hasTop===false)
		},
		title() {
			return this.$store.state.app.pageTitle
		}
	},
	methods: {
		onClickLeft(){
			this.goBack()
		}
	},
	mounted(){
		console.log(this.$navigation.getRoutes())
	}
};
</script>
<style lang="scss" scoped>
.app-wrapper{
	height: 100vh;
	.main-container {
		display: flex;
		flex-direction: column;
	}
}
</style>
<style lang="scss" >
.app-wrapper{
	.app-nav-bar{
		&.van-nav-bar{
			background-color: #17b3ec;
			.van-nav-bar__title{
				color: #fff;
			}
			.van-icon{
				color: #fff;
			}
		}
		
	}
}

</style>