caimei-applets-mcare/components/cm-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 == 1 ? true : false"
			:style="{
				top: navbarBtn.top + statusBarHeight + 'px;',
				left: navbarBtn.right + 'px;',
				height: navbarBtn.height + 'px;',
				lineHeight: navbarBtn.height + 'px;'
			}"
		>
			<text v-if="isShare" @click="_goBack" class="iconfont icon-shouye"></text>
			<text v-else @click="_goBack" class="iconfont icon-fanhui"></text>
		</view>
		<view
			class="navbar-icon"
			v-if="navbarData.showSearch == 1 ? true : false"
			:style="{
				top: navbarBtn.top + statusBarHeight + 'px;',
				right: navbarBtn.width + 'px;',
				height: navbarBtn.height + 'px;',
				lineHeight: navbarBtn.height + 'px;'
			}"
		>
			<text @click.stop="_goSearchPath" class="iconfont icon-iconfonticonfontsousuo1"></text>
			<text v-if="screenTab === 3" @click.stop="_showRightDrawer" class="iconfont icon-shaixuan"></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
		},
		isUsertype: {
			type: Number
		},
		screenTab: {
			type: Number
		}
	},
	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
		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
			(this.navbarBtn = btnPosi)
	},
	watch: {
		screenTab(newVal, oldVal) {
			// newVal是新值，oldVal是旧值
			this.screenTab = newVal
		}
	},
	methods: {
		_goBack() {
			if (this.isShare) {
				this._goHome()
			} else if (this.isDelete) {
				this._goUser()
			} else {
				uni.navigateBack({
					delta: 1
				})
			}
		},
		_goHome() {
			uni.switchTab({
				url: '/pages/tabBar/home/index'
			})
		},
		_goUser() {
			uni.switchTab({
				url: '/pages/tabBar/user/user'
			})
		},
		_goSearchPath() {
			this.$emit('goSearchPath')
		},
		_showRightDrawer() {
			//显示筛选抽屉
			this.$parent.rightDrawer = true
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
.navbar-wrap {
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 100000;
	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 .icon-iconfonticonfontsousuo1 {
	color: #000000;
}
.navbar-icon .icon-shaixuan {
	color: #000000;
}
.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>