colexiu-project/src/views/user-info/live-operation/index.tsx

import ColSteps from '@/components/col-steps'
import request from '@/helpers/request'
import { defineComponent } from 'vue'
import CourseClass from './course-class'
import CourseContent from './course-content'
import CourseInfo from './course-info'
import CoursePlan from './course-plan'
import { createState } from './createState'

export default defineComponent({
  name: 'live-operatoin',
  data() {
    const query = this.$route.query
    return {
      type: query.type || 'create'
    }
  },
  render() {
    return (
      <>
        <div class="text-2xl font-semibold text-black leading-none px-6 py-5 ">
          {this.type === 'create' ? '新建直播课' : '编辑直播课'}
        </div>

        <div class="pt-12">
          <ColSteps
            class="pl-[58px] pr-7"
            type="small"
            active={createState.active}
          />

          {createState.active === 0 && <CourseInfo />}
          {createState.active === 1 && <CoursePlan />}
          {createState.active === 2 && <CourseContent />}
          {createState.active === 3 && <CourseClass />}
        </div>
      </>
    )
  }
})