浏览代码

修改头部样式功能

lex 2 年之前
父节点
当前提交
abb0154b05

+ 2 - 1
src/components/o-header/index.module.less

@@ -1,9 +1,10 @@
 .colHeader {
   --van-font-weight-bold: 600;
+  --van-nav-bar-arrow-size: 20px;
   :global {
     .van-nav-bar__title,
     .van-icon {
-      color: inherit;
+      color: inherit !important;
     }
     .van-nav-bar__title {
       font-size: 18px;

+ 25 - 36
src/components/o-header/index.tsx

@@ -10,7 +10,7 @@ export default defineComponent({
     title: String,
     isBack: {
       type: Boolean,
-      default: false
+      default: true
     },
     backIconColor: {
       // 返回按钮颜色
@@ -37,7 +37,7 @@ export default defineComponent({
     rightText: String,
     onClickRight: {
       type: Function,
-      default: () => {}
+      default: () => ({})
     },
     border: {
       type: Boolean,
@@ -46,7 +46,7 @@ export default defineComponent({
     onHeaderBack: {
       // 头部高度设置后返回
       type: Function,
-      default: () => {}
+      default: () => ({})
     },
     desotry: {
       // 用于组件销毁时,是否重置原生头部样式
@@ -54,15 +54,15 @@ export default defineComponent({
       default: true
     }
   },
-  watch: {
-    backIconColor() {
-      // 设置返回按钮颜色
-      postMessage({
-        api: 'backIconChange',
-        content: { iconStyle: this.backIconColor }
-      })
-    }
-  },
+  // watch: {
+  // backIconColor() {
+  // 设置返回按钮颜色
+  // postMessage({
+  //   api: 'backIconChange',
+  //   content: { iconStyle: this.backIconColor }
+  // })
+  // }
+  // },
   data() {
     return {
       headerTitle: null as any,
@@ -79,27 +79,19 @@ export default defineComponent({
   unmounted() {
     if (this.desotry) {
       // 设置是否显示导航栏 0 不显示 1 显示
-      postMessage({ api: 'setBarStatus', content: { status: 1 } })
+      // postMessage({ api: 'setBarStatus', content: { status: 1 } })
       // 设置返回按钮颜色
-      postMessage({
-        api: 'backIconChange',
-        content: { iconStyle: 'black' }
-      })
+      // postMessage({
+      //   api: 'backIconChange',
+      //   content: { iconStyle: 'black' }
+      // })
     }
   },
   methods: {
-    navBarInit(callBack?: Function) {
-      // 设置是否显示导航栏 0 不显示 1 显示
-      postMessage({ api: 'setBarStatus', content: { status: 0 } })
-      // 设置返回按钮颜色
-      postMessage({
-        api: 'backIconChange',
-        content: { iconStyle: this.backIconColor || 'black' }
-      })
-
+    navBarInit(callBack?: any) {
       const sNavHeight = sessionStorage.getItem('navHeight')
-      const sTitleHeight = sessionStorage.getItem('titleHeight')
-      if (sNavHeight && sTitleHeight) {
+      // const sTitleHeight = sessionStorage.getItem('titleHeight')
+      if (sNavHeight) {
         this.navBarHeight = Number(sNavHeight)
         callBack && callBack()
       } else {
@@ -111,19 +103,17 @@ export default defineComponent({
             sessionStorage.setItem('navHeight', String(navHeight))
             this.navBarHeight = navHeight
           }
-          if (content.titleHeight) {
-            // 导航栏的高度
-            const titleHeight = content.titleHeight / dpi
-            sessionStorage.setItem('titleHeight', String(titleHeight))
-            this.titleHeight = titleHeight
-          }
           callBack && callBack()
         })
       }
       !browser().isApp && callBack && callBack()
     },
     onClickLeft() {
-      this.$router.back()
+      if (browser().isApp) {
+        postMessage({ api: 'goBack' })
+      } else {
+        this.$router.back()
+      }
     },
     clickRight() {
       this.onClickRight && this.onClickRight()
@@ -145,7 +135,6 @@ export default defineComponent({
         ) : (
           <>
             <div
-              // style={{ paddingTop: `${this.navBarHeight}px` }}
               style={{
                 minHeight: `calc(var(--van-nav-bar-height) + ${this.navBarHeight}px)`
               }}

+ 13 - 10
src/components/o-sticky/index.tsx

@@ -45,28 +45,31 @@ export default defineComponent({
     }
 
     nextTick(() => {
+      // 为了处理刚开始头部高度为0的情况
+      const { height } = useRect((this as any).$refs.div)
+      this.__initHeight(height)
+
       setTimeout(() => {
         const { height } = useRect((this as any).$refs.div)
-        console.log(height, this.position)
-        this.sectionStyle.height = `${height}px`
-        this.heightV = height
-        this.$emit('getHeight', height)
-        console.log(height, 'osticky height')
+        this.__initHeight(height)
       }, 200)
 
       // 为了处理头部第一次获取高度不对的问题
       setTimeout(() => {
         const { height } = useRect((this as any).$refs.div2)
-        console.log(height, this.position, 'next')
         if (height !== this.heightV && this.position === 'top') {
-          this.sectionStyle.height = `${height}px`
-          this.heightV = height
-          this.$emit('getHeight', height)
-          console.log(height, 'next osticky height')
+          this.__initHeight(height)
         }
       }, 1000)
     })
   },
+  methods: {
+    __initHeight(height: any) {
+      this.sectionStyle.height = `${height}px`
+      this.heightV = height
+      this.$emit('getHeight', height)
+    }
+  },
   watch: {
     offsetTop() {
       this.divStyle.top = this.offsetTop

+ 2 - 1
src/school/approval-manage/subsidy/details.tsx

@@ -64,8 +64,9 @@ export default defineComponent({
     })
     return () => (
       <div>
+        <OHeader />
         {/* <OSticky>
-          <OHeader />
+          
         </OSticky> */}
         {!!state.record && (
           <div class={styles.wrap}>

+ 2 - 2
src/school/approval-manage/subsidy/exercise-detail.tsx

@@ -53,13 +53,13 @@ export default defineComponent({
     })
     return () => (
       <div>
-        {/* <OSticky
+        <OSticky
           onGetHeight={(height: number) => {
             document.documentElement.style.setProperty('--header-height', height + 'px')
           }}
         >
           <OHeader></OHeader>
-        </OSticky> */}
+        </OSticky>
         <OFullRefresh
           v-model:modelValue={refreshing.value}
           onRefresh={getData}

+ 15 - 2
src/school/attendance-rules/index.tsx

@@ -1,5 +1,7 @@
+import OHeader from '@/components/o-header'
+import OSticky from '@/components/o-sticky'
 import { Tab, Tabs } from 'vant'
-import { defineComponent, reactive } from 'vue'
+import { defineComponent, reactive, ref } from 'vue'
 import Range from './component/range'
 import SiginInRule from './component/sigin-in-rule'
 import SiginOutRule from './component/sigin-out-rule'
@@ -9,14 +11,25 @@ export default defineComponent({
   name: 'attendance-rules',
   setup() {
     const forms = reactive({
-      tabValue: 'range'
+      tabValue: 'range',
+      heightV: 0 as number
     })
+    const stickyRef = ref()
+    const getHeight = (dataHeight: number) => {
+      forms.heightV = dataHeight
+      console.log(forms.heightV, '获取高度')
+      document.documentElement.style.setProperty('--header-height', dataHeight + 'px')
+    }
     return () => (
       <div class={styles.attendanceRules}>
+        <OSticky position="top" background="#F8F8F8" onGetHeight={getHeight} ref={stickyRef}>
+          <OHeader border={false} />
+        </OSticky>
         <Tabs
           sticky
           lineWidth={20}
           lineHeight={4}
+          offsetTop={forms.heightV}
           swipeable
           animated
           v-model:active={forms.tabValue}

+ 2 - 1
src/views/404/index.tsx

@@ -4,13 +4,14 @@ import img404 from '@/common/images/404.png'
 import { Button, Image } from 'vant'
 import { postMessage } from '@/helpers/native-message'
 import { browser } from '@/helpers/utils'
+import OHeader from '@/components/o-header'
 
 export default defineComponent({
   name: 'NotFound',
   render() {
-    postMessage({ api: 'setBarStatus', content: { status: 0 } })
     return (
       <div class={styles.f404}>
+        <OHeader />
         <Image src={img404} />
         <p>页面找不到了</p>
         <Button

+ 22 - 19
src/views/coursewarePlay/index.tsx

@@ -113,19 +113,19 @@ export default defineComponent({
         }
       )
       // 头,包括返回箭头
-      postMessage({
-        api: 'setTitleBarVisibility',
-        content: {
-          status: type
-        }
-      })
+      // postMessage({
+      //   api: 'setTitleBarVisibility',
+      //   content: {
+      //     status: type
+      //   }
+      // })
       // 安卓的状态栏
-      postMessage({
-        api: 'setStatusBarVisibility',
-        content: {
-          isVisibility: type
-        }
-      })
+      // postMessage({
+      //   api: 'setStatusBarVisibility',
+      //   content: {
+      //     isVisibility: type
+      //   }
+      // })
       // 进入页面设置常量
       postMessage({
         api: 'keepScreenLongLight',
@@ -871,13 +871,16 @@ export default defineComponent({
               <div class={styles.rightBtn} onClick={() => (popupData.guideOpen = true)}>
                 <img src={iconTouping} />
               </div>
-              <div class={styles.rightBtn} onClick={() => {
-                openStudyTool({
-                  type: 'pen',
-                  icon: iconPen,
-                  name: '批注'
-                })
-              }}>
+              <div
+                class={styles.rightBtn}
+                onClick={() => {
+                  openStudyTool({
+                    type: 'pen',
+                    icon: iconPen,
+                    name: '批注'
+                  })
+                }}
+              >
                 <img src={iconPen} />
               </div>
               {/* <div class={styles.rightBtn} onClick={() => (popupData.toolOpen = true)}>

+ 13 - 14
src/views/exercise-after-class/index.tsx

@@ -34,7 +34,6 @@ const materialType = {
   曲目: 'SONG'
 }
 
-
 export default defineComponent({
   name: 'exercise-after-class',
   setup() {
@@ -63,19 +62,19 @@ export default defineComponent({
         }
       })
       // 头,包括返回箭头
-      postMessage({
-        api: 'setTitleBarVisibility',
-        content: {
-          status: type
-        }
-      })
-      // 安卓的状态栏
-      postMessage({
-        api: 'setStatusBarVisibility',
-        content: {
-          isVisibility: type
-        }
-      })
+      // postMessage({
+      //   api: 'setTitleBarVisibility',
+      //   content: {
+      //     status: type
+      //   }
+      // })
+      // // 安卓的状态栏
+      // postMessage({
+      //   api: 'setStatusBarVisibility',
+      //   content: {
+      //     isVisibility: type
+      //   }
+      // })
     }
     handleInit()
     onUnmounted(() => {

+ 0 - 3
src/views/follow-account/index.tsx

@@ -68,9 +68,6 @@ export default defineComponent({
       }
     }
 
-    onMounted(() => {
-      postMessage({ api: 'setBarStatus', content: { status: 0 } })
-    })
     return () => (
       <div class={styles.followAccount}>
         <Image src={content1} class={styles.content1} />

+ 4 - 1
src/views/information/help-center/detail.tsx

@@ -1,3 +1,4 @@
+import OHeader from '@/components/o-header'
 import request from '@/helpers/request'
 import { state } from '@/state'
 import { NavBar } from 'vant'
@@ -30,7 +31,9 @@ export default defineComponent({
       <>
         {route.query.source == 'music' ? (
           <NavBar leftArrow leftText="返回" border={false} onClickLeft={() => router.back()} />
-        ) : null}
+        ) : (
+          <OHeader />
+        )}
         <div class={styles.detail}>
           <div class={styles.title}>{detail.value.title}</div>
           <div class={styles.who}>

+ 2 - 0
src/views/information/help-center/index.tsx

@@ -1,4 +1,5 @@
 import OEmpty from '@/components/o-empty'
+import OHeader from '@/components/o-header'
 import OSearch from '@/components/o-search'
 import OSticky from '@/components/o-sticky'
 import request from '@/helpers/request'
@@ -74,6 +75,7 @@ export default defineComponent({
     return () => (
       <div class={[styles.helpCenter, !form.listState.dataShow && 'emptyRootContainer']}>
         <OSticky position="top">
+          <OHeader border={false} />
           <OSearch onSearch={onSearch} />
         </OSticky>
 

+ 2 - 0
src/views/layout/auth.tsx

@@ -7,6 +7,7 @@ import { RouterView } from 'vue-router'
 import { Button, Icon } from 'vant'
 import request from '@/helpers/request'
 import OEmpty from '@/components/o-empty'
+import OHeader from '@/components/o-header'
 
 const browserInfo = browser()
 export default defineComponent({
@@ -96,6 +97,7 @@ export default defineComponent({
       <>
         {state.user.status === 'error' ? (
           <div class={styles.error}>
+            <OHeader />
             <OEmpty
               type="notFond"
               classImgSize="CERT"