From fe4c7108d8792ad871825685a1b46581168b7f73 Mon Sep 17 00:00:00 2001 From: king <2229249788@qq.com> Date: Mon, 21 Aug 2023 14:22:32 +0800 Subject: [PATCH] =?UTF-8?q?=E5=81=A5=E5=BA=B7=E7=9F=A5=E8=AF=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .env | 4 +- src/api/home.ts | 4 ++ src/app.config.ts | 1 + src/pages/health/health.config.ts | 4 ++ src/pages/health/health.module.scss | 34 +++++++++++ src/pages/health/health.tsx | 42 ++++++++++++++ src/pages/home/components/adware.tsx | 4 +- .../home/components/feature_recommended.tsx | 56 ++++++++++++++----- src/pages/home/home.module.scss | 18 +++++- src/static/css/module.scss | 17 ++++++ types/home.d.ts | 6 ++ 11 files changed, 172 insertions(+), 18 deletions(-) create mode 100644 src/pages/health/health.config.ts create mode 100644 src/pages/health/health.module.scss create mode 100644 src/pages/health/health.tsx create mode 100644 types/home.d.ts diff --git a/.env b/.env index 064f56f..5445a7b 100644 --- a/.env +++ b/.env @@ -1,5 +1,5 @@ -#TARO_APP_API=https://yjx.dev.yaojiankang.top -TARO_APP_API=https://mooc.yaojiankang.top +TARO_APP_API=https://yjx.dev.yaojiankang.top +#TARO_APP_API=https://mooc.yaojiankang.top #TARO_APP_API=https://playedu.yaojiankang.top TARO_APP_LGOIN=true diff --git a/src/api/home.ts b/src/api/home.ts index 7ce586d..e5272dc 100644 --- a/src/api/home.ts +++ b/src/api/home.ts @@ -33,5 +33,9 @@ export const HomeApi = { }, course(page: number, page_size: number) { return request<{ data: Curriculum[], total: number }>('/home/v1/course/course', "GET", {page, page_size}) + }, + /** 健康管理 */ + health(page: number, page_size: number) { + return request<{ data: Health[], total: number }>('/home/v1/health/index', "GET", {page, page_size}) } } diff --git a/src/app.config.ts b/src/app.config.ts index 7ee6f9d..0bd7fb5 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -6,6 +6,7 @@ export default defineAppConfig({ 'pages/login/login', 'pages/check/check', 'pages/my/my', + 'pages/health/health', ], window: { backgroundTextStyle: 'light', diff --git a/src/pages/health/health.config.ts b/src/pages/health/health.config.ts new file mode 100644 index 0000000..dd2f7ad --- /dev/null +++ b/src/pages/health/health.config.ts @@ -0,0 +1,4 @@ +export default definePageConfig({ + navigationBarTitleText: '健康知识', + onReachBottomDistance: 30 +}) diff --git a/src/pages/health/health.module.scss b/src/pages/health/health.module.scss new file mode 100644 index 0000000..f28a403 --- /dev/null +++ b/src/pages/health/health.module.scss @@ -0,0 +1,34 @@ +.container { + width: 100%; + padding: 0 20rpx; + box-sizing: border-box; + columns: 2; + column-gap: 20rpx; +} + +.health { + break-inside: avoid; + background: #fff; + border-radius: 10px; + overflow: hidden; + margin-bottom: 20rpx; + position: relative; + + image, + Image { + background: #eee; + width: 100%; + min-height: 345rpx; + } +} + +.play { + position: absolute; + min-height: 70rpx !important; + z-index: 9999; + width: 40rpx !important; + height: 40rpx !important; + top: 20rpx; + right: 20rpx; + background: transparent !important; +} diff --git a/src/pages/health/health.tsx b/src/pages/health/health.tsx new file mode 100644 index 0000000..1c9dfbb --- /dev/null +++ b/src/pages/health/health.tsx @@ -0,0 +1,42 @@ +import {FC, useEffect, useState} from "react"; +import {Image, ScrollView, View} from "@tarojs/components"; +import {HomeApi} from "@/api"; +import {useReachBottom} from "@tarojs/taro"; +import styles from './health.module.scss' +import play from '@/static/img/play.png' + +const Health: FC = () => { + const [page, setPage] = useState(1) + const [data, setData] = useState([]) + const [total, setTotal] = useState(0) + + async function getData(page: number) { + const res = await HomeApi.health(page, 10) + setData(res.data) + setTotal(res.total) + } + + useReachBottom(() => { + data.length < total && setPage(page + 1) + }) + + useEffect(() => { + getData(page) + }, [page]) + + return ( + + + { + data.map(d => + + + {d.title} + ) + } + + + ) +} + +export default Health diff --git a/src/pages/home/components/adware.tsx b/src/pages/home/components/adware.tsx index 705563b..fbe7b6e 100644 --- a/src/pages/home/components/adware.tsx +++ b/src/pages/home/components/adware.tsx @@ -9,7 +9,7 @@ const Adware: FC = () => { const [data, setData] = useState([]) async function getAdware() { - const res = await HomeApi.advert('home_swiper') + const res = await HomeApi.advert('home_space') setData(res) } @@ -20,7 +20,7 @@ const Adware: FC = () => { { data.length === 1 && jumpAdware(data[0].advert_link)} diff --git a/src/pages/home/components/feature_recommended.tsx b/src/pages/home/components/feature_recommended.tsx index 507bc35..3281c26 100644 --- a/src/pages/home/components/feature_recommended.tsx +++ b/src/pages/home/components/feature_recommended.tsx @@ -1,39 +1,69 @@ -import {FC, useState} from "react"; -import {Swiper, SwiperItem, View} from "@tarojs/components"; +import {FC, useEffect, useState} from "react"; +import {Image, Swiper, SwiperItem, View} from "@tarojs/components"; import styles from '../home.module.scss' import Taro from "@tarojs/taro"; +import {HomeApi} from "@/api"; interface DataContent { id: number, + imageUrl: string title: string, - Description: string + description: string } interface Data { title: string, url: string, + detailsUrl: string data: DataContent[] } const FeatureRecommended: FC = () => { - const [data] = useState([ - {title: "品牌TOP3", url: '', data: []}, - {title: "健康", url: '', data: []}, - {title: "专业技能", url: '', data: []}, - {title: "疾病知识", url: '', data: []}, + const [data, setData] = useState([ + {title: "品牌TOP3", url: '', detailsUrl: '', data: []}, + {title: "健康知识", url: '/pages/health/health', detailsUrl: '', data: []}, + {title: "专业技能", url: '', detailsUrl: '', data: []}, + {title: "疾病知识", url: '', detailsUrl: '', data: []}, ]) + /** 健康知识 */ + async function getHealth() { + const res = await HomeApi.health(1, 3) + const oldData: Data[] = JSON.parse(JSON.stringify(data)) + if (res.data.length) { + oldData[1].data = res.data.map(d => ({ + id: d.id, + title: d.title, + imageUrl: d.url_path, + description: d.introduction + })) + } + setData(oldData) + } + + useEffect(() => { + getHealth() + }, []) + function jump(url: string) { Taro.navigateTo({url}) } - return ( - - + + { - data.map(d => - jump(d.url)}>{d.title} + data.map(d => + jump(d.url)}>{d.title} + { + d.data.map(c => jump(d.detailsUrl + c.id)}> + + + {c.title} + {c.description} + + ) + } ) } diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss index 0072faa..79f0a75 100644 --- a/src/pages/home/home.module.scss +++ b/src/pages/home/home.module.scss @@ -53,10 +53,26 @@ display: block; } -.featureRecommended { +.feature { + color: #323635; background: #fff; padding: 30rpx; margin-top: 20rpx; border-radius: 16rpx; box-shadow: inset -30px -30px 30px rgba(#fff, .9); } + +.featureTitle { + font-weight: bold; + font-size: 32rpx; + padding-bottom: 24rpx; +} + +.featureImage { + width: 140px; + height: 90px; + background: #eee; + border-radius: 10rpx; + overflow: hidden; + margin-right: 20rpx; +} diff --git a/src/static/css/module.scss b/src/static/css/module.scss index b440b00..8f57891 100644 --- a/src/static/css/module.scss +++ b/src/static/css/module.scss @@ -84,3 +84,20 @@ taro-button-core::after { color: #fff; font-size: 32rpx; } + +/** 单行文本省略 */ +.text-ellipsis { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; +} + +/** 多行文本省略 */ +.text-ellipsis-2 { + overflow: hidden; + text-overflow: ellipsis; + -webkit-line-clamp: 2; + display: -webkit-box; + -webkit-box-orient: vertical; +} diff --git a/types/home.d.ts b/types/home.d.ts new file mode 100644 index 0000000..ffbd2ff --- /dev/null +++ b/types/home.d.ts @@ -0,0 +1,6 @@ +interface Health { + id: number + title: string + introduction: string + url_path: string +}