课程详情预览

v2
king 1 year ago
parent be402c557b
commit f8703c0754
  1. 2
      src/api/curriculum.ts
  2. 12
      src/components/image/image.tsx
  3. 4
      src/components/navigationBar/navigationBar.module.scss
  4. 5
      src/components/videoCover/videoCover.tsx
  5. 11
      src/pages/business/videoInfo/components/catalogue.tsx
  6. 8
      src/pages/business/videoInfo/components/hours.tsx
  7. 18
      src/pages/business/videoInfo/videoInfo.tsx
  8. 20
      src/pages/home/components/search.tsx
  9. 21
      src/pages/home/home.module.scss
  10. 6
      src/pages/home/home.tsx
  11. 5
      src/static/css/module.scss

@ -81,7 +81,7 @@ export const curriculum = {
},
/** 查看课程课时数据 */
courseDep(id: number, depId: number | null) {
return request<CourseDepData>(`/api/v1/course/${id}${depId ? `/dep/${depId}` : ''}`, "GET")
return request<CourseDepData>(`/api/v1/course/dep`, "GET", {id, depId})
},
/** 播放 */
hourPlay(courseId: number, id: number) {

@ -5,8 +5,8 @@ import styles from './image.module.scss'
import Taro from "@tarojs/taro";
interface Props extends ImageProps {
width: number
height: number
width?: number
height?: number
fallback?: string
}
@ -48,7 +48,7 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
lazyLoad
fadeIn
defaultSource={fallback}
style={{width: `${width}rpx`, height: `${height}rpx`}}
style={{width: width ? `${width}rpx` : "100%", height: height ? `${height}rpx` : "100%"}}
onError={onErrorHandler}
onLoad={onLoadHandler}/>
</View>
@ -61,7 +61,11 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
src={fallback}
lazyLoad
fadeIn
style={{width: `${width * .7}rpx`, height: `${height * .7}rpx`, margin: 'auto'}}/>
style={{
width: width ? `${width * .7}rpx` : "70%",
height: height ? `${height * .7}rpx` : "70%",
margin: 'auto'
}}/>
}
</View>
)

@ -2,9 +2,9 @@
position: sticky;
top: 0;
left: 0;
width: 750rpx;
width: 730rpx;
padding-left: 20rpx;
z-index: 99999999999;
z-index: 10;
overflow: hidden;
background: #fff;
}

