h5-colexiu/src/views/order-detail/userAuth/index.tsx

import ColField from '@/components/col-field'
import ColFieldGroup from '@/components/col-field-group'
import ColHeader from '@/components/col-header'
import request from '@/helpers/request'
import { verifyIdCard } from '@/helpers/toolsValidate'
import { postMessage } from '@/helpers/native-message'
import { state } from '@/state'
import { Button, CellGroup, Checkbox, Field, Form, Icon, Toast } from 'vant'
import { defineComponent } from 'vue'
import activeButtonIcon from '@common/images/icon_checkbox.png'
import inactiveButtonIcon from '@common/images/icon_checkbox_default.png'
import activeButtonIconTenant from '@common/images/icon_checkbox-tenant.png'
import styles from './index.module.less'

export default defineComponent({
  name: 'UserAuth',
  props: {
    onSuccess: {
      // 实名成功
      type: Function,
      default: () => {}
    },
    exists: {
      type: Boolean,
      default: false
    },
    hideHeader: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      form: {
        realName: '',
        idCardNo: ''
      },
      checked: false
    }
  },
  mounted() {
    // exists
    this.checked = this.checked || this.exists
    // 初始化数据
    const users = state.user.data
    this.form.realName = users?.realName
    // this.form.idCardNo = users?.idCardNo
  },
  methods: {
    async onSubmit() {
      try {
        if (!this.checked) {
          Toast('请先阅读并同意《用户注册协议》')
          return
        }
        const url =
          state.platformType === 'STUDENT'
            ? '/api-student/student/realNameAuth'
            : '/api-teacher/teacher/realNameAuth'
        await request.post(url, {
          data: {
            ...this.form,
            contract: true,
            save: true
          }
        })
        Toast('实名成功')
        state.user.data.realName = this.form.realName
        state.user.data.idCardNo = this.form.idCardNo
        setTimeout(() => {
          this.onSuccess()
        }, 500)
      } catch {}
    },
    getContractDetail() {
      // 查看协议
      const client = state.platformType === 'STUDENT' ? 'student' : 'teacher'
      postMessage({
        api: 'openWebView',
        content: {
          url: `${location.origin}/${client}/#/previewProtocol`,
          orientation: 1,
          isHideTitle: false
        }
      })
    }
  },
  render() {
    return (
      <Form class={styles.userAuth} onSubmit={this.onSubmit}>
        {!this.hideHeader && <ColHeader title="实名认证" />}

        <ColFieldGroup style={{ marginTop: '15px' }}>
          <ColField title="姓名" required>
            <Field
              name="lessonName"
              maxlength={20}
              v-model={this.form.realName}
              placeholder="请输入真实姓名"
              rules={[{ required: true, message: '请输入真实姓名' }]}
            />
          </ColField>
          <ColField title="证件号码" required>
            <Field
              name="lessonSubjectName"
              v-model={this.form.idCardNo}
              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="请输入身份证号"
            />
          </ColField>
        </ColFieldGroup>
        <div class={styles.colProtocol}>
          {!this.exists && (
            <Checkbox
              v-model={this.checked}
              v-slots={{
                icon: (props: any) => (
                  <Icon
                    class={styles.boxStyle}
                    name={
                      props.checked
                        ? state.projectType === 'tenant'
                          ? activeButtonIconTenant
                          : activeButtonIcon
                        : inactiveButtonIcon
                    }
                    size="15"
                  />
                )
              }}
            >
              我已阅读并同意
            </Checkbox>
          )}
          {this.exists && <>查看</>}
          <span onClick={this.getContractDetail} class={styles.protocolText}>
            《用户注册协议》
          </span>
        </div>
        <div class={['btnGroup']}>
          <Button block round type="primary" native-type="submit">
            确定
          </Button>
        </div>
      </Form>
    )
  }
})