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

import { Button, Sticky, 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'
import { state } from '@/state'
import { stat } from 'fs'

export default defineComponent({
  name: 'teacherCert',
  data() {
    const query = this.$route.query
    return {
      agreeStatus: false
    }
  },
  async mounted() {
    try {
      // 老师入驻状态 0、未申请 UNPAALY、未申请 DOING、审核中 PASS、通过 UNPASS、不通过
      const entryStatus = state.user.data?.entryStatus || 0
      teacherState.authStatus =
        entryStatus === 'DOING' || entryStatus === 'PASS' ? true : false
      // 如果已经认证，则不用获取声部信息
      if (teacherState.authStatus) {
        teacherState.active = teacherState.authStatus ? 4 : 1
        return
      }

      if (teacherState.subjectList.length <= 0) {
        const res = await request.get('/api-teacher/subject/subjectSelect')
        teacherState.subjectList = res.data || []
      }
    } catch {
      //
    }
  },
  computed: {
    authStatus(): Boolean {
      return !!teacherState.authStatus
    },
    userAuth() {
      // 判断是否实名过
      const users = state.user.data || {}
      return !!(users.idCardNo && users.realName)
    }
  },
  methods: {
    async next() {
      const realName = teacherState.teacherCert.realName
      if (!realName) {
        Toast('请填写真实姓名')
        return
      }
      const idCardNo = teacherState.teacherCert.idCardNo
      if (!this.userAuth) {
        if (!checkIDCard(idCardNo || '')) {
          Toast('请填写正确的身份证号码')
          return false
        }
      }

      if (!this.agreeStatus) {
        Toast('请阅读并同意协议')
        return
      }

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

      try {
        if (!this.userAuth) {
          await request.post('/api-auth/user/realNameAuth', {
            data: {
              realName,
              idCardNo,
              save: true
            }
          })
        }
        teacherState.active = 2
      } catch {
        //
      }
    },
    next2() {
      if (!teacherState.teacherCert.subjectId) {
        Toast('请选择教授科目')
        return
      }
      teacherState.active = 3
    },
    async onSubmit() {
      try {
        await request.post('/api-teacher/teacherAuthEntryRecord/doApply', {
          data: teacherState.teacherCert
        })
        Toast('提交成功')
        teacherState.active = 4
      } catch {
        //
      }
    },
    prev() {
      teacherState.active = teacherState.active - 1
    }
  },
  render() {
    return (
      <div class={styles['teacher-cert']}>
        {!teacherState.authStatus ? (
          <CertInfo />
        ) : (
          <div>
            {teacherState.active != 4 ? (
              <Steps style={{ marginBottom: '12px' }} />
            ) : null}
            {teacherState.active === 1 ? (
              <>
                <CertOne />
                <Sticky position="bottom" offsetBottom={0}>
                  <div class={'btnGroup'}>
                    <ColProtocol
                      v-model={this.agreeStatus}
                      style={{ paddingLeft: 0, paddingRight: 0 }}
                    />
                    <Button
                      block
                      round
                      onClick={this.next}
                      type="primary"
                      text="下一步"
                    />
                  </div>
                </Sticky>
              </>
            ) : null}
            {teacherState.active === 2 ? (
              <>
                <CertTwo />
                <Sticky position="bottom" offsetBottom={0}>
                  <div class={['btnGroup', 'btnMore']}>
                    <Button
                      block
                      round
                      type="primary"
                      plain
                      onClick={this.prev}
                    >
                      上一步
                    </Button>
                    <Button
                      block
                      round
                      onClick={this.next2}
                      type="primary"
                      text="下一步"
                    />
                  </div>
                </Sticky>
              </>
            ) : null}
            {teacherState.active === 3 ? (
              <>
                <CertThree />
                <Sticky position="bottom" offsetBottom={0}>
                  <div class={['btnGroup', 'btnMore']}>
                    <Button
                      block
                      round
                      type="primary"
                      plain
                      onClick={this.prev}
                    >
                      上一步
                    </Button>
                    <Button
                      block
                      round
                      onClick={this.onSubmit}
                      type="primary"
                      text="提交审核"
                    />
                  </div>
                </Sticky>
              </>
            ) : null}

            {/* 提交完数据之后显示状态页 */}
            {teacherState.active === 4 ? (
              <ColResult
                type="teacherCert"
                style={{ paddingTop: '60px' }}
                classImgSize="CERT"
                tips="感谢您的教学热情，小酷将在24小时内完成审核，请留意APP消息及短信获取审核结果。"
              />
            ) : null}
          </div>
        )}
      </div>
    )
  }
})