parent
eb218db694
commit
806614f5d6
@ -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