src/api/brand.ts

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

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

src/components/image/image.tsx

@@ -1,17 +1,15 @@
 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'
-import brandSecond from '@/static/img/brandSecond.png'
 
 interface Props extends ImageProps {
   width?: number | string
   height?: number | string
   fallback?: string
-  errorType?: ImgErrType
+  errorType?: "acquiesce" | 'avatar'
 }
 
 const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = shard, ...props}) => {
@@ -36,15 +34,6 @@ 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
-      case 'brand':
-        setErrorUrl(brandSecond)
-        break
     }
   }, [props.errorType])
 
@@ -64,12 +53,11 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
   return (
     <View
       style={{
-        overflow: 'hidden',
+        width: `${width}rpx`,
-        width: width ? `${width}rpx` : "100%",
+        height: `${height}rpx`,
-        height: height ? `${height}rpx` : "100%",
         backgroundColor: (isError || !loading) ? 'transparent' : '#F8F8F8'
       }}
-      className={`${props?.className}`}>
+      className={`${props?.className} ${styles.imgBox}`}>
       {!isError &&
         <View animation={animationData}>
           <Image
@@ -91,12 +79,14 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
       {
         isError && !loading &&
         <Image
-          mode='widthFix'
+          className={styles.imgError}
+          mode='aspectFill'
           src={errorUrl}
           lazyLoad
           fadeIn
           style={{
             width: "100%",
+            height: "100%",
           }}/>
       }
     </View>

src/components/videoList/videoList.module.scss

@@ -1,27 +0,0 @@
-.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

@@ -1,35 +0,0 @@
-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/business/videoInfo/components/catalogue.tsx

@@ -195,7 +195,6 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
           <Collect
             owner_id={id}
             owner_type={3}
-            select={data?.course.collect}
             styles={{flexDirection: 'column', justifyContent: 'center', padding: '20rpx'}}
             stylesImage={{margin: '0 0 8rpx 0'}}/>
           <View className='px-2' onClick={() => setShow(true)}>

src/pages/business/videoInfo/videoInfo.tsx

@@ -106,7 +106,7 @@ const VideoInfo: FC = () => {
         {
           playId
             ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
-            : <Img width={750} height={500} src={data?.course.thumb || ''} errorType='health'/>
+            : <Img width={750} height={500} src={data?.course.thumb || ''} mode='aspectFill'/>
         }
       </View>
 

src/pages/home/components/feature_recommended.tsx

@@ -26,13 +26,12 @@ interface Data {
   url: string
   detailsUrl: string
   data: DataContent[]
-  errorType: ImgErrType
   type?: 'health' | 'kill'
 }
 
 interface Props {
-  skill: VideList[] // 技能
+  skill: Kill[] // 技能
-  health: VideList[] // 健康
+  health: Health[] // 健康
   brand: Brand[] // 品牌
   illness: Illness[] // 疾病
 }
@@ -43,31 +42,27 @@ const FeatureRecommended: FC<Props> = (props) => {
       titleUrl: brandTop,
       url: '/pages/preview/brand/list/list',
       detailsUrl: '/pages/preview/brand/info/info',
-      data: [],
+      data: []
-      errorType: 'brand',
     },
     {
       titleUrl: healthTop,
       url: '/pages/preview/health/health',
       detailsUrl: '/pages/preview/videoFull/videoFull',
       data: [],
-      type: "health",
+      type: "health"
-      errorType: 'health'
     },
     {
       titleUrl: professionTop,
       url: '/pages/preview/profession/profession',
       detailsUrl: '/pages/preview/videoFull/videoFull',
       data: [],
-      type: 'kill',
+      type: 'kill'
-      errorType: 'profession'
     },
     {
       titleUrl: illnessTop,
       url: '/pages/preview/illness/sort/sort',
       detailsUrl: '/pages/preview/illness/list/list',
-      data: [],
+      data: []
-      errorType: 'health'
     },
   ])
 
@@ -171,7 +166,7 @@ const FeatureRecommended: FC<Props> = (props) => {
                 onClick={() => jump(d.detailsUrl + c.path, c.id, d.type)}>
                 <View style={{position: 'relative'}}>
                   <View className={styles.featureImage}>
-                    <Img src={c.imageUrl} height={100} width={140} errorType={d.errorType}/>
+                    <Img src={c.imageUrl} height={100} width={140}/>
                   </View>
                   <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                 </View>

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

@@ -1,7 +1,3 @@
-page{
-  background: #fff !important;
-}
-
 .fixedBox {
   position: fixed;
   z-index: 1000;
@@ -78,5 +74,8 @@ page{
 }
 
 .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/brand/list/list.tsx

@@ -20,7 +20,6 @@ const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onCl
   } else if (data.brand_album) {
     media = <Img
       height={320}
-      errorType='profession'
       src={data.brand_album.split(",")[0]}
       mode="aspectFill"
       style={{background: '#ededed'}}
@@ -37,7 +36,7 @@ const BrandItem: FC<{ data: BrandRecord; onClick: VoidFunction }> = ({data, onCl
               height={76}
               src={data.logo}
               mode='aspectFill'
-              errorType='brand'
+              errorType='avatar'
               className="rounded-10 clip"
               style={{background: '#ededed'}}
             />

src/pages/preview/health/health.tsx

@@ -1,25 +1,24 @@
 import {FC, useEffect, useState} from "react";
-import {View} from "@tarojs/components";
+import {Image, Text, 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-back.png'
 import Empty from "@/components/empty/empty";
 import Spin from "@/components/spinner";
-import VideoList from "@/components/videoList/videoList";
+import Img from "@/components/image/image";
+import {formatDate} from "@/utils/time";
 
 const Health: FC = () => {
   const [page, setPage] = useState(1)
-  const [data, setData] = useState<VideList[]>([])
+  const [data, setData] = useState<Health[]>([])
   const [total, setTotal] = useState(0)
   const [enable, setEnable] = useState(true)
 
   async function getData(page: number) {
     try {
       const res = await HomeApi.health(page, 10)
-      setData([
+      setData(res.data)
-        ...data,
-        ...res.data
-      ])
       setTotal(res.total)
     } catch (e) {
     }
@@ -34,6 +33,10 @@ 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 (
     <>
@@ -42,7 +45,15 @@ const Health: FC = () => {
         {
           data.length > 0 ? <>
               <View className={styles.container}>
-                {data.map(d => <VideoList data={d} errorType='health'/>)}
+                {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>)}
               </View>
               <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
             </>

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

@@ -1,12 +1,3 @@
-.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 VideoList from "@/components/videoList/videoList";
+import Img from "@/components/image/image";
 
 interface KillData {
-  data: VideList[]
+  data: Kill[]
   total: number
   page: number
 }
@@ -19,7 +19,6 @@ 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 开启加载更多
@@ -36,7 +35,6 @@ 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)
@@ -56,7 +54,6 @@ const Profession = () => {
       setData(oldData)
     } catch (e) {
     }
-    setLoading(false)
   }
 
   useEffect(() => {
@@ -78,6 +75,10 @@ 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
@@ -88,21 +89,21 @@ const Profession = () => {
 
   function KillList(data: KillData): JSX.Element {
     if (!data?.data?.length) {
-      return (
+      return <Empty name='暂无数据'/>
-        <Empty name='暂无数据'/>
-      )
     }
     return (
       <ScrollView
         scrollY
         onScrollToLower={() => getData(true)}
         className={styles.height}>
-        <View className={styles.container}>
-
         {
-            data.data.map(d => <VideoList data={d} errorType='profession'/>)
+          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>
+          )
+        }
         <View className='text-center font-24 text-dark mt-2'>暂无更多</View>
       </ScrollView>
     )
@@ -122,8 +123,7 @@ const Profession = () => {
         className={styles.height}
         style={{paddingTop: '10px'}}>
         {
-          tabs.map(d => <SwiperItem key={d.title} className='relative'>
+          tabs.map(d => <SwiperItem key={d.title}>
-            <Spin enable={loading} block/>
             {KillList(data.get(Number(d.value))!)}
           </SwiperItem>)
         }

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

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

src/pages/preview/videoFull/videoFull.tsx

@@ -2,52 +2,28 @@ 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 {
-  id: string
+  url: string
+  poster?: string
+  title?: string
 }
 
 const VideoFull: FC = () => {
-  const {id} = Taro.useRouter().params as unknown as Params
+  const params = 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(() => {
-    const preloadData: VideList = Taro.getCurrentInstance().preloadData as VideList
+    console.log(params)
-    if (preloadData) {
+    if (!params.url) {
-      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() {
@@ -70,16 +46,16 @@ const VideoFull: FC = () => {
   }
 
   return (
-    <View>
+    <>
-      {
+      {params.title && <View className={styles.title}>{params.title}</View>}
-        data ? <>
       <Video
         posterSize='100%'
         id={'myVideo'}
         onClick={click}
         className={styles.video}
         controls
-            src={data?.resource?.url}
+        // poster={params.poster}
+        src={params.url}
         autoplay
         showCenterPlayBtn
         autoPauseIfOpenNative
@@ -91,17 +67,7 @@ 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/curriculum.d.ts

@@ -8,7 +8,6 @@ interface Curriculum {
   id: number;
   title: string;
   charge: number;
-  collect:boolean
   /** 课时 */
   class_hour: number;
   created_at: string;

types/home.d.ts

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

types/user.d.ts

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