purchase-let/components/viewPopup.vue

<template>
	<view class="view-popup">
		<!-- #ifdef MP-WEIXIN -->
		<view v-if="nav" style="width: 100%;background-color: #fff;" :style="{height: height + 'px'}"></view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view v-if="nav" style="width: 100%;height: calc( var(--status-bar-height) + 44px );background-color: #fff;">
		</view>
		<!-- #endif -->
		<view class="center">
			<slot></slot>
			<view class="up" @click="close">
				<text>点击收起</text>
				<up-icon name="arrow-up"></up-icon>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"

	const props = defineProps({
		nav: {
			type: Boolean,
			default: false
		},
		show: {
			type: Boolean,
			default: false
		}
	})

	const emit = defineEmits(['close', 'click'])
	const close = () => {
		emit('close')
	}

	// #ifdef MP-WEIXIN
	const height = ref(0);
	uni.getSystemInfo({
		success: (res) => {
			// 获取手机顶部状态栏的高度
			const statusBarHeight = res.statusBarHeight || 0;

			// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
			const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) * 2;

			// 计算顶部图标距离
			const topIconDistance = statusBarHeight + navBarHeight;

			// 打印顶部图标距离
			console.log('顶部图标距离:', topIconDistance);
			height.value = topIconDistance;
		},
		fail: (err) => {
			console.error('获取系统信息失败:', err);
		},
	});
	// #endif
</script>

<style scoped lang="scss">
	.view-popup {
		height: 100vh;
		width: 100%;
		background-color: rgba(#000, 0.3);
		position: absolute;
		top: 0;
		left: 0;
		z-index: 11;

		.center {
			animation: slideDown 0.3s forwards;
		}

		.up {
			width: 100%;
			height: 80rpx;
			background-color: #fff;
			border-radius: 0 0 28rpx 28rpx;
			border-top: 1rpx solid #f6f6f6;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}
	}

	@keyframes slideDown {
		from {
			transform: translateY(-100%);
			/* 初始状态：向上偏移100% */
		}

		to {
			transform: translateY(0);
			/* 最终状态：无偏移 */
		}
	}
</style>