列表联调

2025-09-07 18:54:36 +08:00
parent 2d0d728969
commit 6feb7057af
28 changed files with 1225 additions and 740 deletions
--- a/src/pages/list/index.module.scss
+++ b/src/pages/list/index.module.scss
@@ -23,4 +23,54 @@
  .menuFilter {
    padding: 0;
  }
+}
+
+.listNavWrapper {
+   position: relative;
+}
+
+.toggleElement {
+  /* 绝对定位使两个元素重叠 */
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  
+  /* 过渡动画设置，实现平滑切换 */
+  transition: opacity 0.5s ease, transform 0.5s ease;
+  
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px;
+  border-radius: 8px;
+}
+
+/* 第一个元素样式 */
+.firstElement {
+  background-color: #4a90e2;
+  color: white;
+}
+
+/* 第二个元素样式 */
+.secondElement {
+  background-color: #5cb85c;
+  color: white;
+  /* 初始状态：透明且稍微偏移 */
+  opacity: 0;
+  transform: translateY(20px);
+}
+
+/* 可见状态 */
+.visible {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+/* 隐藏状态 */
+.hidden {
+  opacity: 0;
+  transform: translateY(20px);
+  pointer-events: none; /* 隐藏时不响应鼠标事件 */
 }
--- a/src/pages/list/index.tsx
+++ b/src/pages/list/index.tsx
@@ -7,17 +7,15 @@ import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
 import { View } from "@tarojs/components";
 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 = () => {
  // 从 store 获取数据和方法
  const store = useListStore() || {};

-  const { statusNavbarHeightInfo, location } = useGlobalState() || {};
+  const { statusNavbarHeightInfo, location = {} } = useGlobalState() || {};
  const { totalHeight } = statusNavbarHeightInfo || {};
  const {
    isShowFilterPopup,
@@ -25,8 +23,7 @@ const ListPage = () => {
    matches,
    recommendList,
    loading,
-    fetchMatches,
-    refreshMatches,
+    getMatchesData,
    updateState,
    filterCount,
    updateFilterOptions, // 更新筛选条件
@@ -38,50 +35,66 @@ const ListPage = () => {
    isScrollTop,
    searchValue,
    isShowInputCustomerNavBar,
+    initialFilterSearch,
+    loadMoreMatches,
+    dateRangeOptions
  } = store;

  usePageScroll((res) => {
-    if (res?.scrollTop >= totalHeight && !isScrollTop) {
-      !isShowInputCustomerNavBar && updateState({ isShowInputCustomerNavBar: true });
+    if (res?.scrollTop >= totalHeight) {
+      !isShowInputCustomerNavBar &&
+        updateState({ isShowInputCustomerNavBar: true });
    } else {
-      isShowInputCustomerNavBar && updateState({ isShowInputCustomerNavBar: false });
+      isShowInputCustomerNavBar &&
+        updateState({ isShowInputCustomerNavBar: false });
    }
  });

  useEffect(() => {
-    // 页面加载时获取数据
-    fetchMatches();
-    // 保存位置
-    updateState({ location });
-  }, []);
+    if (location?.address) {
+      // 保存位置
+      updateState({ location });
+      // 页面加载时获取数据
+      getMatchesData();
+    }
+  }, [location]);
+
+  const refreshMatches = () => {
+    initialFilterSearch();
+  };
+
+  // const getLoadMoreMatches = () => {
+  //   loadMoreMatches()
+  // }

  // 下拉刷新处理函数 - 使用Taro生命周期钩子
  Taro.usePullDownRefresh(() => {
-    console.log("触发下拉刷新");
+    console.log("===触发下拉刷新");
+    clearFilterOptions()

    // 调用 store 的刷新方法
-    refreshMatches()
-      .then(() => {
-        // 刷新完成后停止下拉刷新动画
-        Taro.stopPullDownRefresh();
+    // refreshMatches()
+    //   .then(() => {
+    //     // 刷新完成后停止下拉刷新动画
+    //     Taro.stopPullDownRefresh();

-        // 显示刷新成功提示
-        Taro.showToast({
-          title: "刷新成功",
-          icon: "success",
-          duration: 1500,
-        });
-      })
-      .catch(() => {
-        // 刷新失败时也停止动画
-        Taro.stopPullDownRefresh();
+    //     // 显示刷新成功提示
+    //     Taro.showToast({
+    //       title: "刷新成功",
+    //       icon: "success",
+    //       duration: 1500,
+    //     });
+    //   })
+    //   .catch(() => {
+    //     // 刷新失败时也停止动画
+    //     Taro.stopPullDownRefresh();

-        Taro.showToast({
-          title: "刷新失败",
-          icon: "error",
-          duration: 1500,
-        });
-      });
+    //     Taro.showToast({
+    //       title: "刷新失败",
+    //       icon: "error",
+    //       duration: 1500,
+    //     });
+    //   });
  });

  const toggleShowPopup = () => {
@@ -115,21 +128,14 @@ const ListPage = () => {
  };

  return (
-    <>
-      {!isShowInputCustomerNavBar ? (
-        <CustomerNavBar />
-      ) : (
-        <InputCustomerBar icon={img.ICON_LIST_INPUT_LOGO} />
-      )}
-
+    <View>
+      {/* 自定义导航 */}
+      <CustomerNavBar />
      <View className={styles.listPage}>
        <View
          className={`${styles.listTopSearchWrapper} ${
            isScrollTop ? styles.isScroll : ""
          }`}
-          // style={{
-          //   top: statusNavbarHeightInfo?.totalHeight,
-          // }}
        >
          <SearchBar
            handleFilterIcon={toggleShowPopup}
@@ -176,11 +182,12 @@ const ListPage = () => {
          loading={loading}
          error={error}
          reload={refreshMatches}
+          loadMoreMatches={loadMoreMatches}
        />
      </View>

      <GuideBar currentPage="list" />
-    </>
+    </View>
  );
 };

--- a/src/pages/search/index.scss
+++ b/src/pages/search/index.scss
@@ -1,5 +1,6 @@
 .listSearchContainer {
  padding: 0 15px;
+  padding-top: 16px;

  .icon16 {
    width: 16px;
--- a/src/pages/search/index.tsx
+++ b/src/pages/search/index.tsx
@@ -1,4 +1,4 @@
-import CustomerNavbarBack from "@/components/CustomerNavbarBack";
+// import CustomerNavbarBack from "@/components/CustomerNavbarBack";
 import { View, Image, Text } from "@tarojs/components";
 import { Input } from "@nutui/nutui-react-taro";
 import { useEffect, useMemo, useRef } from "react";
@@ -18,11 +18,13 @@ const ListSearch = () => {
    suggestionList,
    isShowSuggestion,
  } = useListState() || {};
-
  const ref = useRef<any>(null);

  useEffect(() => {
    getSearchHistory();
+    return () => {
+      handleClear();
+    };
  }, []);

  useEffect(() => {
@@ -35,6 +37,12 @@ const ListSearch = () => {
    return new RegExp(searchValue, "gi");
  }, [searchValue]);

+  // 是否显示清空图标
+  const isShowClearIcon = searchValue && searchValue?.length > 0;
+
+  // 是否显示搜索历史
+  const isShowHistory = searchHistory && searchHistory?.length > 0;
+
  /**
   * @description 输入
   * @param value
@@ -54,16 +62,16 @@ const ListSearch = () => {
   * @description 点击清空输入内容
   */
  const handleClear = () => {
-    updateState({ searchValue: "" });
+    updateState({ searchValue: "", isShowSuggestion: false });
  };

  /**
   * @description 点击历史搜索
   * @param value
   */
-  const handleHistoryClick = (value: string) => {
-    updateState({ searchValue: value });
-    handleSearch();
+  const handleHistoryClick = (item: { id: number; title: string }) => {
+    updateState({ searchValue: item?.title });
+    handleSearch(item?.title);
  };

  /**
@@ -81,25 +89,21 @@ const ListSearch = () => {
      searchValue: val,
      isShowSuggestion: false,
    });
-    handleSearch();
+    handleSearch(val);
  };

  /**
   * @description 点击搜索
   */
-  const handleSearch = () => {
+  const handleSearch = (val?: string) => {
+    if (!val) {
+      return;
+    }
    Taro.navigateTo({
      url: `/pages/searchResult/index`,
    });
  };

-  // 是否显示清空图标
-  const isShowClearIcon = searchValue && searchValue?.length > 0;
-
-  // 是否显示搜索历史
-  const isShowHistory =
-    !isShowClearIcon && searchHistory && searchHistory?.length > 0;
-
  return (
    <>
      <View className="listSearchContainer">
@@ -125,7 +129,7 @@ const ListSearch = () => {
              />
            )}
            <View className="searchLine" />
-            <Text className="searchText" onClick={handleSearch}>
+            <Text className="searchText" onClick={() => handleSearch(searchValue)}>
              搜索
            </Text>
          </View>
@@ -180,12 +184,15 @@ const ListSearch = () => {
            {isShowHistory && (
              <View className="historySearchList">
                {(searchHistory || [])?.map((item) => {
+                  if (!item?.title) {
+                    return null;
+                  }
                  return (
                    <Text
                      className="historySearchItem"
                      onClick={() => handleHistoryClick(item)}
                    >
-                      {item}
+                      {item?.title}
                    </Text>
                  );
                })}
--- a/src/pages/searchResult/index.config.ts
+++ b/src/pages/searchResult/index.config.ts
@@ -1,4 +1,4 @@
 export default definePageConfig({
  navigationBarTitleText: '搜索结果',
-  // navigationStyle: 'custom',
+  navigationStyle: 'custom',
 })
--- a/src/pages/searchResult/index.scss
+++ b/src/pages/searchResult/index.scss
@@ -2,6 +2,7 @@
  position: relative;

  .searchResultFilterWrapper {
+    position: sticky;
    display: flex;
    align-items: center;
    gap: 5px;
--- a/src/pages/searchResult/index.tsx
+++ b/src/pages/searchResult/index.tsx
@@ -1,24 +1,24 @@
 import { View, Image, Text } from "@tarojs/components";
-import { useSearchResultState } from "@/store/searchResultStore";
+// import { useSearchResultState } from "@/store/searchResultStore";
+import { useListStore } from "@/store/listStore";
 import { useGlobalState } from "@/store/global";
 import ListContainer from "@/container/listContainer";
 import img from "@/config/images";
-
-import "./index.scss";
+import CustomerNavBar from "@/container/listCustomNavbar";
 import DistanceQuickFilter from "@/components/DistanceQuickFilter";
 import { useEffect } from "react";
 import FilterPopup from "@/components/FilterPopup";
+import "./index.scss";
+import Taro from "@tarojs/taro";

 const SearchResult = () => {
  const {
    isShowFilterPopup,
    error,
    distanceQuickFilter,
-    matches,
+    searchResultData,
    recommendList,
    loading,
-    fetchMatches,
-    refreshMatches,
    updateState,
    filterCount,
    updateFilterOptions, // 更新筛选条件
@@ -26,14 +26,29 @@ const SearchResult = () => {
    clearFilterOptions,
    distanceData,
    quickFilterData,
-  } = useSearchResultState() || {};
+    loadMoreMatches,
+    getMatchesData
+  } = useListStore() || {};
  const { statusNavbarHeightInfo } = useGlobalState() || {};
  const { totalHeight } = statusNavbarHeightInfo || {};
  const isSelect = filterCount > 0;

  useEffect(() => {
-    // 页面加载时获取数据
-    fetchMatches();
+    const pages = Taro.getCurrentPages()
+    const currentPage = pages?.[pages.length - 1];
+    updateState({currentPage, isSearchResult: true})
+    // if (location?.address) {
+      // 保存位置
+      // updateState({ location });
+      // 页面加载时获取数据
+      console.log('===搜索结果页===')
+      getMatchesData();
+    // }
+
+    return () => {
+      console.log('===搜索结果组件卸载')
+      updateState({currentPage: '', isSearchResult: false})
+    }
  }, []);

  /**
@@ -58,60 +73,81 @@ const SearchResult = () => {
    });
  };

+  const refreshMatches = () => {
+    getMatchesData();
+  };
+
+  const handleLeftIconClick = () => {
+    Taro.navigateBack()
+  }
+
  return (
    <View className="searchResultPage">
+      {/* 自定义导航 */}
+      <CustomerNavBar
+        config={{
+          showInput: true,
+          inputLeftIcon: img.ICON_LIST_SEARCH_BACK,
+          leftIconClick: handleLeftIconClick
+        }}
+      />
      {/* 筛选 */}
      <View
        className="searchResultFilterWrapper"
        style={
          {
-            // top: `${totalHeight}px`
+            top: `${totalHeight}px`
          }
        }
      >
        <DistanceQuickFilter
-            cityOptions={distanceData}
-            quickOptions={quickFilterData}
-            onChange={handleDistanceOrQuickChange}
-            cityName="distance"
-            quickName="quick"
-            cityValue={distanceQuickFilter?.distance}
-            quickValue={distanceQuickFilter?.quick}
-          />
+          cityOptions={distanceData}
+          quickOptions={quickFilterData}
+          onChange={handleDistanceOrQuickChange}
+          cityName="distance"
+          quickName="quick"
+          cityValue={distanceQuickFilter?.distance}
+          quickValue={distanceQuickFilter?.quick}
+        />
        {/* 筛选 icon */}
-        <View className={`filterIconWrapper ${isSelect && 'active'}`} onClick={toggleShowPopup}>
+        <View
+          className={`filterIconWrapper ${isSelect && "active"}`}
+          onClick={toggleShowPopup}
+        >
          <Image
            src={isSelect ? img.ICON_FILTER_SELECTED : img.ICON_FILTER}
-            className={`filterIcon ${isSelect && 'active'}`}
+            className={`filterIcon ${isSelect && "active"}`}
          />
          {isSelect && <Text className="filterCount">{filterCount}</Text>}
        </View>
        {/* 筛选弹框 */}
        {/* 综合筛选 */}
        {isShowFilterPopup && (
-            <View>
-              <FilterPopup
-                loading={loading}
-                onCancel={toggleShowPopup}
-                onConfirm={toggleShowPopup}
-                onChange={handleUpdateFilterOptions}
-                filterOptions={filterOptions}
-                onClear={clearFilterOptions}
-                visible={isShowFilterPopup}
-                onClose={toggleShowPopup}
-                statusNavbarHeigh={0}
-              />
-            </View>
-          )}
+          <View>
+            <FilterPopup
+              loading={loading}
+              onCancel={toggleShowPopup}
+              onConfirm={toggleShowPopup}
+              onChange={handleUpdateFilterOptions}
+              filterOptions={filterOptions}
+              onClear={clearFilterOptions}
+              visible={isShowFilterPopup}
+              onClose={toggleShowPopup}
+              // statusNavbarHeigh={0}
+              statusNavbarHeigh={statusNavbarHeightInfo?.totalHeight}
+            />
+          </View>
+        )}
      </View>

      {/* 列表内容 */}
      <ListContainer
-        data={matches}
+        data={searchResultData}
        recommendList={recommendList}
        loading={loading}
        error={error}
        reload={refreshMatches}
+        loadMoreMatches={loadMoreMatches}
      />
    </View>
  );