discounts-minapp/components/zs-header/index.vue

<template>
	<view class="zs-header" :style="{height:statusBarHeight+navBareight +'px',background:background?'#fff':''}" @click="back">
		<image class="back" :src="background?backIcon:color != '#fff' ? backIcon:whiteBack" mode=""></image>
		<!-- <image class="back" :src="backIcon" mode=""></image> -->
		<view class="title" :style="{color:background?'#222222':color}">
			{{title}}
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: {
				type: String,
				default: '#zs-Header'
			},
			top: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			background: {
				type: Boolean,
				default: false
			},
			customPath: {
				type: String,
				default: ''
			},
			color:{
				type:String,
				default:'#fff'
			}
		},
		data() {
			return {
				backIcon:require('@/static/back-btn.png'),
				whiteBack:require('@/static/back-btn-white.png'),
				statusBarHeight:20,
				navBareight: 45,

			}
		},
		methods: {
			back(){
				if(this.customPath){
					uni.navigateTo({
						url:this.customPath
					})
				}else{
					var pages = getCurrentPages();
					if(pages.length == 1){
						uni.switchTab({
							url:'/pages/index/index'
						})
					}else{
						uni.navigateBack();
					}
				}
				
			},
		
		},
		onReady() {
			
		},
		beforeDestroy() {
			
		},
		created() {
			//获取手机系统信息 -- 状态栏高度
			let {
				statusBarHeight,
			} = uni.getSystemInfoSync()
			this.statusBarHeight = statusBarHeight
			//去除
			//#ifndef H5 || MP-ALIPAY ||APP-PLUS
			//获取小程序胶囊的高度
			let {
				top,
				bottom,
				left
			} = uni.getMenuButtonBoundingClientRect()
			//高度 =（胶囊底部高低-状态栏高度）+（胶囊顶部高度-状态栏内的高度）
			this.navBareight = (bottom - statusBarHeight) + (top - statusBarHeight)
			//#endif

		}
	}
</script>

<style lang="scss" scoped>
	.zs-header {
		position: fixed;
		width: 100%;
		// height: calc(44px + env(safe-area-inset-top));
		top: 0;
		left: 0;
		z-index: 999;
		display: flex;
		align-items: flex-end;
		justify-content: center;
		box-sizing: border-box;
		padding: 6px;
		transition: background .3s ease-in-out;

		.back {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			bottom: 10px;
			// top: calc(16px + env(safe-area-inset-top));
			left: 20rpx;
		}

		.title {
			font-size: 36rpx;
			color: #222222;
			font-weight: bold;
		}
	}
</style>