zh_order_food_xcx/components/en-utils/en-nav/en-nav.vue

<template>
  <view class="">
    <view class="header" :style="style">
      <view class="flexbox" 
		  :class="{
		  'flexbox-xcx':(isXcx && rightShow),
		  'flex-justify-space':!customNav,
		  'align-items-center':!customNav,
		  }"
        :style="[{'height': customBarH + 'px', 'padding-top': statusBarH + 'px','background':bgckgroundBox}]">
        <view @tap="goBack" v-if="leftShow">
		  <uni-icons type="left" :color="leftColor" size="18"  ></uni-icons>
        </view>

        <view v-if="!customNav" class="title-text">{{title}}</view>
		<view v-else class="">
			<slot name="custom"></slot>
		</view>
		
		
		
        <view v-if="rightShow" class="right-button button" @click="rightClick">
          <slot name="right" >
            <text class="rightName" v-if="rightType===1">{{rightText}}</text>
            <text class="rightName r-but" v-else>{{rightText}}</text>
          </slot>
        </view>
		<view v-else class="w-right"></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 "@/service/tools";

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

      titleColor: {
        type: String,
        default: '#fff'
      },
      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 ;
        }
        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
          
          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;
	  // align-items: center;
      // justify-content: space-between;
      padding: 0 24rpx;
      .iconfont{
        color: #333333;
		font-size: 34rpx;
      }
      .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;
      }
    }

  }

  .w-right{
	  width: 20rpx;
  }

  .box-title {
    width: 100vw;
  }


</style>