video/src/pages/home/components/feature_recommended.tsx

import {FC, useEffect, useState} from "react";
import {Image, Swiper, SwiperItem, View} from "@tarojs/components";
import styles from '../home.module.scss'
import Taro from "@tarojs/taro";
import {HomeApi} from "@/api";
import first from '@/static/img/first.png'
import second from '@/static/img/second.png'
import third from '@/static/img/third.png'
import brandTop from '@/static/img/brandTop.png'
import illnessTop from '@/static/img/illnessTop.png'
import healthTop from '@/static/img/healthTop.png'
import professionTop from '@/static/img/professionTop.png'


interface DataContent {
  id: number,
  imageUrl: string
  title: string,
  description: string
  path: string
}

interface Data {
  titleUrl: string
  url: string
  detailsUrl: string
  data: DataContent[]
}

const FeatureRecommended: FC = () => {
  const [data, setData] = useState<Data[]>([
    {
      titleUrl: brandTop,
      url: '/pages/preview/brand/list/list',
      detailsUrl: '/pages/preview/brand/info/info',
      data: []
    },
    {
      titleUrl: healthTop,
      url: '/pages/preview/health/health',
      detailsUrl: '/pages/preview/videoFull/videoFull',
      data: []
    },
    {
      titleUrl: professionTop,
      url: '/pages/preview/profession/profession',
      detailsUrl: '/pages/preview/videoFull/videoFull',
      data: []
    },
    {
      titleUrl: illnessTop,
      url: '/pages/preview/illness/sort/sort',
      detailsUrl: '/pages/preview/illness/article/article',
      data: []
    },
  ])

  /** 品牌 */
  async function getBrand(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.brand(1, 3)
      return res.list.map<DataContent>(d => ({
        id: d.id,
        title: d.name,
        imageUrl: d.brand_album,
        description: d.graphic_introduction,
        path: `?id=${d.id}`,
      }))
    } catch (e) {
    }
    return []
  }

  /** 健康知识 */
  async function getHealth(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.healthTop(3)
      return res.map<DataContent>(d => ({
        id: d.id,
        title: d.title,
        imageUrl: d.url_path,
        description: d.introduction,
        path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.title}`
      }))
    } catch (e) {
    }
    return []
  }

  /** 技能 */
  async function getKill(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.skillTop(3)
      return res.map<DataContent>(d => ({
        id: d.id,
        imageUrl: d.url_path,
        description: d.introduction,
        title: d.title,
        path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.title}`
      }))
    } catch (e) {
    }
    return []
  }

  /** 疾病 */
  async function getIllness(): Promise<DataContent[]> {
    try {
      const res = await HomeApi.illness(1, 3)
      return res.list.map<DataContent>(d => ({
        id: d.id,
        imageUrl: '',
        description: d.content?.replace(/[^\u4e00-\u9fa5]/gi,"") ?? '暂无描述',
        title: d.title,
        path: `?id=${d.id}`
      }))
    } catch (e) {
    }
    return []
  }

  useEffect(() => {
    Promise.all([getBrand(), getHealth(), getKill(), getIllness()]).then(([brand, health, kill, illness]) => {
      const oldData: Data[] = JSON.parse(JSON.stringify(data))
      oldData[0].data = brand
      oldData[1].data = health
      oldData[2].data = kill
      console.log(illness)
      oldData[3].data = illness
      setData(oldData)
    })
  }, [])

  function jump(url: string) {
    Taro.navigateTo({url})
  }

  return (
    <View className={styles.feature}>
      <Swiper nextMargin='30px' style={{height: '250px'}}>
        {
          data.map(d => <SwiperItem key={d.url}>
            <Image
              mode='heightFix'
              className={styles.featureTitle}
              onClick={() => jump(d.url)} src={d.titleUrl}/>
            {
              d.data.map((c, index) => <View
                className='flex mb-3'
                key={c.id}
                onClick={() => jump(d.detailsUrl + c.path)}>
                <View>
                  <Image src={c.imageUrl} className={styles.featureImage} mode='aspectFill'/>
                  <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                </View>
                <View className={styles.featureText}>
                  <View className='text-ellipsis text-secondary'>{c.title}</View>
                  <View className='font-26 mt-1 text-muted text-ellipsis'>{c.description || '暂无描述'}</View>
                </View>
              </View>)
            }
          </SwiperItem>)
        }
      </Swiper>
    </View>
  )
}

export default FeatureRecommended