|
|
@@ -1,129 +1,129 @@
|
|
|
-import { defineComponent, PropType } from 'vue'
|
|
|
-import styles from './index.module.less'
|
|
|
-import { Icon, Image, Popup } from 'vant'
|
|
|
-import videoStop from '@common/images/icon_video_stop.png'
|
|
|
-import VideoList from './video-list'
|
|
|
-import request from '@/helpers/request'
|
|
|
-
|
|
|
-interface IProps {
|
|
|
- courseTime: string
|
|
|
- coursePlan: string
|
|
|
- videoPosterUrl?: string
|
|
|
- roomUid?: string
|
|
|
- liveState?: number
|
|
|
- id?: number | string
|
|
|
-}
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'CoursePlanStep',
|
|
|
- props: {
|
|
|
- courseId: {
|
|
|
- // 用于判断当前选择哪一节课程
|
|
|
- type: Number,
|
|
|
- default: 0
|
|
|
- },
|
|
|
- hideVideo: {
|
|
|
- type: Boolean,
|
|
|
- default: false
|
|
|
- },
|
|
|
- courseInfo: {
|
|
|
- type: Array as PropType<IProps[]>,
|
|
|
- default: []
|
|
|
- }
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- videoStatus: false,
|
|
|
- list: []
|
|
|
- }
|
|
|
- },
|
|
|
- // mounted() {
|
|
|
- // console.log(this.courseId, 'courseId 121212')
|
|
|
- // },
|
|
|
- methods: {
|
|
|
- async onLookVideo(item: any) {
|
|
|
- // console.log(item)
|
|
|
- try {
|
|
|
- const res = await request.get('/api-student/liveRoomVideo/queryVideo', {
|
|
|
- params: {
|
|
|
- roomUid: item.roomUid
|
|
|
- }
|
|
|
- })
|
|
|
- console.log(res)
|
|
|
- this.list = res.data || []
|
|
|
- this.videoStatus = true
|
|
|
- } catch {
|
|
|
- //
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <div class={styles['col-steps']}>
|
|
|
- <div class={styles['col-steps__items']}>
|
|
|
- {this.courseInfo.map((item: any, index: number) => (
|
|
|
- <div class={styles['col-step']}>
|
|
|
- <div class={styles['col-step__title']}>
|
|
|
- {this.$slots.content ? (
|
|
|
- this.$slots.content()
|
|
|
- ) : (
|
|
|
- <div class={styles.stepSection}>
|
|
|
- <div class={styles.stepTitle}>
|
|
|
- <span
|
|
|
- class={[
|
|
|
- styles.stepTitleNum,
|
|
|
- (this.courseId === 0 || this.courseId === item.id) &&
|
|
|
- styles.active
|
|
|
- ]}
|
|
|
- >
|
|
|
- 第 {index + 1} 课时
|
|
|
- </span>
|
|
|
- <span class={styles.stepTitleText}>
|
|
|
- {item.courseTime}
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <div class={styles.stepContent}>
|
|
|
- <p>{item.coursePlan}</p>
|
|
|
-
|
|
|
- {item.liveState === 2 && !this.hideVideo && (
|
|
|
- <div
|
|
|
- class={styles.videoText}
|
|
|
- onClick={() => {
|
|
|
- this.onLookVideo(item)
|
|
|
- }}
|
|
|
- >
|
|
|
- 查看回放{'>>'}
|
|
|
- </div>
|
|
|
- )}
|
|
|
- {/* {item.videoPosterUrl && (
|
|
|
- <div class={styles.videoImg}>
|
|
|
- <Image src={item.videoPosterUrl} fit="cover" />
|
|
|
- <Icon
|
|
|
- class={styles.videoStop}
|
|
|
- name={videoStop}
|
|
|
- size={32}
|
|
|
- />
|
|
|
- </div>
|
|
|
- )} */}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- <div class={styles['col-step_circle']}>{index + 1}</div>
|
|
|
- <div class={styles['col-step__line']}></div>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
-
|
|
|
- <Popup
|
|
|
- v-model:show={this.videoStatus}
|
|
|
- closeable
|
|
|
- round
|
|
|
- style={{ width: '90%' }}
|
|
|
- >
|
|
|
- {this.videoStatus && <VideoList list={this.list} />}
|
|
|
- </Popup>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-})
|
|
|
+import { defineComponent, PropType } from 'vue'
|
|
|
+import styles from './index.module.less'
|
|
|
+import { Icon, Image, Popup } from 'vant'
|
|
|
+import videoStop from '@common/images/icon_video_stop.png'
|
|
|
+import VideoList from './video-list'
|
|
|
+import request from '@/helpers/request'
|
|
|
+
|
|
|
+interface IProps {
|
|
|
+ courseTime: string
|
|
|
+ coursePlan: string
|
|
|
+ videoPosterUrl?: string
|
|
|
+ roomUid?: string
|
|
|
+ liveState?: number
|
|
|
+ id?: number | string
|
|
|
+}
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'CoursePlanStep',
|
|
|
+ props: {
|
|
|
+ courseId: {
|
|
|
+ // 用于判断当前选择哪一节课程
|
|
|
+ type: Number,
|
|
|
+ default: 0
|
|
|
+ },
|
|
|
+ hideVideo: {
|
|
|
+ type: Boolean,
|
|
|
+ default: false
|
|
|
+ },
|
|
|
+ courseInfo: {
|
|
|
+ type: Array as PropType<IProps[]>,
|
|
|
+ default: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoStatus: false,
|
|
|
+ list: []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // mounted() {
|
|
|
+ // console.log(this.courseId, 'courseId 121212')
|
|
|
+ // },
|
|
|
+ methods: {
|
|
|
+ async onLookVideo(item: any) {
|
|
|
+ // console.log(item)
|
|
|
+ try {
|
|
|
+ const res = await request.get('/api-student/liveRoomVideo/queryVideo', {
|
|
|
+ params: {
|
|
|
+ roomUid: item.roomUid
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(res)
|
|
|
+ this.list = res.data || []
|
|
|
+ this.videoStatus = true
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div class={styles['col-steps']}>
|
|
|
+ <div class={styles['col-steps__items']}>
|
|
|
+ {this.courseInfo.map((item: any, index: number) => (
|
|
|
+ <div class={styles['col-step']}>
|
|
|
+ <div class={styles['col-step__title']}>
|
|
|
+ {this.$slots.content ? (
|
|
|
+ this.$slots.content()
|
|
|
+ ) : (
|
|
|
+ <div class={styles.stepSection}>
|
|
|
+ <div class={styles.stepTitle}>
|
|
|
+ <span
|
|
|
+ class={[
|
|
|
+ styles.stepTitleNum,
|
|
|
+ (this.courseId === 0 || this.courseId === item.id) &&
|
|
|
+ styles.active
|
|
|
+ ]}
|
|
|
+ >
|
|
|
+ 第 {index + 1} 课时
|
|
|
+ </span>
|
|
|
+ <span class={styles.stepTitleText}>
|
|
|
+ {item.courseTime}
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <div class={styles.stepContent}>
|
|
|
+ <p>{item.coursePlan}</p>
|
|
|
+
|
|
|
+ {item.liveState === 2 && !this.hideVideo && (
|
|
|
+ <div
|
|
|
+ class={styles.videoText}
|
|
|
+ onClick={() => {
|
|
|
+ this.onLookVideo(item)
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ 查看回放{'>>'}
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ {/* {item.videoPosterUrl && (
|
|
|
+ <div class={styles.videoImg}>
|
|
|
+ <Image src={item.videoPosterUrl} fit="cover" />
|
|
|
+ <Icon
|
|
|
+ class={styles.videoStop}
|
|
|
+ name={videoStop}
|
|
|
+ size={32}
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ )} */}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <div class={styles['col-step_circle']}>{index + 1}</div>
|
|
|
+ <div class={styles['col-step__line']}></div>
|
|
|
+ </div>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Popup
|
|
|
+ v-model:show={this.videoStatus}
|
|
|
+ closeable
|
|
|
+ round
|
|
|
+ style={{ width: '90%' }}
|
|
|
+ >
|
|
|
+ {this.videoStatus && <VideoList list={this.list} />}
|
|
|
+ </Popup>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
