MTP20_WEB_GLOBAL/src/packages/gstj/views/account/certification/Index.vue

<template>
    <app-view class="g-form account-certification">
        <template #header>
            <app-navbar title="实名认证" />
        </template>
        <Form ref="formRef" class="g-form__container" @submit="onSubmit">
            <CellGroup inset>
                <Field v-model="formData.username" name="username" label="姓名" placeholder="请输入用户姓名"
                    :rules="formRules.username" />
                <Field name="cardtype" label="证件类型" :rules="formRules.cardtype" is-link>
                    <template #input>
                        <app-select v-model="formData.cardtype" placeholder="请选择证件类型" :options="enums" />
                    </template>
                </Field>
                <Field v-model="formData.cardnum" name="cardnum" label="证件号码" placeholder="请输入证件号码"
                    :rules="formRules.cardnum" />
                <Field name="cardfrontphotourl" label="证件正面照片" :rules="formRules.cardfrontphotourl">
                    <template #input>
                        <app-uploader @success="b_afterRead" />
                    </template>
                </Field>
                <Field name="cardbackphotourl" label="证件反面照片" :rules="formRules.cardbackphotourl">
                    <template #input>
                        <app-uploader @success="f_afterRead" />
                    </template>
                </Field>
            </CellGroup>
        </Form>
        <img src="../../../assets/images/certification.png" />
        <template #footer>
            <div class="g-form__footer inset">
                <Button type="danger" @click="formRef?.submit" round block>提交实名认证</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, computed } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, showFailToast, FieldRule } from 'vant'
import { addAuthReq } from '@/business/user'
import { fullloading, dialog } from '@/utils/vant';
import { getCertificateTypeList } from "@/constants/account";
import AppSelect from '../../../components/base/select/index.vue'
import { useNavigation } from '../../../router/navigation'
import AppUploader from '../../../components/base/uploader/index.vue'

const formRef = shallowRef<FormInstance>()
const { formData, formSubmit } = addAuthReq()
const { router } = useNavigation()

/// 获取对应的证件枚举类型
const enums = computed(() => { return getCertificateTypeList().map(obj => { return { label: obj.label, value: obj.value } }) })

const b_afterRead = (filePath: string) => {
    formData.cardfrontphotourl = filePath
}

const f_afterRead = (filePath: string) => {
    formData.cardbackphotourl = filePath
}

// 表单验证规则
const formRules: { [key in keyof Model.AddAuthReq]?: FieldRule[] } = {
    username: [{
        required: true,
        message: '请输入用户姓名',
    }],
    cardnum: [{
        required: true,
        message: '请输入证件号码',

    }],
    cardbackphotourl: [{
        required: true,
        message: '请上传证件背面照片',
    }],
    cardfrontphotourl: [{
        required: true,
        message: '请上传证件正面照片',
    }],
}

const onSubmit = () => {
    fullloading((hideLoading) => {
        formSubmit().then(() => {
            hideLoading()
            dialog('实名认证提交请求成功').then(() => {
                router.back()
            })
        }).catch((err) => {
            showFailToast(err)
        })
    })
}
</script>