diff --git a/src/components/topic/single.module.scss b/src/components/topic/single.module.scss index c794da4..0905d35 100644 --- a/src/components/topic/single.module.scss +++ b/src/components/topic/single.module.scss @@ -1,4 +1,5 @@ -.single-cover { + +.singleCover { position: absolute; bottom: 0; top: 0; @@ -28,10 +29,12 @@ } -.correct{ - +.correct { + background: #bdf6c1 !important; + color: #fff !important; } -.mistake{ - +.mistake { + background: #e7abab !important; + color: #fff !important; } diff --git a/src/components/topic/single.tsx b/src/components/topic/single.tsx index 030abb7..9ac6022 100644 --- a/src/components/topic/single.tsx +++ b/src/components/topic/single.tsx @@ -12,8 +12,6 @@ interface Props { type AnswerType = "true" | 'false' export const Single: FC = (props) => { - if (!props.topic) return (<>) - let timer: NodeJS.Timeout const [lastState, setLastState] = useState<0 | 1>(0) // 0为竖屏,1为横屏 const [result, setResult] = useState(undefined) @@ -58,18 +56,19 @@ export const Single: FC = (props) => { }) useEffect(() => { - // timer = setTimeout(() => { - // props.examination(false) - // }, 4000) + timer = setTimeout(() => { + props.examination(false) + }, 4000) }, [props.topic]) const style: React.CSSProperties = useMemo(() => ({ - transform: lastState === 0 && props.full ? "rotate(-90deg)" : 'none' - }), [lastState]) + transform: lastState === 1 && props.full ? "rotate(90deg)" : 'none' + }), [lastState, props.full]) - function examination(result: AnswerType) { + function examination(answer: AnswerType) { + if (result) return; clearTimeout(timer) - setResult(result) + setResult(answer) setTimeout(() => { props.examination(props.topic?.right_value === result) @@ -78,24 +77,29 @@ export const Single: FC = (props) => { } function judgment(answer: AnswerType): string { - if (props.topic?.right_value === answer && result === answer) { + if (result !== answer) return '' + if (props.topic?.right_answer === answer && result === answer) { return styles.correct } return styles.mistake } return ( - - {props.topic.question} - examination("true")}> - {props.topic.right_value} - - examination("false")}> - {props.topic.error_value} - - + <> + { + props.topic && + {props.topic.question} + examination("true")}> + {props.topic.right_value} + + examination("false")}> + {props.topic.error_value} + + + } + ) } diff --git a/src/components/video/video.tsx b/src/components/video/video.tsx index 55ea43d..6e3707b 100644 --- a/src/components/video/video.tsx +++ b/src/components/video/video.tsx @@ -49,13 +49,6 @@ const HVideo: FC = (opt: HVideoOptions) => { }) } - // opt.setTime((time?: number) => { - // if (typeof time === 'number') { - // video?.seek(time) - // } - // video?.play() - // }) - function onEnded() { if (currentTime + 1 > opt.duration) { opt.onEnded() diff --git a/src/pages/business/videoInfo/components/course.tsx b/src/pages/business/videoInfo/components/course.tsx index 4bf9128..0ed8eb1 100644 --- a/src/pages/business/videoInfo/components/course.tsx +++ b/src/pages/business/videoInfo/components/course.tsx @@ -1,4 +1,4 @@ -import {FC, useEffect, useState} from "react"; +import {FC, useCallback, useEffect, useState} from "react"; import HVideo from "@/components/video/video"; import {curriculum, HourPlayData} from "@/api"; import {Profile} from '@/store' @@ -13,11 +13,9 @@ interface Props { curEnd: (test?: boolean) => void } - const Course: FC = ({id, courseId, preview, curEnd}) => { const [breakpoints, setBreakpoints] = useState([]) // 断点 const [isFull, setIsFull] = useState(false) - const [examAll, setExamAll] = useState>([]) // 题库 const [data, setData] = useState(null) const [time, setTime] = useState(0) // 进入断点的时间 @@ -67,7 +65,8 @@ const Course: FC = ({id, courseId, preview, curEnd}) => { getData() }, [id]) - function examination(result: boolean) { + const examination = useCallback((result: boolean) => { + if (!time) return const {id: question_id, question_type} = examAll?.[time]?.[0] curriculum.answerRecord(id, { is_pass: result, @@ -77,8 +76,7 @@ const Course: FC = ({id, courseId, preview, curEnd}) => { question_id }) setTime(0) - } - + }, [time]) return ( <> @@ -88,9 +86,10 @@ const Course: FC = ({id, courseId, preview, curEnd}) => { src={data?.url || ''} onEnded={onEnded} breakpoint={breakpoints} - onBreakpoint={(time) => setTime(time)} fullChange={(fullScreen) => setIsFull(fullScreen)} - > + onBreakpoint={(now) => { + time !== now && setTime(now) + }}>