From c961892d9b7d60652710e7d829ecf08ae85f32a9 Mon Sep 17 00:00:00 2001
From: king <2229249788@qq.com>
Date: Tue, 22 Aug 2023 15:27:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/home.ts                               |   5 +-
 src/api/public.ts                             |   1 +
 src/app.config.ts                             |   3 +-
 src/pages/home/components/feature.tsx         |   2 +-
 .../home/components/feature_recommended.tsx   |  27 +++++--
 src/pages/preview/illness/sort/sort.config.ts |   3 +
 .../preview/illness/sort/sort.module.scss     |  71 ++++++++++++++++++
 src/pages/preview/illness/sort/sort.tsx       |  71 ++++++++++++++++++
 src/static/img/first.png                      | Bin 453 -> 681 bytes
 src/static/img/second.png                     | Bin 457 -> 791 bytes
 src/static/img/third.png                      | Bin 466 -> 853 bytes
 types/home.d.ts                               |   9 ++-
 12 files changed, 183 insertions(+), 9 deletions(-)
 create mode 100644 src/pages/preview/illness/sort/sort.config.ts
 create mode 100644 src/pages/preview/illness/sort/sort.module.scss
 create mode 100644 src/pages/preview/illness/sort/sort.tsx

diff --git a/src/api/home.ts b/src/api/home.ts
index da8a404..e6ef81c 100644
--- a/src/api/home.ts
+++ b/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")
   }
 }
diff --git a/src/api/public.ts b/src/api/public.ts
index 8337e6d..b8c363a 100644
--- a/src/api/public.ts
+++ b/src/api/public.ts
@@ -6,6 +6,7 @@ export interface Category {
   parent_chain: string
   parent_id: number
   sort: number
+  resource_category?: Category[]
 }
 
 interface CategoryList {
diff --git a/src/app.config.ts b/src/app.config.ts
index 4435b93..24cfbcc 100644
--- a/src/app.config.ts
+++ b/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'
       ]
     },
   ],
diff --git a/src/pages/home/components/feature.tsx b/src/pages/home/components/feature.tsx
index 0ab46de..9f1a6f0 100644
--- a/src/pages/home/components/feature.tsx
+++ b/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) {
diff --git a/src/pages/home/components/feature_recommended.tsx b/src/pages/home/components/feature_recommended.tsx
index 3250dc8..d74dcd6 100644
--- a/src/pages/home/components/feature_recommended.tsx
+++ b/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)
     })
   }, [])
