修改疾病分类数据为空展示和页面高度计算

v2
king 1 year ago
parent 389827ac79
commit fa81566f32
  1. 1
      src/app.tsx
  2. 5
      src/components/tabs/tabs.tsx
  3. 2
      src/pages/my/my.tsx
  4. 11
      src/pages/preview/illness/sort/sort.module.scss
  5. 132
      src/pages/preview/illness/sort/sort.tsx

@ -50,6 +50,7 @@ function App(props) {
safeArea,
isIos,
textBarHeight,
pageHeight: screenHeight - statusBarHeight - textBarHeight - (screenHeight - (safeArea?.bottom || 0)),
menu: Taro.getMenuButtonBoundingClientRect(),
}
}

@ -1,4 +1,4 @@
import {FC, useEffect, useState} from "react";
import {CSSProperties, FC, useEffect, useState} from "react";
import './tabs.scss'
import {ScrollView, View} from "@tarojs/components";
import Taro from "@tarojs/taro";
@ -22,6 +22,7 @@ interface TabsProps {
height?: number | string
onChange?: (data: OnChangOpt) => void
backMode?: boolean // 块级模式
style?: CSSProperties
}
const Tabs: FC<TabsProps> = (opt) => {
@ -49,7 +50,7 @@ const Tabs: FC<TabsProps> = (opt) => {
return (
<View className={`tabs ${opt.backMode ? 'tabsBack' : ''}`} style={{height: opt.height}}>
<View className={`tabs ${opt.backMode ? 'tabsBack' : ''}`} style={{height: opt.height, ...opt.style}}>
<ScrollView scrollX scrollLeft={left} scrollWithAnimation showScrollbar={false} style={{height: opt.height}}>
<View className={'tabs-scroll ' + (opt.tabList.length < 5 ? 'justify-around' : '')}>
{opt.tabList.map((d, index) => <View

@ -39,6 +39,8 @@ const My: FC = () => {
const [navbarOpacity, setNavbarOpacity] = useState('0')
const navbarHeight = globalData.statusBarHeight + globalData.textBarHeight;
console.log(globalData)
Taro.useDidShow(() => {
token && userApi.companyList().then(res => {
setCompanyList(res as Company[])

@ -1,14 +1,3 @@
.scrollView {
height: auto !important;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
margin: auto;
}
.firstOrder {
width: 260rpx;
height: 100%;

@ -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,69 +73,66 @@ const Sort: FC = () => {
setSecondId(firstData?.resource_category?.[0]?.id)
}
const SecondLevel = (category: Category) => {
if (!category.resource_category?.length) {
return (<Empty name='暂无二级分类'/>)
} else {
return (
<View className='flex' style={{height: `${globalData.pageHeight}px`}}>
<ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
{
category.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
enhanced
showScrollbar={false}
scrollY
className={styles.tree}
scrollWithAnimation>
{
loading ? <Spin enable={loading}/> : <>
{
list.length ?
list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)
: <Empty name='暂无数据'/>
}
</>
}
</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/>
<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'>
<ScrollView scrollY className={styles.firstOrder} enhanced showScrollbar={false}>
{
d.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
enhanced
showScrollbar={false}
scrollY
className={styles.tree}
scrollWithAnimation>
{
loading ? <Spin enable={loading}/> : <>
{
list.length ?
list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)
: <Empty name='暂无数据'/>
}
</>
}
</ScrollView>
</SwiperItem>)
}
</Swiper>
{
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>
)
}

Loading…
Cancel
Save