bn-q-icon/components/en-utils/en-nav/en-nav.vue

<template>
  <view class="">
    <view class="header" :style="style">
      <view class="flexbox" :class="{'flexbox-xcx':(isXcx && rightShow)}"
        :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px','background':bgckgroundBox}]">
        <view @tap="goBack">
          <text  class="iconfont" v-if="leftShow">
            &#xe60e;
          </text>
        </view>

        <view class="title-text" :style="[{'marginLeft':left +'px'},{'color':titleColor}]">{{title}}</view>
        <view  class="right-button button" @click="rightClick">
          <slot name="right" v-if="rightShow">
            <text class="rightName" v-if="rightType===1">{{rightText}}</text>
            <text class="rightName r-but" v-else>{{rightText}}</text>
          </slot>
        </view>
      </view>
    </view>
    <view class="box-title">
      <view class="" :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px'}]">
      </view>
    </view>
  </view>


</template>

<script>
  import tools from "@/common/js/tools";

  export default {
    name: "en-nav",
    data() {
      return {
        statusBarH: 0,
        customBarH: 0,
        left: 35,
        isXcx:false
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      leftShow: {
        type: Boolean,
        default: true
      },
      bgckgroundBox: {
        type: String,
        default: '#fff'
      },

      titleColor: {
        type: String,
        default: '#333'
      },
      bgColor: {
        type: String,
        default: '#707'
      },
      rightText: {
        type: String,
        default: ''
      },
      rightShow: {
        type: Boolean,
        default: false
      },
      rightType: {
        default: 1
      },
    },
    computed: {
      style() {
        let _style = `height: ${this.customBarH}px;`
        return _style
      }
    },
    watch: {
      leftShow(e) {
        if (e == true) {
          this.left = 0
        }
      }
    },
    methods: {
      rightClick() {
        this.$emit('rightClick')
      },
      goBack() {
        if(!this.leftShow){
          return ;
        }
        // this.$emit('leftClick')
        tools.leftClick()
      }
    },
    created() {
      uni.getSystemInfo({
        success: (e) =>{
          this.statusBarH = e.statusBarHeight + 10
          let custom=0;
          //#ifdef MP-WEIXIN
          custom = wx.getMenuButtonBoundingClientRect()
          this.customBarH = custom.height
          //#endif
          //#ifdef H5
          this.customBarH = 30
          this.left=0
          //#endif
          console.log('self.customBarH---------'+this.customBarH)
          this.$emit('navHeight', this.customBarH-10)
        }
      })
      //#ifdef MP-WEIXIN
      this.isXcx=true
      //#endif
    }
  }
</script>

<style scoped lang="scss">
@import url("../../static/css/en-common.css") ;

  .header {
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 999999;
    .flexbox {
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
      .iconfont{
        color: #333333;
      }
      .title-text {
        font-size: 36rpx;
        font-weight: 600;
      }
      .icon-left {
        width: 20px;
        height: 20px;
      }

      .button {
        position: relative;
        z-index: 5;
        // width: 21px;
        .rightName {
          font-size: 14px;
          color: #333333;
        }
        .r-but{
          background-color:#FF0000 ;
          color: #fff;
          font-size: 12px;
          padding: 5px;
          border-radius: 3px;
        }
      }
    }
    .flexbox-xcx{
      justify-content:left;
      position: relative;
      .right-button{
        position: absolute;
        right: 220rpx;
      }
    }

  }



  .box-title {
    width: 100vw;
  }


</style>