分类

src/api/home.ts

@@ -62,6 +62,9 @@ export const HomeApi = {
   },
   /** 疾病知识 */
   illness(page: number, page_size: number) {
-    return request('/home/v1/article/illness_list', "GET", {page, page_size})
+    return request<{ list: Illness[], total: number }>('/home/v1/article/illness_list', "GET", {page, page_size})
+  },
+  category(type: number) {
+    return request<Category[]>('/home/v1/category/index/info?type=' + type, "GET")
   }
 }

src/api/public.ts

@@ -6,6 +6,7 @@ export interface Category {
   parent_chain: string
   parent_id: number
   sort: number
+  resource_category?: Category[]
 }
 
 interface CategoryList {

src/app.config.ts

@@ -86,7 +86,8 @@ export default defineAppConfig({
         'profession/profession',
         'health/health',  // 健康
         'videoFull/videoFull',  // 资源id 视频全屏
-        'illness/article/article'
+        'illness/article/article',
+        'illness/sort/sort'
       ]
     },
   ],

src/pages/home/components/feature.tsx

@@ -11,7 +11,7 @@ const Feature: FC = () => {
     {url: '/pages/preview/brand/list/list', image: article, text: '品牌'},
     {url: '/pages/preview/health/health', image: health, text: '健康管理'},
     {url: '/pages/preview/profession/profession', image: profession, text: '专业技能'},
-    {url: '', image: illness, text: '疾病知识'},
+    {url: '/pages/preview/illness/sort/sort', image: illness, text: '疾病知识'},
   ]
 
   function jump(url) {

src/pages/home/components/feature_recommended.tsx

@@ -42,7 +42,12 @@ const FeatureRecommended: FC = () => {
       detailsUrl: '/pages/preview/videoFull/videoFull',
       data: []
     },
-    {title: "疾病知识TOP3", url: '', detailsUrl: '', data: []},
+    {
+      title: "疾病知识TOP3",
+      url: '/pages/preview/illness/sort/sort',
+      detailsUrl: '/pages/preview/illness/article/article',
+      data: []
+    },
   ])
 
   /** 品牌 */
@@ -94,17 +99,29 @@ const FeatureRecommended: FC = () => {
   }
 
   /** 疾病 */
-  async function getIllness() {
-    const res = await HomeApi.illness(1, 3)
-    console.log(res)
+  async function getIllness(): Promise<DataContent[]> {
+    try {
+      const res = await HomeApi.illness(1, 3)
+      return res.list.map<DataContent>(d => ({
+        id: d.id,
+        imageUrl: '',
+        description: d.content,
+        title: d.title,
+        path: `?id=${d.id}`
+      }))
+    } catch (e) {
+    }
+    return []
   }
 
   useEffect(() => {
-    Promise.all([getBrand(), getHealth(), getKill(), getIllness()]).then(([brand, health, kill]) => {
+    Promise.all([getBrand(), getHealth(), getKill(), getIllness()]).then(([brand, health, kill, illness]) => {
       const oldData: Data[] = JSON.parse(JSON.stringify(data))
       oldData[0].data = brand
       oldData[1].data = health
       oldData[2].data = kill
+      console.log(illness)
+      oldData[3].data = illness
       setData(oldData)
     })
   }, [])

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

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

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

@@ -0,0 +1,71 @@
+.firstOrder {
+  width: 300rpx;
+  height: calc(100vh - env(safe-area-inset-bottom));
+
+  View {
+    width: 100%;
+    text-align: center;
+    min-height: 100rpx;
+    color: #323635;
+    display: flex;
+    align-items: center;
+    padding: 10rpx;
+    box-sizing: border-box;
+    justify-content: center;
+  }
+}
+
+/** 选中 */
+.select {
+  color: #45D4A8 !important;
+  font-weight: bold;
+  position: relative;
+  transition: all 200ms;
+
+  &:after {
+    content: '';
+    display: block;
+    width: 8rpx;
+    height: 60rpx;
+    background: #45D4A8;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    margin: auto;
+    border-radius: 10rpx;
+  }
+}
+
+.tree {
+  padding: 0 15rpx;
+  background: #fff;
+  box-sizing: border-box;
+  height: calc(100vh - env(safe-area-inset-bottom));
+}
+
+.name {
+  font-size: 32rpx;
+  font-weight: bold;
+  color: #323635;
+  padding: 40rpx 0 40rpx 15rpx;
+}
+
+.secondaryBox {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+}
+
+.secondary {
+  width: 50%;
+  padding: 0 15rpx;
+  box-sizing: border-box;
+  color: #323635;
+  text-align: center;
+  line-height: 60rpx;
+  background: #F5F8F7;
+  border-radius: 8rpx;
+  margin-bottom: 20rpx;
+  background-clip: content-box;
+}

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

@@ -0,0 +1,71 @@
+import {ScrollView, View} from "@tarojs/components";
+import {FC, useState} from "react";
+import {Category, HomeApi} from "@/api";
+import Taro from "@tarojs/taro";
+import styles from './sort.module.scss'
+
+const prefix = 'SORT'
+const Sort: FC = () => {
+  const [data, setData] = useState<Category[]>([])
+  const [select, setSelect] = useState<string | null>(null)
+
+  async function getData() {
+    const res = await HomeApi.category(3)
+    setData(res)
+    if (res.length) {
+      setSelect(`${prefix}-${res[0].id}`)
+    }
+  }
+
+  function jump(id: number) {
+    console.log(id)
+  }
+
+  Taro.useLoad(getData)
+
+  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>
+
+      <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(d.id)}
+                    key={d.id}
+                    className={styles.secondary}>
+                    <View className='p-1'>{c.name}</View>
+                  </View>)
+                }
+              </View>
+            </View>
+          )
+        }
+      </ScrollView>
+    </View>
+  )
+}
+
+export default Sort

types/home.d.ts

@@ -5,7 +5,7 @@ interface Health {
   url_path: string
   resource: Resource
   /** 播放量 */
-  video_view:number
+  video_view: number
 }
 
 interface Brand {
@@ -28,3 +28,10 @@ interface Kill {
   title: string
   url_path: string
 }
+
+interface Illness {
+  id: number
+  content: string
+  title: string
+  thumb:string
+}