From 7072675740f3f9b436885b64084367f33408fbaf Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Thu, 24 Aug 2023 18:30:14 +0800 Subject: [PATCH] =?UTF-8?q?=E7=96=BE=E7=97=85=E5=88=86=E7=B1=BB?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/brand.ts | 2 +- src/api/home.ts | 2 +- src/components/empty/empty.module.scss | 5 +- .../home/components/feature_recommended.tsx | 10 +- src/pages/home/components/search.tsx | 16 +- src/pages/home/home.module.scss | 7 +- src/pages/preview/brand/list/list.tsx | 2 +- .../illness/sort/components/search.tsx | 13 ++ src/pages/preview/illness/sort/sort.config.ts | 1 + .../preview/illness/sort/sort.module.scss | 44 +++--- src/pages/preview/illness/sort/sort.tsx | 139 ++++++++++++------ src/static/img/leftArrow.png | Bin 0 -> 406 bytes types/home.d.ts | 1 + 13 files changed, 155 insertions(+), 87 deletions(-) create mode 100644 src/pages/preview/illness/sort/components/search.tsx create mode 100644 src/static/img/leftArrow.png diff --git a/src/api/brand.ts b/src/api/brand.ts index 5fd8a85..6b11f9f 100644 --- a/src/api/brand.ts +++ b/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") }, diff --git a/src/api/home.ts b/src/api/home.ts index 5d39f6a..5e73f53 100644 --- a/src/api/home.ts +++ b/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) { diff --git a/src/components/empty/empty.module.scss b/src/components/empty/empty.module.scss index 31f0f58..10efb9e 100644 --- a/src/components/empty/empty.module.scss +++ b/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 { diff --git a/src/pages/home/components/feature_recommended.tsx b/src/pages/home/components/feature_recommended.tsx index f69f5cf..b251b88 100644 --- a/src/pages/home/components/feature_recommended.tsx +++ b/src/pages/home/components/feature_recommended.tsx @@ -59,7 +59,7 @@ const FeatureRecommended: FC = () => { async function getBrand(): Promise { try { const res = await HomeApi.brand(1, 3) - return res.data.map(d => ({ + return res.list.map(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(d => ({ id: d.id, imageUrl: d.url_path, - description: '', - title: d.resource.name, - path: `?url=${d.resource.url}&poster=${d.url_path}&title=${d.resource.name}` + description: d.introduction, + title: d.resource?.name, + path: `?url=${d.resource?.url}&poster=${d.url_path}&title=${d.resource?.name}` })) } catch (e) { } diff --git a/src/pages/home/components/search.tsx b/src/pages/home/components/search.tsx index 7910e33..aec1dce 100644 --- a/src/pages/home/components/search.tsx +++ b/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) => { return ( - - 搜索课程 + + props.onConfirm((e.target as any).value!)} + className='flex-1 pl-1'/> ) } diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss index d2b5e90..c36351d 100644 --- a/src/pages/home/home.module.scss +++ b/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 { diff --git a/src/pages/preview/brand/list/list.tsx b/src/pages/preview/brand/list/list.tsx index fac5737..474d4ff 100644 --- a/src/pages/preview/brand/list/list.tsx +++ b/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) { } diff --git a/src/pages/preview/illness/sort/components/search.tsx b/src/pages/preview/illness/sort/components/search.tsx new file mode 100644 index 0000000..3e30210 --- /dev/null +++ b/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 ( + + + 搜索课程 + + ) +} diff --git a/src/pages/preview/illness/sort/sort.config.ts b/src/pages/preview/illness/sort/sort.config.ts index b7d09ab..dd92909 100644 --- a/src/pages/preview/illness/sort/sort.config.ts +++ b/src/pages/preview/illness/sort/sort.config.ts @@ -1,3 +1,4 @@ export default definePageConfig({ navigationBarTitleText: '疾病知识', + navigationStyle: "custom", }) diff --git a/src/pages/preview/illness/sort/sort.module.scss b/src/pages/preview/illness/sort/sort.module.scss index c0c2030..3e4d4fa 100644 --- a/src/pages/preview/illness/sort/sort.module.scss +++ b/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 { - padding: 0 15rpx; +.search { + width: 710rpx; 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 { + border-radius: 100px; + line-height: 68rpx; + color: #bbb; + font-size: 28rpx; display: flex; - flex-wrap: wrap; - align-items: flex-start; + align-items: center; + justify-content: center; } -.secondary { - width: 50%; +.tree { padding: 0 15rpx; + background: #fff; box-sizing: border-box; - color: #323635; - text-align: center; - line-height: 60rpx; - background: #F5F8F7; - border-radius: 8rpx; - margin-bottom: 20rpx; - background-clip: content-box; + height: calc(100vh - env(safe-area-inset-bottom) - env(safe-area-inset-top) - 200rpx) +} + +.list { + padding: 20rpx; + border-bottom: 1px solid #F5F8F7; } diff --git a/src/pages/preview/illness/sort/sort.tsx b/src/pages/preview/illness/sort/sort.tsx index de5df38..230971e 100644 --- a/src/pages/preview/illness/sort/sort.tsx +++ b/src/pages/preview/illness/sort/sort.tsx @@ -1,69 +1,120 @@ -import {ScrollView, View} from "@tarojs/components"; -import {FC, useState} from "react"; +import {Image, ScrollView, 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 {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([]) - const [select, setSelect] = useState(null) + const [firstId, setFirstId] = useState(undefined) + const [secondId, setSecondId] = useState(undefined) + const [list, setList] = useState([]) + + + 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(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 ( - - - { - data.map(d => setSelect(`${prefix}-${d.id}`)} - className={`${select === `${prefix}-${d.id}` && styles.select}`}> - {d.name} - ) - } - + + + Taro.navigateBack()}/> + firstIdChange(data.tab?.value as number)}/> + + + + + { + data.find(d => d.id === firstId)?.resource_category?.map(d => setSecondId(d.id)} + className={secondId === d.id && styles.select}> + {d.name} + ) + } + - - { - data.map(d => - {d.name} - - { - d.resource_category?.map(c => jump(c.id)} - key={d.id} - className={styles.secondary}> - {c.name} - ) - } - - - ) - } - + + { + list.length ? + list.map(d => jump(d.id)}>{d.title}) + : + } + + ) } diff --git a/src/static/img/leftArrow.png b/src/static/img/leftArrow.png new file mode 100644 index 0000000000000000000000000000000000000000..4c3ceda542d53a8340edb5998173c53bf6d68fd4 GIT binary patch literal 406 zcmV;H0crk;P)Px$P)S5VR9HvN*Ue6ZFc1fDhrWWZpy5NG!M*5u_Bl1af$^e7j~pNv4jlKqhQubc zW184xV}MRehm~uS{(nqiVBjS3mFIbpB*}x>R%^Yfs%keE0WtGUH~>5Yz^U0+DRo!Z z_2VjlG)*ss5KlH75#Rg1-*jE~%?=m||BzB%w{5$3Re13cED1NbMS!ugODS(CcWx^a z4EP(awSH4dZJVa~a+UpXJqQphJm?5whI<2IhkF4y!pQ)xa1wws+zH?gp9PFGnb%<$ zZhhZ#S5KJi14U6Z0B~+LK*Sdz#I`KU-nF6c`W)aB0M35D>p@+Pf|&%YasL1NA++V= zt_100#EBpQOf|R=WB?b!3&4T!2E;}L0b(M80b>X=3#|52I@Ko-kvtPPJ0Yc)PgH`8 zSabx3z@v_47IM_#)FQGhyAVR$BO)N;m1{iz0S~HhFsdI)hyVZp07*qoM6N<$f_zq{ AtN;K2 literal 0 HcmV?d00001 diff --git a/types/home.d.ts b/types/home.d.ts index 8a43aaf..badd229 100644 --- a/types/home.d.ts +++ b/types/home.d.ts @@ -25,6 +25,7 @@ interface Resource { interface Kill { id: number resource: Resource + introduction:string title: string url_path: string }