purchase-let/components/viewPopup.vue

101 lines
2.4 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<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: 10;
.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>