retail-app/components/nav-bar/nav-bar.vue

<template>
	<view>
		<view class="nav-bar-wrapper left-0 top-0 width100" :class="fixed ? 'position-f' : 'position-a'"
			:style="{background: background, borderColor: borderColor}">
			<view class="status-bar" :style="{height: `${statusBarHeight}px`}"></view>
			<view class="position-r">
				<view v-if="!custom" class="height100 width100 flex aic jcc">
					<view v-if="iconType !== 'none'"
						class="position-a flex aic jcc icon-wrapper height100 left-0 text-center"
						@click='leftIconClick'>
						<re-icon :color="iconColor" v-if="iconName" :name="iconName"
							:customStyle="{ fontSize: '40rpx', fontWeight: 'bold' }"></re-icon>
					</view>
					<text class="bold ellipsis title" :style="{color: titleColor}">{{titleCom}}</text>
				</view>
				<slot v-else></slot>
			</view>
		</view>
		<view v-if="!noPlaceholder" class="placeholder" :style="{height: `${navBarHeight}px`}"></view>
	</view>
</template>

<script>
	import {
		toRpx
	} from '@/utils/calculate'
	import {
		isEmpty
	} from '@/utils/check-types.js'
	export default {
		name: "nav-bar",
		props: {
			fixed: { // 是否是fixed定位
				type: Boolean,
				default: true
			},
			title: String, // 标题
			custom: Boolean, // 自定义
			iconType: { // back 返回 home 主页 none 无icon
				type: String,
				default: ''
			},
			icon: String, // 自定义icon
			iconColor: {
				type: String,
				default: '#152129',
			},
			background: { // 背景色
				type: String,
				default: '#fff'
			},
			borderColor: {
				type: String,
				default: '#eee'
			},
			titleColor: {
				type: String,
				default: '#333'
			},
			noPlaceholder: Boolean // 没有占位符
		},
		data() {
			return {
				isNonePage: false, // 是否有上一个页面
				navBarHeight: uni.getStorageSync('navBarHeight') // 导航高度
			}
		},
		computed: {
			// icon类型
			iconName() {
				if (this.icon) {
					return this.icon
				}
				if (this.iconType === 'back') {
					return 'icon-fanhui'
				}
				if (this.iconType === 'home') {
					return 'icon-home'
				}
				if (!this.icontype) {
					const pages = getCurrentPages() //获取加载的页面
					const currentPage = pages[pages.length - 2] //获取上个页面的对象
					if (currentPage && !currentPage.route.includes('flashScreen')) {
						return 'icon-fanhui'
					} else {
						return 'icon-home'
					}
				}
			},
			// 设置title
			titleCom() {
				if (this.title) {
					if (this.title === 'none') {
						return ''
					}
					return this.title
				} else {
					let fullPath = this.$Route.path,
						thisOne = ROUTES.find((item) => item.path == fullPath)
					return thisOne.style.navigationBarTitleText
				}
			},
			// 状态高度
			statusBarHeight() {
				return this.$store.state.info.systemInfo?.statusBarHeight
			},
			// 胶囊高度-小程序
			menuButtonHeight() {
				if (this.$platform !== 'MP-WEIXIN') {
					return 44
				} else {
					let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
					if (menuButtonInfo && menuButtonInfo.height) {
						return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2
					} else {
						return 44
					}
				}
			},
		},
		mounted() {
			let cacheHeight = null
			if (this.$platform === 'APP-PLUS') {
				cacheHeight = this.navBarHeight?.data
			} else {
				cacheHeight = this.placeholderHeigh
			}
			if (cacheHeight) {
				return
			} else {
				this.$nextTick(() => {
					const navBarHeight = this.menuButtonHeight + this.statusBarHeight + 1 // 1border高度
					uni.setStorageSync('navBarHeight', navBarHeight)
					this.navBarHeight = navBarHeight
				})
			}
		},
		methods: {
			// 左侧图标点击
			leftIconClick() {
				if (this.iconName === 'icon-fanhui') {
					this.$Router.back()
				} else if (this.iconName === 'icon-home') {
					this.$Router.replaceAll({
						name: 'bus'
					})
				} else {
					this.$emit('iconHandle')
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nav-bar-wrapper {
		color: $uni-text-color;
		z-index: 9999;
		border-bottom: 1rpx solid #eee;

		.title {
			max-width: 400rpx;
		}
	}

	.icon-wrapper {
		left: 0;
		color: #666;
		width: 80rpx;
	}
</style>