parent
3e5190d0bd
commit
02c1a92a37
@ -0,0 +1,11 @@ |
||||
import {request} from "@/api/request"; |
||||
|
||||
export const SearchApi = { |
||||
/** 品牌列表 */ |
||||
list(page: number , page_size: number, search_content: string) { |
||||
return request<{ |
||||
data: any[], |
||||
total: number |
||||
}>(`/home/v1/search/home?page=${page}&page_size=${page_size}&keywords=${search_content}&sort_type=1&sort=0` , "GET") |
||||
}, |
||||
} |
||||
@ -0,0 +1,5 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '搜索列表', |
||||
navigationBarBackgroundColor:'#F2F8F6', |
||||
onReachBottomDistance: 50 |
||||
}) |
||||
@ -0,0 +1,32 @@ |
||||
.box { |
||||
display: flex; |
||||
margin-bottom: 20rpx; |
||||
background-color: #fff; |
||||
border-radius: 16rpx; |
||||
padding: 24rpx; |
||||
box-sizing: border-box; |
||||
} |
||||
.image{ |
||||
width: 128rpx; |
||||
height:128rpx; |
||||
background-color: #ededed; |
||||
border-radius: 8rpx; |
||||
} |
||||
.rightBox{ |
||||
padding-left: 24rpx; |
||||
box-sizing: border-box; |
||||
flex: 1; |
||||
} |
||||
.desc{ |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #909795; |
||||
line-height: 34rpx; |
||||
display: -webkit-box; |
||||
word-break: break-all; |
||||
text-overflow: ellipsis; |
||||
overflow: hidden; |
||||
-webkit-box-orient:vertical; |
||||
-webkit-line-clamp:2; |
||||
} |
||||
|
||||
@ -0,0 +1,95 @@ |
||||
import {FC, useCallback, useEffect, useState} from "react"; |
||||
import {View} from "@tarojs/components"; |
||||
import styles from './index.module.scss' |
||||
import Taro, {useReachBottom, useRouter} from "@tarojs/taro"; |
||||
import Empty from "@/components/empty/empty"; |
||||
import Spinner from "@/components/spinner"; |
||||
import Img from "@/components/image/image"; |
||||
import { SearchApi } from "@/api/search"; |
||||
|
||||
const SearchList: FC = () => { |
||||
const {name} = useRouter().params as unknown as { name: string} |
||||
const [page, setPage] = useState(1) |
||||
const [brands, setBrands] = useState<any[]>([]) |
||||
const [total, setTotal] = useState(0) |
||||
const [text, setText] = useState('') |
||||
const [loading, setLoading] = useState(true) |
||||
|
||||
useEffect(() => { |
||||
getData() |
||||
}, [page,name]) |
||||
|
||||
const getData = useCallback(async () => { |
||||
try { |
||||
const data = await SearchApi.list(page, 10,name) |
||||
if (page === 1) { |
||||
if (data.data.length < 10) { |
||||
setText('没有更多了~') |
||||
} else { |
||||
setText('上拉加载更多~') |
||||
} |
||||
} |
||||
setTotal(data.total) |
||||
setBrands([ |
||||
...brands, |
||||
...data.data |
||||
]) |
||||
} catch (e) { |
||||
} |
||||
setLoading(false) |
||||
}, [page]) |
||||
|
||||
|
||||
function jumpInfo(id: number,type:string) { |
||||
console.log(type,'type') |
||||
let url = '' |
||||
switch (type){ |
||||
case 'brand': |
||||
url = '/pages/preview/brand/info/info'; |
||||
break; |
||||
case 'illness': |
||||
url = '/pages/preview/illness/list/list'; |
||||
break; |
||||
case 'article': |
||||
url = '/pages/preview/illness/article/article' |
||||
break |
||||
case 'video_record': |
||||
url = '/pages/preview/videoFull/videoFull' |
||||
break |
||||
} |
||||
Taro.navigateTo({url: `${url}?id=${id}`}) |
||||
|
||||
} |
||||
|
||||
useReachBottom(useCallback(() => { |
||||
if (brands?.length < total) { |
||||
setPage(page + 1) |
||||
} else { |
||||
setText('没有更多了~') |
||||
} |
||||
}, [total, brands])) |
||||
|
||||
|
||||
return ( |
||||
<View className='p-2'> |
||||
<Spinner enable={loading} overlay/> |
||||
{ |
||||
brands.length ? |
||||
<> |
||||
{brands.map((d) => <View onClick={() => jumpInfo(d.data.id,d.data.table)} className={styles.box} key={d.data.id}> |
||||
<Img width={128} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/> |
||||
<View className={styles.rightBox}> |
||||
<View className='font-weight mb-2 font-28'>{d.data.title}</View> |
||||
<View className={styles.desc}>{d.graphic_introduction}</View> |
||||
</View> |
||||
</View>) |
||||
} |
||||
<View style={{width: '710rpx', textAlign: 'center', color: '#999'}} className="font-28 mt-3">{text}</View> |
||||
</> : <Empty name='空空如也'/> |
||||
} |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
export default SearchList |
||||
|
||||
@ -0,0 +1,5 @@ |
||||
export default definePageConfig({ |
||||
navigationBarTitleText: '课程搜索', |
||||
navigationBarBackgroundColor:'#F2F8F6', |
||||
onReachBottomDistance: 50 |
||||
}) |
||||
@ -0,0 +1,49 @@ |
||||
page{ |
||||
background-color:#F2F8F6; |
||||
padding-left: 30rpx; |
||||
.searchBox{ |
||||
width: 690rpx; |
||||
height: 68rpx; |
||||
background: #FFFFFF; |
||||
border-radius: 32rpx 32rpx 32rpx 32rpx; |
||||
box-sizing: border-box; |
||||
display: flex; |
||||
align-items: center; |
||||
padding:0 24rpx; |
||||
.input{ |
||||
font-size: 28rpx; |
||||
font-weight: 500; |
||||
margin-left: 24rpx; |
||||
} |
||||
} |
||||
.titleBox{ |
||||
margin-top: 60rpx; |
||||
width: 100%; |
||||
display: flex; |
||||
box-sizing: border-box; |
||||
padding-right: 30rpx; |
||||
justify-content: space-between; |
||||
.title{ |
||||
font-size: 28rpx; |
||||
font-weight: bold; |
||||
color: #323635; |
||||
} |
||||
} |
||||
.contentBox{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
.items{ |
||||
display: inline-block; |
||||
background: #FFFFFF; |
||||
border-radius:32rpx; |
||||
padding: 10rpx 24rpx; |
||||
font-size: 24rpx; |
||||
font-weight: 500; |
||||
color: #323635; |
||||
line-height: 24rpx; |
||||
margin-top: 24rpx; |
||||
margin-right: 24rpx; |
||||
} |
||||
} |
||||
} |
||||
|
||||
@ -0,0 +1,97 @@ |
||||
import {Input, View, Text} from "@tarojs/components"; |
||||
import {FC, useState} from "react"; |
||||
import { AtIcon } from 'taro-ui' |
||||
import styles from './index.module.scss' |
||||
import Taro from "@tarojs/taro"; |
||||
import { useReady, useDidShow } from '@tarojs/taro' |
||||
|
||||
|
||||
const Search:FC = () => { |
||||
const [value, setValue] = useState('') |
||||
const [recentSearch, setRecentSearch] = useState<string[]>([]) |
||||
const [hotSearch,setHotSearch] = useState<any[]>([]) |
||||
|
||||
useReady(()=>{ |
||||
console.log('onReady') |
||||
}) |
||||
useDidShow(()=>{ |
||||
getRecentSearch() |
||||
}) |
||||
|
||||
function inpFn(e){ |
||||
setValue(e.detail.value) |
||||
} |
||||
|
||||
function clearSearch(){ |
||||
Taro.removeStorageSync('recentSearch') |
||||
getRecentSearch() |
||||
} |
||||
|
||||
function getRecentSearch () { |
||||
setRecentSearch(Taro.getStorageSync('recentSearch')) |
||||
} |
||||
function getSearchItem(value) { |
||||
Taro.navigateTo({ |
||||
url:`/pages/preview/search/list/index?name=${value}` |
||||
}) |
||||
} |
||||
|
||||
function searchInput(){ |
||||
if (value === "") return; |
||||
getSearchItem(value) |
||||
//记录最近搜索
|
||||
let recentSearch = Taro.getStorageSync('recentSearch') || []; |
||||
recentSearch.unshift(value); |
||||
Taro.setStorageSync('recentSearch', [...new Set(recentSearch)]) |
||||
} |
||||
|
||||
return ( |
||||
<View className="flex flex-column"> |
||||
<View className={styles.searchBox}> |
||||
<AtIcon value='search' size='20' color='#ccc'></AtIcon> |
||||
<Input className={styles.input} placeholder="输入关键字搜索课程" type={'text'} confirmType={'search'} onInput={inpFn} onConfirm={searchInput} /> |
||||
</View> |
||||
|
||||
{ |
||||
recentSearch.length >= 1 && |
||||
<> |
||||
<View className={styles.titleBox} > |
||||
<Text className={styles.title}>最近搜索</Text> |
||||
<AtIcon onClick={clearSearch} value='trash' size='16' color='#909795'></AtIcon> |
||||
</View> |
||||
<View className={styles.contentBox}> |
||||
{ |
||||
recentSearch.length && |
||||
recentSearch?.map(d => |
||||
<View className={styles.items}> |
||||
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
||||
</View>) |
||||
} |
||||
</View> |
||||
</> |
||||
} |
||||
{ |
||||
hotSearch.length >= 1 && |
||||
<> |
||||
<View className={`flex justify-between ${styles.titleBox}`} > |
||||
|
||||
<Text className="font-32 fwb">热门搜索</Text> |
||||
</View> |
||||
<View className="wid100 pt-3 pl-3 box-b"> |
||||
<View className="wid100 flex flex-wrap"> |
||||
{ |
||||
hotSearch.length && |
||||
hotSearch.map(d => |
||||
<View className="py-1 px-2 rounded-40 mr-2 mb-2 bg-warning text-white"> |
||||
<View onClick={()=>{getSearchItem(d)}} className="font-28" >{d}</View> |
||||
</View>) |
||||
} |
||||
</View> |
||||
</View> |
||||
</> |
||||
} |
||||
|
||||
</View> |
||||
) |
||||
} |
||||
export default Search |
||||
Loading…
Reference in new issue