index.tsx 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130
  1. import AppContext from "@/context/appContext";
  2. import BottomBarContext from "@/context/bottomBarContext";
  3. import UserHelper from "@/helper/userHelper";
  4. import useStore from "@/hooks/useRedux";
  5. import RouteUtil from "@/utils/routeUtil";
  6. import { FixedView } from "@taroify/core";
  7. import { Image, View, ViewProps } from "@tarojs/components";
  8. import { pxTransform } from "@tarojs/taro";
  9. import classNames from "classnames";
  10. import { PropsWithChildren, useContext } from "react";
  11. import Flex from "../flex";
  12. import Label from "../label";
  13. import "./index.scss";
  14. interface ILayoutProps extends ViewProps {
  15. safe?: boolean;
  16. bottomBarIndex?: number;
  17. }
  18. const BottomNavBar = () => {
  19. const appContext = useContext(AppContext);
  20. const bottomBarContext = useContext(BottomBarContext);
  21. const menu = useStore((p) => p.tabMenu);
  22. return (
  23. <FixedView
  24. style={{
  25. height: pxTransform(104),
  26. paddingBottom: appContext.padding.bottom,
  27. zIndex: 110,
  28. background: "#fff",
  29. }}
  30. className="bottom-nav"
  31. placeholder
  32. position="bottom"
  33. >
  34. <Flex
  35. style={{ height: pxTransform(104) }}
  36. direction="row"
  37. alignItem="center"
  38. justifyContent="center"
  39. >
  40. {menu.map((p) => {
  41. let _index = ["home", "official_account", "user_center"].findIndex(
  42. (sp) => sp === p.code
  43. );
  44. return (
  45. <Flex
  46. key={p.code}
  47. onClick={() => {
  48. UserHelper.afterLogin({
  49. forceLogin: false,
  50. callback: async () => {
  51. if (
  52. ["home", "official_account", "user_center"].includes(
  53. p.code
  54. )
  55. ) {
  56. bottomBarContext.switchTo(_index as number);
  57. } else {
  58. RouteUtil.toWebViewPage({
  59. url: p.jumpTarget,
  60. });
  61. }
  62. },
  63. });
  64. return;
  65. }}
  66. flex={1}
  67. alignItem="center"
  68. justifyContent="center"
  69. >
  70. <Image
  71. className="bottom-nav-icon"
  72. src={_index === bottomBarContext?.index ? p.iconActive : p.icon}
  73. />
  74. <Label
  75. size="sm"
  76. type={
  77. _index === bottomBarContext?.index ? "active" : "secondary"
  78. }
  79. >
  80. {p.name}
  81. </Label>
  82. </Flex>
  83. );
  84. })}
  85. </Flex>
  86. </FixedView>
  87. );
  88. };
  89. const InternalLayout = (props: PropsWithChildren<ILayoutProps>) => {
  90. const { bottomBarIndex, safe = false, ...viewProps } = props;
  91. const appContext = useContext(AppContext);
  92. const bottomBarContext = useContext(BottomBarContext);
  93. const safeStyle: React.CSSProperties = {};
  94. if (safe) {
  95. safeStyle.paddingTop = appContext.padding.top;
  96. safeStyle.paddingBottom = appContext.padding.bottom; //(appContext.systemInfo?.screenHeight || 0) - (appContext.systemInfo?.safeArea?.bottom || 0);
  97. }
  98. return (
  99. <View
  100. className={classNames({
  101. "nav-bar-hide":
  102. (bottomBarIndex ?? false) === false
  103. ? false
  104. : bottomBarContext?.index !== bottomBarIndex,
  105. })}
  106. >
  107. <View
  108. {...viewProps}
  109. style={safeStyle}
  110. className={classNames({
  111. [viewProps.className || ""]: !!viewProps.className,
  112. })}
  113. >
  114. {props.children}
  115. </View>
  116. {props.bottomBarIndex !== undefined && <BottomNavBar />}
  117. </View>
  118. );
  119. };
  120. type InternalLayoutType = typeof InternalLayout;
  121. interface LayoutInterface extends InternalLayoutType {}
  122. const Layout = InternalLayout as LayoutInterface;
  123. export default Layout;