@ -1,7 +1,8 @@
import {Image, View} from "@tarojs/components";
import {View} from "@tarojs/components";
import {FC} from "react";
import './videoCover.scss'
import Taro from "@tarojs/taro";
import Img from "@/components/image/image";
interface VideoCoverProps {
thumb: string
@ -28,7 +29,7 @@ const VideoCover: FC<VideoCoverProps> = (opt: VideoCoverProps) => {
<View className='videoBox'>
<View className='video' onClick={jump}>
<View className='upper'>
<Image src={opt.thumb} mode='widthFix'/>
<Img height={180} src={opt.thumb} mode='widthFix'/>
{opt.content && <View className='content'>{opt.content}</View>}
{opt.marker && <View className='marker'>{opt.marker}</View>}
</View>

@ -10,6 +10,7 @@ import videoEvents from "@/hooks/videoEvents";
import curRecord from '@/static/img/curRecord.png'
import hourRecord from "@/static/img/hourRecord.png"
import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
import {Profile} from "@/store";
interface Props {
data: CourseDepData | null
@ -29,6 +30,7 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
const [current, setCurrent] = useState(1)
const [show, setShow] = useState(false)
const [playing, setPlaying] = useState(false)
const {token, empty} = Profile.useContainer()
videoEvents.onVideoState(({name}) => {
@ -175,10 +177,15 @@ const Catalogue: FC<Props> = ({data, setHors, id, playId}) => {
<View className='Videobutton'>
{
playing ? <MyButton style={{flex: '1'}} onClick={onPause}></MyButton>
: <MyButton style={{flex: '1'}} onClick={learning}></MyButton>
token ? <>
{
playing ? <MyButton className='flex-1' onClick={onPause}></MyButton>
: <MyButton className='flex-1' onClick={learning}></MyButton>
}
<View className='px-3' onClick={() => setShow(true)}>...</View>
</>
: <MyButton className='flex-1' onClick={() => empty()}></MyButton>
}
</View>
<CustomPageContainer

@ -7,6 +7,7 @@ import {formatMinute} from "@/utils/time";
import Taro from "@tarojs/taro";
import {curriculum} from "@/api";
import lock from '@/static/img/lock.png'
import {Profile} from "@/store";
interface Props {
playId: number | null
@ -23,6 +24,7 @@ async function jumTest(hour: Hour) {
}
const Hours: FC<Props> = ({data, click, learn_hour_records, playId}) => {
const {token, empty} = Profile.useContainer()
const complete = (id: number): number | undefined => {
const find = learn_hour_records?.find(d => d.id === id)
if (find) {
@ -32,7 +34,11 @@ const Hours: FC<Props> = ({data, click, learn_hour_records, playId}) => {
}
}
function onClick(id: number, is_complete: number | undefined, hour: Hour, upId?: number,) {
function onClick(id: number, is_complete: number | undefined, hour: Hour, upId?: number) {
if (!token) {
empty()
return;
}
if (is_complete === 0) {
Taro.showModal({
title: '考卷未完成,是否前往',

@ -10,8 +10,6 @@ import {formatMinute} from "@/utils/time";
import videoEvents from "@/hooks/videoEvents";
import unique_ident from "@/hooks/unique_ident";
import Img from "@/components/image/image";
import {Profile} from "@/store";
import LoginView from "@/components/loginView";
const VideoInfo: FC = () => {
const {id, depId} = Taro.getCurrentInstance()?.router?.params as any
@ -101,7 +99,6 @@ const VideoInfo: FC = () => {
data && getData(playing)
})
Taro.useUnload(() => {
videoEvents.videoOff()
})
@ -131,18 +128,5 @@ const VideoInfo: FC = () => {
)
}
const VerifyToken: FC = () => {
const {token} = Profile.useContainer()
const globalData = Taro.getApp().globalData
return (
<>
{
!token ? <LoginView height={globalData.windowHeight - 100}/>
: <VideoInfo/>
}
</>
)
}
export default VerifyToken
export default VideoInfo

@ -1,21 +1,19 @@
import {FC} from "react";
import {Input, View} from "@tarojs/components";
import {View} from "@tarojs/components";
import styles from "../home.module.scss";
import Icon from "@/components/icon";
import Taro from "@tarojs/taro";
interface Props {
onConfirm: (value: string) => void
}
export const Search: FC<Props> = (props) => {
export const Search: FC = () => {
function jump(){
Taro.navigateTo({url:'/pages/preview/search/search/index'})
}
return (
<View className={styles.search}>
<View className={styles.search} onClick={jump}>
<Icon name='search' size={18} color='#808080'/>
<Input
placeholder='搜索疾病名称'
confirmType='search'
onConfirm={(e) => props.onConfirm((e.target as any).value!)}
className='flex-1 pl-1'/>
<View className='ml-1'></View>
</View>
)
}

@ -16,14 +16,16 @@
}
.header {
width: 100%;
overflow: hidden;
margin-bottom: 20rpx;
&:after {
min-height: 100vh;
position: absolute;
top: 0;
left: -10%;
width: 120%;
left: 0;
width: 100%;
content: '';
display: block;
background: linear-gradient(to right, #DBF3F5, #B9ECD7, #C1EEDA) no-repeat;
@ -37,13 +39,14 @@
padding: 0 20px;
min-height: 90vh;
box-sizing: border-box;
width: 750rpx;
width: 100%;
overflow: hidden;
&:after {
position: absolute;
top: 0;
left: -10%;
width: 120%;
left: 0;
width: 100%;
height: 400rpx;
content: '';
display: block;
@ -54,16 +57,16 @@
}
.search {
width: 710rpx;
background: #fff;
border-radius: 100px;
font-size: 28rpx;
display: flex;
padding-left: 20rpx;
align-items: center;
box-sizing: border-box;
margin: 20rpx;
height: 76rpx;
justify-content: center;
height: 68rpx;
margin-bottom: 40rpx;
color: #909795;
}
.adware {

@ -12,6 +12,7 @@ import {HomeApi, HomeData} from "@/api";
import logo from '@/static/img/logo.png'
import Spin from "@/components/spinner";
import NavigationBar from "@/components/navigationBar/navigationBar";
import {Search} from "@/pages/home/components/search";
const Home: FC = () => {
@ -35,9 +36,12 @@ const Home: FC = () => {
return (
<>
<NavigationBar className={styles.header} leftNode={<Image src={logo} style={{height: "80%"}} mode='heightFix'/>} cancelBack/>
<NavigationBar className={styles.header}
leftNode={<Image src={logo} style={{height: "80%"}} mode='heightFix'/>}
cancelBack/>
<View className={styles.content}>
<Spin enable={enable} overlay/>
<Search />
<Adware data={data?.adverts || []} only_flag='routine_home_top_banner' width={710}/>
<Feature/>
<FeatureRecommended

@ -8,6 +8,11 @@ page,
font-size: 32rpx;
}
View::-webkit-scrollbar,
page::-webkit-scrollbar {
display: none;
}
.weui-cells_checkbox .weui-check:checked + .weui-icon-checked:before,
.taro-checkbox_checked {
color: #45D4A8 !important;

Loading…
Cancel
Save