|
@@ -1,113 +0,0 @@
|
|
|
-import request from '@/helpers/request'
|
|
|
-import { browser } from '@/helpers/utils'
|
|
|
-import { state } from '@/state'
|
|
|
-import Plyr from 'plyr'
|
|
|
-import 'plyr/dist/plyr.css'
|
|
|
-import { NoticeBar } from 'vant'
|
|
|
-import { defineComponent, onMounted, reactive, nextTick, computed } from 'vue'
|
|
|
-import { useRoute } from 'vue-router'
|
|
|
-import styles from './index.module.less'
|
|
|
-export default defineComponent({
|
|
|
- name: 'exercise-after-class',
|
|
|
- setup() {
|
|
|
- const route = useRoute()
|
|
|
- const data = reactive({
|
|
|
- loading: true,
|
|
|
- recordLoading: false,
|
|
|
- currentTime: 0,
|
|
|
- duration: 0,
|
|
|
- video: '',
|
|
|
- })
|
|
|
- console.log(route.query)
|
|
|
- const getLessonTraining = async () => {
|
|
|
- let details = []
|
|
|
- try {
|
|
|
- const res: any = await request.get(
|
|
|
- state.platformApi + `/lessonTraining/courseSchedule/${route.query.courseScheduleId}`
|
|
|
- )
|
|
|
- if (Array.isArray(res?.data)) {
|
|
|
- const studentLevel = state.user?.data?.studentLevel || 1
|
|
|
- details = res.data.find((n: any) => n.studentLevel === studentLevel)?.details || []
|
|
|
- console.log('🚀 ~ details', details)
|
|
|
- }
|
|
|
- } catch (error) {
|
|
|
- console.log('error')
|
|
|
- }
|
|
|
- if (details.length) {
|
|
|
- data.video =
|
|
|
- (details.find((n: any) => n.materialId == route.query.materialId) as any)?.content || ''
|
|
|
- console.log('🚀 ~ data.video', data.video)
|
|
|
- nextTick(() => {
|
|
|
- initVideo()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- const initVideo = () => {
|
|
|
- const player = new Plyr('#player', {
|
|
|
- clickToPlay: true,
|
|
|
- invertTime: true,
|
|
|
- controls: ['play-large', 'play', 'current-time', 'restart', 'fullscreen']
|
|
|
- })
|
|
|
- player.on('loadeddata', () => {
|
|
|
- data.duration = player.duration
|
|
|
- console.log('🚀 ~ player', player.duration)
|
|
|
- data.loading = false
|
|
|
- })
|
|
|
- player.on('timeupdate', () => {
|
|
|
- data.currentTime = player.currentTime
|
|
|
- // console.log(timeRemaining.value)
|
|
|
- if (timeRemaining.value === 0) {
|
|
|
- if (data.recordLoading || data.currentTime === 0) return
|
|
|
- console.log('完成观看次数')
|
|
|
- addTrainingRecord()
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- const timeRemaining = computed(() => {
|
|
|
- return Math.ceil(data.duration - data.currentTime)
|
|
|
- })
|
|
|
- onMounted(() => {
|
|
|
- getLessonTraining()
|
|
|
- })
|
|
|
- // 达到指标,记录
|
|
|
- const addTrainingRecord = async () => {
|
|
|
- data.recordLoading = true
|
|
|
- const browserInfo = browser()
|
|
|
- const body = {
|
|
|
- materialType: 'VIDEO',
|
|
|
- record: {
|
|
|
- sourceTime: data.duration,
|
|
|
- clientType: state.platformType,
|
|
|
- feature: 'LESSON_TRAINING',
|
|
|
- deviceType: browserInfo.android ? 'ANDROID' : browserInfo.isApp ? 'IOS' : 'WEB'
|
|
|
- },
|
|
|
- courseScheduleId: route.query.courseScheduleId,
|
|
|
- lessonTrainingId: route.query.lessonTrainingId,
|
|
|
- materialId: route.query.materialId
|
|
|
- }
|
|
|
- try {
|
|
|
- const res: any = await request.post(
|
|
|
- state.platformApi + '/studentLessonTraining/lessonTrainingRecord',
|
|
|
- {
|
|
|
- data: body
|
|
|
- }
|
|
|
- )
|
|
|
- } catch (error) {}
|
|
|
- data.recordLoading = false
|
|
|
- }
|
|
|
- return () => (
|
|
|
- <div class={styles['exercise-after-class']}>
|
|
|
- <video id="player" src={data.video}></video>
|
|
|
- {!data.loading && (
|
|
|
- <>
|
|
|
- {timeRemaining.value === 0 ? (
|
|
|
- <NoticeBar background="green" color="#fff" text={`已完成本次训练`} />
|
|
|
- ) : (
|
|
|
- <NoticeBar text={`还需要观看 ${timeRemaining.value} 秒,就可以完成课后训练了`} />
|
|
|
- )}
|
|
|
- </>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-})
|