mixin

src/assets/css/index.css

@@ -6,6 +6,9 @@
 i {
   font-style: normal;
 }
+.iosStyle {
+  background-color: #077AEC;
+}
 .container {
   padding-top: 46px;
 }

src/assets/css/index.less

+@base-blue-color:#077AEC;
 * {
     padding: 0;
     margin: 0;
@@ -8,14 +9,16 @@ i {
     font-style: normal;
 }
 
-
+.iosStyle{
+    background-color: @base-blue-color;
+}
 .container {
     padding-top: 46px;
 }
 
 /*未扣费*/
 .no_bill {
-    color: #077AEC;
+    color: @base-blue-color;
 }
 
 

src/assets/js/setBarHeight.js

+const setBarHeight = {
+    mounted() {
+        try {
+            window.WebViewJavascriptBridge.callHandler(
+                "getBarHeight",
+                null,
+                function (response) {
+                    console.log("getBarHeight来自 ios/android的回传数据： ", response);
+                    if (response) {
+                        const barHeight = response.statusBarHeight;
+                        const conHeight = 46 + barHeight;
+                        document
+                            .getElementsByClassName("iosStyle")[0]
+                            .setAttribute(
+                                "style",
+                                "padding-top:" + barHeight + "px !important"
+                            );
+
+                        document
+                            .getElementsByClassName("container")[0]
+                            .setAttribute(
+                                "style",
+                                "padding-top:" + conHeight + "px !important"
+                            );
+                    }
+                }
+            );
+        } catch (err) {
+            console.log("getBarHeight is error");
+        }
+    }
+}
+
+export default setBarHeight
\ No newline at end of file

src/components/Header.vue

 <template>
-  <div id="showheader"  class="header">
+  <div id="showheader"  class="header iosStyle">
     <van-nav-bar id="nav" :title="title" left-text left-arrow />
   </div>
 </template>

src/components/HeaderW.vue

 <template>
-  <div id="showheader"  class="header" :class="this.top?'iosStyle header-warp':'header-warp'">
+  <div id="showheader"  class="header iosStyle">
     <van-nav-bar id="nav" :title="title" left-text left-arrow />
   </div>
 </template>

src/views/Bill/annualfee.vue

@@ -35,11 +35,13 @@ import { Icon } from "vant";
 import { Header } from "@/components";
 import { mapGetters } from "vuex";
 import dayjs from "dayjs";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "会员年费",

src/views/Bill/index.vue

@@ -159,6 +159,7 @@ import { Icon, Loading } from "vant";
 import { TabHeader } from "@/components";
 import * as utils from "../../utils/common";
 import { mapGetters, mapActions } from "vuex";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 import dayjs from "dayjs";
 
 export default {
@@ -166,6 +167,7 @@ export default {
     [Icon.name]: Icon,
     TabHeader
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "人事服务",
@@ -416,36 +418,6 @@ export default {
         }
       }
     },
-    getBarHeight() {
-      try {
-        window.WebViewJavascriptBridge.callHandler(
-          "getBarHeight",
-          null,
-          function(response) {
-            console.log("getBarHeight来自 ios/android的回传数据： ", response);
-            if (response) {
-              const barHeight = response;
-              const conHeight = 46 + response;
-              document
-                .getElementsByClassName("iosStyle")[0]
-                .setAttribute(
-                  "style",
-                  "padding-top:" + barHeight + "px !important"
-                );
-
-              document
-                .getElementsByClassName("container")[0]
-                .setAttribute(
-                  "style",
-                  "padding-top:" + conHeight + "px !important"
-                );
-            }
-          }
-        );
-      } catch (err) {
-        console.log("getBarHeight is error");
-      }
-    },
     closeWebView() {
       try {
         window.WebViewJavascriptBridge.callHandler(
@@ -468,7 +440,6 @@ export default {
     this.globalNavLeftArrowClick(this.navLeftArrowClick);
     await this.loadPeriodData();
     this.payUrl = await this.loadPayUrl();
-    this.getBarHeight();
   }
 };
 </script>

src/views/Bill/record.vue

@@ -24,6 +24,7 @@
 import { Icon } from "vant";
 import { HeaderW } from "@/components";
 import MescrollMixins from "../../assets/js/MescrollMixins.js";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 import MescrollVue from "mescroll.js/mescroll.vue";
 import { mapGetters, mapActions } from "vuex";
 import dayjs from "dayjs";
@@ -33,7 +34,7 @@ export default {
     [Icon.name]: Icon,
     MescrollVue
   },
-  mixins: [MescrollMixins],
+  mixins: [MescrollMixins,setBarHeight],
   computed: {
     ...mapGetters(["getBeginDate"])
   },

src/views/Bill/sociallist.vue

@@ -39,11 +39,13 @@ import { Header } from "@/components";
 import { Icon } from "vant";
 import { mapGetters, mapActions } from "vuex";
 import dayjs from "dayjs";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "",

src/views/Bill/socialpayment.vue

@@ -36,11 +36,13 @@ import { Header } from "@/components";
 import { Icon } from "vant";
 import { mapGetters } from "vuex";
 import dayjs from "dayjs";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "",

src/views/Bill/trusteeship.vue

@@ -46,7 +46,12 @@
             <i class="title_color">{{hosting.fund.amount|moneyNum}}</i>
           </div>
           <div class="list_contenter">
-            <div class="list" v-for="(item,index) in hosting.fund.list" :key="index"  @click="openDetail(item.detail)">
+            <div
+              class="list"
+              v-for="(item,index) in hosting.fund.list"
+              :key="index"
+              @click="openDetail(item.detail)"
+            >
               <div class="list_title">
                 <div class="title">{{item.cityName}}</div>
                 <van-icon name="arrow" class="arrow_right" />
@@ -91,13 +96,14 @@ import { Icon, Popup } from "vant";
 import { Header } from "@/components";
 import { mapGetters, mapActions } from "vuex";
 import MescrollVue from "mescroll.js/mescroll.vue";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon,
     [Popup.name]: Popup
   },
-
+  mixins: [setBarHeight],
   data() {
     return {
       name: "人事托管",

src/views/More/detail.vue

@@ -21,11 +21,13 @@
 <script>
 import { NavBar, Icon } from "vant";
 import { mapGetters } from "vuex";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     [NavBar.name]: NavBar,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "",

src/views/More/index.vue

@@ -53,11 +53,13 @@
 import { NavBar, Icon } from "vant";
 import { TabHeader } from "@/components";
 import { mapActions } from "vuex";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     [Icon.name]: Icon,
     TabHeader
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "",

src/views/More/record.vue

@@ -29,11 +29,13 @@
 <script>
 import { Icon } from "vant";
 import { HeaderW } from "@/components";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     [Icon.name]: Icon,
     HeaderW
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "资金记录",

src/views/Other/detail.vue

@@ -23,11 +23,13 @@
 <script>
 import { Icon } from "vant";
 import { Header } from "@/components";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "",

src/views/Other/index.vue

@@ -39,11 +39,13 @@ import { Icon } from "vant";
 import { Header } from "@/components";
 import { mapGetters } from "vuex";
 import dayjs from "dayjs";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "其他事务办理",

src/views/ServiceFee/detail.vue

@@ -51,11 +51,13 @@ import { Header } from "@/components";
 import { Icon } from "vant";
 import { mapGetters } from "vuex";
 import dayjs from "dayjs";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "",

src/views/ServiceFee/index.vue

@@ -51,11 +51,13 @@
 <script>
 import { Icon } from "vant";
 import { Header } from "@/components";
+import setBarHeight from "../../assets/js/setBarHeight.js";
 export default {
   components: {
     Header,
     [Icon.name]: Icon
   },
+  mixins: [setBarHeight],
   data() {
     return {
       title: "服务费"