24 changed files with 519 additions and 69 deletions
@ -0,0 +1,33 @@ |
|||
// 使用与首页相同的样式，主要依赖Tailwind CSS类名 |
|||
.buy-btn { |
|||
background: linear-gradient(to right, #1cd98a, #24ca94); |
|||
border-radius: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
position: relative; |
|||
overflow: hidden; |
|||
|
|||
.cart-icon { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
bottom: 0; |
|||
width: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
border-radius: 20px 0 0 20px; |
|||
} |
|||
} |
|||
|
|||
.car-no { |
|||
font-weight: 500; |
|||
color: #333; |
|||
line-height: 1.4; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
} |
|||
@ -0,0 +1,58 @@ |
|||
import { View } from '@tarojs/components' |
|||
import { Image } from '@nutui/nutui-react-taro' |
|||
import { Share } from '@nutui/icons-react-taro' |
|||
import Taro from '@tarojs/taro' |
|||
import { ShopGoods } from '@/api/shop/shopGoods/model' |
|||
import './GoodsItem.scss' |
|||
|
|||
interface GoodsItemProps { |
|||
goods: ShopGoods |
|||
} |
|||
|
|||
const GoodsItem = ({ goods }: GoodsItemProps) => { |
|||
// 跳转到商品详情
|
|||
const goToDetail = () => { |
|||
Taro.navigateTo({ |
|||
url: `/shop/goodsDetail/index?id=${goods.goodsId}` |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<div className={'flex flex-col rounded-lg bg-white shadow-sm w-full mb-5'}> |
|||
<Image |
|||
src={goods.image || ''} |
|||
mode={'aspectFit'} |
|||
lazyLoad={false} |
|||
radius="10px 10px 0 0" |
|||
height="180" |
|||
onClick={goToDetail} |
|||
/> |
|||
<div className={'flex flex-col p-2 rounded-lg'}> |
|||
<div> |
|||
<div className={'car-no text-sm'}>{goods.name || goods.goodsName}</div> |
|||
<div className={'flex justify-between text-xs py-1'}> |
|||
<span className={'text-orange-500'}>{goods.comments || ''}</span> |
|||
<span className={'text-gray-400'}>已售 {goods.sales || 0}</span> |
|||
</div> |
|||
<div className={'flex justify-between items-center py-2'}> |
|||
<div className={'flex text-red-500 text-xl items-baseline'}> |
|||
<span className={'text-xs'}>￥</span> |
|||
<span className={'font-bold text-2xl'}>{goods.price || '0.00'}</span> |
|||
</div> |
|||
<div className={'buy-btn'}> |
|||
<div className={'cart-icon'}> |
|||
<Share size={20} className={'mx-4 mt-2'} |
|||
onClick={goToDetail}/> |
|||
</div> |
|||
<div className={'text-white pl-4 pr-5'} |
|||
onClick={goToDetail}>购买 |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
) |
|||
} |
|||
|
|||
export default GoodsItem |
|||
@ -0,0 +1,3 @@ |
|||
export default definePageConfig({ |
|||
navigationBarTitleText: '商品搜索' |
|||
}) |
|||
@ -0,0 +1,103 @@ |
|||
.search-page { |
|||
min-height: 100vh; |
|||
background: #f5f5f5; |
|||
|
|||
// 搜索输入框样式 |
|||
.search-input-wrapper { |
|||
flex: 1; |
|||
display: flex; |
|||
align-items: center; |
|||
background: #f5f5f5; |
|||
border-radius: 20px; |
|||
padding: 0 12px; |
|||
|
|||
.search-icon { |
|||
color: #999; |
|||
margin-right: 8px; |
|||
} |
|||
|
|||
.search-input { |
|||
flex: 1; |
|||
border: none; |
|||
background: transparent; |
|||
font-size: 14px; |
|||
|
|||
input { |
|||
background: transparent !important; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-btn { |
|||
padding: 0 16px; |
|||
height: 36px; |
|||
border-radius: 18px; |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.search-content { |
|||
padding-top: calc(32px + env(safe-area-inset-top)); |
|||
|
|||
.search-history { |
|||
background: #fff; |
|||
margin-bottom: 8px; |
|||
|
|||
.history-header { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
align-items: center; |
|||
padding: 16px; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
|
|||
.history-title { |
|||
font-size: 16px; |
|||
font-weight: 500; |
|||
color: #333; |
|||
} |
|||
|
|||
.clear-btn { |
|||
font-size: 14px; |
|||
color: #999; |
|||
cursor: pointer; |
|||
} |
|||
} |
|||
|
|||
.history-list { |
|||
padding: 16px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
gap: 12px; |
|||
|
|||
.history-item { |
|||
padding: 8px 16px; |
|||
background: #f5f5f5; |
|||
border-radius: 16px; |
|||
color: #666; |
|||
cursor: pointer; |
|||
|
|||
&:active { |
|||
background: #e5e5e5; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.search-results { |
|||
.result-header { |
|||
padding: 16px; |
|||
color: #666; |
|||
background: #fff; |
|||
border-bottom: 1px solid #f5f5f5; |
|||
margin-bottom: 8px; |
|||
} |
|||
|
|||
.loading-wrapper { |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
padding: 40px 0; |
|||
background: #fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,237 @@ |
|||
import {useEffect, useState} from 'react' |
|||
import {useRouter} from '@tarojs/taro' |
|||
import Taro from '@tarojs/taro' |
|||
import {View} from '@tarojs/components' |
|||
import {Loading, Empty, InfiniteLoading, Input, Button} from '@nutui/nutui-react-taro' |
|||
import {Search} from '@nutui/icons-react-taro'; |
|||
import {ShopGoods} from '@/api/shop/shopGoods/model' |
|||
import {pageShopGoods} from '@/api/shop/shopGoods' |
|||
import GoodsItem from './components/GoodsItem' |
|||
import './index.scss' |
|||
|
|||
const SearchPage = () => { |
|||
const router = useRouter() |
|||
const [keywords, setKeywords] = useState<string>('') |
|||
const [goodsList, setGoodsList] = useState<ShopGoods[]>([]) |
|||
const [loading, setLoading] = useState(false) |
|||
const [page, setPage] = useState(1) |
|||
const [hasMore, setHasMore] = useState(true) |
|||
const [total, setTotal] = useState(0) |
|||
const [searchHistory, setSearchHistory] = useState<string[]>([]) |
|||
|
|||
// 从路由参数获取搜索关键词
|
|||
useEffect(() => { |
|||
const {keywords: routeKeywords} = router.params || {} |
|||
if (routeKeywords) { |
|||
setKeywords(decodeURIComponent(routeKeywords)) |
|||
handleSearch(decodeURIComponent(routeKeywords), 1).then() |
|||
} |
|||
|
|||
// 加载搜索历史
|
|||
loadSearchHistory() |
|||
}, []) |
|||
|
|||
// 加载搜索历史
|
|||
const loadSearchHistory = () => { |
|||
try { |
|||
const history = Taro.getStorageSync('search_history') || [] |
|||
setSearchHistory(history) |
|||
} catch (error) { |
|||
console.error('加载搜索历史失败:', error) |
|||
} |
|||
} |
|||
|
|||
// 保存搜索历史
|
|||
const saveSearchHistory = (keyword: string) => { |
|||
try { |
|||
let history = Taro.getStorageSync('search_history') || [] |
|||
// 去重并添加到开头
|
|||
history = history.filter(item => item !== keyword) |
|||
history.unshift(keyword) |
|||
// 只保留最近10条
|
|||
history = history.slice(0, 10) |
|||
Taro.setStorageSync('search_history', history) |
|||
setSearchHistory(history) |
|||
} catch (error) { |
|||
console.error('保存搜索历史失败:', error) |
|||
} |
|||
} |
|||
|
|||
const handleKeywords = (keywords) => { |
|||
setKeywords(keywords) |
|||
handleSearch(keywords).then() |
|||
} |
|||
|
|||
// 搜索商品
|
|||
const handleSearch = async (searchKeywords: string, pageNum: number = 1) => { |
|||
if (!searchKeywords.trim()) { |
|||
Taro.showToast({ |
|||
title: '请输入搜索关键词', |
|||
icon: 'none' |
|||
}) |
|||
return |
|||
} |
|||
|
|||
setLoading(true) |
|||
|
|||
try { |
|||
const params = { |
|||
keywords: searchKeywords.trim(), |
|||
page: pageNum, |
|||
size: 10, |
|||
isShow: 1 // 只搜索上架商品
|
|||
} |
|||
|
|||
const result = await pageShopGoods(params) |
|||
|
|||
if (pageNum === 1) { |
|||
setGoodsList(result?.list || []) |
|||
setTotal(result?.count || 0) |
|||
// 保存搜索历史
|
|||
saveSearchHistory(searchKeywords.trim()) |
|||
} else { |
|||
setGoodsList(prev => [...prev, ...(result?.list || [])]) |
|||
} |
|||
|
|||
setHasMore((result?.list?.length || 0) >= 10) |
|||
setPage(pageNum) |
|||
|
|||
} catch (error) { |
|||
console.error('搜索失败:', error) |
|||
Taro.showToast({ |
|||
title: '搜索失败，请重试', |
|||
icon: 'none' |
|||
}) |
|||
} finally { |
|||
setLoading(false) |
|||
} |
|||
} |
|||
|
|||
// 加载更多
|
|||
const loadMore = () => { |
|||
if (!loading && hasMore && keywords.trim()) { |
|||
handleSearch(keywords, page + 1).then() |
|||
} |
|||
} |
|||
|
|||
// 点击历史搜索
|
|||
const onHistoryClick = (keyword: string) => { |
|||
setKeywords(keyword) |
|||
setPage(1) |
|||
handleSearch(keyword, 1) |
|||
} |
|||
|
|||
// 清空搜索历史
|
|||
const clearHistory = () => { |
|||
Taro.showModal({ |
|||
title: '提示', |
|||
content: '确定要清空搜索历史吗？', |
|||
success: (res) => { |
|||
if (res.confirm) { |
|||
try { |
|||
Taro.removeStorageSync('search_history') |
|||
setSearchHistory([]) |
|||
} catch (error) { |
|||
console.error('清空搜索历史失败:', error) |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
} |
|||
|
|||
return ( |
|||
<View className="search-page pt-3"> |
|||
<div className={'px-2'}> |
|||
<div |
|||
style={{ |
|||
display: 'flex', |
|||
alignItems: 'center', |
|||
background: '#ffffff', |
|||
padding: '0 5px', |
|||
borderRadius: '20px', |
|||
marginTop: '5px', |
|||
}} |
|||
> |
|||
<Search size={18} className={'ml-2 text-gray-400'}/> |
|||
<Input |
|||
placeholder="搜索商品" |
|||
value={keywords} |
|||
onChange={handleKeywords} |
|||
onConfirm={() => handleSearch(keywords)} |
|||
style={{padding: '9px 8px'}} |
|||
/> |
|||
<div |
|||
className={'flex items-center'} |
|||
> |
|||
<Button type="success" style={{background: 'linear-gradient(to bottom, #1cd98a, #24ca94)'}} |
|||
onClick={() => handleSearch(keywords)}> |
|||
搜索 |
|||
</Button> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
{/*<SearchBar style={{height: `${statusBarHeight}px`}} shape="round" placeholder="搜索商品" onChange={setKeywords} onSearch={handleSearch}/>*/} |
|||
|
|||
{/* 搜索内容 */} |
|||
<View className="search-content"> |
|||
{/* 搜索历史 */} |
|||
{!keywords && searchHistory.length > 0 && ( |
|||
<View className="search-history"> |
|||
<View className="history-header"> |
|||
<View className="text-sm">搜索历史</View> |
|||
<View className={'text-gray-400'} onClick={clearHistory}>清空</View> |
|||
</View> |
|||
<View className="history-list"> |
|||
{searchHistory.map((item, index) => ( |
|||
<View |
|||
key={index} |
|||
className="history-item" |
|||
onClick={() => onHistoryClick(item)} |
|||
> |
|||
{item} |
|||
</View> |
|||
))} |
|||
</View> |
|||
</View> |
|||
)} |
|||
|
|||
{/* 搜索结果 */} |
|||
{keywords && ( |
|||
<View className="search-results"> |
|||
{/* 结果统计 */} |
|||
<View className="result-header"> |
|||
找到 {total} 件相关商品 |
|||
</View> |
|||
|
|||
{/* 商品列表 */} |
|||
{loading && page === 1 ? ( |
|||
<View className="loading-wrapper"> |
|||
<Loading>搜索中...</Loading> |
|||
</View> |
|||
) : goodsList.length > 0 ? ( |
|||
<div className={'py-3'}> |
|||
<div className={'flex flex-col justify-between items-center rounded-lg px-2'}> |
|||
<InfiniteLoading |
|||
hasMore={hasMore} |
|||
// @ts-ignore
|
|||
onLoadMore={loadMore} |
|||
loadingText="加载中..." |
|||
loadMoreText="没有更多了" |
|||
> |
|||
{goodsList.map((item) => ( |
|||
<GoodsItem key={item.goodsId} goods={item}/> |
|||
))} |
|||
</InfiniteLoading> |
|||
</div> |
|||
</div> |
|||
) : ( |
|||
<Empty description="暂无相关商品"/> |
|||
)} |
|||
</View> |
|||
)} |
|||
</View> |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default SearchPage |
|||
@ -0,0 +1,11 @@ |
|||
#!/bin/bash |
|||
|
|||
# 设置代理（根据你的 Clash Verge 配置） |
|||
export http_proxy=http://127.0.0.1:7897 |
|||
export https_proxy=http://127.0.0.1:7897 |
|||
|
|||
# 启动 Claude Code |
|||
echo "🚀 启动 Claude Code..." |
|||
echo "📡 使用代理: $http_proxy" |
|||
|
|||
npx @anthropic-ai/claude-code |
|||
Loading…
Reference in new issue