156 lines
3.1 KiB
Vue
156 lines
3.1 KiB
Vue
<template>
|
||
<!-- 状态栏占位 -->
|
||
<!-- <view class="nav-placeholder" :style="{ height: 35 + 'px' }"></view> -->
|
||
|
||
<view class="navbar" :style="{ height: navHeight + 'rpx' }">
|
||
<view class="left" @tap="goBack">
|
||
<uni-icons type="left" size="18" v-if="showBack" />
|
||
</view>
|
||
|
||
<!-- 标题 -->
|
||
<view class="title">{{ title }}</view>
|
||
|
||
<!-- 右侧插槽 -->
|
||
<view class="right">
|
||
<slot name="right"></slot>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- <view class="contentBox"></view> -->
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, toRefs } from 'vue'
|
||
import { onLoad } from '@dcloudio/uni-app'
|
||
import { getTabBarList } from '../until'
|
||
import { findIndex } from 'lodash'
|
||
|
||
const props = defineProps({
|
||
title: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
backUrl: {
|
||
type: String,
|
||
default: ''
|
||
},
|
||
showBack: {
|
||
type: Boolean,
|
||
default: true
|
||
}
|
||
})
|
||
|
||
const { backUrl, title, showBack } = toRefs(props)
|
||
|
||
// 状态栏 + 导航栏高度
|
||
const statusBarHeight = ref(0)
|
||
const navHeight = ref(0)
|
||
|
||
// 返回目标路由
|
||
const backTarget = ref('')
|
||
const isTabBar = ref('')
|
||
|
||
// 获取系统信息
|
||
onMounted(() => {
|
||
try {
|
||
const res = uni.getSystemInfoSync()
|
||
|
||
statusBarHeight.value = res.statusBarHeight || 0
|
||
console.log(statusBarHeight, 'statusBarHeight==>');
|
||
// 标准导航栏高度 44px + 状态栏 = 总高度
|
||
navHeight.value = statusBarHeight.value + 60
|
||
} catch (e) {
|
||
console.warn('获取系统信息失败', e)
|
||
}
|
||
})
|
||
|
||
//页面加载时获取上一页路由
|
||
onLoad(() => {
|
||
const tabList = getTabBarList()
|
||
const isTabBarNav = findIndex(tabList, (i) => i.pagePath == backUrl.value) != -1
|
||
console.log(tabList, backUrl, isTabBarNav);
|
||
isTabBar.value = isTabBarNav
|
||
|
||
if (backUrl.value) {
|
||
backTarget.value = backUrl.value
|
||
return
|
||
}
|
||
|
||
try {
|
||
const pages = getCurrentPages()
|
||
if (pages && pages.length >= 2) {
|
||
const prevPage = pages[pages.length - 2]
|
||
backTarget.value = prevPage.route || ''
|
||
}
|
||
} catch (e) {
|
||
console.warn('获取页面栈失败', e)
|
||
}
|
||
})
|
||
|
||
// 返回逻辑
|
||
const goBack = () => {
|
||
if (!showBack.value) return;
|
||
|
||
if (backTarget.value) {
|
||
const url = backTarget.value.startsWith('/') ? backTarget.value : `/${backTarget.value}`;
|
||
|
||
if (isTabBar.value) uni.switchTab({ url: url })
|
||
else uni.navigateTo({ url: url })
|
||
} else {
|
||
// 无目标路由 正常返回
|
||
uni.navigateBack()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.nav-placeholder {
|
||
width: 100%;
|
||
}
|
||
|
||
/* 导航栏主体：fixed 固定在顶部 */
|
||
.navbar {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
background: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 20rpx;
|
||
box-sizing: border-box;
|
||
z-index: 999;
|
||
}
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 40rpx;
|
||
height: 100%;
|
||
}
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
color: #333;
|
||
max-width: 400rpx;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.right {
|
||
min-width: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
.content {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
</style> |