|
|
@@ -0,0 +1,197 @@
|
|
|
+import CoursePlanStep from '@/business-components/course-plan-step'
|
|
|
+import SectionDetail from '@/business-components/section-detail'
|
|
|
+import UserDetail from '@/business-components/user-detail'
|
|
|
+import ColSticky from '@/components/col-sticky'
|
|
|
+import { postMessage, promisefiyPostMessage } from '@/helpers/native-message'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import { browser } from '@/helpers/utils'
|
|
|
+import { state } from '@/state'
|
|
|
+import dayjs from 'dayjs'
|
|
|
+import { Button, Dialog, Toast } from 'vant'
|
|
|
+import { defineComponent } from 'vue'
|
|
|
+import { shareCall } from '../share'
|
|
|
+import styles from './index.module.less'
|
|
|
+import qs from 'query-string'
|
|
|
+export const getAssetsHomeFile = (fileName: string) => {
|
|
|
+ const path = `../images/${fileName}`
|
|
|
+ const modules = import.meta.globEager('../images/*')
|
|
|
+ return modules[path].default
|
|
|
+}
|
|
|
+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 {
|
|
|
+ recomUserId: query.recomUserId, // 分享人编号
|
|
|
+ groupId: query.groupId,
|
|
|
+ live: {} as any,
|
|
|
+ wxStatus: 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,
|
|
|
+ username: live.userName,
|
|
|
+ id: live.teacherId,
|
|
|
+ startTime:
|
|
|
+ `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
|
|
|
+ 'HH:mm'
|
|
|
+ )}~${dayjs(endTime).format('HH:mm')}` || '',
|
|
|
+ lessonPrice: live.coursePrice,
|
|
|
+ buyNum: live.studentCount || 0,
|
|
|
+ lessonNum: live.courseNum || 0, // 课时数
|
|
|
+ lessonDesc: live.courseIntroduce,
|
|
|
+ lessonCoverUrl: live.backgroundPic || live.backgroundPicTemplate,
|
|
|
+ lessonName: live.courseGroupName,
|
|
|
+ auditVersion:0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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 || []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ if (browser().isApp) {
|
|
|
+ if (state.platformType === 'STUDENT') {
|
|
|
+ // 自动跳转到学生端视频课详情购买页
|
|
|
+ if (browser().ios) {
|
|
|
+ window.location.replace(
|
|
|
+ `${location.origin}/student/#/liveDetail??${qs.stringify(
|
|
|
+ this.$route.query
|
|
|
+ )}`
|
|
|
+ )
|
|
|
+ } else {
|
|
|
+ postMessage({
|
|
|
+ api: 'openWebView',
|
|
|
+ content: {
|
|
|
+ url: `${location.origin}/student/#/liveDetail??${qs.stringify(
|
|
|
+ this.$route.query
|
|
|
+ )}`,
|
|
|
+ orientation: 1,
|
|
|
+ isHideTitle: false
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ postMessage({ api: 'back' })
|
|
|
+ }
|
|
|
+ } else if (state.platformType === 'TEACHER') {
|
|
|
+ Dialog.alert({
|
|
|
+ title: '提示',
|
|
|
+ message: '请使用酷乐秀学生端扫码打开',
|
|
|
+ confirmButtonColor: '#2dc7aa'
|
|
|
+ }).then(() => {
|
|
|
+ postMessage({ api: 'back' })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ // 如果不在app里面则不需要唤起操作
|
|
|
+ this.reCall()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ try {
|
|
|
+ const res = await request.post('/api-teacher/open/liveShareProfit', {
|
|
|
+ data: {
|
|
|
+ bizId: this.groupId,
|
|
|
+ userId: this.recomUserId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.live = res.data.liveCourseGroup || {}
|
|
|
+ } catch {
|
|
|
+ //
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ locationReplace(url: string) {
|
|
|
+ if (history.replaceState) {
|
|
|
+ history.replaceState(null, document.title, url)
|
|
|
+ window.location.reload()
|
|
|
+ } else {
|
|
|
+ location.replace(url)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ reCall() {
|
|
|
+ const { origin } = location
|
|
|
+ let str = origin + '/student/#/liveDetail'
|
|
|
+ const params = this.$route.query
|
|
|
+ str += `?recomUserId=${this.recomUserId}&groupId=${params.groupId}`
|
|
|
+ shareCall(str, {})
|
|
|
+ },
|
|
|
+ onShare() {
|
|
|
+ if (browser().weixin) {
|
|
|
+ this.wxStatus = true
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.reCall()
|
|
|
+ setTimeout(() => {
|
|
|
+ window.location.href = location.origin + '/student/#/download'
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div class={[styles['live-detail'], 'mb12']}>
|
|
|
+ <UserDetail userInfo={this.userInfo} showBuy={false} />
|
|
|
+ <SectionDetail border>
|
|
|
+ <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
|
|
|
+ </SectionDetail>
|
|
|
+
|
|
|
+ <SectionDetail
|
|
|
+ title="课程列表"
|
|
|
+ icon="courseList"
|
|
|
+ border
|
|
|
+ // contentStyle={{ paddingTop: '0' }}
|
|
|
+ >
|
|
|
+ <CoursePlanStep courseInfo={this.courseInfo} />
|
|
|
+ </SectionDetail>
|
|
|
+
|
|
|
+ <ColSticky position="bottom">
|
|
|
+ <div class={['btnGroup']} style={{ paddingTop: '12px' }}>
|
|
|
+ <Button block round type="primary" onClick={this.onShare}>
|
|
|
+ 下载酷乐秀进入课程
|
|
|
+ </Button>
|
|
|
+ </div>
|
|
|
+ </ColSticky>
|
|
|
+
|
|
|
+ {this.wxStatus && (
|
|
|
+ <div
|
|
|
+ class={styles.wxpopup}
|
|
|
+ onClick={() => {
|
|
|
+ this.wxStatus = false
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <img src={getAssetsHomeFile('wx_bg.png')} alt="" />
|
|
|
+ </div>
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|
