小程序导航和H5导航功能调整完成

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

@@ -1,19 +1,21 @@
 <template>
   <view class="">
     <view class="header" :style="style">
-      <view class="flexbox"
+      <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 v-if="false">
 
-        </view> -->
         <view class="title-text" :style="[{'marginLeft':left +'px'}]">{{title}}</view>
-        <view style="width: 36px;"></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">
@@ -26,12 +28,16 @@
 </template>
 
 <script>
+  import tools from "@/common/js/tools";
+
   export default {
+    name: "en-nav",
     data() {
       return {
         statusBarH: 0,
         customBarH: 0,
-        left: 35
+        left: 35,
+        isXcx:false
       }
     },
     props: {
@@ -43,19 +49,30 @@
         type: Boolean,
         default: true
       },
-
       bgckgroundBox: {
         type: String,
         default: '#fff'
       },
-      // titleColor: {
-      //   type: String,
-      //   default: '#fff'
-      // },
-      // bgColor: {
-      //   type: String,
-      //   default: '#707'
-      // },
+
+      titleColor: {
+        type: String,
+        default: '#fff'
+      },
+      bgColor: {
+        type: String,
+        default: '#707'
+      },
+      rightText: {
+        type: String,
+        default: ''
+      },
+      rightShow: {
+        type: Boolean,
+        default: false
+      },
+      rightType: {
+        default: 1
+      },
     },
     computed: {
       style() {
@@ -71,23 +88,37 @@
       }
     },
     methods: {
+      rightClick() {
+        this.$emit('rightClick')
+      },
       goBack() {
         if(!this.leftShow){
           return ;
         }
-        this.$emit('leftClick')
+        // this.$emit('leftClick')
+        tools.leftClick()
       }
     },
     created() {
-      let self = this;
       uni.getSystemInfo({
-        success: function(e) {
-          self.statusBarH = e.statusBarHeight + 10
-          let custom = wx.getMenuButtonBoundingClientRect()
-          self.customBarH = custom.height
-          self.$emit('navHeight', self.customBarH-10)
+        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>
@@ -101,27 +132,55 @@
     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;
   }
 
-  .flexbox {
-    display: flex;
-    justify-content: space-between;
-    padding: 0 20px;
-    .iconfont{
-      color: #fff;
-    }
-    .title-text {
-      font-size: 36rpx;
-      font-weight: 600;
-    }
 
-    .icon-left {
-      width: 20px;
-      height: 20px;
-    }
-  }
 </style>