首页 健康

src/api/home.ts

@@ -35,7 +35,22 @@ export const HomeApi = {
     return request<{ data: Curriculum[], total: number }>('/home/v1/course/course', "GET", {page, page_size})
   },
   /** 健康管理 */
+  healthTop(count: number) {
+    return request<Health[]>('/home/v1/health/top', "GET", {count})
+  },
   health(page: number, page_size: number) {
     return request<{ data: Health[], total: number }>('/home/v1/health/index', "GET", {page, page_size})
+  },
+  /** 增加播放量 */
+  healthSetPlay(id) {
+    return request(`/home/v1/health/set_play/${id}`, "PUT")
+  },
+  /** 品牌 */
+  brand(page: number, page_size: number) {
+    return request<{ data: Brand[], total: number }>('/home/v1/brand/list', "GET", {page, page_size})
+  },
+  /** 技能 */
+  skillTop(count: number) {
+    return request<Kill[]>('/home/v1/skill/top', "GET", {count})
   }
 }

src/app.config.ts

@@ -59,6 +59,8 @@ export default defineAppConfig({
         'curHistory/curHistory',
         'hourHistory/hourHistory',
         'courType/courType',
+        'videoFull/videoFull',  // 资源id 视频全屏
+        'sort/sort',  // 公共二级分类
       ]
     },
     {

src/components/videoCover/videoCover.scss

@@ -44,7 +44,7 @@
 
     Image {
       width: 100%;
-      //height: 100%;
+      background: #eee;
     }
   }
 

src/pages/business/sort/sort.config.ts

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '分类'
+})

src/pages/business/sort/sort.tsx

@@ -0,0 +1,21 @@
+import {FC} from "react";
+import {View} from "@tarojs/components";
+import {useRouter} from "@tarojs/taro";
+
+type SortType = ''
+
+interface Params {
+  id: number
+  type: SortType
+  jumpUrl: () => void
+}
+
+const Sort: FC = () => {
+  const params = useRouter().params as unknown as Params
+
+  return (
+    <View>ds</View>
+  )
+}
+
+export default Sort

src/pages/business/videoFull/videoFull.config.ts

@@ -0,0 +1,6 @@
+export default definePageConfig({
+  navigationBarTitleText: ' ',
+  backgroundColor:'#000000',
+  navigationBarTextStyle:'white',
+  navigationBarBackgroundColor:'#000000'
+})

src/pages/business/videoFull/videoFull.tsx

@@ -0,0 +1,27 @@
+import {Video} from "@tarojs/components";
+import {FC} from "react";
+import Taro from "@tarojs/taro";
+
+interface Props {
+  url: string
+}
+
+const VideoFull: FC<Props> = () => {
+  const {url} = Taro.useRouter().params
+  return (
+    <Video
+      style={{width: '100%', height: '100vh'}}
+      src={url!}
+      autoplay
+      loop
+      showFullscreenBtn={false}
+      showPlayBtn={false}
+      showCenterPlayBtn={true}
+      enableProgressGesture={false}
+      enablePlayGesture
+      autoPauseIfOpenNative
+    />
+  )
+}
+
+export default VideoFull

src/pages/health/health.tsx

@@ -1,7 +1,7 @@
 import {FC, useEffect, useState} from "react";
 import {Image, ScrollView, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
-import {useReachBottom} from "@tarojs/taro";
+import Taro, {useReachBottom} from "@tarojs/taro";
 import styles from './health.module.scss'
 import play from '@/static/img/play.png'
 
@@ -24,14 +24,20 @@ const Health: FC = () => {
     getData(page)
   }, [page])
 
+  function jump(url: string, id: number) {
+    HomeApi.healthSetPlay(id)
+    Taro.navigateTo({url: '/pages/business/videoFull/videoFull?url=' + url})
+  }
+
   return (
     <ScrollView>
       <View className={styles.container}>
         {
-          data.map(d => <View key={d.id} className={styles.health}>
+          data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d.resource.url, d.id)}>
             <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 className='text-ellipsis-2 m-2 text-dark'>{d.title}</View>
+            <View className='font-26  text-muted mx-2 mb-2'>{d.video_view}观看</View>
           </View>)
         }
       </View>

src/pages/home/components/curRecommended.tsx

