123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343 |
- import CoursePlanStep from '@/business-components/course-plan-step'
- import SectionDetail from '@/business-components/section-detail'
- import UserDetail from '@/business-components/user-detail'
- import UserList from '@/business-components/user-list'
- import ColResult from '@/components/col-result'
- import ColShare from '@/components/col-share'
- import ColSticky from '@/components/col-sticky'
- import { postMessage } from '@/helpers/native-message'
- import request from '@/helpers/request'
- import { state } from '@/state'
- import LiveItem from '@/views/live-class/live-item'
- import dayjs from 'dayjs'
- import { Button, Popup, Sticky, Tab, Tabs, Toast } from 'vant'
- import { defineComponent } from 'vue'
- import styles from './live-detail.module.less'
- import ColHeader from '@/components/col-header'
- import TheSticky from '@/components/the-sticky'
- interface IProps {
- courseTime: string
- coursePlan: string
- videoPosterUrl?: string
- roomUid?: string
- liveState?: number
- id?: number | string
- }
- export default defineComponent({
- name: 'LiveDetail',
- data() {
- const query = this.$route.query
- return {
- share: query.share,
- joinRoom: query.joinRoom, // 原生传递过来的参数,判断是否进入直播间
- groupId: query.groupId,
- courseId: query.classId,
- live: {} as any,
- shareStatus: false,
- shareUrl: '',
- myself: false
- }
- },
- computed: {
- userInfo() {
- const live = this.live as any
- const planList = live.planList || []
- const startTime = planList[0]?.startTime || new Date()
- // const endTime = planList[0]?.endTime || new Date()
- return {
- headUrl: live.avatar,
- avatar: live.avatar,
- username: live.userName,
- id: live.teacherId,
- startTime:
- `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
- 'HH:mm'
- )}` || '',
- courseStartTime: dayjs(live.courseStartTime).format('YYYY-MM-DD HH:mm'),
- lessonPrice: live.coursePrice,
- buyNum: live.studentCount || 0,
- type: 'live',
- lessonId: live.courseGroupId,
- completeCourseNum: live.completeCourseNum, // 已上课时
- isShowCourse: live.status !== 'APPLY', // 是否显示课程
- lessonNum: live.courseNum || 0, // 课时数
- lessonDesc: live.courseIntroduce,
- lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
- lessonName: live.courseGroupName,
- subjectName: live.subjectName,
- auditVersion: live.auditVersion || 0,
- isDegree: live.degreeFlag ? true : false,
- isTeacher: live.teacherFlag ? true : false
- }
- },
- courseInfo() {
- const tempArr = [] as IProps[]
- const coursePlanList = this.live.planList || []
- coursePlanList.forEach((item: any) => {
- const startTime = item.startTime || new Date()
- const endTime = item.endTime || new Date()
- tempArr.push({
- courseTime: `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(
- startTime
- ).format('HH:mm')}~${dayjs(endTime).format('HH:mm')}`,
- coursePlan: item.plan,
- roomUid: item.roomUid,
- liveState: item.liveState,
- id: item.courseId
- })
- })
- return tempArr || []
- },
- liveStatus() {
- const coursePlanList = this.live.planList || []
- const tempObj = {
- status: false,
- liveStatus: 0,
- roomUid: ''
- }
- coursePlanList.forEach((item: any) => {
- if (item.courseId === Number(this.courseId)) {
- tempObj.status = true
- tempObj.liveStatus = item.liveStatus
- tempObj.roomUid = item.roomUid
- }
- })
- return tempObj
- },
- studentList() {
- const live = this.live as any
- return live.studentList || []
- },
- courseOffStatus() {
- const live = this.live as any
- let status = false
- if (
- (live.status === 'APPLY' && live.studentList.length === 0) ||
- live.status === 'NOT_SALE'
- ) {
- status = true
- }
- return status
- }
- },
- async mounted() {
- try {
- const res = await request.get(
- '/api-teacher/courseGroup/queryLiveCourseInfo',
- {
- params: {
- groupId: this.groupId
- }
- }
- )
- this.live = res.data || {}
- if (state.platformType === 'TEACHER') {
- this.myself = !res.data.myself
- }
- this.shareUrl = `${location.origin}/teacher/#/shareLive?recomUserId=${state.user.data?.userId}&groupId=${this.groupId}&p=tenant`
- // console.log(this.live)
- } catch {
- //
- }
- },
- methods: {
- async onJoinRoom() {
- try {
- const res = await request.get(
- '/api-teacher/courseGroup/queryLiveCourseInfo',
- {
- params: {
- groupId: this.groupId
- }
- }
- )
- const result = res.data || {}
- const coursePlanList = result.planList || []
- let tempObj: any = {}
- coursePlanList.forEach((item: any) => {
- if (item.courseId === Number(this.courseId)) {
- tempObj = item
- }
- })
- if (tempObj && tempObj.liveState === 1) {
- postMessage({
- api: 'joinLiveRoom',
- content: {
- roomId: tempObj.roomUid,
- teacherId: this.live.teacherId
- }
- })
- } else if (tempObj && tempObj.liveState === 2) {
- setTimeout(() => {
- Toast('课程已结束')
- }, 100)
- } else {
- setTimeout(() => {
- Toast('课程尚未开始,请耐心等候')
- }, 100)
- }
- } catch {
- //
- }
- },
- async cancelCourseGroup() {
- try {
- await request.get('/api-teacher/courseGroup/cancelCourseGroup', {
- params: {
- groupId: this.groupId
- }
- })
- Toast('取消课程成功')
- setTimeout(() => {
- postMessage({ api: 'back', content: {} })
- }, 500)
- } catch {
- //
- }
- }
- },
- render() {
- return (
- <div class={[styles['live-detail'], 'mb12']}>
- <ColHeader />
- <UserDetail userInfo={this.userInfo} />
- <SectionDetail border>
- <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
- </SectionDetail>
- {this.myself ? (
- <SectionDetail title="课程列表" icon="courseList" border={true}>
- <CoursePlanStep
- courseInfo={this.courseInfo}
- courseId={Number(this.courseId) || 0}
- />
- </SectionDetail>
- ) : (
- <SectionDetail
- title="课程列表"
- icon="courseList"
- titleShow={false}
- contentStyle={{ paddingTop: '0' }}
- >
- <Tabs color="var(--van-primary)" lineWidth={20} sticky>
- <Tab title="课程列表" titleClass="van-hairline--bottom">
- <CoursePlanStep
- showState={
- this.joinRoom == '1' && this.liveStatus.liveStatus !== 2
- }
- courseInfo={this.courseInfo}
- courseId={Number(this.courseId) || 0}
- />
- </Tab>
- <Tab title="上课学员" titleClass="van-hairline--bottom">
- {this.studentList.map((item: any) => (
- <UserList
- class="mb16"
- users={{
- avatar: item.avatar,
- studentId: item.studentId,
- studentName: item.userName,
- createTime: item.createTime
- }}
- />
- ))}
- {this.studentList.length === 0 && (
- <ColResult
- tips="暂无购买学员"
- classImgSize="SMALL"
- btnStatus={false}
- />
- )}
- </Tab>
- </Tabs>
- </SectionDetail>
- )}
- {this.live.status !== 'OUT_SALE' && (
- <>
- {this.courseOffStatus && (
- <TheSticky position="bottom">
- <div
- class={['btnGroup']}
- style={{ paddingTop: '10px', background: '#fff' }}
- >
- <Button
- block
- round
- type="primary"
- onClick={this.cancelCourseGroup}
- >
- 取消课程
- </Button>
- </div>
- </TheSticky>
- )}
- {this.joinRoom == '1' && this.liveStatus.liveStatus !== 2 && (
- <TheSticky position="bottom">
- <div
- class={['btnGroup']}
- style={{ paddingTop: '10px', background: '#fff' }}
- >
- <Button block round type="primary" onClick={this.onJoinRoom}>
- 进入直播间
- </Button>
- </div>
- </TheSticky>
- )}
- {this.share == '1' && this.courseInfo.length > 0 && (
- <TheSticky position="bottom">
- <div
- class={['btnGroup']}
- style={{ paddingTop: '10px', background: '#fff' }}
- >
- <Button
- block
- round
- type="primary"
- onClick={() => {
- this.shareStatus = true
- }}
- >
- 分享
- </Button>
- </div>
- </TheSticky>
- )}
- </>
- )}
- <Popup
- v-model:show={this.shareStatus}
- style={{ background: 'transparent' }}
- >
- <ColShare
- teacherId={this.userInfo.id}
- shareUrl={this.shareUrl}
- shareType="live"
- >
- <LiveItem
- class={styles.shareCourse}
- liveInfo={{
- backgroundPic: this.userInfo.lessonCoverUrl,
- courseGroupId: this.userInfo.lessonId,
- courseGroupName: this.userInfo.lessonName,
- courseNum: this.userInfo.lessonNum,
- coursePrice: this.userInfo.lessonPrice,
- teacherName: this.userInfo.username,
- teacherId: this.userInfo.id,
- avatar: this.userInfo.avatar,
- studentCount: this.userInfo.buyNum,
- courseStartTime: this.userInfo.courseStartTime,
- existBuy: 0,
- subjectName: this.userInfo.subjectName
- }}
- />
- </ColShare>
- </Popup>
- </div>
- )
- }
- })
|