h5-colexiu/src/teacher/teacher-cert/index.tsx

import { Button, Toast } from "vant";
import { defineComponent } from "vue";
import styles from './index.module.less';
import CertInfo from "./cert-info";
import ColProtocol from "@/components/col-protocol";
import { teacherState } from "./teacherState";
import Steps from './steps';
import CertOne from './cert-one'
import CertTwo from './cert-two'
import CertThree from "./cert-three";
import { checkIDCard } from "@/helpers/validate";
import request from "@/helpers/request";
import ColResult from "@/components/col-result";

export default defineComponent({
  name: 'teacherCert',
  data() {
    const query = this.$route.query;
    return {
      authStatus: query.authStatus || null as any,
      agreeStatus: false,
    }
  },
  methods: {
    async next() {
      const realName = teacherState.teacherCert.realName
      if(!realName) {
        Toast('请填写真实姓名')
        return
      }

      const idCardNo = teacherState.teacherCert.idCardNo
      if (!checkIDCard(idCardNo || '')) {
        Toast('请填写正确的身份证号码');
        return false;
      }
      if (!this.agreeStatus) {
        Toast('请阅读并同意协议');
        return
      }

      if(!teacherState.teacherCert.birthdate) {
        Toast('请选择出生日期')
        return
      }

      try {
        let res = await request.post('/api-teacher/TeacherAuthEntryRecord/realNameAuth', {
          data: {
            realName,
            idCardNo
          }
        })
        console.log(res)
      } catch {
        //
      } 

      teacherState.active = 2;
    },
    next2() {
      teacherState.active = 3;
    },
    async onSubmit() {
      try {
        await request.post('/api-teacher/TeacherAuthEntryRecord/doApply', {
          data: teacherState.teacherCert
        })
        Toast('提交成功')
      } catch {
        //
      }
    },
    prev() {
      teacherState.active = teacherState.active - 1;
    }
  },
  render() {
    return (
      <div class={styles['teacher-cert']}>
        {!teacherState.authStatus ? <CertInfo authStatus={this.authStatus} /> : <div>
          <Steps style={{ marginBottom: '12px' }} />
          {teacherState.active === 1 ? (
            <>
              <CertOne />
              <div class={styles.btnGroup}>
                <ColProtocol v-model:value={this.agreeStatus} style={{ paddingLeft: 0, paddingRight: 0 }} />
                <Button block round onClick={this.next} type="primary" text="下一步" />
              </div>
            </>
          ) : null }
          {teacherState.active === 2 ? <>
            <CertTwo />
            <div class={[styles.btnGroup, styles.btnMore]}>
              <Button block round type="primary" plain onClick={this.prev}>上一步</Button>
              <Button block round onClick={this.next2} type="primary" text="下一步" />
            </div>
          </> : null }
          {teacherState.active === 3 ? <>
            <CertThree />
            <div class={[styles.btnGroup, styles.btnMore]}>
              <Button block round type="primary" plain onClick={this.prev}>上一步</Button>
              <Button block round onClick={this.onSubmit} type="primary" text="提交审核" />
            </div>
          </> : null }

          {/* 提交完数据之后显示状态页 */}
          {teacherState.active === 4 ? <ColResult tips="开通成功" /> : null }
        </div>}
      </div>
    )
  }
})