lanan-repair-app/components/VNavigationBar.vue

<template>
  <!-- header -->
  <view>
    <view :style="{ height: homeHeaderPaddingTop + 'px', backgroundColor }"></view>
    <view :class="{leftTitle: leftTitle}"
          :style="{ backgroundColor, height: homeHeaderMenuHeight + 'px' }" class="navigationBar">
      <template v-if="leftTitle">
        <view :style="{ color: titleColor }" class="navigationBarTitle">
          {{ title ? title : '' }}
        </view>
      </template>
      <template v-else>
        <view class="navigationBarBack" @click="back">
          <slot name="back">
            <uni-icons :color="titleColor" size="24"
                       type="left"></uni-icons>
          </slot>
        </view>
        <view :style="{ color: titleColor }" class="navigationBarTitle">
          {{ title }}
        </view>
        <view v-if="showClear" @click="clearNoReadFun" class="navigationBarIcon" :style="{ color: titleColor }">
          <image src="@/static/images/clear.png" mode="" class="clear-icon"></image>
        </view>
        <view v-if="addWares" @click="addNewWares" class="navigationBarIcon" style="position: absolute;right: 22px;font-size: 18px">
          新增
        </view>
      </template>
      <view class="navigationBarBackExtra">
        <slot name="extra">
        </slot>
      </view>
    </view>
  </view>
</template>

<script>
/* 计算标题位置 */
import {getWXStatusHeight} from "@/utils/utils";

export default {
  props: {
    backgroundColor: {
      type: String,
      default: '#317DFA'
    },
    title: String,
    titleColor: {
      type: String,
      default: '#fff'
    },
    leftTitle: {
      type: Boolean,
      default: false
    },
    showClear: {
      type: Boolean,
      default: false
    },
    //新增配件
    addWares:{
      type: Boolean,
      default: false
    }
  },
  mounted() {
    // #ifdef MP
    const {
      barHeight,
      barTop,
      menuButtonLeft
    } = getWXStatusHeight()
    console.log('barHeight, barTop, menuButtonLeft: ', barHeight, barTop, menuButtonLeft);
    this.homeHeaderPaddingTop = barTop || 0
    this.homeHeaderMenuHeight = barHeight
    this.homeHeaderMenuLeft = menuButtonLeft - 6
    // #endif
  },
  data() {
    return {
      // #ifdef MP
      homeHeaderPaddingTop: 0,
      homeHeaderMenuHeight: 0,
      homeHeaderMenuLeft: 0,
      // #endif
      // #ifdef APP || H5
      homeHeaderPaddingTop: 20,
      homeHeaderMenuHeight: 50,
      homeHeaderMenuLeft: 0
      // #endif
    }
  },
  methods: {
    back() {
      uni.navigateBack()
    },
    clearNoReadFun(){
      this.$emit('clearNoRead')
    },
    addNewWares(){
      this.$emit('addNewWares')
    }
  }
}
</script>

<style lang="scss" scoped>
.navigationBar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  &.leftTitle {
    justify-content: start;
    padding-left: 28rpx;
  }

  .navigationBarBack {
    position: absolute;
    left: 20rpx;
  }

  .navigationBarBackExtra {
    position: absolute;
    right: 20rpx;
  }

  .navigationBarTitle {
    font-size: 36rpx;
    font-weight: bold;
  }
  .navigationBarIcon {
    display: flex;
  }
  .clear-icon{
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
  }
}
</style>