detail.tsx 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. import CoursePlanStep from '@/business-components/course-plan-step'
  2. import SectionDetail from '@/business-components/section-detail'
  3. import UserDetail from '@/business-components/user-detail'
  4. import request from '@/helpers/request'
  5. import { state } from '@/state'
  6. import { Button, Sticky, Toast } from 'vant'
  7. import { defineComponent } from 'vue'
  8. import { createState } from './createState'
  9. import styles from './detail.module.less'
  10. import dayjs from 'dayjs'
  11. import { postMessage } from '@/helpers/native-message'
  12. interface IProps {
  13. courseTime: string
  14. coursePlan: string
  15. videoPosterUrl?: string
  16. id?: number | string
  17. }
  18. export default defineComponent({
  19. name: 'detail',
  20. computed: {
  21. userInfo() {
  22. const startTime = createState.live.coursePlanList[0].startTime
  23. const endTime = createState.live.coursePlanList[0].endTime
  24. return {
  25. headUrl: state.user.data?.headUrl,
  26. username: state.user.data?.username,
  27. startTime:
  28. `${dayjs(startTime).format('YYYY-MM-DD')} ${dayjs(startTime).format(
  29. 'HH:mm'
  30. )}~${dayjs(endTime).format('HH:mm')}` || '',
  31. buyNum: 0,
  32. lessonPrice: createState.live.coursePrice,
  33. lessonNum: createState.live.courseNum,
  34. lessonDesc: createState.live.courseIntroduce,
  35. lessonCoverUrl:
  36. createState.live.backgroundPic ||
  37. createState.live.backgroundPicTemplate,
  38. lessonName: createState.live.name
  39. }
  40. },
  41. courseInfo() {
  42. let tempArr = [] as IProps[]
  43. const coursePlanList = createState.live.coursePlanList || []
  44. coursePlanList.forEach((item: any) => {
  45. tempArr.push({
  46. courseTime: `${dayjs(item.startTime).format('YYYY-MM-DD')} ${dayjs(
  47. item.startTime
  48. ).format('HH:mm')}~${dayjs(item.endTime).format('HH:mm')}`,
  49. coursePlan: item.plan
  50. })
  51. })
  52. return tempArr || []
  53. }
  54. },
  55. methods: {
  56. async onSubmit() {
  57. try {
  58. const params = {
  59. ...createState.live,
  60. startTime: createState.live.coursePlanList[0].startTime,
  61. backgroundPic:
  62. createState.live.backgroundPic ||
  63. createState.live.backgroundPicTemplate,
  64. teacherId: state.user.data?.userId
  65. }
  66. await request.post('/api-teacher/courseGroup/addLiveCourse', {
  67. data: params
  68. })
  69. Toast.success('创建成功')
  70. setTimeout(() => {
  71. postMessage({ api: 'back' })
  72. }, 1000)
  73. } catch {}
  74. }
  75. },
  76. render() {
  77. return (
  78. <div class={[styles['detail']]}>
  79. <UserDetail userInfo={this.userInfo} />
  80. <SectionDetail>
  81. <p class={styles.introduction}>{this.userInfo.lessonDesc}</p>
  82. </SectionDetail>
  83. <SectionDetail
  84. title="课程安排"
  85. icon="courseList"
  86. titleShow={false}
  87. class={'mb12'}
  88. contentStyle={{ paddingTop: '0' }}
  89. >
  90. <CoursePlanStep courseInfo={this.courseInfo} />
  91. </SectionDetail>
  92. <Sticky offsetBottom={0} position="bottom">
  93. <div class={['btnGroup', 'btnMore']}>
  94. <Button
  95. block
  96. round
  97. type="primary"
  98. plain
  99. onClick={() => {
  100. createState.active = 4
  101. }}
  102. >
  103. 返回编辑
  104. </Button>
  105. <Button block round type="primary" onClick={this.onSubmit}>
  106. 创建成功
  107. </Button>
  108. </div>
  109. </Sticky>
  110. </div>
  111. )
  112. }
  113. })