列表

src/components/CustomNavbar/index.module.scss

@@ -3,48 +3,4 @@
   top: 0;
   z-index: 999;
   background-color: #ffffff;
-
-  .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

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

src/components/CustomerNavbarBack/index.module.scss

@@ -0,0 +1,50 @@
+.customerNavbarBack {
+  position: sticky;
+  top: 0;
+  z-index: 999;
+  background-color: #ffffff;
+
+  .container {
+    padding-left: 17px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  .line {
+    width: 1px;
+    height: 25px;
+    background-color: #0000000F;
+  }
+
+  .back {
+    width: 32px;
+    height: 32px;
+  }
+
+  .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/CustomerNavbarBack/index.tsx

@@ -0,0 +1,32 @@
+import { View, Image } from "@tarojs/components";
+import img from "@/config/images";
+import styles from "./index.module.scss";
+import { useGlobalState } from "@/store/global";
+import Taro from "@tarojs/taro";
+
+const ListHeader = () => {
+  const { statusNavbarHeightInfo } = useGlobalState();
+  const { statusBarHeight, navbarHeight, totalHeight } = statusNavbarHeightInfo;
+  const handleBack = () => {
+    Taro.navigateBack();
+  }
+
+  return (
+    <View
+      className={styles.customerNavbarBack}
+      style={{ height: `${totalHeight}px` }}
+    >
+      <View
+        className={styles.container}
+        style={{
+          height: `${navbarHeight}px`,
+          paddingTop: `${statusBarHeight}px`,
+        }}
+      >
+        {/* back */}
+        <Image src={img.ICON_LIST_SEARCH_BACK} className={styles.back} onClick={handleBack} />
+      </View>
+    </View>
+  );
+};
+export default ListHeader;

src/components/SearchBar/index.tsx

@@ -8,10 +8,12 @@ interface IProps {
   isSelect: boolean;
   filterCount: number;
   onChange: (value: string) => void;
+  value: string;
+  onInputClick: () => void;
 }
 
 const SearchBarComponent = (props: IProps) => {
-  const { handleFilterIcon, isSelect, filterCount, onChange } = props;
+  const { handleFilterIcon, isSelect, filterCount, onChange, value, onInputClick } = props;
 
   const handleChange = (value: string) => {
     onChange && onChange(value);
@@ -19,6 +21,7 @@ const SearchBarComponent = (props: IProps) => {
   return (
     <>
       <SearchBar
+        clearable={false}
         leftIn={
           <View className={styles.searchBarLeft}>
             <Image className={styles.searchIcon} src={img.ICON_SEARCH} />
@@ -43,6 +46,8 @@ const SearchBarComponent = (props: IProps) => {
         className={styles.searchBar}
         placeholder="搜索上海的球局和场地"
         onChange={handleChange}
+        value={value}
+        onInputClick={onInputClick}
       />
     </>
   );