hazardousWaste_app/pages/components/Navigation.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>