huasheng-erp-order-system-applet/components/erp-nav-bar.vue

<template>
	<view class="erp-nav-bar" :style="{ paddingTop: statusBarHeight + 'px', backgroundColor: bgColor }">
		<view class="erp-nav-content">
			<view class="erp-nav-left" @click="handleBack">
				<view v-if="showBack" class="erp-back-arrow" :style="{ borderColor: titleColor }"></view>
			</view>
			<text class="erp-nav-title" :style="{ color: titleColor }">{{ title }}</text>
			<view class="erp-nav-right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'ErpNavBar',
	props: {
		title: { type: String, default: '' },
		showBack: { type: Boolean, default: true },
		bgColor: { type: String, default: '#ffffff' },
		titleColor: { type: String, default: '#333333' }
	},
	data() {
		return { statusBarHeight: 20 }
	},
	mounted() {
		this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight || 20;
	},
	methods: {
		handleBack() {
			if (this.showBack) {
				this.$emit('back');
				uni.navigateBack();
			}
		}
	}
}
</script>

<style scoped>
.erp-nav-bar {
	width: 100%;
	flex-shrink: 0;
}
.erp-nav-content {
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
}
.erp-nav-left {
	width: 60rpx;
	height: 44px;
	display: flex;
	align-items: center;
}
.erp-back-arrow {
	width: 20rpx;
	height: 20rpx;
	border-left: 4rpx solid #333;
	border-bottom: 4rpx solid #333;
	transform: rotate(45deg);
	margin-left: 8rpx;
}
.erp-nav-title {
	flex: 1;
	text-align: center;
	font-size: 34rpx;
	font-weight: bold;
	color: #333333;
}
.erp-nav-right {
	width: 60rpx;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
</style>