You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
3.5 KiB
134 lines
3.5 KiB
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'
|
|
|
|
interface DataContent {
|
|
id: number,
|
|
imageUrl: string
|
|
title: string,
|
|
description: string
|
|
path: string
|
|
}
|
|
|
|
interface Data {
|
|
title: string
|
|
url: string
|
|
detailsUrl: string
|
|
data: DataContent[]
|
|
}
|
|
|
|
const FeatureRecommended: FC = () => {
|
|
const [data, setData] = useState<Data[]>([
|
|
{title: "品牌TOP3", url: '', detailsUrl: '', data: []},
|
|
{
|
|
title: "健康知识TOP3",
|
|
url: '/pages/health/health',
|
|
detailsUrl: '/pages/business/videoFull/videoFull?url=',
|
|
data: []
|
|
},
|
|
{
|
|
url: '',
|
|
title: "专业技能TOP3",
|
|
detailsUrl: '/pages/business/videoFull/videoFull?url=',
|
|
data: []
|
|
},
|
|
{title: "疾病知识TOP3", url: '', detailsUrl: '', data: []},
|
|
])
|
|
|
|
/** 品牌 */
|
|
async function getBrand(): Promise<DataContent[]> {
|
|
try {
|
|
const res = await HomeApi.brand(1, 3)
|
|
return res.data.map<DataContent>(d => ({
|
|
id: d.id,
|
|
title: d.name,
|
|
imageUrl: d.brand_album,
|
|
description: d.graphic_introduction,
|
|
path: '',
|
|
}))
|
|
} 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: d.resource.url
|
|
}))
|
|
} 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: '',
|
|
title: d.resource.name,
|
|
path: d.resource.url
|
|
}))
|
|
} catch (e) {
|
|
}
|
|
return []
|
|
}
|
|
|
|
useEffect(() => {
|
|
Promise.all([getBrand(), getHealth(), getKill()]).then(([brand, health, kill]) => {
|
|
const oldData: Data[] = JSON.parse(JSON.stringify(data))
|
|
oldData[0].data = brand
|
|
oldData[1].data = health
|
|
oldData[2].data = kill
|
|
setData(oldData)
|
|
})
|
|
}, [])
|
|
|
|
function jump(url: string) {
|
|
console.log(url)
|
|
Taro.navigateTo({url})
|
|
}
|
|
|
|
return (
|
|
<View className={styles.feature}>
|
|
<Swiper nextMargin='30px' style={{height: '225px'}}>
|
|
{
|
|
data.map(d => <SwiperItem key={d.title}>
|
|
<View className={styles.featureTitle} onClick={() => jump(d.url)}>{d.title}</View>
|
|
{
|
|
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}/>
|
|
<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
|
|
|