更新优化组件

src/components/MHeader.vue

@@ -1,113 +1,170 @@
-<template>
-    <div class="mheader">
-        <header class="m-nav-header" :class="[isFixed ? 'fixed' : '']">
-            <div class="m-nav-bar__left" @click="goBack" v-show="isBack">
-                <van-icon class="arrow-left" name="arrow-left"></van-icon>
-            </div>
-            <div class="m-nav-bar__title">
-                <slot>{{ name ? name : this.$route.meta.descrition }}</slot>
-            </div>
-            <div class="m-nav-bar__right">
-                <slot name="right"></slot>
-            </div>
-        </header>
-    </div>
-</template>
-
-<script>
-/**
- * 插槽使用方式
- *  <template v-slot:right>
-        这里
-    </template>
- */
-export default {
-    name: 'mheader',
-    props: {
-        name: String, // 标题名称
-        isBack: { // 是否显示返回按钮
-            type: Boolean,
-            default: true
-        },
-        isFixed: { // 是否固定顶部
-            type: Boolean,
-            default: true
-        },
-        backUrl: { // 跳转指定的URL
-            type: Object,
-            default: () => {
-                return {
-                    callBack: null, // 方法
-                    path: '', // 跳转路径
-                    params: {}, // 跳转参数 目前只能用query的方式
-                }
-            }
-        }
-    },
-    methods: {
-        goBack() { // 返回上层
-            let urlObj = this.backUrl
-            // console.log(typeof urlObj.callBack)
-            if(typeof urlObj.callBack == 'function') {
-                urlObj.callBack()
-            } else {
-                if(urlObj.path) {
-                    this.$router.push({
-                        path: urlObj.path,
-                        query: urlObj.params
-                    })
-                } else {
-                    history.go(-1)
-                }
-            }
-
-            
-        }
-    }
-}
-</script>
-
-<style lang="less" scoped>
-@import url('../assets/commonLess/variable');
-.mheader {
-    height: .46rem;
-    overflow: hidden;
-}
-.m-nav-header {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: .46rem;
-    line-height: .46rem;
-    background-color:  @whiteColor;
-    text-align: center;
-    user-select: none;
-    color: @blackColor;
-    &.fixed {
-        position: fixed;
-        z-index: 99;
-    }
-    .m-nav-bar__title {
-        max-width: 60%;
-        margin: 0 auto;
-        color: @blackColor;
-        font-weight: 500;
-        font-size: .16rem;
-    }
-    .m-nav-bar__left, .m-nav-bar__right {
-        position: absolute;
-        bottom: 0;
-    }
-    .m-nav-bar__left {
-        left: .12rem;
-        .arrow-left {
-            font-size: .21rem;
-            vertical-align: middle;
-        }
-    }
-    .m-nav-bar__right {
-        right: .12rem;
-    }
-}
+<template>
+    <div class="mheader" :style="{ height: `calc(${titleHeight}px + ${navBarHeight}px)` }">
+        <header class="m-nav-header" :class="[isFixed ? 'fixed' : '']"  :style="[headStyle]">
+            <div class="m-nav-bar__left" @click="goBack" v-show="isBack">
+                <van-icon class="arrow-left" name="arrow-left"></van-icon>
+            </div>
+            <div class="m-nav-bar__title">
+                <slot>{{ name ? name : this.$route.meta.descrition }}</slot>
+            </div>
+            <div class="m-nav-bar__right">
+                <slot name="right"></slot>
+            </div>
+        </header>
+    </div>
+</template>
+
+<script>
+/**
+ * 插槽使用方式
+ *  <template v-slot:right>
+        这里
+    </template>
+ */
+import { postMessage } from '@/helpers/native-message'
+export default {
+    name: 'mheader',
+    props: {
+        name: String, // 标题名称
+        isNative: {
+            type: Boolean,
+            default: true
+        },
+        isBack: { // 是否显示返回按钮
+            type: Boolean,
+            default: true
+        },
+        isFixed: { // 是否固定顶部
+            type: Boolean,
+            default: true
+        },
+        backUrl: { // 跳转指定的URL
+            type: Object,
+            default: () => {
+                return {
+                    callBack: null, // 方法
+                    path: '', // 跳转路径
+                    params: {}, // 跳转参数 目前只能用query的方式
+                }
+            }
+        }
+    },
+    data() {
+        return {
+            navBarHeight: 0, // 顶部导航栏高度
+            headStyle: {},
+            titleHeight: 44, // 顶部导航高度（默认44px）
+        }
+    },
+    mounted() {
+        if (!this.isNative) {
+            postMessage({ api: 'setBarStatus', content: { status: 0 }})
+            this.getNav()
+            this.isBack = false
+        }
+    },
+    methods: {
+        async getNav() {
+            let sNavHeight = sessionStorage.getItem('navHeight')
+            let sTitleHeight = sessionStorage.getItem('titleHeight')
+            if(sNavHeight && sTitleHeight) {
+                this.navBarHeight = sNavHeight
+                this.headStyle = {
+                    paddingTop: sNavHeight + 'px',
+                    height: sTitleHeight + 'px',
+                    lineHeight: sTitleHeight + 'px'
+                }
+            } else {
+                await postMessage({ api: 'getNavHeight'}, (res) => {
+                    const { content } = res
+                    let headStyle = {}
+                    const dpi = content.dpi || 2
+                    if(content.navHeight) {
+                        const navHeight = content.navHeight / dpi
+                        sessionStorage.setItem('navHeight', navHeight)
+                        this.navBarHeight = navHeight
+                        headStyle = {
+                            paddingTop: navHeight + 'px'
+                        }
+                    }
+                    if(content.titleHeight) { // 导航栏的高度
+                        const titleHeight = content.titleHeight / dpi
+                        sessionStorage.setItem('titleHeight', titleHeight)
+                        this.titleHeight = titleHeight
+                        headStyle.height = titleHeight + 'px'
+                        headStyle.lineHeight = titleHeight + 'px'
+                    }
+                    this.headStyle = headStyle
+                })
+            }
+        },
+        goBack() { // 返回上层
+            let urlObj = this.backUrl
+            // console.log(typeof urlObj.callBack)
+            if(typeof urlObj.callBack == 'function') {
+                urlObj.callBack()
+            } else {
+                if(urlObj.path) {
+                    this.$router.push({
+                        path: urlObj.path,
+                        query: urlObj.params
+                    })
+                } else {
+                    history.go(-1)
+                }
+            }
+        }
+    },
+    beforeDestroy() {
+        if (!this.isNative) {
+            postMessage({ api: 'setBarStatus', content: { status: 1 }})
+            this.isBack = true
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@import url('../assets/commonLess/variable');
+.mheader {
+    height: .46rem;
+    overflow: hidden;
+}
+.m-nav-header {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: .46rem;
+    line-height: .46rem;
+    background-color:  @whiteColor;
+    text-align: center;
+    user-select: none;
+    color: @blackColor;
+    &.fixed {
+        position: fixed;
+        z-index: 99;
+    }
+    .m-nav-bar__title {
+        max-width: 60%;
+        margin: 0 auto;
+        color: @blackColor;
+        font-weight: 500;
+        font-size: .16rem;
+    }
+    .m-nav-bar__left, .m-nav-bar__right {
+        position: absolute;
+        bottom: 0;
+    }
+    .m-nav-bar__left {
+        left: .12rem;
+        .arrow-left {
+            font-size: .21rem;
+            vertical-align: middle;
+        }
+    }
+    .m-nav-bar__right {
+        right: .12rem;
+    }
+}
 </style>

src/main.js

@@ -11,7 +11,7 @@ import { Button, Icon, Tag, Swipe, SwipeItem, Popup, Picker,
     ActionSheet, RadioGroup, Radio, Checkbox, CheckboxGroup,
     CountDown, Panel, Dialog, Sticky, Rate, Switch, ImagePreview, NoticeBar, NavBar, Divider,
     Grid, GridItem, Calendar, Empty, Form, GoodsAction, GoodsActionButton, GoodsActionIcon, Uploader,
-  Step, Steps} from 'vant'
+  Step, Steps, TreeSelect} from 'vant'
 Vue.use(Button).use(Icon).use(Tag).use(Swipe).use(SwipeItem)
    .use(Popup).use(Picker).use(DropdownMenu).use(DropdownItem).use(Search)
    .use(PullRefresh).use(Toast).use(List).use(Collapse).use(CollapseItem)
@@ -20,7 +20,7 @@ Vue.use(Button).use(Icon).use(Tag).use(Swipe).use(SwipeItem)
    .use(ActionSheet).use(RadioGroup).use(Radio).use(Checkbox).use(CheckboxGroup)
    .use(CountDown).use(Panel).use(Dialog).use(Sticky).use(Rate).use(Switch).use(ImagePreview).use(NoticeBar)
    .use(NavBar).use(Divider).use(Grid).use(GridItem).use(Calendar).use(Empty).use(Form).use(GoodsAction).use(GoodsActionButton)
-   .use(GoodsActionIcon).use(Uploader).use(Step).use(Steps)
+   .use(GoodsActionIcon).use(Uploader).use(Step).use(Steps).use(TreeSelect)
 
 Vue.config.productionTip = false
 

src/views/message/Approval.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="approval">
         <van-sticky>
-            <m-header :isFixed="false" :backUrl="backUrl" />
+            <!-- <m-header :isFixed="false" :isNative="false" :backUrl="backUrl" /> -->
             <div class="user-container m-shadow">
                 <van-grid :column-num="3" :border="false">
                     <van-grid-item text="需我审批" :badge="upcoming" @click="gotoMyApproval(1)">
@@ -42,6 +42,7 @@ export default {
         }
     },
     async mounted(){
+        document.title = 'OA审批'
         try {
             const res = await todoCount()
             // 我的待审批数

src/views/message/ApprovalAction.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="(userAuthority || ownerApply) && is_end == 0 && share != 1 ? 'approvalAction' : null">
-        <m-header v-if="share != 1">
+        <m-header v-if="share != 1" :isNative="false">
             <template #right>
                 <van-icon @click="onShare" :name="iconShare" style="transform: translateY(5px);" size="22"></van-icon>
             </template>

src/views/message/ApprovalApply.vue

@@ -1,6 +1,6 @@
 <template>
     <div :class="[btn_group && btn_group.length > 0 ? 'approvalApply' : null]">
-        <m-header :name="name" />
+        <!-- <m-header :name="name" :isNative="false" /> -->
 
         <van-form ref="headForm" validate-first @submit="onSubmitHead" @failed="onFailed" validate-trigger="onSubmit" :scroll-to-error="false" :show-error="false">
             <van-field
@@ -120,6 +120,7 @@ export default {
         }
     },
     async mounted() {
+        document.title = this.name
         this.getProcessNodeList()
     },
     methods: {

src/views/message/myApproval.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="myApproval">
     <van-sticky>
-        <m-header :backUrl="backUrl" :name="name" :isFixed="false" />
+        <!-- <m-header :backUrl="backUrl" :name="name" :isNative="false" :isFixed="false" /> -->
         <van-dropdown-menu active-color="#01C1B5" :close-on-click-outside="false">
             <van-dropdown-item :title="value0" ref="treeSelect">
               <van-tree-select
@@ -156,6 +156,7 @@ export default {
     } else if (classifyStr == 3) {
          this.name =  "我相关的"
     }
+    document.title = this.name
     try {
       let res = await classify()
       let tempList = res.data || []
@@ -311,6 +312,9 @@ export default {
 </script>
 <style lang="less" scoped>
 @import url("../../assets/commonLess/variable.less");
+.myApproval {
+  min-height: 100vh;
+}
 .btnWrap {
   display: flex;
   flex-direction: row;
@@ -331,7 +335,9 @@ export default {
     text-align: center;
   }
 }
-
+/deep/.van-dropdown-menu__title {
+  font-size: .15rem;
+}
 /deep/.van-tree-select__item--active {
   color: #01c1b5;
 }