自定列表导航栏

src/components/CustomNavbar/index.module.scss

@@ -0,0 +1,47 @@
+.customerNavbar {
+  // background-color: red;
+
+  .container {
+    padding-left: 17px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .line {
+    width: 1px;
+    height: 25px;
+    background-color: #0000000F;
+  }
+
+  .logo {
+    width: 60px;
+    height: 34px;
+  }
+
+  .change {
+    width: 12px;
+    height: 12px;
+  }
+
+  .cityWrapper {
+    line-height: 20px;
+  }
+
+  .city {
+    font-weight: 600;
+    font-size: 13px;
+    line-height: 20px;
+  }
+
+  .infoWrapper {
+    line-height: 12px;
+  }
+
+  .info {
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    color: #3C3C4399;
+  }
+}

src/components/CustomNavbar/index.tsx

@@ -0,0 +1,73 @@
+import { View, Text, Image } from "@tarojs/components";
+import img from "@/config/images";
+import { getCurrentLocation } from "@/utils/locationUtils";
+import { getNavbarHeight } from "@/utils/getNavbarHeight";
+import styles from "./index.module.scss";
+import { useEffect } from "react";
+import { useGlobalState } from "@/store/global";
+import { useListState } from "@/store/listStore";
+
+const ListHeader = () => {
+  const { statusBarHeight, navbarHeight, totalHeight } = getNavbarHeight();
+  const {
+    updateState,
+    location,
+    getLocationText,
+    getLocationLoading,
+    getNavbarHeightInfo,
+  } = useGlobalState();
+  const { gamesNum } = useListState();
+
+  // 获取位置信息
+  const getCurrentLocal = () => {
+    updateState({
+      getLocationLoading: true,
+    });
+    getCurrentLocation().then((res) => {
+      updateState({
+        getLocationLoading: false,
+        location: res || {},
+      });
+    });
+  };
+  useEffect(() => {
+    getNavbarHeightInfo();
+    getCurrentLocal();
+  }, []);
+
+  const currentAddress = getLocationLoading
+    ? getLocationText
+    : location?.address;
+
+  return (
+    <View
+      className={styles.customerNavbar}
+      style={{ height: `${totalHeight}px` }}
+    >
+      <View
+        className={styles.container}
+        style={{
+          height: `${navbarHeight}px`,
+          paddingTop: `${statusBarHeight}px`,
+        }}
+      >
+        {/* logo */}
+        <Image src={img.ICON_LOGO} className={styles.logo} />
+        <View className={styles.line} />
+        <View className={styles.content}>
+          <View className={styles.cityWrapper}>
+            {/* 位置 */}
+            <Text className={styles.city}>{currentAddress}</Text>
+            {!getLocationLoading && (
+              <Image src={img.ICON_CHANGE} className={styles.change} />
+            )}
+          </View>
+          <View className={styles.infoWrapper}>
+            <Text className={styles.info}>附近${gamesNum}场球局</Text>
+          </View>
+        </View>
+      </View>
+    </View>
+  );
+};
+export default ListHeader;