统一课程和播放

src/api/brand.ts

@@ -20,7 +20,7 @@ export type ArticleRecord = {
   created_at: string
   content: string
   brands: BrandRecord[]
-  collect:boolean
+  collect: boolean
 }
 
 export const brandApi = {
@@ -45,4 +45,8 @@ export const brandApi = {
   articleInfo(id: number) {
     return request<ArticleRecord>(`/home/v1/article/${id}`, "GET")
   },
+  /** 品牌 & 健康详情 */
+  videoInfo(id: number | string) {
+    return request<VideList>(`/home/v1/health/${id}`, "GET")
+  }
 }

src/api/home.ts

@@ -31,8 +31,8 @@ export interface AdwareType {
 
 export interface HomeData {
   adverts: AdwareType[]
-  skill: Kill[]
-  health: Health[]
+  skill: VideList[]
+  health: VideList[]
   brand: {
     list: Brand[]
   }
@@ -56,10 +56,10 @@ export const HomeApi = {
   },
   /** 健康管理 */
   healthTop(count: number) {
-    return request<Health[]>('/home/v1/health/top', "GET", {count})
+    return request<VideList[]>('/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})
+    return request<{ data: VideList[], total: number }>('/home/v1/health/index', "GET", {page, page_size})
   },
   /** 增加播放量 */
   healthSetPlay(id) {
@@ -71,13 +71,13 @@ export const HomeApi = {
   },
   /** 技能 */
   skillTop(count: number) {
-    return request<Kill[]>('/home/v1/skill/top', "GET", {count})
+    return request<VideList[]>('/home/v1/skill/top', "GET", {count})
   },
   skillCategory() {
     return request<Category[]>('/home/v1/skill/category', "GET")
   },
   skillList(categoryId: number, page: number, page_size: number) {
-    return request<{ data: Kill[], total: number }>('/home/v1/skill/index', "GET", {categoryId, page, page_size})
+    return request<{ data: VideList[], total: number }>('/home/v1/skill/index', "GET", {categoryId, page, page_size})
   },
   skillSetPlay(id: number) {
     return request(`/home/v1/skill/set_play/${id}`, "PUT")

src/components/image/image.module.scss

@@ -1,12 +0,0 @@
-.imgBox {
-  position: relative;
-}
-
-.imgError {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  right: 0;
-  margin: auto;
-}

src/components/image/image.tsx

@@ -1,15 +1,16 @@
 import {FC, useEffect, useState} from "react";
 import {Image, ImageProps, View} from "@tarojs/components";
 import shard from '@/static/img/shard.png'
-import styles from './image.module.scss'
 import Taro from "@tarojs/taro";
 import avatar from '@/static/img/avatar.png'
+import healthShard from '@/static/img/healthShard.png'
+import professionShard from '@/static/img/professionShard.png'
 
 interface Props extends ImageProps {
   width?: number | string
   height?: number | string
   fallback?: string
-  errorType?: "acquiesce" | 'avatar'
+  errorType?: ImgErrType
 }
 
 const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard, ...props}) => {
@@ -34,6 +35,12 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
       case "avatar":
         setErrorUrl(avatar)
         break
+      case 'health':
+        setErrorUrl(healthShard)
+        break
+      case 'profession':
+        setErrorUrl(professionShard)
+        break
     }
   }, [props.errorType])
 
@@ -53,11 +60,11 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
   return (
     <View
       style={{
-        width: `${width}rpx`,
-        height: `${height}rpx`,
+        width: width ? `${width}rpx` : "100%",
+        height: height ? `${height}rpx` : "100%",
         backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8'
       }}
-      className={`${props?.className} ${styles.imgBox}`}>
+      className={`${props?.className}`}>
       {!isError &&
         <View animation={animationData}>
           <Image
@@ -79,14 +86,12 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
       {
         isError && !loading &&
         <Image
-          className={styles.imgError}
-          mode='aspectFill'
+          mode='widthFix'
           src={errorUrl}
           lazyLoad
           fadeIn
           style={{
             width: "100%",
-            height: "100%",
           }}/>
       }
     </View>

src/components/videoList/videoList.module.scss

@@ -0,0 +1,27 @@
+.container {
+  width: 100%;
+  padding: 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;
+}
+
+.play {
+  position: absolute;
+  min-height: 70rpx !important;
+  z-index: 9999;
+  width: 40rpx !important;
+  height: 40rpx !important;
+  top: 20rpx;
+  right: 20rpx;
+  background: transparent !important;
+}

src/components/videoList/videoList.tsx

@@ -0,0 +1,35 @@
+import {FC} from "react";
+import styles from "@/pages/preview/health/health.module.scss";
+import {Image, Text, View} from "@tarojs/components";
+import Img from "@/components/image/image";
+import play from "@/static/img/play-back.png";
+import {formatDate} from "@/utils/time";
+import Taro from "@tarojs/taro";
+
+interface Props {
+  data: VideList
+  errorType?: ImgErrType
+}
+
+const VideoList: FC<Props> = ({data, errorType}) => {
+  function jump() {
+    Taro.preload(data)
+    Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?id=${data.id}`})
+  }
+
+  return (
+    <View key={data.id} className={styles.health} onClick={jump}>
+      <Img src={data.url_path} mode='widthFix' errorType={errorType}/>
+      <Image src={play} className={styles.play} mode='aspectFit'/>
+      <View className='p-1'>
+        <View className='text-ellipsis-2  text-dark'>{data.title}</View>
+        <View className='text-ellipsis-2 mt-1 font-26 text-secondary'>{data.introduction}</View>
+        <View className='font-24 text-muted my-2  flex justify-between'>
+          <Text>{formatDate(new Date(data.publish_time), "YY-MM-dd")}</Text>
+          <Text>{data.video_view}观看</Text>
+        </View>
+      </View>
+    </View>)
+}
+
+export default VideoList

src/pages/preview/brand/article/article.module.scss

@@ -1,3 +1,7 @@
+page{
+  background: #fff !important;
+}
+
 .fixedBox {
   position: fixed;
   z-index: 1000;
@@ -74,8 +78,5 @@
 }
 
 .articleBox {
-  background: #fff;
-  min-height: calc(100vh - env(safe-area-inset-bottom) + 180rpx);
-  box-sizing: border-box;
   padding: 30rpx 30rpx calc(env(safe-area-inset-bottom) + 150rpx) 30rpx;
 }

src/pages/preview/health/health.tsx

@@ -1,24 +1,25 @@
 import {FC, useEffect, useState} from "react";
-import {Image, Text, View} from "@tarojs/components";
+import {View} from "@tarojs/components";
 import {HomeApi} from "@/api";
-import Taro, {useReachBottom} from "@tarojs/taro";
+import {useReachBottom} from "@tarojs/taro";
 import styles from './health.module.scss'
-import play from '@/static/img/play-back.png'
 import Empty from "@/components/empty/empty";
 import Spin from "@/components/spinner";
-import Img from "@/components/image/image";
-import {formatDate} from "@/utils/time";
+import VideoList from "@/components/videoList/videoList";
 
 const Health: FC = () => {
   const [page, setPage] = useState(1)
-  const [data, setData] = useState<Health[]>([])
+  const [data, setData] = useState<VideList[]>([])
   const [total, setTotal] = useState(0)
   const [enable, setEnable] = useState(true)
 
   async function getData(page: number) {
     try {
       const res = await HomeApi.health(page, 10)
-      setData(res.data)
+      setData([
+        ...data,
+        ...res.data
+      ])
       setTotal(res.total)
     } catch (e) {
     }
@@ -33,10 +34,6 @@ const Health: FC = () => {
     getData(page)
   }, [page])
 
-  function jump(health: Health) {
-    HomeApi.healthSetPlay(health.id)
-    Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resource.url}&poster=${health.url_path}&title=${health.title}`})
-  }
 
   return (
     <>
@@ -45,15 +42,7 @@ const Health: FC = () => {
         {
           data.length > 0 ? <>
               <View className={styles.container}>
-                {data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d)}>
-                  <Img width={370} height={345} src={d.url_path} mode='widthFix'/>
-                  <Image src={play} className={styles.play} mode='aspectFit'/>
-                  <View className='text-ellipsis-2 m-2 text-dark'>{d.title}</View>
-                  <View className='font-26 text-muted mx-2 mb-2 flex justify-between'>
-                    <Text>{formatDate(new Date(d.publish_time), "YY-MM-dd")}</Text>
-                    <Text>{d.video_view}观看</Text>
-                  </View>
-                </View>)}
+                {data.map(d => <VideoList data={d} errorType='health'/>)}
               </View>
               <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
             </>

src/pages/preview/profession/profession.module.scss

@@ -1,3 +1,12 @@
+.container {
+  width: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  columns: 2;
+  column-gap: 20rpx;
+  position: relative;
+}
+
 .height {
   height: calc(100vh - 80rpx - env(safe-area-inset-bottom));
   overflow: hidden;

src/pages/preview/profession/profession.tsx

@@ -6,10 +6,10 @@ import Empty from "@/components/empty/empty";
 import Taro from "@tarojs/taro";
 import styles from './profession.module.scss'
 import Spin from "@/components/spinner";
-import Img from "@/components/image/image";
+import VideoList from "@/components/videoList/videoList";
 
 interface KillData {
-  data: Kill[]
+  data: VideList[]
   total: number
   page: number
 }
@@ -19,6 +19,7 @@ const Profession = () => {
   const [categoryId, setCategoryId] = useState<number | null>(null)
   const [data, setData] = useState<Map<number, KillData>>(new Map)
   const [enable, setEnable] = useState(true)
+  const [loading, setLoading] = useState(false)
 
   /**
    * more 开启加载更多
@@ -35,6 +36,7 @@ const Profession = () => {
     }
 
     try {
+      setLoading(true)
       const res = await HomeApi.skillList(categoryId!, page, 10)
       const dataList = res.data.reduce((pre, cur) => {
         const index = pre.findIndex(d => d.id === cur.id)
@@ -54,6 +56,7 @@ const Profession = () => {
       setData(oldData)
     } catch (e) {
     }
+    setLoading(false)
   }
 
   useEffect(() => {
@@ -75,10 +78,6 @@ const Profession = () => {
     setCategoryId(tab.tab?.value as number)
   }
 
-  function jump(kill: Kill) {
-    HomeApi.skillSetPlay(kill.id)
-    Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${kill.resource.url}&poster=${kill.url_path}&title=${kill.resource.name}`})
-  }
 
   function swiperChange(e) {
     const categoryId = tabs[e.target.current].value
@@ -89,21 +88,21 @@ const Profession = () => {
 
   function KillList(data: KillData): JSX.Element {
     if (!data?.data?.length) {
-      return <Empty name='暂无数据'/>
+      return (
+        <Empty name='暂无数据'/>
+      )
     }
     return (
       <ScrollView
         scrollY
         onScrollToLower={() => getData(true)}
         className={styles.height}>
+        <View className={styles.container}>
+
           {
-          data.data.map(d =>
-            <View className={styles.killBox} onClick={() => jump(d)}>
-              <Img width={320} height={180} src={d.url_path} mode='widthFix' className={styles.image}/>
-              <View className='text-ellipsis flex-1'>{d?.resource?.name}</View>
-            </View>
-          )
+            data.data.map(d => <VideoList data={d} errorType='profession'/>)
           }
+        </View>
         <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
       </ScrollView>
     )
@@ -123,7 +122,8 @@ const Profession = () => {
         className={styles.height}
         style={{paddingTop: '10px'}}>
         {
-          tabs.map(d => <SwiperItem key={d.title}>
+          tabs.map(d => <SwiperItem key={d.title} className='relative'>
+            <Spin enable={loading} block/>
             {KillList(data.get(Number(d.value))!)}
           </SwiperItem>)
         }

src/pages/preview/videoFull/videoFull.module.scss

@@ -1,3 +1,8 @@
+page {
+  background: #000 !important;
+  min-height: 100vh;
+}
+
 .video {
   width: 100%;
   height: 100vh;
@@ -5,15 +10,19 @@
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
+  bottom: calc(env(safe-area-inset-bottom) + 250rpx);
   margin: auto;
   background: #000;
 }
 
 .title {
   position: fixed;
-  z-index: 9999;
-  top: 20rpx;
-  left: 20rpx;
+  z-index: 10;
+  bottom: env(safe-area-inset-bottom);
+  width: 100%;
   color: #fff;
+  padding: 0 30rpx;
+  box-sizing: border-box;
+  background: #000;
+  width: 100%;
 }

src/pages/preview/videoFull/videoFull.tsx

@@ -2,28 +2,52 @@ import {Video, View} from "@tarojs/components";
 import {FC, useState} from "react";
 import Taro from "@tarojs/taro";
 import styles from './videoFull.module.scss'
+import {brandApi} from "@/api";
+import Collect from "@/components/collect/collect";
+import Spin from "@/components/spinner";
 
 interface Params {
-  url: string
-  poster?: string
-  title?: string
+  id: string
 }
 
 const VideoFull: FC = () => {
-  const params = Taro.useRouter().params as unknown as Params
+  const {id} = Taro.useRouter().params as unknown as Params
   const video = Taro.createVideoContext('myVideo')
   const [palying, setpalying] = useState(false)
+  const [data, setData] = useState<VideList | null>(null)
+  const [enable, setEnable] = useState<boolean>(!Taro.getCurrentInstance().preloadData)
 
   Taro.useLoad(() => {
-    console.log(params)
-    if (!params.url) {
+    const preloadData: VideList = Taro.getCurrentInstance().preloadData as VideList
+    if (preloadData) {
+      setData(preloadData)
+    }
+    brandApi.videoInfo(id).then(res => {
+      if (!res?.resource?.url) {
+        Taro.showModal({
+          title: '加载资源失败',
+          confirmText: '退出',
+          showCancel: true,
+          success() {
+            Taro.navigateBack()
+          }
+        })
+      }
+      setData(res)
+    }).catch(() => {
+      if (!preloadData) {
         Taro.showModal({
-        title: '播放地址错',
+          title: '加载资源失败',
+          confirmText: '退出',
+          showCancel: true,
           success() {
             Taro.navigateBack()
           }
         })
       }
+    }).finally(() => {
+      setEnable(false)
+    })
   })
 
   function click() {
@@ -46,16 +70,16 @@ const VideoFull: FC = () => {
   }
 
   return (
-    <>
-      {params.title && <View className={styles.title}>{params.title}</View>}
+    <View>
+      {
+        data ? <>
           <Video
             posterSize='100%'
             id={'myVideo'}
             onClick={click}
             className={styles.video}
             controls
-        // poster={params.poster}
-        src={params.url}
+            src={data?.resource?.url}
             autoplay
             showCenterPlayBtn
             autoPauseIfOpenNative
@@ -67,7 +91,17 @@ const VideoFull: FC = () => {
             onPause={() => setpalying(false)}
             onError={onError}
           />
-    </>
+          <View className={styles.title}>
+            <View className='flex'>
+              <View className='font-36 font-weight flex-1 pr-3 text-row1'>{data.title}</View>
+              <Collect owner_id={Number(id)} owner_type={2} styles={{color: '#fff'}} select={data.collects}/>
+            </View>
+            <View className='font-32 mt-1 text-ellipsis-2'>{data.introduction}</View>
+          </View>
+        </> : <Spin enable={enable} overlay/>
+      }
+
+    </View>
   )
 }
 

types/home.d.ts

@@ -1,4 +1,4 @@
-interface Health {
+interface VideList {
   id: number
   title: string
   introduction: string
@@ -7,6 +7,7 @@ interface Health {
   /** 播放量 */
   video_view: number
   publish_time:string
+  collects:boolean
 }
 
 interface Brand {
@@ -23,13 +24,13 @@ interface Resource {
   url: string
 }
 
-interface Kill {
-  id: number
-  resource: Resource
-  introduction:string
-  title: string
-  url_path: string
-}
+// interface Kill {
+//   id: number
+//   resource: Resource
+//   introduction:string
+//   title: string
+//   url_path: string
+// }
 
 interface Illness {
   id: number

types/user.d.ts

@@ -109,5 +109,9 @@ interface Create {
   owner_type: CreateOwnerType
 }
 
+type ImgErrType = "acquiesce" // 默认
+  | 'avatar' // 头像
+  | 'health' // 健康
+  | 'profession' // 技能