列表

src/container/inputCustomerNavbar/index.scss

@@ -1,6 +1,6 @@
   .inputCustomerNavbarContainer {
-    padding-left: 17px;
     display: flex;
+    align-items: center;
     gap: 8px;
 
 
@@ -15,6 +15,7 @@
     }
 
     .navContent {
+      padding-left: 17px;
       display: flex;
       align-items: center;
       gap: 4px;

src/container/inputCustomerNavbar/index.tsx

@@ -1,8 +1,6 @@
 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";
@@ -15,25 +13,9 @@ interface IProps {
 
 const ListHeader = (props: IProps) => {
   const { icon } = props;
-  const { updateState, statusNavbarHeightInfo } = useGlobalState();
+  const { statusNavbarHeightInfo } = useGlobalState();
   const { searchValue } = useListState();
-  const { statusBarHeight, navbarHeight } = statusNavbarHeightInfo;
-
-  // 获取位置信息
-  // const getCurrentLocal = () => {
-  //   updateState({
-  //     getLocationLoading: true,
-  //   });
-  //   getCurrentLocation().then((res) => {
-  //     updateState({
-  //       getLocationLoading: false,
-  //       location: res || {},
-  //     });
-  //   });
-  // };
-  // useEffect(() => {
-  //   getCurrentLocal();
-  // }, []);
+  const { statusBarHeight, navBarHeight } = statusNavbarHeightInfo;
 
   const handleInputClick = () => {
     Taro.navigateTo({
@@ -46,7 +28,7 @@ const ListHeader = (props: IProps) => {
       <View
         className="inputCustomerNavbarContainer"
         style={{
-          height: `${navbarHeight}px`,
+          height: `${navBarHeight}px`,
           paddingTop: `${statusBarHeight}px`,
         }}
       >

src/container/listContainer/index.scss

@@ -5,6 +5,7 @@
   flex-direction: column;
   gap: 5px;
   padding-bottom: 34px;
+  min-height: 100vh;
 
   .recommendTextWrapper {
     display: flex;

src/container/listCustomNavbar/index.scss

@@ -3,6 +3,9 @@
 }
 
 .listNavContainer {
+  display: flex;
+  align-items: center;
+
   .listNavLine {
     width: 1px;
     height: 25px;
@@ -51,6 +54,7 @@
 .inputCustomerNavbarContainer {
   padding-left: 17px;
   display: flex;
+  align-items: center;
   gap: 8px;
 
   .logo {
@@ -99,6 +103,7 @@
 
 .inputCustomerNavbarShowInput {
   padding-left: 10px;
+
   .logo {
     width: 32px;
     height: 32px;
@@ -117,27 +122,26 @@
   will-change: opacity, transform;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
-  
+
   /* 优化过渡动画，使用更平滑的缓动函数和更短的动画时间 */
-  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
-              transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+  transition: opacity 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
+    transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
 /* 第一个元素样式 */
-.firstElement {
-}
+.firstElement {}
 
 /* 第二个元素样式 */
 .secondElement {
   /* 初始状态：透明且稍微偏移 */
   opacity: 0;
-  transform: translateY(5px);
+  transform: translateY(-5px);
 }
 
 /* 隐藏状态 */
 .hidden {
   opacity: 0;
-  transform: translateY(5px);
+  transform: translateY(-5px);
 }
 
 /* 可见状态 */

src/container/listCustomNavbar/index.tsx

@@ -7,14 +7,13 @@ import CustomNavbar from "@/components/CustomNavbar";
 import { Input } from "@nutui/nutui-react-taro";
 import Taro from "@tarojs/taro";
 import "./index.scss";
-import { useMemo } from "react";
 
 interface IProps {
   config?: {
     showInput: boolean;
-    inputLeftIcon: string;
+    inputLeftIcon?: string;
     iconPath?: string;
-    leftIconClick: () => void;
+    leftIconClick?: () => void;
   };
 }
 
@@ -29,10 +28,12 @@ const ListHeader = (props: IProps) => {
     getLocationLoading,
     statusNavbarHeightInfo,
   } = useGlobalState();
-  const { gamesNum, searchValue, isShowInputCustomerNavBar } = useListState();
-  const { navbarHeight } = statusNavbarHeightInfo;
+  const { gamesNum, searchValue } = useListState();
+  const { navBarHeight } = statusNavbarHeightInfo;
 
-  const { city,district } = useUserInfo()
+  const userInfo = useUserInfo()
+  const city = (userInfo as any)?.city || ''
+  const district = (userInfo as any)?.district || ''
 
   console.log("useUserInfo",city,district )
 
@@ -67,23 +68,17 @@ const ListHeader = (props: IProps) => {
   };
 
   const navbarStyle = {
-    height: `${navbarHeight}px`,
-    paddingTop: `4px`,
+    height: `${navBarHeight}px`,
   };
 
-  const showInputNavBar = useMemo(() => {
-    return isShowInputCustomerNavBar || showInput;
-  }, [isShowInputCustomerNavBar, showInput]);
-
-  console.log("===showInputNavBar",showInputNavBar)
 
   return (
     <CustomNavbar>
       <View className="listNavWrapper">
         {/* 首页logo 导航*/}
         <View
-          className={`listNavContainer toggleElement firstElement hidden ${(!showInputNavBar && !showInput) && "visible"
-            }`}
+          className={`listNavContainer toggleElement firstElement hidden 
+            ${!showInput ? "visible" : ""}`}
           style={navbarStyle}
         >
           <View className="listNavContentWrapper">
@@ -110,8 +105,8 @@ const ListHeader = (props: IProps) => {
         </View>
         {/* 搜索导航 */}
         <View
-          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${(showInputNavBar || showInput) && "visible"
-            } ${showInput && "inputCustomerNavbarShowInput"}`}
+          className={`inputCustomerNavbarContainer toggleElement secondElement hidden ${showInput && "visible"
+            } ${showInput ? "inputCustomerNavbarShowInput" : ""}`}
           style={navbarStyle}
         >
           <View className="navContent">
@@ -128,8 +123,9 @@ const ListHeader = (props: IProps) => {
                 src={img.ICON_LIST_SEARCH_SEARCH}
               />
               <Input
-                placeholder="搜索上海的球局和场地"
-                clearable={false}
+                placeholder="搜索上球局和场地"
+                // clearable={false}
+                disabled
                 value={searchValue}
                 onClick={handleInputClick}
               />