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.
123 lines
3.3 KiB
123 lines
3.3 KiB
import {Image, 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'
|
|
|
|
interface KillData {
|
|
data: Kill[]
|
|
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)
|
|
|
|
/**
|
|
* more 开启加载更多
|
|
*/
|
|
async function getData(more = false) {
|
|
if (categoryId) {
|
|
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
|
|
}
|
|
|
|
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)
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
categoryId && getData()
|
|
}, [categoryId])
|
|
|
|
async function getCategory() {
|
|
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)
|
|
}
|
|
|
|
function tabsChange(tab: OnChangOpt) {
|
|
setCategoryId(tab.tab?.value as number)
|
|
}
|
|
|
|
function jump(url: string) {
|
|
Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url})
|
|
}
|
|
|
|
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}>
|
|
{
|
|
data.data.map(d =>
|
|
<View className={styles.killBox} onClick={() => jump(d.resource.url)} >
|
|
<Image src={d.url_path} mode='widthFix'/>
|
|
<View className='text-ellipsis flex-1'>{d.resource.name}</View>
|
|
</View>
|
|
)
|
|
}
|
|
</ScrollView>
|
|
)
|
|
}
|
|
|
|
|
|
return (
|
|
<>
|
|
<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}>
|
|
{KillList(data.get(Number(d.value))!)}
|
|
</SwiperItem>)
|
|
}
|
|
</Swiper>
|
|
</>
|
|
)
|
|
}
|
|
export default Profession
|
|
|