|
|
@@ -1,8 +1,96 @@
|
|
|
<template>
|
|
|
- <app-view>
|
|
|
-
|
|
|
+ <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="@mobile/assets/images/certification.png" />
|
|
|
+ <template #footer>
|
|
|
+ <div class="g-form__footer">
|
|
|
+ <Button type="primary" @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 '@mobile/components/base/select/index.vue'
|
|
|
+import { useNavigation } from '@/hooks/navigation'
|
|
|
+import AppUploader from '@mobile/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>
|