diff --git a/src/assets/css/pages/tools/store.scss b/src/assets/css/pages/tools/store.scss index eccb0d2..6b5789e 100644 --- a/src/assets/css/pages/tools/store.scss +++ b/src/assets/css/pages/tools/store.scss @@ -1,11 +1,25 @@ @use '@/assets/css/constants' as constants; [data-component=tools-store] { + .search { + display: flex; + position: sticky; + width: 100%; + margin-top: 20px; + top: 20px; + z-index: 10; + justify-content: center; + + >* { + width: 80%; + } + } + .root-content { padding: 30px; gap: 20px; flex-wrap: wrap; - justify-content: flex-start; + justify-content: center; > .card-box { width: 180px; diff --git a/src/pages/Tools/Store.tsx b/src/pages/Tools/Store.tsx index 6683e48..38a6a85 100644 --- a/src/pages/Tools/Store.tsx +++ b/src/pages/Tools/Store.tsx @@ -141,24 +141,39 @@ const Store = () => { const [hasNextPage, setHasNextPage] = useState(true) const [toolData, setToolData] = useState([]) - const getTool = (page: number) => { + const handleOnSearch = (value: string) => { + getTool(1, value) + } + + const handleOnLoadMore = () => { + if (isLoading) { + return + } + getTool(currentPage + 1, '') + } + + const getTool = (page: number, searchValue: string) => { if (isLoading) { return } setIsLoading(true) void message.loading({ content: '加载工具列表中', key: 'LOADING', duration: 0 }) - void r_tool_store_get({ currentPage: page }) + void r_tool_store_get({ currentPage: page, searchValue }) .then((res) => { const response = res.data switch (response.code) { case DATABASE_SELECT_SUCCESS: - setCurrentPage(page) - setToolData([...toolData, ...response.data!.records]) - if (response.data?.current === response.data?.pages) { + setCurrentPage(response.data!.current) + if (response.data!.current === response.data!.pages) { setHasNextPage(false) } + if (response.data!.current === 1) { + setToolData(response.data!.records) + } else { + setToolData([...toolData, ...response.data!.records]) + } break default: void message.error('加载失败,请稍后重试') @@ -170,21 +185,22 @@ const Store = () => { }) } - const handleOnLoadMore = () => { - if (isLoading) { - return - } - getTool(currentPage + 1) - } - useEffect(() => { - getTool(1) + getTool(1, '') }, []) return ( <> +
+ +
{toolData?.map((value) => (