健康知识

.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
 

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})
   }
 }

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',

src/pages/health/health.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '健康知识',
+  onReachBottomDistance: 30
+})

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;
+}

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<Health[]>([])
+  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 (
+    <ScrollView>
+      <View className={styles.container}>
+        {
+          data.map(d => <View key={d.id} className={styles.health}>
+            <Image src={d.url_path} mode='widthFix' lazyLoad fadeIn/>
+            <Image src={play} className={styles.play} mode='aspectFit'/>
+            <View className='text-ellipsis-2 p-2'>{d.title}</View>
+          </View>)
+        }
+      </View>
+    </ScrollView>
+  )
+}
+
+export default Health

src/pages/home/components/adware.tsx

@@ -9,7 +9,7 @@ const Adware: FC = () => {
   const [data, setData] = useState<AdwareType[]>([])
 
   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 && <Image
           src={data[0].image_url}
-          mode='widthFix'
+          mode='scaleToFill'
           lazyLoad
           fadeIn
           onClick={() => jumpAdware(data[0].advert_link)}

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<Data[]>([
-    {title: "品牌TOP3", url: '', data: []},
-    {title: "健康", url: '', data: []},
-    {title: "专业技能", url: '', data: []},
-    {title: "疾病知识", url: '', data: []},
+  const [data, setData] = useState<Data[]>([
+    {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<DataContent>(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 (
-    <View className={styles.featureRecommended}>
-      <Swiper nextMargin='30px'>
+    <View className={styles.feature}>
+      <Swiper nextMargin='30px' style={{height: '205px'}}>
+        {
+          data.map(d => <SwiperItem key={d.title}>
+            <View className={styles.featureTitle} onClick={() => jump(d.url)}>{d.title}</View>
             {
-          data.map(d => <SwiperItem>
-            <View onClick={() => jump(d.url)}>{d.title}</View>
+              d.data.map(c => <View className='flex mb-3' key={c.id} onClick={() => jump(d.detailsUrl + c.id)}>
+                <Image src={c.imageUrl} className={styles.featureImage}/>
+                <View>
+                  <View>{c.title}</View>
+                  <View className='font-26 mt-1 text-muted'>{c.description}</View>
+                </View>
+              </View>)
+            }
           </SwiperItem>)
         }
       </Swiper>

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;
+}

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;
+}

types/home.d.ts

@@ -0,0 +1,6 @@
+interface Health {
+  id: number
+  title: string
+  introduction: string
+  url_path: string
+}