classroom-app/src/views/student-register/component/user-auth.tsx

import request from '@/helpers/request';
import { state } from '@/state';
import { Button, CellGroup, Field, Form } from 'vant';
import { defineComponent } from 'vue';
import styles from './user-auth.module.less';
import OHeader from '@/components/m-header';

export default defineComponent({
  name: 'UserAuth',
  props: {
    onSuccess: {
      // 实名成功
      type: Function,
      default: () => {}
    },
    hideHeader: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        realName: '',
        idCardNo: ''
      }
    };
  },
  mounted() {
    // 初始化数据
    const users = state.user.data;
    console.log(users, 'users');
    this.form.realName = users?.account?.realName;
  },
  methods: {
    async onSubmit() {
      try {
        const url = '/edu-app/sysAccount/realNameAuth';
        await request.post(url, {
          data: {
            ...this.form,
            contract: true,
            save: true
          }
        });
        state.user.data.account.realName = this.form.realName;
        state.user.data.account.idCardNo = this.form.idCardNo;
        this.onSuccess();
      } catch {
        //
      }
    }
  },
  render() {
    return (
      <Form class={styles.userAuth} onSubmit={this.onSubmit}>
        {!this.hideHeader && <OHeader title="实名认证" />}

        <CellGroup inset class={styles.cellGroup}>
          <Field
            required
            label="真实姓名"
            v-model={this.form.realName}
            rules={[{ required: true, message: '请填写真实姓名' }]}
            name="realName"
            placeholder="请填写真实姓名"
            autocomplete="off"
            maxlength="50"></Field>

          <Field
            required
            label="身份证号"
            v-model={this.form.idCardNo}
            maxlength={18}
            autocomplete="off"
            rules={[
              { required: true, message: '请输入身份证号' },
              {
                pattern:
                  /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
                message: '请输入正确的身份证号'
              }
            ]}
            placeholder="请输入身份证号"></Field>
        </CellGroup>

        <div class={['btnGroup']}>
          <Button
            block
            round
            type="primary"
            native-type="submit"
            class={styles.otherBtn}>
            确定
          </Button>
        </div>
      </Form>
    );
  }
});