h5-colexiu/src/teacher/video-class/create.tsx

import { Grid, GridItem, Icon, Sticky } from 'vant'
import { defineComponent } from 'vue'
import styles from './create.module.less'
import ClassInfo from './class-info'
import ClassContent from './class-content'
import { createState } from './createState'
import request from '@/helpers/request'

import nameActive from './images/icon_name_active.png'
import education from './images/icon_education.png'
import educationActive from './images/icon_education_active.png'
import CreateSubmit from './create-submit'

export default defineComponent({
  name: 'Create',
  async created() {
    const query = this.$route.query
    createState.groupId = Number(query.groupId) || 0
    // 判断是否是编辑
    if (!createState.groupId) {
      return false
    }
    try {
      document.title = '修改视频课'
      createState.loadingStatus = true
      const res = await request.get(
        '/api-teacher/videoLessonGroup/selectVideoLesson',
        {
          params: {
            groupId: createState.groupId
          }
        }
      )
      const result = res.data
      const {
        auditStatus,
        lessonCoverUrl,
        lessonPrice,
        lessonDesc,
        lessonSubject,
        lessonName,
        relationType,
        id,
        ...group
      } = result.lessonGroup
      // 判断模板图片是否在模板列表中，如果不在则是用户自己上传的图片
      const statusUrl = createState.templateList.includes(lessonCoverUrl)
        ? true
        : false
      createState.lessonGroup = {
        id: id,
        lessonName: lessonName,
        lessonSubject: lessonSubject,
        lessonDesc: lessonDesc,
        lessonPrice: lessonPrice,
        relationType,
        lessonCoverTemplateUrl: statusUrl ? lessonCoverUrl : '',
        lessonCoverUrl: statusUrl ? '' : lessonCoverUrl
      }
      createState.lessonList = []
      result.detailList &&
        result.detailList.forEach((item: any) => {
          const tempInfo = item.musicAlbumInfos || []
          const relationList = tempInfo.map((info: any) => {
            return {
              relationMusicAlbum: info.relationType,
              musicAlbumName: info.name,
              musicAlbumId: info.musicAlbumId,
              relationId: info.id,
              useRelationType: relationType
            }
          })
          createState.lessonList.push({
            videoTitle: item.videoTitle,
            videoContent: item.videoContent,
            videoUrl: item.videoUrl,
            coverUrl: item.coverUrl,
            relationType: item.relationType,
            relationList,
            posterUrl: item.posterUrl // 视频封面图
          })
        })
      createState.loadingStatus = false
    } catch {
      //
    }
    if (
      createState.lessonGroup.lessonCoverUrl &&
      !createState.templateList.includes(createState.lessonGroup.lessonCoverUrl)
    ) {
      createState.tabIndex = 2
    } else {
      createState.tabIndex = 1
    }
  },
  async mounted() {
    try {
      const sysConfig = await request.get(
        '/api-teacher/sysConfig/queryByParamName',
        {
          params: {
            paramName: 'video_lesson_service_fee'
          }
        }
      )
      createState.rate = sysConfig.data.paramValue
    } catch {}
  },
  render() {
    return (
      <div class={styles['video-create']}>
        {createState.active <= 2 ? (
          <Sticky position="top" offsetTop={0} zIndex={999999}>
            <Grid
              border={false}
              style={{ paddingTop: '15px' }}
              direction="horizontal"
              columnNum="2"
              class={styles.gridColumn}
            >
              <GridItem
                v-slots={{
                  default: () => (
                    <>
                      <Icon name={nameActive} size={38} />
                      <span
                        class={[
                          styles.gridName,
                          createState.active >= 1 ? styles.active : null
                        ]}
                      >
                        课程信息
                      </span>
                    </>
                  )
                }}
              />
              <GridItem
                v-slots={{
                  default: () => (
                    <>
                      <Icon
                        name={
                          createState.active === 2 ? educationActive : education
                        }
                        size={38}
                      />
                      <span
                        class={[
                          styles.gridName,
                          createState.active === 2 ? styles.active : null
                        ]}
                      >
                        课程内容
                      </span>
                    </>
                  )
                }}
              />
            </Grid>
          </Sticky>
        ) : null}
        {/* 课程信息 */}
        {createState.active === 1 ? (
          <>
            <ClassInfo />
          </>
        ) : null}
        {/* 课程内容 */}
        {createState.active === 2 ? (
          <>
            <ClassContent />
          </>
        ) : null}
        {/* 预览 */}
        {createState.active === 3 ? (
          <>
            <CreateSubmit />
          </>
        ) : null}
      </div>
    )
  }
})