|
|
|
|
@ -1,69 +1,120 @@ |
|
|
|
|
import {ScrollView, View} from "@tarojs/components"; |
|
|
|
|
import {FC, useState} from "react"; |
|
|
|
|
import {Image, ScrollView, View} from "@tarojs/components"; |
|
|
|
|
import {FC, useEffect, useMemo, useState} from "react"; |
|
|
|
|
import {Category, HomeApi} from "@/api"; |
|
|
|
|
import Taro from "@tarojs/taro"; |
|
|
|
|
import styles from './sort.module.scss' |
|
|
|
|
import Tabs, {TabList} from "@/components/tabs/tabs"; |
|
|
|
|
import {Search} from "@/pages/home/components/search"; |
|
|
|
|
import {illnessApi} from "@/api/illness"; |
|
|
|
|
import Empty from "@/components/empty/empty"; |
|
|
|
|
import leftArrow from "@/static/img/leftArrow.png" |
|
|
|
|
|
|
|
|
|
const prefix = 'SORT' |
|
|
|
|
const Sort: FC = () => { |
|
|
|
|
const [data, setData] = useState<Category[]>([]) |
|
|
|
|
const [select, setSelect] = useState<string | null>(null) |
|
|
|
|
const [firstId, setFirstId] = useState<number | undefined>(undefined) |
|
|
|
|
const [secondId, setSecondId] = useState<number | undefined>(undefined) |
|
|
|
|
const [list, setList] = useState<any[]>([]) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const globalData = Taro.getApp().globalData |
|
|
|
|
const menu = Taro.getMenuButtonBoundingClientRect() |
|
|
|
|
|
|
|
|
|
async function getData() { |
|
|
|
|
const res = await HomeApi.category(3) |
|
|
|
|
setData(res) |
|
|
|
|
if (res.length) { |
|
|
|
|
setSelect(`${prefix}-${res[0].id}`) |
|
|
|
|
setFirstId(res[0].id) |
|
|
|
|
setSecondId(res[0]?.resource_category?.[0].id) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function jump(id: number) { |
|
|
|
|
Taro.navigateTo({url: '/pages/preview/illness/list/list?id=' + id}) |
|
|
|
|
Taro.navigateTo({url: '/pages/preview/illness/article/article?id=' + id}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const getTabList = useMemo((): TabList[] => { |
|
|
|
|
return data.map<TabList>(d => ({ |
|
|
|
|
title: d.name, |
|
|
|
|
value: d.id |
|
|
|
|
})) |
|
|
|
|
}, [data]) |
|
|
|
|
|
|
|
|
|
const headerStyles: React.CSSProperties = { |
|
|
|
|
paddingTop: globalData.statusBarHeight + 'px', |
|
|
|
|
display: 'flex', |
|
|
|
|
alignItems: "center", |
|
|
|
|
width: menu.left - 10 + 'px', |
|
|
|
|
paddingLeft: '10px' |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function onConfirm(value: string) { |
|
|
|
|
console.log(value) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function firstIdChange(id: number) { |
|
|
|
|
setFirstId(id) |
|
|
|
|
const resource_category = data.find(d => d.id === id)?.resource_category |
|
|
|
|
setSecondId(resource_category?.[0]?.id) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
Taro.useLoad(getData) |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (secondId) { |
|
|
|
|
Taro.showLoading({title: '加载中'}) |
|
|
|
|
illnessApi.list(secondId, 1, 100).then(res => { |
|
|
|
|
const data = [] |
|
|
|
|
res.list.forEach(d => { |
|
|
|
|
data.push(...d.articles as []) |
|
|
|
|
}) |
|
|
|
|
setList(data) |
|
|
|
|
}).finally(() => { |
|
|
|
|
Taro.hideLoading() |
|
|
|
|
}).catch(() => { |
|
|
|
|
setList([]) |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
}, [secondId]) |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View className='flex'> |
|
|
|
|
<ScrollView |
|
|
|
|
scrollY |
|
|
|
|
scrollWithAnimation |
|
|
|
|
scrollIntoView={select!} |
|
|
|
|
className={styles.firstOrder}> |
|
|
|
|
{ |
|
|
|
|
data.map(d => <View |
|
|
|
|
id={`${prefix}-${d.id}`} |
|
|
|
|
key={d.id} |
|
|
|
|
onClick={() => setSelect(`${prefix}-${d.id}`)} |
|
|
|
|
className={`${select === `${prefix}-${d.id}` && styles.select}`}> |
|
|
|
|
{d.name} |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</ScrollView> |
|
|
|
|
<View> |
|
|
|
|
<View style={headerStyles}> |
|
|
|
|
<Image src={leftArrow} |
|
|
|
|
mode='widthFix' |
|
|
|
|
style={{width: '15px', height: '15px'}} |
|
|
|
|
onClick={() => Taro.navigateBack()}/> |
|
|
|
|
<Tabs tabList={getTabList} onChange={(data) => firstIdChange(data.tab?.value as number)}/> |
|
|
|
|
</View> |
|
|
|
|
<Search onConfirm={onConfirm}/> |
|
|
|
|
<View className='flex'> |
|
|
|
|
<ScrollView |
|
|
|
|
scrollY |
|
|
|
|
scrollWithAnimation |
|
|
|
|
scrollIntoView={`${prefix}-${secondId}`} |
|
|
|
|
className={styles.firstOrder}> |
|
|
|
|
{ |
|
|
|
|
data.find(d => d.id === firstId)?.resource_category?.map(d => <View |
|
|
|
|
id={`${prefix}-${d.id}`} |
|
|
|
|
key={d.id} |
|
|
|
|
onClick={() => setSecondId(d.id)} |
|
|
|
|
className={secondId === d.id && styles.select}> |
|
|
|
|
{d.name} |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</ScrollView> |
|
|
|
|
|
|
|
|
|
<ScrollView |
|
|
|
|
scrollY |
|
|
|
|
className={styles.tree} |
|
|
|
|
scrollWithAnimation |
|
|
|
|
scrollIntoView={select!}> |
|
|
|
|
{ |
|
|
|
|
data.map(d => <View key={d.id} id={`${prefix}-${d.id}`}> |
|
|
|
|
<View className={styles.name} |
|
|
|
|
style={{color: (select === `${prefix}-${d.id}` ? '#45D4A8' : undefined)}}>{d.name}</View> |
|
|
|
|
<View className={styles.secondaryBox}> |
|
|
|
|
{ |
|
|
|
|
d.resource_category?.map(c => <View |
|
|
|
|
onClick={() => jump(c.id)} |
|
|
|
|
key={d.id} |
|
|
|
|
className={styles.secondary}> |
|
|
|
|
<View className='p-1'>{c.name}</View> |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
</ScrollView> |
|
|
|
|
<ScrollView |
|
|
|
|
scrollY |
|
|
|
|
className={styles.tree} |
|
|
|
|
scrollWithAnimation> |
|
|
|
|
{ |
|
|
|
|
list.length ? |
|
|
|
|
list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.title}</View>) |
|
|
|
|
: <Empty name='暂无数据'/> |
|
|
|
|
} |
|
|
|
|
</ScrollView> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
king
1 year ago
