diff --git a/src/pages/shop/category.tsx b/src/pages/shop/category.tsx index f692dbd..6db13ae 100644 --- a/src/pages/shop/category.tsx +++ b/src/pages/shop/category.tsx @@ -50,7 +50,7 @@ const CategoryPage: React.FC = () => { const list = await listShopGoodsCategory() if (list) { // 只保留 status=1 的分类(不限是否有子分类,因为右侧直接展示商品) - const filtered = list.filter(cat => cat.status === 1) + const filtered = list.filter(cat => cat.status === 0) setCategories(filtered) if (filtered.length > 0) setActiveId(filtered[0].categoryId) } diff --git a/src/pages/shop/index.tsx b/src/pages/shop/index.tsx index e5a82ef..e264c5d 100644 --- a/src/pages/shop/index.tsx +++ b/src/pages/shop/index.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect, useCallback, useRef } from 'react' -import { View, Text, ScrollView, Image } from '@tarojs/components' +import { View, Text, ScrollView, Image, Input } from '@tarojs/components' import Taro from '@tarojs/taro' import { listShopGoodsCategory } from '@/api/shop/shopGoodsCategory' import { pageShopGoods } from '@/api/shop/shopGoods' @@ -47,6 +47,10 @@ const ShopPage: React.FC = () => { const [sortKey, setSortKey] = useState('default') const [priceAsc, setPriceAsc] = useState(true) + // 搜索 + const [keyword, setKeyword] = useState('') + const searchTimerRef = useRef(null) + useEffect(() => { loadCategories() }, []) @@ -55,7 +59,7 @@ const ShopPage: React.FC = () => { try { const list = await listShopGoodsCategory() if (list && list.length > 0) { - const filtered = list.filter((c: any) => c.status === 1) + const filtered = list.filter((c: any) => c.status === 0) setCategoryList([...PRESET_CATEGORIES, ...filtered]) } } catch { /* ignore */ } @@ -78,6 +82,7 @@ const ShopPage: React.FC = () => { const params: ShopGoodsParam = { page: p, limit: 10, status: 0, ...buildSortParams() } if (activeCategory > 0) params.categoryId = activeCategory if (activeCategory === -1) params.recommend = 1 + if (keyword.trim()) params.keywords = keyword.trim() const res = await pageShopGoods(params) const newList = res?.list || [] if (p === 1) { @@ -90,7 +95,7 @@ const ShopPage: React.FC = () => { } catch { /* ignore */ } loadingRef.current = false setLoading(false) - }, [activeCategory, buildSortParams]) + }, [activeCategory, buildSortParams, keyword]) // 分类或排序变化时重新加载 useEffect(() => { @@ -140,13 +145,64 @@ const ShopPage: React.FC = () => { }) } + /** 搜索输入(防抖 500ms) */ + const handleSearchInput = (e: any) => { + const val = e.detail.value + setKeyword(val) + if (searchTimerRef.current) clearTimeout(searchTimerRef.current) + searchTimerRef.current = setTimeout(() => { + setGoodsList([]) + setFinished(false) + setPage(1) + loadGoods(1) + }, 500) + } + /** 跳转商品详情 */ const goDetail = (product: ShopGoods) => { Taro.navigateTo({ url: `/pages/shop/product-detail?id=${product.goodsId}` }) } return ( - + + {/* 顶部搜索栏 */} + + + 🔍 + { + setGoodsList([]) + setFinished(false) + setPage(1) + loadGoods(1) + }} + /> + {keyword ? ( + { + setKeyword('') + setGoodsList([]) + setFinished(false) + setPage(1) + loadGoods(1) + }} + > + ✕ + + ) : null} + + + + {/* 左右分栏 */} + {/* 左侧分类栏 */} {categoryList.map(cat => ( @@ -282,6 +338,7 @@ const ShopPage: React.FC = () => { + ) }