yxe-mp/components/AppNavbar.vue

<template>
  <view class="app-navbar" :style="{'padding-top': `${getSafeTop()}px`, 'padding-bottom': '40px'}">
    <view class="navbar-left" :style="{top: `${getSafeTop()}px`}" v-if="showBack" @click="back">
      <u-icon name="arrow-left" color="white" size="40rpx" v-if="currentPages.length > 1"/>
      <u-icon name="home" color="white" size="40rpx" v-else/>

    </view>
    <text class="navbar-title" :style="{ fontSize: titleSize }">{{ title }}</text>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    titleSize: {
      type: String,
      default: '34rpx'
    },
    showBack: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      currentPages: [],
      // 状态栏高度只在挂载时取一次：getSafeTop 在 render 中被调用，
      // 每次都同步读系统信息会反复触发 wx.getSystemInfoSync 废弃告警。
      safeTop: 0
    }
  },
  methods: {
    getSafeTop() {
      return this.safeTop
    },
    back(){
      if (this.currentPages.length === 1) uni.switchTab({url: '/pages/index/index'})
      else uni.navigateBack()
    },
    // 优先用新接口，取不到时回退旧接口，避免旧接口的废弃告警
    readSafeTop() {
      try {
        if (uni.getWindowInfo) {
          const info = uni.getWindowInfo()
          if (info && info.statusBarHeight !== undefined) return info.statusBarHeight
        }
      } catch (error) {
        // ignore：新接口不可用时走下面的回退
      }
      try {
        const systemInfo = uni.getSystemInfoSync()
        return (systemInfo && systemInfo.statusBarHeight) || 0
      } catch (error) {
        return 0
      }
    }
  },
  mounted() {
    this.currentPages = getCurrentPages()
    this.safeTop = this.readSafeTop()
  }
}
</script>

<style lang="scss" scoped>
.app-navbar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10rpx;
  min-height: 56rpx;
  background: url('https://yaodongxiao.oss-cn-guangzhou.aliyuncs.com/20260126/202ad055d8706f14cd94fae4a8bbc14c.png') no-repeat center/cover;
}

.navbar-left {
  width: 50rpx;
  height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 20rpx;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 999rpx;
}

.navbar-right {
  display: flex;
  align-items: center;
}

.navbar-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-size: 34rpx;
  font-weight: 700;
  color: #111827;
  letter-spacing: 2rpx;
}

.navbar-capsule {
  display: flex;
  align-items: center;
  gap: 12rpx;
  height: 52rpx;
  padding: 0 16rpx;
  background: #ffffff;
  border-radius: 999rpx;
  box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08);
}

.capsule-dots {
  display: flex;
  gap: 6rpx;
}

.capsule-dot {
  width: 8rpx;
  height: 8rpx;
  border-radius: 50%;
  background: #111827;
}

.capsule-divider {
  width: 1rpx;
  height: 24rpx;
  background: #d1d5db;
}

.capsule-ring {
  width: 26rpx;
  height: 26rpx;
  border-radius: 50%;
  border: 3rpx solid #111827;
}
</style>