feat: 将list相关的代码迁移到game_pages目录

2025-09-12 15:36:09 +08:00
parent 859ffec852
commit 7c16f8bcce
19 changed files with 40 additions and 40 deletions
--- a/src/game_pages/search/index.tsx
+++ b/src/game_pages/search/index.tsx
@@ -0,0 +1,208 @@
+// 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";
+import { useListState } from "@/store/listStore";
+import img from "@/config/images";
+import { withAuth } from "@/components";
+import "./index.scss";
+import Taro from "@tarojs/taro";
+
+const ListSearch = () => {
+  const {
+    searchValue,
+    updateState,
+    getSearchHistory,
+    searchHistory = [],
+    clearHistory,
+    searchSuggestion,
+    suggestionList,
+    isShowSuggestion,
+  } = useListState() || {};
+  const ref = useRef<any>(null);
+
+  useEffect(() => {
+    getSearchHistory();
+    return () => {
+      handleClear();
+    };
+  }, []);
+
+  useEffect(() => {
+    if (ref?.current) {
+      ref.current.focus();
+    }
+  }, [ref.current]);
+
+  const regex = useMemo(() => {
+    return new RegExp(searchValue, "gi");
+  }, [searchValue]);
+
+  // 是否显示清空图标
+  const isShowClearIcon = searchValue && searchValue?.length > 0;
+
+  // 是否显示搜索历史
+  const isShowHistory = searchHistory && searchHistory?.length > 0;
+
+  /**
+   * @description 输入
+   * @param value
+   */
+  const handleChange = (value: string) => {
+    updateState({ searchValue: value });
+    if (value) {
+      searchSuggestion(value);
+    } else {
+      updateState({
+        isShowSuggestion: false,
+      });
+    }
+  };
+
+  /**
+   * @description 点击清空输入内容
+   */
+  const handleClear = () => {
+    updateState({ searchValue: "", isShowSuggestion: false });
+  };
+
+  /**
+   * @description 点击历史搜索
+   * @param value
+   */
+  const handleHistoryClick = (item: { id: number; title: string }) => {
+    updateState({ searchValue: item?.title });
+    handleSearch(item?.title);
+  };
+
+  /**
+   * @description 清空历史搜索
+   */
+  const handleClearHistory = () => {
+    clearHistory();
+  };
+
+  /**
+   * @description 点击联想词
+   */
+  const handleSuggestionSearch = (val: string) => {
+    updateState({
+      searchValue: val,
+      isShowSuggestion: false,
+    });
+    handleSearch(val);
+  };
+
+  /**
+   * @description 点击搜索
+   */
+  const handleSearch = (val?: string) => {
+    if (!val) {
+      return;
+    }
+    Taro.navigateTo({
+      url: `/game_pages/searchResult/index`,
+    });
+  };
+
+  return (
+    <>
+      <View className="listSearchContainer">
+        {/* 搜索 */}
+        <View className="topSearch">
+          <Image className="searchIcon" src={img.ICON_LIST_SEARCH_SEARCH} />
+          <Input
+            placeholder="搜索上海的球局和场地"
+            value={searchValue}
+            defaultValue={searchValue}
+            onChange={handleChange}
+            onClear={handleClear}
+            autoFocus
+            clearable={false}
+            ref={ref}
+          />
+          <View className="searchRight">
+            {isShowClearIcon && (
+              <Image
+                className="clearIcon icon16"
+                src={img.ICON_LIST_SEARCH_CLEAR}
+                onClick={handleClear}
+              />
+            )}
+            <View className="searchLine" />
+            <Text className="searchText" onClick={() => handleSearch(searchValue)}>
+              搜索
+            </Text>
+          </View>
+        </View>
+        {/* 联想词 */}
+        {isShowSuggestion && (
+          <View className="searchSuggestion">
+            {(suggestionList || [])?.map((item) => {
+              // 替换匹配文本为高亮版本
+              const highlightedText = item.replace(regex, (match) => {
+                // 如果匹配不到，则返回原文本
+                if (!match) return match;
+                return `<Text class="highlight">${match}</Text>`;
+              });
+              return (
+                <View
+                  className="searchSuggestionItem"
+                  onClick={() => handleSuggestionSearch(item)}
+                >
+                  <View className="searchSuggestionItemLeft">
+                    <Image
+                      className="icon16"
+                      src={img.ICON_LIST_SEARCH_SEARCH}
+                    />
+                    <Text
+                      dangerouslySetInnerHTML={{ __html: highlightedText }}
+                    ></Text>
+                  </View>
+                  <Image
+                    className="icon16"
+                    src={img.ICON_LIST_SEARCH_SUGGESTION}
+                  />
+                </View>
+              );
+            })}
+          </View>
+        )}
+        {/* 历史搜索 */}
+        {!isShowClearIcon && (
+          <View className="historySearch">
+            <View className="historySearchTitleWrapper">
+              <View className="historySearchTitle">历史搜索</View>
+              <View className="historySearchClear" onClick={handleClearHistory}>
+                <Text>清空</Text>
+                <Image
+                  className="clearIcon icon16"
+                  src={img.ICON_LIST_SEARCH_CLEAR_HISTORY}
+                />
+              </View>
+            </View>
+
+            {isShowHistory && (
+              <View className="historySearchList">
+                {(searchHistory || [])?.map((item) => {
+                  if (!item?.title) {
+                    return null;
+                  }
+                  return (
+                    <Text
+                      className="historySearchItem"
+                      onClick={() => handleHistoryClick(item)}
+                    >
+                      {item?.title}
+                    </Text>
+                  );
+                })}
+              </View>
+            )}
+          </View>
+        )}
+      </View>
+    </>
+  );
+};
+export default withAuth(ListSearch);