列表

src/container/inputCustomerNavbar/index.scss

@@ -0,0 +1,47 @@
+  .inputCustomerNavbarContainer {
+    padding-left: 17px;
+    display: flex;
+    gap: 8px;
+
+
+    .logo {
+      width: 28px;
+      height: 16px;
+    }
+
+    .icon16 {
+      width: 16px;
+      height: 16px;
+    }
+
+    .navContent {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      width: 73%;
+      height: max-content;
+      padding-top: 5px;
+    }
+
+    .searchContainer {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      gap: 5.85px;
+      padding: 7.8px;
+      border-radius: 30px;
+      border: 0.488px solid rgba(0, 0, 0, 0.06);
+      box-shadow: 0 3.902px 46.829px 0 rgba(0, 0, 0, 0.08);
+      height: 30px;
+      box-sizing: border-box;
+      font-size: 13.659px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 17.561px;
+      flex: 1;
+
+      .nut-input {
+        padding: 0;
+      }
+    }
+  }

src/container/inputCustomerNavbar/index.tsx

@@ -0,0 +1,67 @@
+import { View, Image } from "@tarojs/components";
+import img from "@/config/images";
+import { getCurrentLocation } from "@/utils/locationUtils";
+import "./index.scss";
+import { useEffect } from "react";
+import { useGlobalState } from "@/store/global";
+import { useListState } from "@/store/listStore";
+import CustomNavbar from "@/components/CustomNavbar";
+import { Input } from "@nutui/nutui-react-taro";
+
+interface IProps {
+  icon: string;
+}
+
+const ListHeader = (props: IProps) => {
+  const { icon } = props;
+  const { updateState, statusNavbarHeightInfo } = useGlobalState();
+  const { searchValue } = useListState();
+  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+
+  // 获取位置信息
+  const getCurrentLocal = () => {
+    updateState({
+      getLocationLoading: true,
+    });
+    getCurrentLocation().then((res) => {
+      updateState({
+        getLocationLoading: false,
+        location: res || {},
+      });
+    });
+  };
+  useEffect(() => {
+    getCurrentLocal();
+  }, []);
+
+  return (
+    <CustomNavbar>
+      <View
+        className="inputCustomerNavbarContainer"
+        style={{
+          height: `${navbarHeight}px`,
+          paddingTop: `${statusBarHeight}px`,
+        }}
+      >
+        <View className="navContent">
+          {/* logo */}
+          <Image src={icon} className="logo" />
+          {/* 搜索框 */}
+          <View className="searchContainer">
+            <Image
+              className="searchIcon icon16"
+              src={img.ICON_LIST_SEARCH_SEARCH}
+            />
+            <Input
+              // className="inputSearch"
+              placeholder="搜索上海的球局和场地"
+              clearable={false}
+              value={searchValue}
+            />
+          </View>
+        </View>
+      </View>
+    </CustomNavbar>
+  );
+};
+export default ListHeader;

src/container/listContainer/index.tsx

@@ -2,12 +2,9 @@ import { View } from "@tarojs/components";
 import ListCard from "@/components/ListCard";
 import ListLoadError from "@/components/ListLoadError";
 import ListCardSkeleton from "@/components/ListCardSkeleton";
-// import { useGlobalState } from "@/store/global";
 
 const ListContainer = (props) => {
   const { loading, data = [], error, reload } = props;
-  // const { statusNavbarHeightInfo } = useGlobalState() || {};
-  // const { totalHeight } = statusNavbarHeightInfo;
 
   const renderList = () => {
     if (loading && data.length > 0) {

src/container/listCustomNavbar/index.module.scss

@@ -0,0 +1,43 @@
+  .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/container/listCustomNavbar/index.tsx

@@ -0,0 +1,69 @@
+import { View, Text, Image } from "@tarojs/components";
+import img from "@/config/images";
+import { getCurrentLocation } from "@/utils/locationUtils";
+import styles from "./index.module.scss";
+import { useEffect } from "react";
+import { useGlobalState } from "@/store/global";
+import { useListState } from "@/store/listStore";
+import CustomNavbar from '@/components/CustomNavbar'
+
+const ListHeader = () => {
+  const {
+    updateState,
+    location,
+    getLocationText,
+    getLocationLoading,
+    statusNavbarHeightInfo,
+  } = useGlobalState();
+  const { gamesNum } = useListState();
+  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
+
+  // 获取位置信息
+  const getCurrentLocal = () => {
+    updateState({
+      getLocationLoading: true,
+    });
+    getCurrentLocation().then((res) => {
+      updateState({
+        getLocationLoading: false,
+        location: res || {},
+      });
+    });
+  };
+  useEffect(() => {
+    getCurrentLocal();
+  }, []);
+
+  const currentAddress = getLocationLoading
+    ? getLocationText
+    : location?.address;
+
+  return (
+    <CustomNavbar>
+      <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>
+    </CustomNavbar>
+  );
+};
+export default ListHeader;