boschchina-wechat-crm/components/nav-bar/index.vue

<template>
	<view class="tab" :style="{ 
			'--barheight': barHeight + 'px', 
			'--color': color,
			'--bgcolor': bg,
			height: fixedHeight 
		}">
		<view class="heads">
			<image class="bgImg" v-if="bgImg" :src="bgImg" mode=""></image>
			<slot name="left">
				<up-icon name="photo" color="#2979ff" size="28" v-if="show_back" :color="color" @click="back"></up-icon>
				<!-- <uni-icons v-if="show_back" type="left" size="30" :color="color" @click="back"></uni-icons> -->
			</slot>
			<slot name="title">
				<text class="title" :style="{'--size': titlesize}">{{ title }}</text>
			</slot>
			<slot name="right">
				<!-- <uni-icons type="left" size="30" color="transparent"></uni-icons> -->
			</slot>
		</view>
		<slot name="bottom"></slot>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		title: { //标题
			type: String,
			default: ""
		},
		show_back: { //显示返回按钮
			type: Boolean,
			default: true
		},
		back_type: { //是否使用组件的返回
			type: Boolean,
			default: false
		},
		bg: { //背景
			type: String,
			default: '#fff'
		},
		color: { //标题的字体颜色
			type: String,
			default: 'white'
		},
		//背景图片
		bgImg: {
			default: ""
		},
		// 文字大小
		titlesize: {
			type: String,
			default: "36rpx"
		},
		bottomHeight: {
			type: String,
			default: "80rpx"
		},
		fixed: {
			type: Boolean,
			default: true
		}
	});

	const emit = defineEmits(['right']);

	// 状态栏高度
	const barHeight = ref(0);
	const rpxToPx = (rpx) => {
		const systemInfo = uni.getSystemInfoSync();
		return (rpx / 750) * systemInfo.windowWidth;
	};
	const fixedHeight = computed(() => {
		if (!props.fixed) return '0';
		// 将80rpx转换为px
		const navHeightPx = rpxToPx(80);
		return `${barHeight.value + navHeightPx}px`;
	});

	onMounted(() => {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync();
		barHeight.value = systemInfo.statusBarHeight || 0;
	});

	// 返回按钮图片
	const back_image = computed(() => {
		return props.color == 'white' ? require('./down.png') : require('./back.png');
	});

	const back = () => {
		if (!props.show_back) return;
		uni.navigateBack({
			fail: () => {
				uni.reLaunch({
					url: uni.getStorageSync('userType') == 4 ?
						'/pages/index/dispose/index' : '/pages/index/index'
				});
			}
		});
	};

	const right = () => {
		emit('right');
	};
</script>

<style lang="scss" scoped>
	.tab {
		position: sticky;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 999;
	}

	.heads {
		z-index: 100;
		width: 100%;
		height: calc(var(--barheight) + 80rpx);
		justify-content: space-between;
		display: flex;
		align-items: center;
		padding-top: var(--barheight);
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 10rpx;
		background: var(--bgcolor);
		box-sizing: border-box;

		.bgImg {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
		}

		.title {
			width: 100%;
			text-align: center;
			font-size: var(--size);
			font-family: PingFang SC;
			font-weight: bold;
			color: var(--color);
			position: absolute;
			left: 0;
			pointer-events: none;
		}
	}
</style>