mp_exhibitor_miniprog/components/layout/nav-bar.vue

<template>
  <view v-if="!hideNavbar" class="nav-bar" :class="{ 'nav-bar-transparent': transparent,'hide_nav_bar':hideNavbar }">
    <view class="nav-bar-status" :style="{ height: statusBarHeight + 'px' }"></view>
    <view class="nav-bar-title">
      <template v-if="showTitle">
        <view class="btn-back" @click="goBack">
          <van-icon name="arrow-left"/>
        </view>
        <view class="nav-bar-title-text">{{ title }}</view>
        <view></view>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </view>
  </view>

</template>

<script>
export default {
  props: {
    title: String,
    transparent: Boolean,
    showTitle: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    hasParent() {
      return getCurrentPages().length > 1
    }
  },

  data() {
    return {
      hideNavbar: false,
      titleBarHeight: 0,
      statusBarHeight: 0,
      isNotchScreen: false
    }
  },
  created() {
    const self = this
    const windowInfo = uni.getWindowInfo()
    this.statusBarHeight = windowInfo.statusBarHeight
    const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
    this.titleBarHeight = (menuButtonInfo.top - this.statusBarHeight) * 2 + menuButtonInfo.height + (windowInfo.screenWidth / 750 * 16)
    if (this.showTitle) {
      uni.getSystemInfo({
        success(res) {
          const os = res.system.toLowerCase()
          self.$config.os = os
          if (os.includes('windows') || os.includes('mac')) {
            self.$emit('init', {
              detail: {
                navbarHeight: 0,
                pageHeight: windowInfo.screenHeight
              }
            })
            self.hideNavbar = true

            // self.statusBarHeight = 0
            // self.titleBarHeight = (windowInfo.screenWidth / 750 * 100)
            // self.$emit('init', {
            // 	detail: {
            // 		navbarHeight: (windowInfo.screenWidth / 750 * 100),
            // 		pageHeight: windowInfo.screenHeight -  (windowInfo.screenWidth / 750 * 100)
            // 	}
            // })
          } else {
            self.$emit('init', {
              detail: {
                navbarHeight: self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight),
                pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight)) - res.safeAreaInsets.bottom
              }
            })
          }
        }
      })
    } else {
      uni.getSystemInfo({
        success(res) {
          const os = res.system.toLowerCase()
          self.$config.os = os
          if (os.includes('windows') || os.includes('mac')) {
            self.statusBarHeight = 0
            self.titleBarHeight = (windowInfo.screenWidth / 750 * 120)
            self.$emit('init', {
              detail: {
                navbarHeight: (windowInfo.screenWidth / 750 * 120),
                pageHeight: windowInfo.screenHeight - (windowInfo.screenWidth / 750 * 120)
              }
            })
          } else {
            self.$emit('init', {
              detail: {
                navbarHeight: self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight),
                pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (self.statusBarHeight + self.titleBarHeight)) - res.safeAreaInsets.bottom
              }
            })
          }
        }
      })
    }
    // this.$emit('init', {
    // 	detail: {
    // 		navbarHeight: self.hideNavbar ? 0 : (this.statusBarHeight + this.titleBarHeight),
    // 		pageHeight: windowInfo.screenHeight - (self.hideNavbar ? 0 : (this.statusBarHeight + this.titleBarHeight))
    // 	}
    // })

  },
  methods: {
    hasSlot() {
      const nodes = this.getRelationNodes(`view`);
      return nodes.length > 0;
    },
    goBack() {
      const pages = getCurrentPages();
      // 获取当前页面的实例
      const currentPage = pages[pages.length - 1];
      // 获取当前页面的路径
      const currentPath = currentPage.route;
      if (currentPath === 'pages/checkIn/activity-end') {
        this.navigateTo('/pages/index/index')
        return false
      }

      this.refreshData()
      if (this.hasParent) {
        uni.navigateBack()
      } else if (this.$store.getters.page.length > 0) {
        this.$store.commit('DELETE_PAGE')
        console.log(this.$store.getters.page)
      } else {
        this.navigateTo('/pages/index/index')
      }
    }
  }
}
</script>

<style lang="scss">

.nav-bar {
  background: linear-gradient(270deg, #2b2359 9%, #405491 44%, #2b2359 92%), rgba(0, 0, 0, 0.2);
  width: 100%;
  position: fixed;
  left: 0;
  z-index: 10;
  height: $navBarHeight;
  top: 0;
  display: flex;
  flex-direction: column;

  &.nav-bar-transparent {
    background: none;

    .nav-bar-title {
      view {
        color: #333333;
      }
    }
  }

  .nav-bar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 16rpx;
    flex: 1;
    min-height: 1px;

    view {
      color: #ffffff;
    }
  }

  .nav-bar-title-text {
    flex: 1;
    font-weight: 500;
    font-size: $fontSize5;
    //line-height: 42rpx;
    line-height: 1.5;
    text-align: left;
    text-transform: none;
    padding-left: 8rpx;
  }

  .btn-back {
    padding: 0 6rpx;
    cursor: pointer;
  }
}
</style>