menduner-uniapp/components/Navbar/index.vue

<template>
  <view
    class="navbar"
    :class="{'gradientBgc': !noBgColor}"
    :style="{
      'height': height + 'px',
      'line-height': height + 'px',
    }"
  >
    <view class="navbar-box" :style="{'paddingTop': statusBarHeight + 'px'}">
      <image 
        v-if="showLogo" 
        src="https://minio.menduner.com/dev/fe9890be9b1176f84f2aa282b0f6adce300b133f65eb3d7b45ae057aa5698324.png" 
        class="navbar-box-logo" 
        :style="{'height': defaultLogoHeight + 'px'}"
      ></image>
      <view v-else class="nav-box-title" :style="{'height': height ? (height - statusBarHeight) + 'px' : '100%'}">
        <uni-icons v-if="!textLeft" :type="pages && pages.length > 1 ? 'left' : 'home'" size="23" class="ss-m-l-20" color="#0E100F" @tap="goBack"></uni-icons>
        <view class="title-text" :class="[{'text-left': textLeft}, {'text-center': !textLeft}]">{{ title }}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

defineProps({
  title: {
    type: String,
    default: '门墩儿'
  },
  showLogo: {
    type: Boolean,
    default: false
  },
  // 是否需要渐变背景
  noBgColor: {
    type: Boolean,
    default: false
  },
  // 标题所在位置
  textLeft: {
	  type: Boolean,
	  default: true
  }
})

const defaultLogoHeight = 40
const navbarHeight = ref(0)
const statusBarHeight = ref(0)
const height = ref(0)

const pages = ref([])
onLoad(async () => {
  pages.value = getCurrentPages() // 获取当前页面栈的实例数组
  try {
    const systemInfo = uni.getSystemInfoSync()
    statusBarHeight.value = systemInfo.statusBarHeight
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()

    // 计算导航栏高度
    navbarHeight.value = menuButtonInfo.height + 2 * (menuButtonInfo.top - statusBarHeight.value) + statusBarHeight.value

    // 确保导航栏高度不小于 logo 高度 + 10
    if (navbarHeight.value < defaultLogoHeight + 10) {
      navbarHeight.value = defaultLogoHeight + 10
    }

    height.value = navbarHeight.value < defaultLogoHeight ? (defaultLogoHeight + 10) : navbarHeight.value + 10
	  await new Promise((resolve, reject) => {
	    uni.setStorage({
	      key: 'navbarHeight',
	      data: height.value,
	      success: resolve,
	      fail: reject
	    })
	  })
  } catch (error) {
    console.error('获取系统信息或菜单按钮信息时出错:', error)
  }
})

// 返回上一页或首页
const goBack = () => {
  if (pages.value.length > 1) {
    uni.navigateBack({
      delta: 1,
      fail: () => {
        console.error('返回上一页失败，尝试跳转到首页')
        uni.reLaunch({
          url: '/pages/index/position',
          fail: (err) => {
            console.error('跳转到首页也失败:', err)
            uni.showToast({
              title: '导航失败，请稍后重试',
              icon: 'none'
            })
          }
        })
      }
    })
  } else {
    uni.reLaunch({
      url: '/pages/index/position',
      fail: (err) => {
        console.error('重新加载首页失败:', err)
        uni.showToast({
          title: '重新加载首页失败',
          icon: 'none'
        })
      }
    })
  }
}
</script>

<style scoped lang="scss">
.gradientBgc {
  background: linear-gradient(180deg, #9bfece, #BCFEDE);
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  &-box {
    position: relative;
    width: 100%;
    height: 100%;
    &-logo {
      position: absolute;
      left: 10px;
      width: 95px;
    }
  }
}
.nav-box-title {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  .title-text {
    position: absolute;
    width: 158px;
    height: 51px;
    line-height: 51px;
    color: #0E100F;
    font-style: normal;
    text-transform: none;
  }
}
.text-left {
	left: 15px;
	font-family: MiSans-Semibold;
	font-weight: 600;
	font-size: 38rpx;
}
.text-center {
	left: 50%;
	transform: translateX(-50%);
	font-family: MiSans-Medium;
	font-size: 33rpx;
}
</style>