video/src/pages/preview/search/search/components/list.tsx

import {FC, useCallback, useEffect, useState} from "react";
import {Image, ScrollView, View} from "@tarojs/components";
import styles from './list.module.scss'
import Taro from "@tarojs/taro";
import Empty from "@/components/empty/empty";
import Img from "@/components/image/image";
import {SearchApi} from "@/api/search";
import {AtLoadMore} from 'taro-ui'
import {rfc33392time} from "@/utils/day";
import play from "@/static/img/play.png";

type Props = {
  name: string
  clear: boolean
}
const SearchList: FC<Props> = ({name, clear}) => {
  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(() => {
    if (!clear) {
      setBrands([])
      setLoading(true)
    }
  }, [clear])
  useEffect(() => {
    if (name && clear) {
      getData()
    }
  }, [page, name, clear])

  const getData = useCallback(async () => {
    try {
      const data = await SearchApi.list(page, 10, name)
      if (page === 1) {
        if (data.data.length < 10) {
          setText('没有更多了~')
        } else {
          setText('上拉加载更多~')
        }
        setBrands([
          ...data.data
        ])
      } else {
        setBrands([
          ...brands,
          ...data.data
        ])
      }
      setTotal(data.total)

    } catch (e) {
    }
    setLoading(false)
  }, [page, name])


  function jumpInfo(id: number, type: string, health: any) {
    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_records':
        return Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resources.url}&poster=${health.url_path}&title=${health.title}`})
      case 'courses':
        url = '/pages/business/videoInfo/videoInfo'
        break
    }
    Taro.navigateTo({url: `${url}?id=${id}`})

  }

  function onScrollToLower() {
    if (brands?.length < total) {
      setPage(page + 1)
      getData().then()
    } else {
      setText('没有更多了~')
    }
  }

  return (
    <ScrollView
      className='scrollview'
      scrollY
      scrollWithAnimation
      style={{height: `${globalData.pageHeight - 20}px`, backgroundColor: `#f5f5f5`}}
      onScrollToLower={onScrollToLower}
    >
      {loading && <AtLoadMore status={'loading'}/>}
      {
        brands.length >= 1 && !loading &&
        <>
          {brands.map((d) =>
            <View onClick={() => jumpInfo(d.data.id, d.data.table, d.data['@data'])} className={styles.box}
                  key={d.data.id}>
              {
                d.data.table === 'brand' &&
                <>
                  <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.data.content || '暂无品牌简介'}</View>
                  </View>
                </>
              }
              {
                d.data.table === 'article' &&
                <>
                  <View className={styles.articleLeftBox}>
                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                    <View
                      className={styles.desc}>{rfc33392time(d.data['@data'].created_at)} {d.data['@data'].page_view}阅读</View>
                  </View>
                  <Img width={172} height={128} src={d.data['@data'].logo} mode='aspectFill' className={styles.image}/>
                </>
              }
              {
                d.data.table === 'video_records' &&
                <>
                  <Img width={192} height={192} src={d.data['@data'].url_path} mode='aspectFill'
                       className={styles.image}/>
                  <Image src={play} className={styles.play} mode='aspectFit'/>
                  <View className={styles.videoRightBox}>
                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                    <View className={styles.desc}>{d.data['@data'].introduction}</View>
                    <View className={`${styles.desc} mt-2`}>播放量: {d.data['@data'].video_view}</View>
                  </View>
                </>
              }
              {
                d.data.table === 'courses' &&
                <>
                  <Img width={192} height={138} src={d.data['@data'].thumb} mode='aspectFill' className={styles.image}/>
                  <View className={styles.articleLeftBox}>
                    <View className='font-weight mb-2 font-28 lh-40'>{d.data['@data'].title}</View>
                    <View className={styles.desc}>课时:{d.data['@data'].class_hour}节
                      销量：{d.data['@data'].charge}</View>
                  </View>
                </>
              }


            </View>
          )
          }
          <View style={{width: '750rpx', textAlign: 'center', color: '#999'}}
                className="font-28 mt-3 mb-3">{text}</View>
        </>
      }
      {!loading && brands.length === 0 && <Empty name='空空如也'/>}
    </ScrollView>
  )
}

export default SearchList