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 {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
|
|
import {HomeApi} from "@/api";
|
|
import {useEffect, useState} from "react";
|
|
import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
|
|
import Empty from "@/components/empty/empty";
|
|
import Taro from "@tarojs/taro";
|
|
import styles from './profession.module.scss'
|
|
import Spin from "@/components/spinner";
|
|
import VideoList from "@/components/videoList/videoList";
|
|
|
|
interface KillData {
|
|
data: VideList[]
|
|
total: number
|
|
page: number
|
|
}
|
|
|
|
const Profession = () => {
|
|
const [tabs, setTabs] = useState<TabList[]>([])
|
|
const [categoryId, setCategoryId] = useState<number | null>(null)
|
|
const [data, setData] = useState<Map<number, KillData>>(new Map)
|
|
const [enable, setEnable] = useState(true)
|
|
const [loading, setLoading] = useState(false)
|
|
|
|
/**
|
|
* more 开启加载更多
|
|
*/
|
|
async function getData(more = false) {
|
|
if (!categoryId) return;
|
|
const oldData = new Map<number, KillData>(data)
|
|
const categoryData = oldData.get(categoryId)
|
|
const page = more ? (categoryData?.page || 0) + 1 : categoryData?.page || 1
|
|
|
|
/** 无更多 */
|
|
if (more && categoryData && categoryData.data.length >= categoryData.total) {
|
|
return
|
|
}
|
|
|
|
try {
|
|
setLoading(true)
|
|
const res = await HomeApi.skillList(categoryId!, page, 10)
|
|
const dataList = res.data.reduce((pre, cur) => {
|
|
const index = pre.findIndex(d => d.id === cur.id)
|
|
if (index === -1) {
|
|
pre.push(cur)
|
|
} else {
|
|
pre.splice(index, 1, cur)
|
|
}
|
|
return pre
|
|
}, categoryData?.data || [])
|
|
oldData.delete(categoryId)
|
|
oldData.set(categoryId, {
|
|
data: dataList,
|
|
total: res.total,
|
|
page: page
|
|
})
|
|
setData(oldData)
|
|
} catch (e) {
|
|
}
|
|
setLoading(false)
|
|
}
|
|
|
|
useEffect(() => {
|
|
categoryId && getData()
|
|
}, [categoryId])
|
|
|
|
async function getCategory() {
|
|
try {
|
|
const res = await HomeApi.skillCategory()
|
|
const newTabs = res.map<TabList>(d => ({title: d.name, value: d.id}))
|
|
setTabs(newTabs)
|
|
setCategoryId(newTabs[0].value as number)
|
|
} catch (e) {
|
|
}
|
|
setEnable(false)
|
|
}
|
|
|
|
function tabsChange(tab: OnChangOpt) {
|
|
setCategoryId(tab.tab?.value as number)
|
|
}
|
|
|
|
|
|
function swiperChange(e) {
|
|
const categoryId = tabs[e.target.current].value
|
|
setCategoryId(Number(categoryId))
|
|
}
|
|
|
|
Taro.useLoad(getCategory)
|
|
|
|
function KillList(data: KillData): JSX.Element {
|
|
if (!data?.data?.length) {
|
|
return (
|
|
<Empty name='暂无数据'/>
|
|
)
|
|
}
|
|
return (
|
|
<ScrollView
|
|
scrollY
|
|
onScrollToLower={() => getData(true)}
|
|
className={styles.height}>
|
|
<View className={styles.container}>
|
|
|
|
{
|
|
data.data.map(d => <VideoList data={d} errorType='profession'/>)
|
|
}
|
|
</View>
|
|
<View className='text-center font-24 text-dark mt-2'>暂无更多</View>
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<Spin enable={enable} overlay/>
|
|
<View className='bg-white'>
|
|
<Tabs tabList={tabs} onChange={tabsChange} current={categoryId!}/>
|
|
</View>
|
|
|
|
<Swiper
|
|
current={tabs.findIndex(d => d.value === categoryId)}
|
|
onChange={swiperChange}
|
|
className={styles.height}
|
|
style={{paddingTop: '10px'}}>
|
|
{
|
|
tabs.map(d => <SwiperItem key={d.title} className='relative'>
|
|
<Spin enable={loading} block/>
|
|
{KillList(data.get(Number(d.value))!)}
|
|
</SwiperItem>)
|
|
}
|
|
</Swiper>
|
|
</>
|
|
)
|
|
}
|
|
export default Profession
|
|
|