diff --git a/src/app.tsx b/src/app.tsx index 61fca2e..fd72db5 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -39,13 +39,18 @@ function App(props) { }) Taro.getSystemInfo({ - success(res) { + success({statusBarHeight = 0, screenWidth, screenHeight, windowHeight, safeArea}) { + const isIos = Taro.getSystemInfoSync().platform === 'ios'; + const {top, height} = Taro.getMenuButtonBoundingClientRect() + const textBarHeight = (top - statusBarHeight) * 2 + height Taro.getApp().globalData = { - statusBarHeight: res.statusBarHeight || 0, - screenWidth: res.screenWidth, - screenHeight: res.screenHeight, - windowHeight: res.windowHeight, - safeArea: res.safeArea, + statusBarHeight, + screenWidth, + screenHeight, + windowHeight, + safeArea, + isIos, + textBarHeight } } }) diff --git a/src/components/navigationBar/navigationBar.module.scss b/src/components/navigationBar/navigationBar.module.scss new file mode 100644 index 0000000..b651df6 --- /dev/null +++ b/src/components/navigationBar/navigationBar.module.scss @@ -0,0 +1,31 @@ +.navigation { + position: sticky; + top: 0; + left: 0; + width: 750rpx; + padding-left: 20rpx; + z-index: 99999999999; + overflow: hidden; + background: #fff; +} + +.leftNode { + position: absolute; + display: flex; + align-items: center; +} + +.text { + position: absolute; + left: 0; + right: 0; + margin: auto; + display: flex; + justify-content: center; + align-items: center; +} + +.arrow { + width: 32px; + height: 32px; +} diff --git a/src/components/navigationBar/navigationBar.tsx b/src/components/navigationBar/navigationBar.tsx new file mode 100644 index 0000000..15ced92 --- /dev/null +++ b/src/components/navigationBar/navigationBar.tsx @@ -0,0 +1,51 @@ +import {Image, View} from "@tarojs/components"; +import React, {FC, useMemo} from "react"; +import styles from './navigationBar.module.scss' +import Taro from "@tarojs/taro"; +import leftArrow from '@/static/img/leftArrow.png' + +interface Props { + // 文本 + text?: string | JSX.Element + children?: JSX.Element + // 左边节点 + leftNode?: string | JSX.Element + // 字体颜色 + color?: string + // 背景颜色 + backgroundColor?: string + // 取消返回按钮 + cancelBack?: boolean + // 跟随页面滚动 + inherit?: boolean + className?: string +} + +const NavigationBar: FC = (props) => { + const globalData = Taro.getApp().globalData + const navigationBarStyle = useMemo((): React.CSSProperties => ({ + background: props.backgroundColor, + position: props.inherit ? 'inherit' : "sticky", + paddingTop: globalData.statusBarHeight + 'px', + height: globalData.textBarHeight + 'px', + }), [props]) + + + const navigationTextStyle = useMemo((): React.CSSProperties => ({ + color: props.color, + height: globalData.textBarHeight + 'px', + }), [props]) + + + return ( + + + {!props.cancelBack && } + {props.leftNode} + + {props.children || props.text} + + ) +} + +export default NavigationBar diff --git a/src/pages/home/home.config.ts b/src/pages/home/home.config.ts index 6211ef6..595f67a 100644 --- a/src/pages/home/home.config.ts +++ b/src/pages/home/home.config.ts @@ -2,6 +2,6 @@ export default definePageConfig({ navigationBarTitleText: '康一诺', navigationStyle: 'custom', navigationBarBackgroundColor: '#92ecc5', - navigationBarTextStyle: 'white', + // navigationBarTextStyle: 'white', onReachBottomDistance: 50 }) diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss index 87195f0..df38b0a 100644 --- a/src/pages/home/home.module.scss +++ b/src/pages/home/home.module.scss @@ -16,14 +16,7 @@ } .header { - position: fixed; - top: 0; - left: 0; - right: 0; - width: 100%; - padding-left: 20rpx; - z-index: 99999999999; - overflow: hidden; + margin-bottom: 20rpx; &:after { min-height: 100vh; @@ -45,7 +38,6 @@ min-height: 90vh; box-sizing: border-box; width: 750rpx; - overflow: hidden; &:after { position: absolute; @@ -106,7 +98,20 @@ background: #fff; padding: 30rpx 0 30rpx 30rpx; margin-bottom: 40rpx; - border-radius: 30rpx; + border-radius: 20rpx; + position: relative; + overflow: hidden; + + &:after { + content: ''; + display: block; + position: absolute; + right: 0; + top: 0; + bottom: 0; + width: 40rpx; + background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #FFFFFF 100%); + } } .featureTitle { diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx index b84caf3..b05c818 100644 --- a/src/pages/home/home.tsx +++ b/src/pages/home/home.tsx @@ -11,15 +11,13 @@ import Taro from "@tarojs/taro"; import {HomeApi, HomeData} from "@/api"; import logo from '@/static/img/logo.png' import Spin from "@/components/spinner"; +import NavigationBar from "@/components/navigationBar/navigationBar"; const Home: FC = () => { - const globalData = Taro.getApp().globalData - const {bottom, top} = Taro.getMenuButtonBoundingClientRect() const {token} = Profile.useContainer() const [data, setData] = useState(null) const [enable, setEnable] = useState(true) - const titleBarHeight = bottom + top - (globalData.statusBarHeight * 2) function unLogin() { Taro.clearStorage() @@ -32,35 +30,32 @@ const Home: FC = () => { }) setTimeout(() => { setEnable(false) - }, 300) + }, 600) }) return ( - - - - + <> + } cancelBack/> + + + + + + + {data && } + { + !token && + 登录后享受更多服务~ + 立即登录 + + } - - - - - {data && } - { - !token && - 登录后享受更多服务~ - 立即登录 - - } - + ) } diff --git a/src/pages/my/my.tsx b/src/pages/my/my.tsx index 2b450f9..76d986b 100644 --- a/src/pages/my/my.tsx +++ b/src/pages/my/my.tsx @@ -13,34 +13,34 @@ import {userApi} from "@/api"; const My: FC = () => { const globalData = Taro.getApp().globalData - const {token,company,setCompany} = Profile.useContainer() - const [companyShow,setCompanyShow] = useState(false) - const [companyList,setCompanyList] = useState([]) + const {token, company, setCompany} = Profile.useContainer() + const [companyShow, setCompanyShow] = useState(false) + const [companyList, setCompanyList] = useState([]) Taro.useDidShow(() => { - try { - userApi.companyList().then(res => { - setCompanyList(res as Company[]) - }) - } catch (e) { - } + try { + userApi.companyList().then(res => { + setCompanyList(res as Company[]) + }) + } catch (e) { + } }) return ( - { !token ? - - : - <> -
{setCompanyShow(true)}}/> -