boschchina-wechat-crm/pages/test/navbar.vue

<template>
	<view class="test-container">
		<!-- 自定义导航栏 -->
		<NavBar title="导航栏测试" :show-back="true" />
		
		<view class="content" :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="info-card">
				<text class="title">胶囊按钮信息</text>
				
				<view class="info-item" v-if="capsuleInfo">
					<text class="label">Top:</text>
					<text class="value">{{ capsuleInfo.top }} px</text>
				</view>
				<view class="info-item" v-if="capsuleInfo">
					<text class="label">Height:</text>
					<text class="value">{{ capsuleInfo.height }} px</text>
				</view>
				<view class="info-item" v-if="capsuleInfo">
					<text class="label">Width:</text>
					<text class="value">{{ capsuleInfo.width }} px</text>
				</view>
				<view class="info-item" v-if="capsuleInfo">
					<text class="label">Left:</text>
					<text class="value">{{ capsuleInfo.left }} px</text>
				</view>
				<view class="info-item" v-if="capsuleInfo">
					<text class="label">Right:</text>
					<text class="value">{{ capsuleInfo.right }} px</text>
				</view>
				
				<text class="title" style="margin-top: 32rpx;">状态栏信息</text>
				<view class="info-item">
					<text class="label">状态栏高度:</text>
					<text class="value">{{ statusBarHeight }} px</text>
				</view>
				
				<text class="title" style="margin-top: 32rpx;">导航栏信息</text>
				<view class="info-item">
					<text class="label">导航栏总高度:</text>
					<text class="value">{{ navBarHeight }} px</text>
				</view>
			</view>
			
			<view class="tips">
				<text class="tips-title">💡 提示信息</text>
				<text class="tips-text">1. 如果看不到胶囊信息，请检查是否在微信小程序中运行</text>
				<text class="tips-text">2. H5 端不会显示胶囊按钮</text>
				<text class="tips-text">3. 检查 pages.json 中是否设置了 navigationStyle: custom</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import NavBar from '@/components/nav-bar/index.vue'

const capsuleInfo = ref(null)
const statusBarHeight = ref(0)

const navBarHeight = computed(() => {
	if (!capsuleInfo.value) return 44
	return statusBarHeight.value + capsuleInfo.value.height
})

onMounted(() => {
	// #ifdef MP-WEIXIN
	const menuInfo = uni.getMenuButtonBoundingClientRect()
	capsuleInfo.value = menuInfo
	
	const systemInfo = uni.getSystemInfoSync()
	statusBarHeight.value = systemInfo.statusBarHeight || 0
	
	console.log('✅ 胶囊信息获取成功:', menuInfo)
	console.log('✅ 状态栏高度:', statusBarHeight.value)
	// #endif
	
	// #ifndef MP-WEIXIN
	console.log('⚠️ 非微信小程序环境，无法获取胶囊信息')
	// #endif
})
</script>

<style lang="scss" scoped>
.test-container {
	min-height: 100vh;
	background: #f5f6f8;
}

.content {
	padding: 20rpx;
	
	.info-card {
		background: #ffffff;
		border-radius: 16rpx;
		padding: 32rpx;
		margin-bottom: 20rpx;
		
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #333333;
			display: block;
			margin-bottom: 24rpx;
		}
		
		.info-item {
			display: flex;
			justify-content: space-between;
			padding: 16rpx 0;
			border-bottom: 1rpx solid #f0f0f0;
			
			&:last-child {
				border-bottom: none;
			}
			
			.label {
				font-size: 28rpx;
				color: #999999;
			}
			
			.value {
				font-size: 28rpx;
				color: #333333;
				font-weight: 500;
			}
		}
	}
	
	.tips {
		background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
		border-radius: 16rpx;
		padding: 32rpx;
		
		.tips-title {
			font-size: 28rpx;
			font-weight: 600;
			color: #ff9500;
			display: block;
			margin-bottom: 16rpx;
		}
		
		.tips-text {
			font-size: 24rpx;
			color: #666666;
			display: block;
			line-height: 1.8;
		}
	}
}
</style>