首页和全屏视频

src/components/button/MyButton.tsx

@@ -55,6 +55,7 @@ const MyButton: FC<Props> = (props) => {
     <Button
       plain
       {...props}
+      loading={false}
       style={buttonStyle()}
       onClick={(event) => !props.disabled && props.onClick?.(event)}
       className={`${styles.Mybutton} ${props.className}`}>

src/pages/business/videoInfo/videoInfo.tsx

@@ -9,7 +9,6 @@ import eventsIndex from "@/hooks/eventsIndex";
 import {formatMinute} from "@/utils/time";
 import videoEvents from "@/hooks/videoEvents";
 
-
 const VideoInfo: FC = () => {
   const {id, depId} = Taro.getCurrentInstance()?.router?.params as any
   const [data, setData] = useState<CourseDepData | null>(null)
@@ -109,12 +108,8 @@ const VideoInfo: FC = () => {
         <View className='content-video'>
           {
             playId
-              ? <Course
+              ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
-                id={playId}
+              : <Image src={data?.course.thumb || ''} className='image' mode='aspectFill'/>
-                courseId={id}
-                curEnd={curEnd}
-                preview={preview}/>
-              : <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>
           }
         </View>
 

src/pages/home/components/curRecommended.tsx

@@ -52,6 +52,7 @@ const CurRecommended: FC = () => {
           </View>
         </View>
       }
+      <View className='text-center'>- 暂无更多 -</View>
     </>
   )
 }

src/pages/home/components/feature.tsx

@@ -11,7 +11,7 @@ const Feature: FC = () => {
     {url: '/pages/preview/brand/list/list', image: article, text: '品牌'},
     {url: '/pages/preview/health/health', image: health, text: '健康管理'},
     {url: '/pages/preview/profession/profession', image: profession, text: '专业技能'},
-    {url: '/pages/preview/illness/sort/sort', image: illness, text: '疾病知识'},
+    {url: '/pages/preview/illness/sort/sort', image: illness, text: '病症百科'},
   ]
 
   function jump(url) {
@@ -22,7 +22,7 @@ const Feature: FC = () => {
     <View className='flex justify-around mt-4'>
       {
         list.map(d => <View className='text-center' onClick={() => jump(d.url)}>
-          <Image src={d.image} style={{width: '40px',height: '40px'}} />
+          <Image src={d.image} style={{width: '48px',height: '48px'}} />
           <View className='mt-1 text-dark font-26 mt-1'>{d.text}</View>
         </View>)
       }

src/pages/home/components/feature_recommended.tsx

@@ -6,6 +6,11 @@ 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'
+import brandTop from '@/static/img/brandTop.png'
+import illnessTop from '@/static/img/illnessTop.png'
+import healthTop from '@/static/img/healthTop.png'
+import professionTop from '@/static/img/professionTop.png'
+
 
 interface DataContent {
   id: number,
@@ -16,7 +21,7 @@ interface DataContent {
 }
 
 interface Data {
-  title: string
+  titleUrl: string
   url: string
   detailsUrl: string
   data: DataContent[]
@@ -25,25 +30,25 @@ interface Data {
 const FeatureRecommended: FC = () => {
   const [data, setData] = useState<Data[]>([
     {
-      title: "品牌TOP3",
+      titleUrl: brandTop,
       url: '/pages/preview/brand/list/list',
       detailsUrl: '/pages/preview/brand/info/info',
       data: []
     },
     {
-      title: "健康知识TOP3",
+      titleUrl: healthTop,
       url: '/pages/preview/health/health',
       detailsUrl: '/pages/preview/videoFull/videoFull',
       data: []
     },
     {
+      titleUrl: professionTop,
       url: '/pages/preview/profession/profession',
-      title: "专业技能TOP3",
       detailsUrl: '/pages/preview/videoFull/videoFull',
       data: []
     },
     {
-      title: "疾病知识TOP3",
+      titleUrl: illnessTop,
       url: '/pages/preview/illness/sort/sort',
       detailsUrl: '/pages/preview/illness/article/article',
       data: []
@@ -75,7 +80,7 @@ const FeatureRecommended: FC = () => {
         title: d.title,
         imageUrl: d.url_path,
         description: d.introduction,
-        path: `?url=${d.resource.url}`
+        path: `?url=${d.resource.url}&poster=${d.url_path}&title=${d.resource.name}`
       }))
     } catch (e) {
     }
@@ -91,7 +96,7 @@ const FeatureRecommended: FC = () => {
         imageUrl: d.url_path,
         description: '',
         title: d.resource.name,
-        path: `?url=${d.resource.url}`
+        path: `?url=${d.resource.url}&poster=${d.url_path}&title=${d.resource.name}`
       }))
     } catch (e) {
     }
@@ -132,17 +137,20 @@ const FeatureRecommended: FC = () => {
 
   return (
     <View className={styles.feature}>
-      <Swiper nextMargin='30px' style={{height: '225px'}}>
+      <Swiper nextMargin='30px' style={{height: '250px'}}>
         {
-          data.map(d => <SwiperItem key={d.title}>
+          data.map(d => <SwiperItem key={d.url}>
-            <View className={styles.featureTitle} onClick={() => jump(d.url)}>{d.title}</View>
+            <Image
+              mode='heightFix'
+              className={styles.featureTitle}
+              onClick={() => jump(d.url)} src={d.titleUrl}/>
             {
               d.data.map((c, index) => <View
                 className='flex mb-3'
                 key={c.id}
                 onClick={() => jump(d.detailsUrl + c.path)}>
                 <View>
-                  <Image src={c.imageUrl} className={styles.featureImage} mode='widthFix'/>
+                  <Image src={c.imageUrl} className={styles.featureImage} mode='aspectFill'/>
                   <Image src={[first, second, third][index]} className={styles.ranking} mode='aspectFill'/>
                 </View>
                 <View className={styles.featureText}>

src/pages/home/home.config.ts

@@ -1,5 +1,7 @@
 export default definePageConfig({
-  navigationBarTitleText: '首页',
+  navigationBarTitleText: '康一诺',
-  navigationStyle: 'custom',
+  // navigationStyle: 'custom',
+  navigationBarBackgroundColor: '#92ecc5',
+  navigationBarTextStyle: 'white',
   onReachBottomDistance: 50
 })

src/pages/home/home.module.scss

@@ -6,10 +6,8 @@
   left: 0;
   top: 0;
   overflow: hidden;
-  box-sizing: border-box;
+  text-align: center;
-  display: flex;
+  color: #000;
-  justify-content: center;
-  align-items: flex-end;
 
   &:after {
     min-height: 100vh;
@@ -50,17 +48,19 @@
   overflow: hidden;
 
   &:after {
-    min-height: 100vh;
+    //min-height: 100vh;
     position: absolute;
     top: 0;
     left: -10%;
     width: 120%;
+    height: 400rpx;
     content: '';
     display: block;
-    background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat;
+    //background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat;
-    min-height: 100vh;
+    background: linear-gradient(to bottom, #92ecc5, #f1f8f6) no-repeat;
-    background-size: 100% 600rpx;
+    //min-height: 100vh;
-    filter: blur(50px);
+    //background-size: 100% 600rpx;
+    //filter: blur(50px);
     z-index: -1;
   }
 }
@@ -75,11 +75,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin-top: 40rpx;
 }
 
 .adware {
-  margin-top: 40rpx;
+  //margin-top: 40rpx;
   width: 100%;
   height: 260rpx;
   border-radius: 16rpx;
@@ -106,9 +105,8 @@
 }
 
 .featureTitle {
-  font-weight: 500;
+  height: 50rpx;
-  font-size: 38rpx;
+  padding-bottom: 30rpx;
-  padding-bottom: 40rpx;
 }
 
 .featureText {

src/pages/home/home.tsx

@@ -1,8 +1,7 @@
 import {FC} from "react";
 import {View} from "@tarojs/components";
 import styles from "./home.module.scss";
-import Taro from "@tarojs/taro";
+// import {Search} from "@/pages/home/components/search";
-import {Search} from "@/pages/home/components/search";
 import Adware from "@/pages/home/components/adware";
 import Feature from "@/pages/home/components/feature";
 import FeatureRecommended from "@/pages/home/components/feature_recommended";
@@ -11,16 +10,11 @@ import MyButton from "@/components/button/MyButton";
 import {Profile} from "@/store";
 
 const Home: FC = () => {
-  const menu = Taro.getMenuButtonBoundingClientRect()
   const {token, empty} = Profile.useContainer()
-  const headerStyle: React.CSSProperties = {
-    height: `${menu.bottom}px`,
-  }
 
   return (
-    <View className={styles.content} style={`paddingTop:${menu.bottom}px`}>
+    <View className={styles.content} style={{paddingTop: '20px'}}>
-      <View className={styles.header} style={headerStyle}>康一诺</View>
+      {/*<Search/>*/}
-      <Search/>
       <Adware/>
       <Feature/>
       <FeatureRecommended/>

src/pages/login/login.tsx

@@ -101,7 +101,7 @@ const Login: FC = () => {
         <Icon name={'close'} onClick={() => setError(null)}/>
       </View> : null}
 
-      {process.env.TARO_APP_LGOIN === 'true' && <MyButton onClick={TESTLOGIN}>线下登录</MyButton>}
+      {/*{process.env.TARO_APP_LGOIN === 'true' && <MyButton onClick={TESTLOGIN}>线下登录</MyButton>}*/}
     </View>
   )
 }

src/pages/preview/brand/info/info.tsx

@@ -94,6 +94,91 @@ const BrandInfo: FC = () => {
               : <Empty name='空空如也'/>
           }
 
+          {
+            articleList?.length ?
+              articleList.map((i: any) =>
+                <View className={styles.box} onClick={() => {
+                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
+                }}>
+                  <View className={styles.inner}>
+                    <View className={styles.leftBox}>
+                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
+                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
+                    </View>
+                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
+                  </View>
+                </View>
+              )
+              : <Empty name='空空如也'/>
+          }
+          {
+            articleList?.length ?
+              articleList.map((i: any) =>
+                <View className={styles.box} onClick={() => {
+                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
+                }}>
+                  <View className={styles.inner}>
+                    <View className={styles.leftBox}>
+                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
+                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
+                    </View>
+                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
+                  </View>
+                </View>
+              )
+              : <Empty name='空空如也'/>
+          }
+          {
+            articleList?.length ?
+              articleList.map((i: any) =>
+                <View className={styles.box} onClick={() => {
+                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
+                }}>
+                  <View className={styles.inner}>
+                    <View className={styles.leftBox}>
+                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
+                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
+                    </View>
+                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
+                  </View>
+                </View>
+              )
+              : <Empty name='空空如也'/>
+          }
+          {
+            articleList?.length ?
+              articleList.map((i: any) =>
+                <View className={styles.box} onClick={() => {
+                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
+                }}>
+                  <View className={styles.inner}>
+                    <View className={styles.leftBox}>
+                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
+                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
+                    </View>
+                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
+                  </View>
+                </View>
+              )
+              : <Empty name='空空如也'/>
+          }
+          {
+            articleList?.length ?
+              articleList.map((i: any) =>
+                <View className={styles.box} onClick={() => {
+                  Taro.navigateTo({url: `/pages/preview/brand/article/article?id=${i.id}`})
+                }}>
+                  <View className={styles.inner}>
+                    <View className={styles.leftBox}>
+                      <View className='font-weight mb-2 font-28 lh-40'>{i.title}</View>
+                      <View className={styles.desc}>{i.created_at} {i.page_view}阅读</View>
+                    </View>
+                    {/*<Image mode='aspectFill' className={styles.image} src={'dd'}/>*/}
+                  </View>
+                </View>
+              )
+              : <Empty name='空空如也'/>
+          }
         </View>
       </View>
     </View>

src/pages/preview/health/health.tsx

@@ -25,9 +25,9 @@ const Health: FC = () => {
     getData(page)
   }, [page])
 
-  function jump(url: string, id: number) {
+  function jump(health: Health) {
-    HomeApi.healthSetPlay(id)
+    HomeApi.healthSetPlay(health.id)
-    Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url})
+    Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${health.resource.url}&poster=${health.url_path}&title=${health.title}`})
   }
 
   return (
@@ -35,9 +35,7 @@ const Health: FC = () => {
       <View className={styles.container}>
         {
           data.length > 0
-            ? data.map(d => <View key={d.id}
+            ? data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d)}>
-                                  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 m-2 text-dark'>{d.title}</View>

src/pages/preview/illness/list/list.tsx

@@ -46,17 +46,20 @@ const BrandList: FC = () => {
                 <Collapse title={d.name} children={
                   <>
                     {
-                    d.articles?.map((d) =>
+                      d.articles?.map((d) => <View
-                      <View onClick={() => {
+                          onClick={() => {
                             Taro.navigateTo({url: `/pages/preview/illness/article/article?id=${d.id}`})
-                      }} className='mt-2 font-28 ml-5'>{d.title}</View>
+                          }}
+                          className='py-3 font-36'
+                          style={{borderBottom: "1px solid #ddd"}}
+                        >{d.title}</View>
                       )
                     }
                   </>
                 }></Collapse>
               </View>
             </View>
-        ):<Empty name='暂无数据'/>
+          ) : <Empty name='暂无数据'/>
       }
     </View>
   )

src/pages/preview/profession/profession.tsx

@@ -67,8 +67,8 @@ const Profession = () => {
     setCategoryId(tab.tab?.value as number)
   }
 
-  function jump(url: string) {
+  function jump(kill: Kill) {
-    Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url})
+    Taro.navigateTo({url: `/pages/preview/videoFull/videoFull?url=${kill.resource.url}&poster=${kill.url_path}&title=${kill.resource.name}`})
   }
 
   function swiperChange(e) {
@@ -89,7 +89,7 @@ const Profession = () => {
         className={styles.height}>
         {
           data.data.map(d =>
-            <View className={styles.killBox} onClick={() => jump(d.resource.url)}>
+            <View className={styles.killBox} onClick={() => jump(d)}>
               <Image src={d.url_path} mode='widthFix'/>
               <View className='text-ellipsis flex-1'>{d.resource.name}</View>
             </View>

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

@@ -9,3 +9,11 @@
   margin: auto;
   background: #000;
 }
+
+.title {
+  position: fixed;
+  z-index: 9999;
+  top: 20rpx;
+  left: 20rpx;
+  color: #fff;
+}

src/pages/preview/videoFull/videoFull.tsx

@@ -1,39 +1,60 @@
-import {Video} from "@tarojs/components";
+import {Video, View} from "@tarojs/components";
-import {FC} from "react";
+import {FC, useState} from "react";
 import Taro from "@tarojs/taro";
 import styles from './videoFull.module.scss'
 
-interface Props {
+interface Params {
   url: string
+  poster?: string
+  title?: string
 }
 
-const VideoFull: FC<Props> = () => {
+const VideoFull: FC = () => {
-  const {url} = Taro.useRouter().params
+  const params = Taro.useRouter().params as unknown as Params
+  const video = Taro.createVideoContext('myVideo')
+  const [palying, setpalying] = useState(false)
 
   Taro.useLoad(() => {
-    if (!url) {
+    console.log(params)
+    if (!params.url) {
       Taro.showModal({
         title: '播放地址错',
-        success(){
+        success() {
           Taro.navigateBack()
         }
       })
     }
   })
 
+  function click() {
+    if (palying) {
+      video.pause()
+    } else {
+      video.play()
+    }
+  }
+
   return (
+    <>
+      {params.title && <View className={styles.title}>{params.title}</View>}
       <Video
+        id={'myVideo'}
+        onClick={click}
         className={styles.video}
         controls
-      src={url!}
+        poster={params.poster}
+        src={params.url}
         autoplay
         showCenterPlayBtn
-      enablePlayGesture
         autoPauseIfOpenNative
         autoPauseIfNavigate
+        playBtnPosition='center'
         showFullscreenBtn={false}
         enableProgressGesture={false}
+        onPlay={() => setpalying(true)}
+        onPause={() => setpalying(false)}
       />
+    </>
   )
 }