封装电池栏，刘海屏下班、电池栏背景色

components/normal-header.vue

 <template>
   <section class="header-section" >
-    <div class="navBar" :style="{height: `${barHeight}Px`,backgroundColor: barColor}"></div>
+    <div class="navBar" :style="{height: `${statusBarHeight}Px`,backgroundColor: statusBarColor}"></div>
     <header class="header-container">
       <img @click="goBack" src="~/assets/img/icon-back.png" alt="">
       {{title}}
@@ -31,18 +31,6 @@
           return 1
         }
       },
-      barHeight: {
-        type: Number,
-        default:function () {
-          return 0
-        }
-      },
-      barColor: {
-        type: String,
-        default: function () {
-          return '#ffffff'
-        }
-      }
     },
     data() {
       return {}

components/ranking-header.vue

 <template>
   <section class="header-section" >
-    <div class="navBar" :style="{height: `${barHeight}Px`,backgroundColor: barColor}"></div>
+    <div class="navBar" :style="{height: `${statusBarHeight}Px`,backgroundColor: statusBarColor}"></div>
     <header class="header-container">
       <img @click="goBack" src="~/assets/img/icon-back.png" alt="">
       <div class="head-btn">
@@ -45,18 +45,6 @@
           return 1
         }
       },
-      barHeight: {
-        type: Number,
-        default:function () {
-          return 0
-        }
-      },
-      barColor: {
-        type: String,
-        default: function () {
-          return '#ffffff'
-        }
-      },
       headBtn: {
         type: Object,
         default: function () {

nuxt.config.js

@@ -55,6 +55,10 @@ module.exports = {
     {
       src: '~plugins/vue-infinite-scroll',
       ssr: false
+    },
+    {
+      src: '~plugins/mixins',
+      ssr: false
     }
   ],
   /*

pages/hospital-ranking/index.vue

@@ -5,7 +5,7 @@
       :activeBtnType="activeBtnType"
       @handleBtn="changeRanking">
     </ranking-header>
-    <div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
+    <div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
       <div class="info info-hospital" v-if="activeBtnType">
         <img src="~/assets/img/hospital-ranking/icon-hospital.png" alt="">
         <div class="content" v-if="hospitalRanking.score">
@@ -97,8 +97,6 @@
       return {
         showPop: false,
         title: '个人明细',
-        barHeight: 0,
-        barColor: '#fff',
         headBtn: {
           leftName: '机构排行榜',
           rightName: '人员贡献榜'

pages/invite-details/index.vue

@@ -2,11 +2,9 @@
   <section class="invite-details-wrap">
     <normal-header
       :title="title"
-      :barHeight="barHeight"
-      :barColor="barColor"
       :backType="1">
     </normal-header>
-    <div class="main-container" :style="{ marginTop: `${44+barHeight}Px`}">
+    <div class="main-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
       <div class="invite-explain">
         <p class="title">邀请形式</p>
         <div class="picture-explain">
@@ -103,8 +101,6 @@
       return {
         showPop: false,
         title: '邀请明细',
-        barHeight: 0,
-        barColor: '#fff',
         inviteList: [],
         recordTotal: 0,
         recordType: 1,

pages/person-detail/index.vue

@@ -2,11 +2,9 @@
   <section class="person-detail-wrap">
     <normal-header
       :title="title"
-      :barHeight="barHeight"
-      :barColor="barColor"
       :backType="1">
     </normal-header>
-    <div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
+    <div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
       <div class="info">
         <img src="https://file.yunqueyi.com/jpg/2019/01/30/1548836156602-019ADC3F.jpg" alt="">
         <div class="content">
@@ -75,8 +73,6 @@
       return {
         showPop: false,
         title: '个人明细',
-        barHeight: 0,
-        barColor: '#fff',
         personDetails: [],
         busy: true, //分页参数--start
         pageNo: 0,

pages/person-ranking/index.vue

@@ -7,7 +7,7 @@
       @handleBtn="changeRanking"
       @handleRightBtn="handleRightBtn">
     </ranking-header>
-    <div class="info-container" :style="{ marginTop: `${44+barHeight}Px`}">
+    <div class="info-container" :style="{ marginTop: `${44+statusBarHeight}Px`}">
       <div class="info">
         <img :src="rankData.avatarImageUrl" alt="">
         <div class="right">
@@ -69,8 +69,6 @@
       return {
         showPop: false,
         title: '个人明细',
-        barHeight: 0,
-        barColor: '#fff',
         rankData: {},
         rightBtn: '昨日获奖',
         headBtn: {

pages/yesterday-prize/index.vue

@@ -3,11 +3,9 @@
     <normal-header
       :title="title"
       :rightText="rightText"
-      :barHeight="barHeight"
-      :barColor="barColor"
       :backType="1">
     </normal-header>
-    <div class="prize-list" :style="{ marginTop: `${44+barHeight}Px`}">
+    <div class="prize-list" :style="{ marginTop: `${44+statusBarHeight}Px`}">
       <div class="item" v-for="(item, index) in rewardsList">
         <img v-if="index<=2" :src="dealRankIcon(index)" alt="" class="ranking-icon">
         <p v-else class="icon-num" >{{index+1}}</p>
@@ -43,8 +41,6 @@
       return {
         showPop: false,
         title: '昨日获奖名单',
-        barHeight: 0,
-        barColor: '#fff',
         rightText: '如何领奖',
         rewardsList: [],
         btnText: '今日我要拿奖',

plugins/mixins.js

+import Vue from 'vue';
+// 设置电池栏高度
+
+const mixins = {
+  data() {
+    return {
+      statusBarHeight: 0,
+      homeIndicatorHeight: 0,
+      statusBarColor: '#fff'
+    }
+  },
+  created() {
+    const _this = this;
+    if (!_this.$rocNative.isWeb) {
+      _this.statusBarColor = _this.$rocNative.isAndroid?'#5C5C5C':'#fff'
+       _this.$rocNative.getStatusBarHeight().then(res => {
+        // resolve(data)
+        let height = _this.$rocNative.isIOS ? res.statusBarHeight : res.statusBarHeight / window.devicePixelRatio;
+        _this.statusBarHeight = height;
+        //	刘海屏底部高度
+        let homeIndicatorHeight = _this.$rocNative.isIOS ? res.homeIndicatorHeight : res.homeIndicatorHeight / window.devicePixelRatio;
+        _this.homeIndicatorHeight = homeIndicatorHeight;
+      })
+    }
+  },
+  mounted() {
+
+  },
+};
+Vue.mixin(mixins);