diff --git a/src/pages/preview/illness/sort/sort.config.ts b/src/pages/preview/illness/sort/sort.config.ts
new file mode 100644
index 0000000..b7d09ab
--- /dev/null
+++ b/src/pages/preview/illness/sort/sort.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '疾病知识',
+})
diff --git a/src/pages/preview/illness/sort/sort.module.scss b/src/pages/preview/illness/sort/sort.module.scss
new file mode 100644
index 0000000..c0c2030
--- /dev/null
+++ b/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;
+}
diff --git a/src/pages/preview/illness/sort/sort.tsx b/src/pages/preview/illness/sort/sort.tsx
new file mode 100644
index 0000000..c4e9781
--- /dev/null
+++ b/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
diff --git a/src/static/img/first.png b/src/static/img/first.png
index 7aa104458de9dfccd8284e040dc5f19b0d8e67e8..08837997845bc7bd8adf7bfd2abacfbb4b8ef1b7 100644
GIT binary patch
delta 644
zcmV-~0(<?%1E~d&Fn<DLNkl<ZNK3Vr-%Aux6vw}3*4$PhQ^SaSip)YPUm|+VA_#&W
zf+8zSqC$}#A}k1*D2iB!B3PtIilG0Xh^5*}w5_Bt`t@L`yKUKGwzKQ1yEAuA%-U|-
zkDa*-d0sAO=6lZPeDA>AOR4wQm;f+<xmYRn?keZH<7Z@P|9>H;nK#{5yEzM*dF{&s
zIFC;5YOtvTdLnOQ3tOe>SC^$7xE9u9UTqVM=m3o9Gbz_JJ$R9w<|cO)N@~`DJT;lA
zg*F87HJAg~)zj3=3$_lF@}+Pu-vMLdE%eAkxR-5*m<+=h`vtJGLdh3iTL8H{04ZQ2
znd#%M+X*ufhJQZRFSkX>f%DSeAOl#jYZmaOPYy8o{A^Kx`Sr~Zi4gS9y^?^ZXNm)?
z+yjvqg&vUvB!Z`k0(e&KgNTnJ9eE_@Al~1_1cLRykXbzqEfCrWQlA1+dW!d*EXqMy
zLo1B<Fw)_GoCB@*L~(%C2OzXzq(b*40gpS!0aQz=0e_UOIS3K^h*apFa|vUdVu7RQ
zKy=($J*y~Rdl-fV81*}r5OA6}pq9iCzfM52V}%81Y=aRSLTbbwKtwkeL__<nLo5^8
zgCo05CLh2RGN8g5(iGyhij9|US(+TcO1|Ccs8ve2he4aO4YJ3mRL=05ir%`YsXLOd
z|7(~De|>v916~4qB;8Cw!Lh1MKHs1E-yGz>)cl9)1k()$HrQPW2=qi3=HA6yuYCB|
zFa-gYm|0c6-;HzvP#GxAZ$LmAq;yqoS>h#9%|cFX0okJH?UqJGaj9TlZ#`2$K@zN1
eZtEFz+QJ`!0~c;3kV$6%0000<MNUMnLSTX{0xRVJ

delta 415
zcmV;Q0bu^A1;qo9Fn<AmNkl<ZNK3Vr-7CXU7{|ZgL&}Xcl$2Zd?&Q`>O8Ey!;YL|<
zA&t`diAXDvS|TFlKOpVGiZBsP#El!Zn>B3nPTQl6pMG98%Fc6hI&aVC`#qhWbNF;N
zCj=k>bhLarot2O5cn_17g+3oorjzNk1s{(+7C;uIrz8vbaDOzV*TF+zLb9*>?ZPC3
z_lM(p9o!wbH3Rm?^a5`8Ml=I<hxGz({DXP{v2B+SM6zD!Xc^lY(CZ+&*{>O};S2*P
z(o*dNVMcsCqagcq00<0Gd`4~ru>}In*@Tc>DhOS)nKcQ~_3oyG&;y9=e;`H`rPEeD
zxtuC?)?}BfU4LaNPv!-zGsn$m^iO?(H=$nIi)*HX*7e^6UwIu40o;V-|Iy7o6nYD5
zJ)W=YKRK{YM!g;7ap9r>Rhhm71b1HIiI$Rvne(5-qy?lNJTcVuTF?o=5FpQ*fWR}T
zT=x1>H)$l&In4+#H-%POE0oGHAX1qeQ=p%5G3<@=ff(P8@D<OXx?g1=R_*`*002ov
JPDHLkV1j<O!-)U@

