首页和全屏视频

v2
king 1 year ago committed by xing
parent cccb057722
commit 4fd03d0b8d
  1. 1
      src/components/button/MyButton.tsx
  2. 9
      src/pages/business/videoInfo/videoInfo.tsx
  3. 1
      src/pages/home/components/curRecommended.tsx
  4. 4
      src/pages/home/components/feature.tsx
  5. 30
      src/pages/home/components/feature_recommended.tsx
  6. 6
      src/pages/home/home.config.ts
  7. 26
      src/pages/home/home.module.scss
  8. 12
      src/pages/home/home.tsx
  9. 2
      src/pages/login/login.tsx
  10. 85
      src/pages/preview/brand/info/info.tsx
  11. 10
      src/pages/preview/health/health.tsx
  12. 35
      src/pages/preview/illness/list/list.tsx
  13. 6
      src/pages/preview/profession/profession.tsx
  14. 8
      src/pages/preview/videoFull/videoFull.module.scss
  15. 59
      src/pages/preview/videoFull/videoFull.tsx
  16. BIN
      src/static/img/brandTop.png
  17. BIN
      src/static/img/healthTop.png
  18. BIN
      src/static/img/illnessTop.png
  19. BIN
      src/static/img/professionTop.png

@ -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}`}>

@ -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
id={playId}
courseId={id}
curEnd={curEnd}
preview={preview}/>
: <Image src={data?.course.thumb || ''} className='image' mode='scaleToFill'/>
? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
: <Image src={data?.course.thumb || ''} className='image' mode='aspectFill'/>
}
</View>

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

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

@ -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}>
<View className={styles.featureTitle} onClick={() => jump(d.url)}>{d.title}</View>
data.map(d => <SwiperItem key={d.url}>
<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}>

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

@ -6,10 +6,8 @@
left: 0;
top: 0;
overflow: hidden;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: flex-end;
text-align: center;
color: #000;
&: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;
min-height: 100vh;
background-size: 100% 600rpx;
filter: blur(50px);
//background: linear-gradient(40deg, #fff 50rpx, #caf0e2, #92ecc5) no-repeat;
background: linear-gradient(to bottom, #92ecc5, #f1f8f6) no-repeat;
//min-height: 100vh;
//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;
font-size: 38rpx;
padding-bottom: 40rpx;
height: 50rpx;
padding-bottom: 30rpx;
}
.featureText {

@ -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.header} style={headerStyle}></View>
<Search/>
<View className={styles.content} style={{paddingTop: '20px'}}>
{/*<Search/>*/}
<Adware/>
<Feature/>
<FeatureRecommended/>

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

@ -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>

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

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

@ -67,8 +67,8 @@ const Profession = () => {
setCategoryId(tab.tab?.value as number)
}
function jump(url: string) {
Taro.navigateTo({url: '/pages/preview/videoFull/videoFull?url=' + url})
function jump(kill: Kill) {
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>

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

@ -1,39 +1,60 @@
import {Video} from "@tarojs/components";
import {FC} from "react";
import {Video, View} from "@tarojs/components";
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 {url} = Taro.useRouter().params
const VideoFull: FC = () => {
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 (
<Video
className={styles.video}
controls
src={url!}
autoplay
showCenterPlayBtn
enablePlayGesture
autoPauseIfOpenNative
autoPauseIfNavigate
showFullscreenBtn={false}
enableProgressGesture={false}
/>
<>
{params.title && <View className={styles.title}>{params.title}</View>}
<Video
id={'myVideo'}
onClick={click}
className={styles.video}
controls
poster={params.poster}
src={params.url}
autoplay
showCenterPlayBtn
autoPauseIfOpenNative
autoPauseIfNavigate
playBtnPosition='center'
showFullscreenBtn={false}
enableProgressGesture={false}
onPlay={() => setpalying(true)}
onPause={() => setpalying(false)}
/>
</>
)
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.6 KiB

Loading…
Cancel
Save