|
|
@@ -1,16 +1,156 @@
|
|
|
+import CourseVideoItem from "@/business-components/course-video-item";
|
|
|
+import SectionDetail from "@/business-components/section-detail";
|
|
|
+import ColHeader from "@/components/col-header";
|
|
|
+import ColVideo from "@/components/col-video";
|
|
|
+import request from "@/helpers/request";
|
|
|
+import { Cell, Icon, Rate, Tab, Tabs, Image, Button, Sticky, Field } from "vant";
|
|
|
import { defineComponent } from "vue";
|
|
|
+import styles from './video-class-detail.module.less';
|
|
|
+import { state } from "@/state";
|
|
|
+
|
|
|
+import iconTeacher from '@common/images/icon_teacher.png';
|
|
|
|
|
|
export default defineComponent({
|
|
|
name: 'VideoClassDetail',
|
|
|
data() {
|
|
|
+ const query = this.$route.query
|
|
|
return {
|
|
|
-
|
|
|
+ groupId: query.groupId,
|
|
|
+ classId: query.classId,
|
|
|
+ tabIndex: 1,
|
|
|
+ title: '',
|
|
|
+ detailList: [],
|
|
|
+ posterUrl: '',
|
|
|
+ srcUrl: '',
|
|
|
+ message: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ users() {
|
|
|
+ return state.user.data
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ try {
|
|
|
+ const res = await request.get('/api-teacher/videoLessonGroup/selectVideoLesson', {
|
|
|
+ params: {
|
|
|
+ groupId: this.groupId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const result = res.data || {}
|
|
|
+ this.title = result.lessonGroup.lessonName
|
|
|
+ this.detailList = result.detailList || []
|
|
|
+ this.detailList.forEach((item: any) => {
|
|
|
+ if (item.id === Number(this.classId)) {
|
|
|
+ this.posterUrl = item.coverUrl
|
|
|
+ this.srcUrl = item.videoUrl
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch { }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onPlay(item: any) {
|
|
|
+ this.posterUrl = item.imgUrl
|
|
|
+ this.srcUrl = item.videoUrl
|
|
|
}
|
|
|
},
|
|
|
render() {
|
|
|
return (
|
|
|
- <div>
|
|
|
- 我的课程视频课程详情
|
|
|
+ <div class={styles['video-class-detail']}>
|
|
|
+ <ColHeader v-slots={{
|
|
|
+ content: () => (
|
|
|
+ <ColVideo src={this.srcUrl} poster={this.posterUrl} />
|
|
|
+ )
|
|
|
+ }} />
|
|
|
+ <Cell border={false} class={styles.cell} title={this.title} titleClass={styles.title} v-slots={{
|
|
|
+ icon: () => (<Icon name="video" size={18} style={{ display: 'flex', alignItems: 'center' }} />),
|
|
|
+ value: () => (<div class={styles.label}><span>1</span>/4课时</div>)
|
|
|
+ }}></Cell>
|
|
|
+
|
|
|
+ <Tabs v-model:active={this.tabIndex} class={styles.infoField} color="var(--van-primary)" lineWidth={20}>
|
|
|
+ <Tab title="目录" name={1}>
|
|
|
+ <div style={{ height: 'calc(100vh - 320px)', overflowY: 'auto' }}>
|
|
|
+ <SectionDetail title="课程列表" icon="courseList" >
|
|
|
+ {this.detailList.map((item: any) => (
|
|
|
+ <CourseVideoItem class={'mb12'} detail={{
|
|
|
+ id: item.id,
|
|
|
+ title: item.videoTitle,
|
|
|
+ content: item.videoContent,
|
|
|
+ imgUrl: item.coverUrl,
|
|
|
+ videoUrl: item.videoUrl
|
|
|
+ }} onPlay={this.onPlay} />
|
|
|
+ ))}
|
|
|
+ {this.detailList.map((item: any) => (
|
|
|
+ <CourseVideoItem class={'mb12'} detail={{
|
|
|
+ id: item.id,
|
|
|
+ title: item.videoTitle,
|
|
|
+ content: item.videoContent,
|
|
|
+ imgUrl: item.coverUrl,
|
|
|
+ videoUrl: item.videoUrl
|
|
|
+ }} onPlay={this.onPlay} />
|
|
|
+ ))}
|
|
|
+ {this.detailList.map((item: any) => (
|
|
|
+ <CourseVideoItem class={'mb12'} detail={{
|
|
|
+ id: item.id,
|
|
|
+ title: item.videoTitle,
|
|
|
+ content: item.videoContent,
|
|
|
+ imgUrl: item.coverUrl,
|
|
|
+ videoUrl: item.videoUrl
|
|
|
+ }} onPlay={this.onPlay} />
|
|
|
+ ))}
|
|
|
+ {this.detailList.map((item: any) => (
|
|
|
+ <CourseVideoItem class={'mb12'} detail={{
|
|
|
+ id: item.id,
|
|
|
+ title: item.videoTitle,
|
|
|
+ content: item.videoContent,
|
|
|
+ imgUrl: item.coverUrl,
|
|
|
+ videoUrl: item.videoUrl
|
|
|
+ }} onPlay={this.onPlay} />
|
|
|
+ ))}
|
|
|
+ </SectionDetail>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </Tab>
|
|
|
+ <Tab title="简介" name={2}>
|
|
|
+ <Cell class={styles['open-teacher-info']} border={false} v-slots={{
|
|
|
+ icon: () => (<Image class={styles.userLogo} src={this.users?.headUrl || iconTeacher} fit="cover" />)
|
|
|
+ }}>
|
|
|
+ <div class={styles['teacher-info']}>
|
|
|
+ <div class={styles['users']}>
|
|
|
+ <div class={styles['teacher-name']}>
|
|
|
+ {this.users?.username}
|
|
|
+ </div>
|
|
|
+ <Rate modelValue={this.users?.starGrade} color="#FFC459" void-icon="star" voidColor="#D6D6D6" size={15} />
|
|
|
+ </div>
|
|
|
+ <div class={styles.level}>
|
|
|
+ 粉丝{this.users?.fansNum}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class={styles['teacher-desc']}>
|
|
|
+ <Button type="primary" icon="plus" size="mini" style={{ borderRadius: '5px', padding: '0 8px' }}>关注</Button>
|
|
|
+ </div>
|
|
|
+ </Cell>
|
|
|
+ <SectionDetail>
|
|
|
+ <p class={styles.introduction}>课程介绍</p>
|
|
|
+ </SectionDetail>
|
|
|
+ </Tab>
|
|
|
+ <Tab title="讨论" name={3}>
|
|
|
+ <div style={{ height: 'calc(100vh - 365px)', overflowY: 'auto' }}>
|
|
|
+ <div style={{ height: '20vh' }}>主体请求</div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <Sticky offsetBottom={0} position='bottom'>
|
|
|
+ <Field
|
|
|
+ placeholder="快来讨论吧～"
|
|
|
+ v-model={this.message}
|
|
|
+ v-slots={{
|
|
|
+ button: () => (
|
|
|
+ <Button type="primary" disabled={!this.message} style={{ padding: '0 20px' }} size="small" round>发布</Button>
|
|
|
+ )
|
|
|
+ }} />
|
|
|
+ </Sticky>
|
|
|
+ </Tab>
|
|
|
+ </Tabs>
|
|
|
</div>
|
|
|
);
|
|
|
}
|
