commit
4605f01aeb
@ -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,106 @@ |
|||||||
|
import {FC, useCallback, useEffect, useRef, useState} from "react"; |
||||||
|
import {ScrollView, View} from "@tarojs/components"; |
||||||
|
import styles from './list.module.scss' |
||||||
|
import Taro 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"; |
||||||
|
|
||||||
|
type Props = { |
||||||
|
name:string |
||||||
|
} |
||||||
|
const SearchList: FC<{name:string}> = ({name}:Props) => { |
||||||
|
const globalData = Taro.getApp().globalData |
||||||
|
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 { |
||||||
|
console.log(name) |
||||||
|
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,name]) |
||||||
|
|
||||||
|
|
||||||
|
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}`}) |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
function onScrollToLower(){ |
||||||
|
useCallback(() => { |
||||||
|
if (brands?.length < total) { |
||||||
|
setPage(page + 1) |
||||||
|
} else { |
||||||
|
setText('没有更多了~') |
||||||
|
} |
||||||
|
}, [total, brands]) |
||||||
|
} |
||||||
|
|
||||||
|
return ( |
||||||
|
<ScrollView |
||||||
|
className='scrollview' |
||||||
|
scrollY |
||||||
|
scrollWithAnimation |
||||||
|
style={{height:`${globalData.windowHeight-60}px`}} |
||||||
|
onScrollToLower={onScrollToLower} |
||||||
|
> |
||||||
|
<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='空空如也'/> |
||||||
|
} |
||||||
|
</ScrollView> |
||||||
|
) |
||||||
|
} |
||||||
|
|
||||||
|
export default SearchList |
||||||
|
|
Loading…
Reference in new issue