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

import { Grid, GridItem, Icon } 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',
  created() {
    // 初始化状态
    createState.lessonGroup.lessonName = '测试视屏信息';
    createState.lessonGroup.lessonSubject = 5;
    createState.lessonGroup.lessonDesc = '测试视屏信息内容';
    createState.lessonGroup.lessonPrice = 50;
    // createState.lessonGroup.lessonCoverUrl = 'https://daya.ks3-cn-beijing.ksyun.com/202204/T1kK2ao.png';
  },
  async mounted() {
    console.log('create 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 ? <Grid border={false} style={{ paddingTop: '15px' }} direction="horizontal" columnNum="2">
          <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> : null}
        {/* 课程信息 */}
        {createState.active === 1 ? <>
          <ClassInfo />
        </> : null}
        {/* 课程内容 */}
        {createState.active === 2 ? <>
          <ClassContent />
        </> : null}
        {/* 预览 */}
        {createState.active === 3 ? <>
          <CreateSubmit />
        </> : null}

      </div>
    )
  }
})