修改导航栏刘海屏高度适配

src/components/NafmHeader.vue

@@ -34,6 +34,7 @@
   </section>
   </section>
 </template>
 </template>
 <script>
 <script>
+import { mapGetters } from 'vuex'
 export default {
 export default {
   name: 'NafmHeader',
   name: 'NafmHeader',
   props: {
   props: {
@@ -69,6 +70,7 @@ export default {
     }
     }
   },
   },
   computed: {
   computed: {
+    ...mapGetters('common', ['GStatusBarHeight']),
     navObj () {
     navObj () {
       const meta = this.$route.meta
       const meta = this.$route.meta
       let leftArrowStatus = true
       let leftArrowStatus = true
@@ -86,6 +88,7 @@ export default {
         barStyle: {
         barStyle: {
           ...barStyleBg,
           ...barStyleBg,
           color: this.color || meta.color || '#fff',
           color: this.color || meta.color || '#fff',
+          paddingTop: `${this.GStatusBarHeight}px`
         },
         },
         barLeftText: this.leftText || meta.leftText || '',
         barLeftText: this.leftText || meta.leftText || '',
         barTitle: this.title || meta.title || '',
         barTitle: this.title || meta.title || '',

src/main.js

@@ -18,6 +18,9 @@ if (APP_ENV != 'production') {
   Vue.use(vConsole)
   Vue.use(vConsole)
 }
 }
 
 
+// 获取APP 相关信息
+store.dispatch('common/AGetAppInfo')
+
 Vue.use({
 Vue.use({
   install(vue) {
   install(vue) {
     Object.assign(vue.prototype, {
     Object.assign(vue.prototype, {

src/store/index.js

@@ -4,6 +4,7 @@ import VuexPersistence from 'vuex-persist'
 import createLogger from 'vuex/dist/logger'
 import createLogger from 'vuex/dist/logger'
 import home from './modules/home'
 import home from './modules/home'
 import user from './modules/user'
 import user from './modules/user'
+import common from './modules/common'
 
 
 // vuex 数据存储 进行本地存储操作
 // vuex 数据存储 进行本地存储操作
 const vuexLocal = new VuexPersistence({
 const vuexLocal = new VuexPersistence({
@@ -16,7 +17,8 @@ const store = new Vuex.Store({
   strict: process.env.NODE_ENV !== 'production',
   strict: process.env.NODE_ENV !== 'production',
   modules: {
   modules: {
     home,
     home,
-    user
+    user,
+    common
   },
   },
   plugins: [vuexLocal.plugin, createLogger()]
   plugins: [vuexLocal.plugin, createLogger()]
 })
 })

src/store/modules/common.js

+import { NativeApi } from '@/api/NativeApis'
+
+const AppInfo = {
+    versionCode: 100,
+    versionName: '2.1',
+    statusBarHeight: 0,
+    sourceFlag: false
+}
+
+export default {
+    namespaced: true,
+    state: {
+        AppInfo: { ...AppInfo }
+    },
+    mutations: {
+        MSetAppInfo (state, data) {
+            Object.assign(state.AppInfo, data)
+        }
+    },
+    actions: {
+        AGetAppInfo ({ state, commit }) {
+            if (state.AppInfo.sourceFlag) {
+                return
+            }
+            NativeApi.nativeAppInfo({}).then(res => {
+                if (res.data) {
+                    Object.assign(res.data, { sourceFlag: true })
+                }
+                commit('MSetAppInfo', res.data)
+            }).catch(e => {
+                commit('MSetAppInfo', AppInfo)
+            })
+        }
+    },
+    getters: {
+        GStatusBarHeight (state) {
+            return state.AppInfo.statusBarHeight
+        }
+    }
+}