You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
127 lines
2.7 KiB
127 lines
2.7 KiB
<script setup>
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { defineProps, ref } from "vue";
|
|
|
|
const props = defineProps({
|
|
title: {
|
|
type: String, // 类型校验
|
|
required: false, // 必须提供这个prop，否则会抛出警告
|
|
default: "", // 如果没有提供，则使用默认值
|
|
},
|
|
background: {
|
|
type: String, // 类型校验
|
|
default: "#F8F8F8", // 如果没有提供，则使用默认值
|
|
},
|
|
iconStyle: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
color: "#333",
|
|
};
|
|
},
|
|
},
|
|
titleStyle: {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
color: "#333",
|
|
};
|
|
},
|
|
},
|
|
});
|
|
const statusBarHeight = ref(0); // 顶部安全距离
|
|
const menuHeight = ref(0); // 胶囊高度
|
|
|
|
onLoad(() => {
|
|
statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
|
|
const menuButton = uni.getMenuButtonBoundingClientRect();
|
|
statusBarHeight.value = menuButton.top;
|
|
menuHeight.value = menuButton.height;
|
|
// #endif
|
|
});
|
|
|
|
// 返回
|
|
function gotoBack() {
|
|
// uni.navigateBack();
|
|
// 获取当前页面栈信息
|
|
const pages = getCurrentPages();
|
|
|
|
// 页面栈长度为1时，说明当前是首页或无法返回，直接跳转到首页
|
|
if (pages.length <= 1) {
|
|
uni.switchTab({
|
|
url: "/pages/home/home", // 替换为你的首页路径
|
|
});
|
|
}
|
|
else {
|
|
// 页面栈长度大于1时，执行返回操作
|
|
uni.navigateBack({
|
|
delta: 1, // 返回的页面数
|
|
});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view>
|
|
<!-- #ifdef H5 -->
|
|
<!-- <view :style="{ width: '100vw', height: '15px' }" /> -->
|
|
<!-- #endif -->
|
|
<view
|
|
id="container"
|
|
class="container"
|
|
:style="{
|
|
paddingTop: `${statusBarHeight}px`,
|
|
height: menuHeight ? `${menuHeight}px` : 'auto',
|
|
background: props.background,
|
|
}"
|
|
>
|
|
<template v-if="props.title">
|
|
<view class="left" @click="gotoBack">
|
|
<text class="iconfont icon-back" :style="iconStyle" />
|
|
<text
|
|
class="title" :style="titleStyle"
|
|
>
|
|
{{ props.title }}
|
|
</text>
|
|
</view>
|
|
</template>
|
|
<template v-else>
|
|
<slot />
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.container {
|
|
display: flex;
|
|
align-items: center;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
z-index: 999;
|
|
.left {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-left: 29rpx;
|
|
|
|
.icon-back {
|
|
font-size: 42rpx;
|
|
font-weight: bold;
|
|
color: black;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
font-size: 33rpx;
|
|
color: black;
|
|
// margin-left: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|