lanan-repair-app/components/VNavigationBar.vue

<template>
	<!-- header -->
	<view class="page-top">
		<view :style="{ height: homeHeaderPaddingTop + 'px', backgroundColor }"></view>
		<view :class="{leftTitle: leftTitle}" :style="{ backgroundColor, height: homeHeaderMenuHeight + 'px' }"
			class="navigationBar">
			<template v-if="leftTitle">
				<view :style="{ color: titleColor }" class="navigationBarTitle">
					{{ title ? title : '' }}
				</view>
			</template>
			<template v-else>
				<view class="navigationBarBack" @click="back">
					<slot name="back">
						<uni-icons :color="titleColor" size="24" type="left"></uni-icons>
					</slot>
				</view>
				<view :style="{ color: titleColor }" class="navigationBarTitle">
					{{ title }}
				</view>
				<view v-if="showClear" @click="clearNoReadFun" class="navigationBarIcon" :style="{ color: titleColor }">
					<image src="@/static/images/clear.png" mode="" class="clear-icon"></image>
				</view>
				<view v-if="addWares" @click="addNewWares" class="navigationBarIcon"
					style="position: absolute;right: 22px;font-size: 18px">
					新增
				</view>
				<view v-if="houseAddNewWares" @click="addNewWaresHouse" class="navigationBarIcon"
					style="position: absolute;right: 22px;font-size: 18px">
					新增配件
				</view>
			</template>
			<view class="navigationBarBackExtra">
				<slot name="extra">
				</slot>
			</view>
		</view>
	</view>
</template>

<script>
	/* 计算标题位置 */
	import {
		getWXStatusHeight
	} from "@/utils/utils";

	export default {
		props: {
			backgroundColor: {
				type: String,
				default: '#317DFA'
			},
			title: String,
			titleColor: {
				type: String,
				default: '#fff'
			},
			leftTitle: {
				type: Boolean,
				default: false
			},
			showClear: {
				type: Boolean,
				default: false
			},
			//新增配件
			addWares: {
				type: Boolean,
				default: false
			},
			houseAddNewWares: {
				type: Boolean,
				default: false
			},
			onBack: {
				type: Function,
				default: null
			}
		},
		mounted() {
			// #ifdef MP
			const {
				barHeight,
				barTop,
				menuButtonLeft
			} = getWXStatusHeight()
			console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
			this.homeHeaderPaddingTop = barTop || 0
			this.homeHeaderMenuHeight = barHeight
			this.homeHeaderMenuLeft = menuButtonLeft - 6
			// #endif
		},
		data() {
			return {
				// #ifdef MP
				homeHeaderPaddingTop: 0,
				homeHeaderMenuHeight: 0,
				homeHeaderMenuLeft: 0,
				// #endif
				// #ifdef APP || H5
				homeHeaderPaddingTop: 0,
				homeHeaderMenuHeight: 50,
				homeHeaderMenuLeft: 0
				// #endif
			}
		},
		methods: {
			back() {
				if (typeof this.onBack === 'function') {
					this.onBack(); // 调用父组件传入的 back 方法
				} else {
					uni.navigateBack(); // 默认行为
				}
			},
			clearNoReadFun() {
				this.$emit('clearNoRead')
			},
			addNewWares() {
				this.$emit('addNewWares')
			},
			addNewWaresHouse() {
				this.$emit('addNewWaresHouse')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.navigationBar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;

		&.leftTitle {
			justify-content: start;
			padding-left: 28rpx;
		}

		.navigationBarBack {
			position: absolute;
			left: 20rpx;
		}

		.navigationBarBackExtra {
			position: absolute;
			right: 20rpx;
		}

		.navigationBarTitle {
			font-size: 36rpx;
			font-weight: bold;
		}

		.navigationBarIcon {
			display: flex;
		}

		.clear-icon {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
		}
	}

	.page-top {
		padding-top: var(--status-bar-height); //给组件加个上边距
		background-color: white;
	}
</style>