caimei-applets-caimei/components/module/headerNavbar/header-back.vue

<template name="headerNavbar">
	<!-- 自定义导航栏 -->
	<view class='navbar-wrap' :style="{height:navbarHeight+'px',paddingTop:statusBarHeight+'px'}"> 
	  	<view class="navbar-text" :style="{lineHeight:(navbarHeight - statusBarHeight)+'px;',fontSize:fontSizeSetting+'px;'}" :class="platformClass">
	    	{{navbarData.title ? navbarData.title : " "}}
	  	</view>
	  	<view class="navbar-icon" v-if="navbarData.showCapsule ? navbarData.showCapsule : true" 
			  :style="{top:navbarBtn.top + statusBarHeight+'px;',left:(navbarBtn.right)+'px;',height:navbarBtn.height+'px;',lineHeight:navbarBtn.height+'px;'}">
			  <text v-if='haveBack' @click="_goBack" class="iconfont icon-fanhui"></text>
	  	</view>
	</view>
</template>

<script>
	var self;
	export default{
		name:'headerNavbar',
		props:{
		    navbarData: { // 由父页面传递的数据
				type: Object
		    },
			systeminfo:{
				type:Object
			},
			headerBtnPosi:{
				type:Object
			},
			isShare:{
				type:Boolean
			},
			isDelete:{
				type:Boolean
			}
		},
		data() {
			return{
				haveBack: true,     // 是否有返回按钮，true 有 false 没有 若从分享页进入则为 false
			    statusBarHeight: 0, // 状态栏高度
			    navbarHeight: 0,    // 顶部导航栏高度
			    navbarBtn: {        // 胶囊位置信息
			      height: 0,
			      width: 0,
			      top: 0,
			      bottom: 0,
			      right: 0
				},
				platformClass:'',
				fontSizeSetting:0,
				
			}
		},
		created() {
			let statusBarHeight = this.systeminfo.statusBarHeight // 状态栏高度
			let headerPosi = this.headerBtnPosi // 胶囊位置信息
			this.fontSizeSetting = this.systeminfo.fontSizeSetting
			// console.log(this.systeminfo.platform)
			// console.log(this.systeminfo.fontSizeSetting)
			if(this.systeminfo.platform == 'android'){
				this.platformClass = 'left'
			}else{
				this.platformClass = 'center'
			}
		    /**
		     * wx.getMenuButtonBoundingClientRect() 坐标信息以屏幕左上角为原点
		     * 菜单按键宽度： 87
		     * 菜单按键高度： 32
		     * 菜单按键左边界坐标： 278
		     * 菜单按键上边界坐标： 26
		     * 菜单按键右边界坐标： 365
		     * 菜单按键下边界坐标： 58
		     */
			let btnPosi = { // 胶囊实际位置，坐标信息不是左上角原点
			      height: headerPosi.height,
			      width: headerPosi.width,
			      // 胶囊top - 状态栏高度
			      top: headerPosi.top - statusBarHeight,
			      // 胶囊bottom - 胶囊height - 状态栏height （现胶囊bottom 为距离导航栏底部的长度）
			      bottom: headerPosi.bottom - headerPosi.height - statusBarHeight,
			      // 屏幕宽度 - 胶囊right
			      right: this.systeminfo.screenWidth - headerPosi.right
			}
			let haveBack;
			if (getCurrentPages().length === 1) { // 当只有一个页面时
			     haveBack = false;
			} else {
			     haveBack = true;
			}
		    this.haveBack=haveBack, // 获取是否是通过分享进入的小程序
		    this.statusBarHeight=statusBarHeight,
		    this.navbarHeight= headerPosi.bottom + btnPosi.bottom, // 原胶囊bottom + 现胶囊bottom
			// console.log(this.navbarHeight);
		    this.navbarBtn=btnPosi
		},
		onLoad(){
			
		},
		methods:{
			_goBack: function () {
				if(this.isShare){
					this._goHome()
				}else if(this.isDelete){
					this._goUser()
				}else{
					uni.navigateBack({
			        	delta: 1
			      	});
				}
		    },
		    _goHome: function () {
		      	uni.switchTab({
		        	url: '/pages/tabBar/home/home'
		      	})
		    },
		    _goUser: function () {
		      	uni.switchTab({
		        	url: '/pages/tabBar/user/user'
		      	})
		    }
		},
		onShow(){
	
		}
	}
</script>

<style lang="scss">
	.navbar-wrap {
		 position: fixed;
		 width: 100%;
		 top: 0;
		 z-index: 9999;
		 box-sizing: border-box;
		 background: #FFFFFF;
	}
	.navbar-text {
		 font-size: 30rpx;
		 color: #000000;
		 font-weight: 500;
	}
	.navbar-text.center{
		text-align: center;
	}
	.navbar-text.left{
		text-align: left;
		padding-left: 38px;
	}
	.navbar-icon {
		 position: fixed;
		 display: flex;
		 box-sizing: border-box;
	}
	.navbar-icon .iconfont {
		 display: inline-block;
		 overflow: hidden;
		 font-size: 42rpx;
		 padding-right:40rpx;
		 margin-top: 1px;
	}
	.navbar-icon view {
		 height: 18px;
		 border-left: 0.5px solid rgba(0,0,0, 0.3);
		 margin-top: 6px;
	}
	.navbar-loading {
		 background: #fff;
		 text-align: center;
	}
</style>