diff --git a/src/pages/preview/profession/profession.config.ts b/src/pages/preview/profession/profession.config.ts index 72f4ae5..d182329 100644 --- a/src/pages/preview/profession/profession.config.ts +++ b/src/pages/preview/profession/profession.config.ts @@ -1,4 +1,3 @@ export default definePageConfig({ navigationBarTitleText: '专业知识', - onReachBottomDistance: 30 }) diff --git a/src/pages/preview/profession/profession.module.scss b/src/pages/preview/profession/profession.module.scss new file mode 100644 index 0000000..e2c9fc3 --- /dev/null +++ b/src/pages/preview/profession/profession.module.scss @@ -0,0 +1,20 @@ +.height { + height: calc(100vh - 80rpx - env(safe-area-inset-bottom)); + overflow: hidden; + box-sizing: border-box; +} + +.killBox { + background: #fff; + padding: 20rpx; + box-sizing: border-box; + display: flex; + margin-bottom: 20rpx; + + Image, + image { + width: 200rpx; + margin-right: 20rpx; + border-radius: 10rpx; + } +} diff --git a/src/pages/preview/profession/profession.tsx b/src/pages/preview/profession/profession.tsx index 4d93131..cb26871 100644 --- a/src/pages/preview/profession/profession.tsx +++ b/src/pages/preview/profession/profession.tsx @@ -1,26 +1,60 @@ -import {Image, View} from "@tarojs/components"; +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([]) - const [page, setPage] = useState(1) const [categoryId, setCategoryId] = useState(null) - const [data, setData] = useState([]) - const [total, setTotal] = useState(0) + const [data, setData] = useState>(new Map) - async function getData(categoryId: number) { - const res = await HomeApi.skillList(categoryId, page, 10) - setTotal(res.total) - setData(res.data) + /** + * more 开启加载更多 + */ + async function getData(more = false) { + if (categoryId) { + const oldData = new Map(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) - }, [categoryId, page]) + categoryId && getData() + }, [categoryId]) async function getCategory() { const res = await HomeApi.skillCategory() @@ -30,7 +64,6 @@ const Profession = () => { } function tabsChange(tab: OnChangOpt) { - setPage(1) setCategoryId(tab.tab?.value as number) } @@ -38,24 +71,52 @@ const Profession = () => { Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url}) } - useEffect(() => { - getCategory().then() - }, []) + 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 + } + return ( + getData(true)} + className={styles.height}> + { + data.data.map(d => + jump(d.resource.url)} > + + {d.resource.name} + + ) + } + + ) + } + return ( <> - + - { - data.length > 0 - ? data.map(d => jump(d.resource.url)}> - - {d.resource.name} - ) - : - } + d.value === categoryId)} + onChange={swiperChange} + className={styles.height} + style={{paddingTop: '10px'}}> + { + tabs.map(d => + {KillList(data.get(Number(d.value))!)} + ) + } + ) }