@@ -37,7 +37,7 @@ const CurRecommended: FC = () => {
   return (
     <>
       {
-        data.length > 0 && <View className='mt-4'>
+        data.length > 0 && <View className='mt-6'>
           <Image src={courseTag} mode='widthFix' className={styles.courseTag}/>
           <View className={'py-2 flex justify-between flex-wrap ' + styles.videoListBox}>
             {

src/pages/home/components/feature.tsx

@@ -19,11 +19,11 @@ const Feature: FC = () => {
   }
 
   return (
-    <View className='flex justify-between mt-4'>
+    <View className='flex justify-around mt-4'>
       {
         list.map(d => <View className='text-center' onClick={() => jump(d.url)}>
-          <Image src={d.image} style={{width: '50px'}} mode='widthFix'/>
-          <View className='mt-1'>{d.text}</View>
+          <Image src={d.image} style={{width: '40px'}} mode='widthFix'/>
+          <View className='mt-1 text-dark font-26 mt-1'>{d.text}</View>
         </View>)
       }
     </View>

src/pages/home/components/feature_recommended.tsx

@@ -3,17 +3,21 @@ import {Image, Swiper, SwiperItem, View} from "@tarojs/components";
 import styles from '../home.module.scss'
 import Taro from "@tarojs/taro";
 import {HomeApi} from "@/api";
+import first from '@/static/img/first.png'
+import second from '@/static/img/second.png'
+import third from '@/static/img/third.png'
 
 interface DataContent {
   id: number,
   imageUrl: string
   title: string,
   description: string
+  path: string
 }
 
 interface Data {
-  title: string,
-  url: string,
+  title: string
+  url: string
   detailsUrl: string
   data: DataContent[]
 }
@@ -21,46 +25,102 @@ interface Data {
 const FeatureRecommended: FC = () => {
   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: []},
+    {
+      title: "健康知识TOP3",
+      url: '/pages/health/health',
+      detailsUrl: '/pages/business/videoFull/videoFull?url=',
+      data: []
+    },
+    {
+      url: '',
+      title: "专业技能TOP3",
+      detailsUrl: '/pages/business/videoFull/videoFull?url=',
+      data: []
+    },
+    {title: "疾病知识TOP3", url: '', detailsUrl: '', data: []},
   ])
 
+  /** 品牌 */
+  async function getBrand(): Promise<DataContent[]> {
+    try {
+      const res = await HomeApi.brand(1, 3)
+      return res.data.map<DataContent>(d => ({
+        id: d.id,
+        title: d.name,
+        imageUrl: d.brand_album,
+        description: d.graphic_introduction,
+        path: '',
+      }))
+    } catch (e) {
+    }
+    return []
+  }
+
   /** 健康知识 */
-  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 => ({
+  async function getHealth(): Promise<DataContent[]> {
+    try {
+      const res = await HomeApi.healthTop(3)
+      return res.map<DataContent>(d => ({
         id: d.id,
         title: d.title,
         imageUrl: d.url_path,
-        description: d.introduction
+        description: d.introduction,
+        path: d.resource.url
       }))
+    } catch (e) {
     }
-    setData(oldData)
+    return []
+  }
+
+  /** 技能 */
+  async function getKill(): Promise<DataContent[]> {
+    try {
+      const res = await HomeApi.skillTop(3)
+      return res.map<DataContent>(d => ({
+        id: d.id,
+        imageUrl: d.url_path,
+        description: '',
+        title: d.resource.name,
+        path: d.resource.url
+      }))
+    } catch (e) {
+    }
+    return []
   }
 
   useEffect(() => {
-    getHealth()
+    Promise.all([getBrand(), getHealth(), getKill()]).then(([brand, health, kill]) => {
+      const oldData: Data[] = JSON.parse(JSON.stringify(data))
+      oldData[0].data = brand
+      oldData[1].data = health
+      oldData[2].data = kill
+      setData(oldData)
+    })
   }, [])
 
   function jump(url: string) {
+    console.log(url)
     Taro.navigateTo({url})
   }
 
   return (
     <View className={styles.feature}>
-      <Swiper nextMargin='30px' style={{height: '205px'}}>
+      <Swiper nextMargin='30px' style={{height: '225px'}}>
         {
           data.map(d => <SwiperItem key={d.title}>
             <View className={styles.featureTitle} 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}/>
+              d.data.map((c, index) => <View
+                className='flex mb-3'
+                key={c.id}
+                onClick={() => jump(d.detailsUrl + c.path)}>
                 <View>
-                  <View>{c.title}</View>
-                  <View className='font-26 mt-1 text-muted'>{c.description}</View>
+                  <Image src={c.imageUrl} className={styles.featureImage}/>
+                  <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
+                </View>
+                <View className={styles.featureText}>
+                  <View className='text-ellipsis text-secondary'>{c.title}</View>
+                  <View className='font-26 mt-1 text-muted text-ellipsis'>{c.description}</View>
                 </View>
               </View>)
             }
@@ -70,4 +130,5 @@ const FeatureRecommended: FC = () => {
     </View>
   )
 }
+
 export default FeatureRecommended

src/pages/home/home.module.scss

@@ -24,7 +24,7 @@
 
 .search {
   width: 710rpx;
-  margin: 34rpx 0 0;
+  margin: 40rpx 0 0;
   background: #fff;
   border-radius: 100px;
   line-height: 68rpx;
@@ -41,6 +41,7 @@
   height: 260rpx;
   border-radius: 16rpx;
   overflow: hidden;
+  background: #eee;
 }
 
 .videoListBox {
@@ -56,23 +57,33 @@
 .feature {
   color: #323635;
   background: #fff;
-  padding: 30rpx;
-  margin-top: 20rpx;
-  border-radius: 16rpx;
-  box-shadow: inset -30px -30px 30px rgba(#fff, .9);
+  padding: 30rpx 0 30rpx 30rpx;
+  margin-top: 40rpx;
+  border-radius: 30rpx;
 }
 
 .featureTitle {
-  font-weight: bold;
-  font-size: 32rpx;
-  padding-bottom: 24rpx;
+  font-weight: 500;
+  font-size: 38rpx;
+  padding-bottom: 40rpx;
+}
+
+.featureText {
+  width: calc(100% - 140px - 50px);
+}
+
+.ranking {
+  position: absolute;
+  left: 24rpx;
+  width: 24px;
+  height: 24px;
 }
 
 .featureImage {
   width: 140px;
   height: 90px;
   background: #eee;
-  border-radius: 10rpx;
+  border-radius: 12rpx;
   overflow: hidden;
   margin-right: 20rpx;
 }

types/home.d.ts

@@ -3,4 +3,28 @@ interface Health {
   title: string
   introduction: string
   url_path: string
+  resource: Resource
+  /** 播放量 */
+  video_view:number
+}
+
+interface Brand {
+  id: number
+  brand_album: string
+  graphic_introduction: string
+  name: string
+  resource: Resource
+}
+
+interface Resource {
+  id: number
+  name: string
+  url: string
+}
+
+interface Kill {
+  id: number
+  resource: Resource
+  title: string
+  url_path: string
 }