diff --git a/src/static/img/second.png b/src/static/img/second.png
index a225843795996477dab5da176e72a939decb979a..1db9813dc74d1d381c9601ee206d22333fd19c91 100644
GIT binary patch
delta 755
zcmV<P0u24h1D6JnFn<EkNkl<ZNK3U<O-vI}5dLN@hO(uoC2A3sK&S$(MWRt+JbJ`H
zjHJ<U(4(G>o=g)D9=LNf8iNM|gh-Geff8)^u_?7hD4-&?6fU%dC{XEcpV`$dShg*g
z@D96qZ)U#l&CHj1H0kj&?Bk*dw`YF|ye{|t5_ra3yCTTf>wm%L>*Qhz@i?O42t-lL
zT3m9Ej4==aj6v<saU9Cdn2?*Bi<M{;q97no$Ajm2e4qP<l}J=IPQfGB@Ti;t0ob03
zvM)20Lz9z(FaBwWiA3_ohC%~Qmz845>q9K|D{VY|a1P73(nkVSmbBMuwXoDw!{_!O
z7K`n$S6HgB8h>5E(n3fzUc#f%A!phi95o)tF{2R^;~v#omzv7u^SRm2X?sD#gF|Tv
z4i_5aEEa<cssQHmR=L@sKrlUlb6{{+DoRB-WH^FKiy7l%F2puA(i05zJN8V#>vS+%
z&tWOFh`{`OMyb+ZU;my6j73F|lobpFWSM4LG|=0}6n{x(`XA6}aJH%v`T{*>ru+ym
zhm+FG6i59%y;(EJ<9S#w)L?yW4O6}e#5d#FE}pbgUw2PN0%<&4ti3ENY1TizYhcBZ
zdb{2(gJ6&klyULbDvgQSt5*;SN8tZ7xx=37pSov^EmO~%uBQM!QoGuTlf|+WN8URj
z2%>7u1%E+6Jg#0cB0M37!=c$&{rQ}M-A*MjTP-+MQj)PO3xObfo{u|xIN;@v&Dfpf
z`04KKyu}h|VL-v23%xCXfK|rfUR{0tD`ki#&F$^&#W|p7jN#h<kPz^W62jfO#>P;x
z$!b8IZ5{VnBGF7lTE?X3V(Yy~vtQ?c2iI@jXlzNv+diTHv30ezmB&T)0zhq+Y(|KQ
zO$|2NS2e%11hQ)FcCN!z@sJVh01l=AY;wTkh8ce|+3i~|QHoPW0>$@rYil*Y*+IDU
l=Zr=ZBJ8#%n>SmpegllHGFSCrOhNzv002ovPDHLkV1iiNZa)A3

delta 419
zcmV;U0bKr<2FU}EFn<AqNkl<ZNK3Vqze_?<6vw~kQ9)BfYimJUTl5Ds8cHOO!lA~R
zqo#P!(BSSEMc5E3l9-t26A^zTA`%e|jcqPcR9L<f@6~&WXo7j}a4+X_@Aq>L_ulWJ
zyIP$g*yy%elLgc(Raro-T#*G-i)988zzm6zDut4j0RiYtWq(vL-Q)|FuGyKQb{kbp
zrCeV24hq?vEFhoB$^vp}T^5i{rDXw`WQy%4DKSzyk(A9K6;H?llCi4>2-DUFv+ct9
zZ9n!gWX#MBN?gW{0NR%*2}C#~UDwCnnlC2|-WVlB0nVOV@0*VO#G}!5HV|N7>OUX?
znyg^k<#wOjCV%Sag~Q>QanLa{mWP25a81VNmdopXviElysG}JTMRwRQ{6sX#Y?h1P
zdeJ9-Re;@<wbelP!FmGBMX^w5_M^?G0G0-1QzUNtJgWNGYh7P}^=dUuiOkLKF+l?`
z(IwDQfCJCNy`MDA=y!-e0rsYgU~mCYG!PcQ=cr_~p&Y3`wLa*sz5s9@$4Jfa)+GP{
N002ovPDHLkV1f-j#eo0-

diff --git a/src/static/img/third.png b/src/static/img/third.png
index 8226ada52545f0221f86f6e698889ec5feb3cbb3..71cefe9a884a605a994f7ae1a1364779f6db3fc4 100644
GIT binary patch
delta 818
zcmV-21I_%>1JwqQFn<FNNkl<ZNK3U<TSydP6#mZc?7D86kqL`wnrH|@W`U9qSw!{H
zTM^NPvX{!BhoJ1GT8gL;DUhU)EKvjliO`ZHO1zX*paw!nY2^hk>t)qlN5`2HGwUv^
zJEQsF|1$jlxqRoG@0>F<*ILCO01T|fmu5dzs;<}Ukl0+#Ykv~@LP=<*v25iGh`{R|
zz`BiErX<Y(69a%Gu9!J_8%mc4u!IBK_5gwv81DlsGDroAi~+h^fwA6YLCEu=g#G;b
zH3N4t0ci(;Sr72D1z<%}(d5wypyX_DM=e;K()uIBUe%j=|AYwy4r(L+ouXnvsX5?p
z)nIup&}M$QDS!Pi*!3Ie@6@$dxuwba;$Yv4_@<a7P((D8?ytIiU{2i&_D(?g({9)&
z<gP1PnPj~xlL<oBF(}<%pbU2#@<0=B9<3UHY>_Z0XMwDCNNu$NZgk@quPF?g1HX!Y
zv=`sQ_FoM6P)7ek`u+}3=7Uy1s6CCnE?89tWU&GED1QhE8CnK&Z8d-_8JB4E)%{fg
z1beb(9tBShL;BHZ4B)E1YY1R=q(GS*(K<!%2=Ut?BxXQtDl-NcetDaT0Cn1yer=gY
zpty%1bv5hCEr}Tr;?f|tROrf8e>7Be%LS%ry%4NPyI|S66W)eWuq=nD*t3sAb`N5<
zv%w$(c7M@e<&Ap)uIsj#S%5v~EZFPDO#54~=<zK(iw$9E`ye=y;ZeaC-k16yqC3PN
zox;$7^n#gB>VnuJ5T1Srg38DAn5JTi+=Tg&9*AvqPz?A1QF)W4D>tyC1}pMUD2!q-
zqI7{QHkda!G?6^z0*ll7Wns8sMqccx2bEg3!GBtPCD-D}!leKX_}&fo?1EW{yj~&s
zT>P1b{lOy_5=sBFE0>s103iH7F}y@{b#rcEaR?7a4cz<uatg_&GG^ZGV|F2-;Lx<z
zrq7BjpWbr5=$CG34JSnP=X9F-W5@Cpu#=gsi|R=<N5IXvf#?EqI(>g4owLZsNU7&>
w-YX818BQ>=v}6daCdkgX3r{<i3s9B)1Ab#*DFDbs_W%F@07*qoM6N<$f~5?JlmGw#

delta 428
zcmV;d0aO0f2GRqNFn<AzNkl<ZNK3Vp%PT~26vw~c@hB^c*)i<w?c@*ePk1CYG|EDG
zY;Yr?Nt8?^k7+bTNs^R=5VN&avS21O9z({fdynqr>JG*u^ZRXnoqK=3^ZA|gJ?HQ#
zJS!jo0aWaK+zpwol`TH(1Vzcy-%`T+t$^AH5}T810e9=;Vt?yv3z1Hnw`-$95aKAK
zblSXG^*ep1U2n!$hSh3ty*#8AaJ4kx=mT43yS4vs^K#LrHiC<VKDB_@e2-ed`CONf
zfZ1&-cAm|4#vpX78K)BCX{fyyK${8x$!^MqmU$L^o)(dcv_i<>cGf|SS@706ooOvM
z1bzr|{{<4nk$(YiUS)sC^z#ldjg#>f53^(vK-nwg&vSLvpk7;0Js5Ge=%)uqCYl<A
z@BzsAB_lzyIlpGW|It}e1kRtwQ;kK`T>%j(wZ5mA9whe+U9T#v8$SFhwJ8Bsf;7z)
z$-8VdAex9|CmklA2y}R&ZXY$xNTu7i0Q=I>h_~340VNHB5-S)Y?1HX&>c{qfDu@>u
WIpP}InyIA#0000<MNUMnLSTYMi_571

diff --git a/types/home.d.ts b/types/home.d.ts
index b9b4c4e..8a43aaf 100644
--- a/types/home.d.ts
+++ b/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
+}