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

import { CellGroup, DatetimePicker, Field, Popup, Toast } from 'vant'
import { defineComponent } from 'vue'
import dayjs from 'dayjs'
import { checkIDCard } from '@/helpers/validate'
import ColField from '@/components/col-field'
import { teacherState } from './teacherState'
import styles from './cert-one.module.less'
import ColFieldGroup from '@/components/col-field-group'
import { state } from '@/state'
import { formatterDate } from '@/helpers/utils'

export default defineComponent({
  name: 'certOne',
  data() {
    return {
      maxDate: new Date(),
      popupShow: false,
      popupDate: new Date()
    }
  },
  computed: {
    userAuth() {
      // 判断是否实名过
      const users = state.user.data || {}
      return !!(users.idCardNo && users.realName)
    }
  },
  mounted() {
    if (this.userAuth) {
      const users = state.user.data || {}
      teacherState.teacherCert.realName = users.realName
      teacherState.teacherCert.idCardNo = users.idCardNo
      teacherState.teacherCert.gender = users.gender
      teacherState.teacherCert.birthdate = dayjs(users.birthdate).format(
        'YYYY-MM-DD'
      )
    }
  },
  methods: {
    onIdCardValidate() {
      const idCardNo = teacherState.teacherCert.idCardNo
      // 判断是否有身份证号
      if (!idCardNo) {
        return
      }
      if (!checkIDCard(idCardNo || '')) {
        Toast('请填写正确的身份证号码')
        return false
      }

      console.log(this.getSex(idCardNo))
      teacherState.teacherCert.birthdate = this.getBirth(idCardNo)
      teacherState.teacherCert.gender = this.getSex(idCardNo)
    },
    getBirth(idCard: string | null) {
      let birthday = ''
      if (idCard != null && idCard != '') {
        if (idCard.length == 15) {
          birthday = '19' + idCard.slice(6, 12)
        } else if (idCard.length == 18) {
          birthday = idCard.slice(6, 14)
        }
        birthday = birthday.replace(/(.{4})(.{2})/, '$1-$2-')
        //通过正则表达式来指定输出格式为:1990-01-01
      }
      return birthday
    },
    getSex(idCard: string | null): number {
      let sex = 1
      if (idCard && parseInt(idCard.slice(-2, -1)) % 2 == 1) {
        sex = 1
      } else {
        sex = 0
      }
      return sex
    },
    onConfirm(_date: any) {
      teacherState.teacherCert.birthdate = dayjs(this.popupDate).format(
        'YYYY-MM-DD'
      )
      this.popupShow = false
    },
    sexChange(num: number) {
      if (!this.userAuth) {
        teacherState.teacherCert.gender = num
      }
    }
  },
  render() {
    return (
      <ColFieldGroup class={styles.certOne}>
        <CellGroup border={false}>
          <ColField title="真实姓名" required>
            <Field
              v-model={teacherState.teacherCert.realName}
              name="真实姓名"
              disabled={this.userAuth}
              maxlength={10}
              placeholder="请输入您的真实姓名"
            />
          </ColField>
          <ColField title="身份证号" required>
            <Field
              v-model={teacherState.teacherCert.idCardNo}
              name="身份证号"
              disabled={this.userAuth}
              maxlength={18}
              onBlur={this.onIdCardValidate}
              placeholder="请输入您的身份证号码"
            />
          </ColField>
          <ColField title="性别" required border={false}>
            <div class={styles.radioGroup}>
              <div
                onClick={() => this.sexChange(1)}
                class={[
                  styles.radio,
                  teacherState.teacherCert.gender === 1 ? styles.active : null
                ]}
              >
                男
              </div>
              <div
                onClick={() => this.sexChange(0)}
                class={[
                  styles.radio,
                  teacherState.teacherCert.gender === 0 ? styles.active : null
                ]}
              >
                女
              </div>
            </div>
          </ColField>
          <ColField title="出生日期" required>
            <Field
              v-model={teacherState.teacherCert.birthdate}
              name="出生日期"
              disabled={this.userAuth}
              onClick-input={() => (this.popupShow = true)}
              readonly
              isLink={!this.userAuth}
              placeholder="请选择您的出生日期"
            />
          </ColField>
        </CellGroup>

        <Popup show={this.popupShow} position="bottom" round>
          <DatetimePicker
            v-model={this.popupDate}
            type="date"
            close-on-popstate={true}
            minDate={new Date('1950-01-01')}
            maxDate={this.maxDate}
            onCancel={() => (this.popupShow = false)}
            onConfirm={this.onConfirm}
            formatter={formatterDate}
          ></DatetimePicker>
        </Popup>
      </ColFieldGroup>
    )
  }
})