cashier_wx/components/CustomNavbar.vue

<template>
	<view>
		<!-- 占位高度 -->
		<view v-if="hasPlaceholder" :style="{ height: `${height}px` }"></view>
		<view class="navbar" :style="[centerContentStyle.oneStyle,navbarStyle]">
			<!-- 左边返回键 -->
			<view v-if="showBack" @click="goBack" class="back-icon">
				<up-icon name="arrow-left" color="#606266" size="24"></up-icon>
			</view>
			<!-- 中间内容 -->
			<view class="center-content">
				<view v-if="showSearch">
					<view class="navbar_tow_tow flex-start">
						<input type="text" class="navbar_tow_towinput" v-model="keyword" placeholder="请输入关键字" />
						<view class="navbar_tow_towview">搜索</view>
					</view>
				</view>
				<view v-else :style="[centerContentStyle.towStyle]">{{ title }}</view>
			</view>
			<!-- 右边文字 -->
			<view v-if="rightText" class="right-text" @click="onRightTextClick">{{ rightText }}</view>
			<view v-else></view>
		</view>
	</view>
</template>

<script setup>
	import {
		useNavbarStore
	} from '@/stores/navbarStore';
	import {
		ref,
		reactive,
		watch,
		onMounted,
		computed,
		toRefs,
		watchEffect
	} from 'vue';

	const store = useNavbarStore();
	const {
		showBack,
		rightText,
		showSearch,
		title,
		isTransparent,
		height,
		hasPlaceholder,
		scrollTop
	} = toRefs(store);

	const keyword = ref()

	const goBack = () => {
		try {
			uni.pro.switchTab('index/index')
		} catch (error) {
			uni.pro.switchTab('index/index')
			//TODO handle the exception
		}
	};

	const onRightTextClick = () => {
		console.log('右边文字被点击');
	};

	const navbarStyle = computed(() => {
		return {
			// height: `${height}px`,store.showSearch=fa
			backgroundColor: store.scrollTop >= 44 ? '#fff' : 'transparent'
		};
	});
	// 小程序单独胶囊的样式
	const centerContentStyle = reactive({
		oneStyle: {},
		towStyle: {}
	});

	watchEffect(() => {
		if (store.showSearch > 44) {

		}
	})
	onMounted(() => {
		// #ifdef MP-WEIXIN || MP-ALIPAY
		const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
		const systemInfo = uni.getSystemInfoSync();
		const statusBarHeight = systemInfo.statusBarHeight;
		// 计算标题的垂直偏移量
		const verticalOffset = menuButtonInfo.top;
		// const verticalOffset = menuButtonInfo.top - statusBarHeight;
		// const verticalOffset = menuButtonInfo.top > menuButtonInfo.height ? menuButtonInfo.height : Math.abs(
		// 	menuButtonInfo.top - menuButtonInfo.height)
		const titleHeight = menuButtonInfo.height;
		centerContentStyle.oneStyle = {
			paddingTop: `${verticalOffset}px`,
			paddingRight: `${menuButtonInfo.width +20}px`,
			// paddingTeft: `${menuButtonInfo.width +20}px`,
			// height: `${height}px`,
			boxSizing: 'border-box',
		};
		centerContentStyle.towStyle = {
			paddingLeft: `${menuButtonInfo.right - menuButtonInfo.left}px`,
		};
		// #endif

	});
</script>

<style lang="scss" scoped>
	.navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 6px;
		z-index: 999;

		.back-icon {
			cursor: pointer;
		}

		.center-content {
			flex: 1;
			text-align: center;

			.navbar_tow_tow {
				position: relative;
				height: 100%;
				line-height: 100%;
				flex: 1;
				margin-left: 10rpx;

				.navbar_tow_towview {
					position: absolute;
					right: 4rpx;
					top: 50%;
					transform: translate(0, -50%);
					text-align: center;
					background: #FEE06A;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					width: 116rpx;
					height: 56rpx;
					line-height: 56rpx;
					border-radius: 34rpx 34rpx 34rpx 34rpx;
				}

				.navbar_tow_towinput {
					padding-left: 32rpx;
					padding: 12rpx 120rpx 12rpx 32rpx;
					height: 100%;
					flex: auto;
					background: #FFFFFF;
					border-radius: 34rpx;
					font-family: Source Han Sans CN, Source Han Sans CN;
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					white-space: nowrap; //溢出不换行
				}
			}
		}

		.right-text {
			cursor: pointer;
		}
	}
</style>