列表搜索页面

src/pages/list/index.module.scss

@@ -1,10 +1,10 @@
 .listPage {
-  background-color: #fafafa;
+  background-color: #fefefe;
 
   .listTopSearchWrapper {
     padding: 0 15px;
     // position: sticky;
-    background: #fefefe;
+    // background: #fefefe;
     // z-index: 999;
   }
 

src/pages/list/index.tsx

@@ -12,6 +12,7 @@ import CustomerNavBar from "@/container/listCustomNavbar";
 import InputCustomerBar from "@/container/inputCustomerNavbar";
 import GuideBar from "@/components/GuideBar";
 import ListContainer from "@/container/listContainer";
+import DistanceQuickFilter from "@/components/DistanceQuickFilter";
 import img from "@/config/images";
 
 const ListPage = () => {
@@ -24,6 +25,7 @@ const ListPage = () => {
     isShowFilterPopup,
     error,
     matches,
+    recommendList,
     loading,
     fetchMatches,
     refreshMatches,
@@ -119,7 +121,7 @@ const ListPage = () => {
     Taro.navigateTo({
       url: "/pages/search/index",
     });
-  }
+  };
 
   return (
     <>
@@ -162,30 +164,24 @@ const ListPage = () => {
               />
             </View>
           )}
-          {/* 筛选 */}
-          <div className={styles.listTopFilterWrapper}>
-            {/* 全城筛选 */}
-            <CityFilter
-              options={distanceData}
-              value={distanceQuickFilter?.distance}
-              wrapperClassName={styles.menuFilter}
-              onChange={handleDistanceOrQuickChange}
-              name="distance"
-            />
-            {/* 智能排序 */}
-            <Menu
-              options={quickFilterData}
-              value={distanceQuickFilter?.quick}
-              onChange={handleDistanceOrQuickChange}
-              wrapperClassName={styles.menuFilter}
-              name="quick"
-            />
-          </div>
+        </View>
+        {/* 筛选 */}
+        <View className={styles.listTopFilterWrapper}>
+          <DistanceQuickFilter
+            cityOptions={distanceData}
+            quickOptions={quickFilterData}
+            onChange={handleDistanceOrQuickChange}
+            cityName="distance"
+            quickName="quick"
+            cityValue={distanceQuickFilter?.distance}
+            quickValue={distanceQuickFilter?.quick}
+          />
         </View>
 
         {/* 列表内容 */}
         <ListContainer
           data={matches}
+          recommendList={recommendList}
           loading={loading}
           error={error}
           reload={refreshMatches}

src/pages/search/index.config.ts

@@ -1,4 +1,3 @@
 export default definePageConfig({
-  navigationBarTitleText: '',
-  navigationStyle: 'custom',
+  navigationBarTitleText: ''
 })

src/pages/search/index.tsx

@@ -1,4 +1,3 @@
-import InputCustomerBar from "@/container/inputCustomerNavbar";
 import CustomerNavbarBack from "@/components/CustomerNavbarBack";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
@@ -18,7 +17,6 @@ const ListSearch = () => {
     searchSuggestion,
     suggestionList,
     isShowSuggestion,
-    isShowInputCustomerNavBar,
   } = useListState() || {};
 
   const ref = useRef<any>(null);
@@ -45,6 +43,10 @@ const ListSearch = () => {
     updateState({ searchValue: value });
     if (value) {
       searchSuggestion(value);
+    } else {
+      updateState({
+        isShowSuggestion: false,
+      });
     }
   };
 
@@ -85,11 +87,11 @@ const ListSearch = () => {
   /**
    * @description 点击搜索
    */
-  const handleSearch = () => { 
+  const handleSearch = () => {
     Taro.navigateTo({
       url: `/pages/searchResult/index`,
     });
-  }
+  };
 
   // 是否显示清空图标
   const isShowClearIcon = searchValue && searchValue?.length > 0;
@@ -100,11 +102,6 @@ const ListSearch = () => {
 
   return (
     <>
-      {!isShowInputCustomerNavBar ? (
-        <CustomerNavbarBack />
-      ) : (
-        <InputCustomerBar icon={img.ICON_LIST_INPUT_LOGO} />
-      )}
       <View className="listSearchContainer">
         {/* 搜索 */}
         <View className="topSearch">
@@ -128,7 +125,9 @@ const ListSearch = () => {
               />
             )}
             <View className="searchLine" />
-            <Text className="searchText" onClick={handleSearch}>搜索</Text>
+            <Text className="searchText" onClick={handleSearch}>
+              搜索
+            </Text>
           </View>
         </View>
         {/* 联想词 */}

src/pages/searchResult/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '搜索结果',
+  // navigationStyle: 'custom',
+})

src/pages/searchResult/index.scss

@@ -1,3 +1,18 @@
-.menuFilter {
-  color: red;
+.searchResultPage {
+  position: relative;
+
+  .searchResultFilterWrapper {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 5px 0px 10px 0px;
+    position: sticky;
+    top: -1px;
+    background-color: #fefefe;
+    z-index: 123;
+  }
+
+  .menuFilter {
+    padding: 0;
+  }
 }

src/pages/searchResult/index.tsx

@@ -1,11 +1,11 @@
 import { View } from "@tarojs/components";
-// import styles from "./index.scss";
-import CityFilter from "@/components/CityFilter";
-import Menu from "@/components/Menu";
 import { useListState } from "@/store/listStore";
+import { useGlobalState } from "@/store/global";
 import ListContainer from "@/container/listContainer";
 
 import "./index.scss";
+import DistanceQuickFilter from "@/components/DistanceQuickFilter";
+import { useEffect } from "react";
 
 const SearchResult = () => {
   const {
@@ -14,11 +14,21 @@ const SearchResult = () => {
     distanceQuickFilter,
     updateState,
     matches,
+    recommendList,
     loading,
     error,
     refreshMatches,
+    fetchMatches,
   } = useListState() || {};
 
+  const { statusNavbarHeightInfo } = useGlobalState() || {};
+  const { totalHeight } = statusNavbarHeightInfo || {}
+
+  useEffect(() => {
+    // 页面加载时获取数据
+    fetchMatches();
+  }, []);
+
   // 距离筛选
   const handleDistanceOrQuickChange = (name, value) => {
     updateState({
@@ -30,30 +40,26 @@ const SearchResult = () => {
   };
 
   return (
-    <View>
+    <View className="searchResultPage">
       {/* 筛选 */}
-      <View className='searchResultFilterWrapper'>
-        {/* 全城筛选 */}
-        <CityFilter
-          options={distanceData}
-          value={distanceQuickFilter?.distance}
-          wrapperClassName='menuFilter'
-          onChange={handleDistanceOrQuickChange}
-          name="distance"
-        />
-        {/* 智能排序 */}
-        <Menu
-          options={quickFilterData}
-          value={distanceQuickFilter?.quick}
-          onChange={handleDistanceOrQuickChange}
-          wrapperClassName='menuFilter'
-          name="quick"
-        />
+      <View className='searchResultFilterWrapper' style={{
+        // top: `${totalHeight}px`
+      }}>
+          <DistanceQuickFilter
+            cityOptions={distanceData}
+            quickOptions={quickFilterData}
+            onChange={handleDistanceOrQuickChange}
+            cityName="distance"
+            quickName="quick"
+            cityValue={distanceQuickFilter?.distance}
+            quickValue={distanceQuickFilter?.quick}
+          />
       </View>
 
       {/* 列表内容 */}
       <ListContainer
         data={matches}
+        recommendList={recommendList}
         loading={loading}
         error={error}
         reload={refreshMatches}