index.tsx 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import ColSteps from '@/components/col-steps'
  2. import request from '@/helpers/request'
  3. import { defineComponent } from 'vue'
  4. import CourseContent from './course-content'
  5. import CourseInfo from './course-info'
  6. import { createState, resestState } from './createState'
  7. export default defineComponent({
  8. name: 'video-operation',
  9. data() {
  10. const query = this.$route.query
  11. return {
  12. type: query.type || 'create'
  13. }
  14. },
  15. async created() {
  16. // 重置数据
  17. resestState()
  18. const query = this.$route.query
  19. createState.groupId = Number(query.groupId) || 0
  20. // 判断是否是编辑
  21. if (!createState.groupId) {
  22. return false
  23. }
  24. try {
  25. createState.loadingStatus = true
  26. const res = await request.get(
  27. '/api-website/videoLessonGroup/selectVideoLesson',
  28. {
  29. params: {
  30. groupId: createState.groupId
  31. }
  32. }
  33. )
  34. const result = res.data
  35. const {
  36. auditStatus,
  37. lessonCoverUrl,
  38. lessonPrice,
  39. lessonDesc,
  40. lessonSubject,
  41. lessonName,
  42. id,
  43. ...group
  44. } = result.lessonGroup
  45. // 判断模板图片是否在模板列表中,如果不在则是用户自己上传的图片
  46. const statusUrl = createState.templateList.includes(lessonCoverUrl)
  47. ? true
  48. : false
  49. createState.lessonGroup = {
  50. id: id,
  51. lessonName: lessonName,
  52. lessonSubject: Number(lessonSubject),
  53. lessonDesc: lessonDesc,
  54. lessonPrice: lessonPrice,
  55. lessonCoverTemplateUrl: statusUrl ? lessonCoverUrl : '',
  56. lessonCoverUrl: statusUrl ? '' : lessonCoverUrl
  57. }
  58. createState.lessonList = []
  59. result.detailList &&
  60. result.detailList.forEach((item: any) => {
  61. createState.lessonList.push({
  62. videoTitle: item.videoTitle,
  63. videoContent: item.videoContent,
  64. videoUrl: item.videoUrl,
  65. coverUrl: item.coverUrl,
  66. posterUrl: item.posterUrl // 视频封面图
  67. })
  68. })
  69. createState.loadingStatus = false
  70. } catch {}
  71. if (
  72. createState.lessonGroup.lessonCoverUrl &&
  73. !createState.templateList.includes(createState.lessonGroup.lessonCoverUrl)
  74. ) {
  75. createState.tabIndex = 2
  76. } else {
  77. createState.tabIndex = 1
  78. }
  79. },
  80. async mounted() {
  81. document.title = this.type === 'create' ? '新建视频课' : '编辑视频课'
  82. try {
  83. const sysConfig = await request.get(
  84. '/api-website/sysConfig/queryByParamName',
  85. {
  86. params: {
  87. paramName: 'video_lesson_service_fee'
  88. }
  89. }
  90. )
  91. createState.rate = sysConfig.data.paramValue
  92. } catch {}
  93. },
  94. render() {
  95. return (
  96. <>
  97. <div class="text-2xl font-semibold text-black leading-none px-6 py-5 ">
  98. {this.type === 'create' ? '新建视频课' : '编辑视频课'}
  99. </div>
  100. <div class="pt-12">
  101. <ColSteps
  102. class="pl-[60px] pr-7"
  103. type="large"
  104. active={createState.active}
  105. />
  106. {createState.active === 0 && <CourseInfo />}
  107. {createState.active === 1 && <CourseContent />}
  108. </div>
  109. </>
  110. )
  111. }
  112. })