疾病分类

src/api/brand.ts

@@ -21,7 +21,7 @@ export const brandApi = {
   /** 品牌列表 */
   list(page: number , page_size: number) {
     return request<{
-      data: BrandRecord[],
+      list: BrandRecord[],
       total: number
     }>(`/home/v1/brand/list?page=${page}&page_size=${page_size}` , "GET")
   },

src/api/home.ts

@@ -49,7 +49,7 @@ export const HomeApi = {
   },
   /** 品牌 */
   brand(page: number, page_size: number) {
-    return request<{ data: Brand[], total: number }>('/home/v1/brand/list', "GET", {page, page_size})
+    return request<{ list: Brand[], total: number }>('/home/v1/brand/list', "GET", {page, page_size})
   },
   /** 技能 */
   skillTop(count: number) {

src/components/empty/empty.module.scss

@@ -1,5 +1,5 @@
 .empty {
-  width: 750rpx;
+  width: 100%;
   text-align: center;
   color: #6c757d;
   position: relative;
@@ -8,7 +8,8 @@
 .image {
   display: block;
   margin: auto;
-  width: 600rpx;
+  max-width: 600rpx;
+  width: 80%;
 }
 
 .name {

src/pages/home/components/feature_recommended.tsx

@@ -59,7 +59,7 @@ const FeatureRecommended: FC = () => {
   async function getBrand(): Promise<DataContent[]> {
     try {
       const res = await HomeApi.brand(1, 3)
-      return res.data.map<DataContent>(d => ({
+      return res.list.map<DataContent>(d => ({
         id: d.id,
         title: d.name,
         imageUrl: d.brand_album,
@@ -80,7 +80,7 @@ const FeatureRecommended: FC = () => {
         title: d.title,
         imageUrl: d.url_path,
         description: d.introduction,
-        path: `?url=${d.resource.url}&poster=${d.url_path}&title=${d.resource.name}`
+        path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.resource?.name}`
       }))
     } catch (e) {
     }
@@ -94,9 +94,9 @@ const FeatureRecommended: FC = () => {
       return res.map<DataContent>(d => ({
         id: d.id,
         imageUrl: d.url_path,
-        description: '',
+        description: d.introduction,
-        title: d.resource.name,
+        title: d.resource?.name,
-        path: `?url=${d.resource.url}&poster=${d.url_path}&title=${d.resource.name}`
+        path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.resource?.name}`
       }))
     } catch (e) {
     }

src/pages/home/components/search.tsx

@@ -1,13 +1,21 @@
 import {FC} from "react";
-import {Text, View} from "@tarojs/components";
+import {Input, View} from "@tarojs/components";
 import styles from "../home.module.scss";
 import Icon from "@/components/icon";
 
-export const Search: FC = () => {
+interface Props {
+  onConfirm: (value: string) => void
+}
+
+export const Search: FC<Props> = (props) => {
   return (
     <View className={styles.search}>
-      <Icon name='search' size={18}/>
+      <Icon name='search' size={18} color='#808080'/>
-      <Text className='ml-1'>搜索课程</Text>
+      <Input
+        placeholder='搜索疾病名称'
+        confirmType='search'
+        onConfirm={(e) => props.onConfirm((e.target as any).value!)}
+        className='flex-1 pl-1'/>
     </View>
   )
 }

src/pages/home/home.module.scss

@@ -38,12 +38,13 @@
   width: 710rpx;
   background: #fff;
   border-radius: 100px;
-  line-height: 68rpx;
-  color: #bbb;
   font-size: 28rpx;
   display: flex;
+  padding-left: 20rpx;
   align-items: center;
-  justify-content: center;
+  box-sizing: border-box;
+  margin: 20rpx;
+  height: 76rpx;
 }
 
 .adware {

src/pages/preview/brand/list/list.tsx

@@ -19,7 +19,7 @@ const BrandList: FC = () => {
       const res = await brandApi.list(1, 10)
       setTotal(res.total)
       setBrands([
-        ...res.data
+        ...res.list
       ])
     } catch (e) {
     }

src/pages/preview/illness/sort/components/search.tsx

@@ -0,0 +1,13 @@
+import {FC} from "react";
+import {Text, View} from "@tarojs/components";
+import styles from "../sort.module.scss";
+import Icon from "@/components/icon";
+
+export const Search: FC = () => {
+  return (
+    <View className={styles.search}>
+      <Icon name='search' size={18}/>
+      <Text className='ml-1'>搜索课程</Text>
+    </View>
+  )
+}

src/pages/preview/illness/sort/sort.config.ts

@@ -1,3 +1,4 @@
 export default definePageConfig({
   navigationBarTitleText: '疾病知识',
+  navigationStyle: "custom",
 })

src/pages/preview/illness/sort/sort.module.scss

@@ -1,6 +1,6 @@
 .firstOrder {
   width: 300rpx;
-  height: calc(100vh - env(safe-area-inset-bottom));
+  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 200rpx);
 
   View {
     width: 100%;
@@ -21,6 +21,7 @@
   font-weight: bold;
   position: relative;
   transition: all 200ms;
+  background: #fff;
 
   &:after {
     content: '';
@@ -37,35 +38,26 @@
   }
 }
 
-.tree {
+.search {
-  padding: 0 15rpx;
+  width: 710rpx;
   background: #fff;
-  box-sizing: border-box;
+  border-radius: 100px;
-  height: calc(100vh - env(safe-area-inset-bottom));
+  line-height: 68rpx;
-}
+  color: #bbb;
-
+  font-size: 28rpx;
-.name {
-  font-size: 32rpx;
-  font-weight: bold;
-  color: #323635;
-  padding: 40rpx 0 40rpx 15rpx;
-}
-
-.secondaryBox {
   display: flex;
-  flex-wrap: wrap;
+  align-items: center;
-  align-items: flex-start;
+  justify-content: center;
 }
 
-.secondary {
+.tree {
-  width: 50%;
   padding: 0 15rpx;
+  background: #fff;
   box-sizing: border-box;
-  color: #323635;
+  height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 200rpx)
-  text-align: center;
+}
-  line-height: 60rpx;
+
-  background: #F5F8F7;
+.list {
-  border-radius: 8rpx;
+  padding: 20rpx;
-  margin-bottom: 20rpx;
+  border-bottom: 1px solid #F5F8F7;
-  background-clip: content-box;
 }

src/pages/preview/illness/sort/sort.tsx

@@ -1,41 +1,104 @@
-import {ScrollView, View} from "@tarojs/components";
+import {Image, ScrollView, View} from "@tarojs/components";
-import {FC, useState} from "react";
+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>
+      <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={select!}
+          scrollIntoView={`${prefix}-${secondId}`}
           className={styles.firstOrder}>
           {
-          data.map(d => <View
+            data.find(d => d.id === firstId)?.resource_category?.map(d => <View
               id={`${prefix}-${d.id}`}
               key={d.id}
-            onClick={() => setSelect(`${prefix}-${d.id}`)}
+              onClick={() => setSecondId(d.id)}
-            className={`${select === `${prefix}-${d.id}` && styles.select}`}>
+              className={secondId === d.id && styles.select}>
               {d.name}
             </View>)
           }
@@ -44,27 +107,15 @@ const Sort: FC = () => {
         <ScrollView
           scrollY
           className={styles.tree}
-        scrollWithAnimation
+          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
+            list.length ?
-                    onClick={() => jump(c.id)}
+              list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.title}</View>)
-                    key={d.id}
+              : <Empty name='暂无数据'/>
-                    className={styles.secondary}>
-                    <View className='p-1'>{c.name}</View>
-                  </View>)
-                }
-              </View>
-            </View>
-          )
           }
         </ScrollView>
       </View>
+    </View>
   )
 }
 

types/home.d.ts

@@ -25,6 +25,7 @@ interface Resource {
 interface Kill {
   id: number
   resource: Resource
+  introduction:string
   title: string
   url_path: string
 }