列表

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;