|
|
|
@ -1,13 +1,13 @@ |
|
|
|
|
import {ScrollView, Image, Swiper, SwiperItem, View} from "@tarojs/components"; |
|
|
|
|
import {CSSProperties, FC, useEffect, useMemo, useState} from "react"; |
|
|
|
|
import {ScrollView, Swiper, SwiperItem, 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 {illnessApi} from "@/api/illness"; |
|
|
|
|
import Empty from "@/components/empty/empty"; |
|
|
|
|
import leftArrow from "@/static/img/leftArrow.png" |
|
|
|
|
import Spin from "@/components/spinner"; |
|
|
|
|
import NavigationBar from "@/components/navigationBar/navigationBar"; |
|
|
|
|
|
|
|
|
|
const prefix = 'SORT' |
|
|
|
|
const Sort: FC = () => { |
|
|
|
@ -18,11 +18,9 @@ const Sort: FC = () => { |
|
|
|
|
const [enable, setEnable] = useState(true) |
|
|
|
|
const [loading, setLoading] = useState(false) |
|
|
|
|
const globalData = Taro.getApp().globalData |
|
|
|
|
const menu = Taro.getMenuButtonBoundingClientRect() |
|
|
|
|
|
|
|
|
|
async function getData() { |
|
|
|
|
try { |
|
|
|
|
|
|
|
|
|
const res = await HomeApi.category(3) |
|
|
|
|
setData(res) |
|
|
|
|
if (res.length) { |
|
|
|
@ -46,13 +44,6 @@ const Sort: FC = () => { |
|
|
|
|
})) |
|
|
|
|
}, [data]) |
|
|
|
|
|
|
|
|
|
const headerStyles: CSSProperties = { |
|
|
|
|
paddingTop: globalData.statusBarHeight + 'px', |
|
|
|
|
display: 'flex', |
|
|
|
|
alignItems: "center", |
|
|
|
|
width: menu.left - 10 + 'px', |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
function firstIdChange(id: number) { |
|
|
|
|
setFirstId(id) |
|
|
|
|
const resource_category = data.find(d => d.id === id)?.resource_category |
|
|
|
@ -82,41 +73,15 @@ const Sort: FC = () => { |
|
|
|
|
setSecondId(firstData?.resource_category?.[0]?.id) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
const SecondLevel = (category: Category) => { |
|
|
|
|
if (!category.resource_category?.length) { |
|
|
|
|
return (<Empty name='暂无二级分类'/>) |
|
|
|
|
} else { |
|
|
|
|
return ( |
|
|
|
|
<View> |
|
|
|
|
<Spin enable={enable} overlay/> |
|
|
|
|
<View style={headerStyles}> |
|
|
|
|
<View |
|
|
|
|
className="flex flex-column align-center justify-center" |
|
|
|
|
style={{width:globalData.textBarHeight+'px', height: globalData.textBarHeight+'px'}} |
|
|
|
|
onClick={() => Taro.navigateBack()}> |
|
|
|
|
<Image |
|
|
|
|
src={leftArrow} |
|
|
|
|
mode='widthFix' |
|
|
|
|
className={styles.back} |
|
|
|
|
/> |
|
|
|
|
</View> |
|
|
|
|
<View className="flex"> |
|
|
|
|
<Tabs |
|
|
|
|
tabList={getTabList} |
|
|
|
|
current={firstId} |
|
|
|
|
onChange={(data) => firstIdChange(data.tab?.value as number)} |
|
|
|
|
/> |
|
|
|
|
<View className="flex-1" /> |
|
|
|
|
</View> |
|
|
|
|
</View> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<Swiper |
|
|
|
|
onChange={swiperChange} |
|
|
|
|
className={styles.scrollView} |
|
|
|
|
current={data.findIndex(d => d.id === firstId)} |
|
|
|
|
style={{top: `${globalData.statusBarHeight + 59}px`}}> |
|
|
|
|
{ |
|
|
|
|
data.map(d => <SwiperItem key={d.id} className='flex'> |
|
|
|
|
<View className='flex' style={{height: `${globalData.pageHeight}px`}}> |
|
|
|
|
<ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}> |
|
|
|
|
{ |
|
|
|
|
d.resource_category?.map(d => <View |
|
|
|
|
category.resource_category?.map(d => <View |
|
|
|
|
id={`${prefix}-${d.id}`} |
|
|
|
|
key={d.id} |
|
|
|
|
onClick={() => setSecondId(d.id)} |
|
|
|
@ -125,7 +90,6 @@ const Sort: FC = () => { |
|
|
|
|
</View>) |
|
|
|
|
} |
|
|
|
|
</ScrollView> |
|
|
|
|
|
|
|
|
|
<ScrollView |
|
|
|
|
enhanced |
|
|
|
|
showScrollbar={false} |
|
|
|
@ -142,9 +106,33 @@ const Sort: FC = () => { |
|
|
|
|
</> |
|
|
|
|
} |
|
|
|
|
</ScrollView> |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
|
<View> |
|
|
|
|
<NavigationBar leftNode={<Tabs |
|
|
|
|
tabList={getTabList} |
|
|
|
|
current={firstId} |
|
|
|
|
style={{paddingBottom: '5px'}} |
|
|
|
|
onChange={(data) => firstIdChange(data.tab?.value as number)} |
|
|
|
|
/>}/> |
|
|
|
|
<Spin enable={enable} overlay/> |
|
|
|
|
{ |
|
|
|
|
data.length > 0 ? <Swiper |
|
|
|
|
style={{height: `${globalData.pageHeight}px`}} |
|
|
|
|
onChange={swiperChange} |
|
|
|
|
current={data.findIndex(d => d.id === firstId)}> |
|
|
|
|
{ |
|
|
|
|
data.map(d => <SwiperItem key={d.id}> |
|
|
|
|
{SecondLevel(d)} |
|
|
|
|
</SwiperItem>) |
|
|
|
|
} |
|
|
|
|
</Swiper> |
|
|
|
|
: <Empty name='暂无疾病分类'/> |
|
|
|
|
} |
|
|
|
|
</View> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|