MTP20_WEB_GLOBAL/src/packages/sbyj/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="onCheckCardNum" :loading="loading">
            <CellGroup inset>
                <Field v-model="formData.username" name="username" label="姓名" placeholder="请输入用户姓名"
                    :rules="formRules.username" :readonly="isReadonly" />
                <Field v-model="formData.mobile" name="mobile" readonly label="手机号码" />
                <Field name="idCardType" label="证件类型" :rules="formRules.cardtype" is-link>
                    <template #input>
                        <app-select v-model="formData.cardtype" placeholder="请选择证件类型" :options="getCerTypePersonList()"
                            :readonly="isReadonly" />
                    </template>
                </Field>
                <Field v-model="formData.cardnum" name="cardnum" label="证件号码" placeholder="请输入证件号码"
                    :rules="formRules.cardnum" :readonly="isReadonly" />
                <Field name="cardfrontphotourl" label="证件正面照片" :rules="formRules.cardfrontphotourl">
                    <template #input>
                        <Image fit="contain" :src="getFileUrl(formData.cardfrontphotourl)" width="100" height="100"
                            v-if="isReadonly" />
                        <app-uploader @success="f_afterRead" v-else />
                    </template>
                </Field>
                <Field name="cardbackphotourl" v-if="showCardBackPhoto === '1'" label="证件反面照片" :rules="formRules.cardbackphotourl">
                    <template #input>
                        <Image fit="contain" :src="getFileUrl(formData.cardbackphotourl)" width="100" height="100"
                            v-if="isReadonly" />
                        <app-uploader @success="b_afterRead" v-else />
                    </template>
                </Field>
                <Field name="halfbodyphotourl" v-if="showHalfBodyPhoto === '1'" :label="halfBodyPhotoTitle" :rules="formRules.halfbodyphotourl">
                    <template #input>
                        <Image fit="contain" :src="getFileUrl(formData.halfbodyphotourl)" width="100" height="100"
                            v-if="isReadonly" />
                        <app-uploader @success="h_afterRead" v-else />
                    </template>
                </Field>
            </CellGroup>
        </Form>
        <img src="../../../assets/images/certification.png" />
        <template #footer>
            <div class="g-form__footer inset">
                <Button type="danger" :loading="buttonLoading" @click="formRef?.submit" round block>提交实名认证</Button>
            </div>
        </template>
    </app-view>
</template>

<script lang="ts" setup>
import { shallowRef, onMounted } from 'vue'
import { CellGroup, Button, Field, Form, FormInstance, showFailToast, FieldRule, Image } from 'vant'
import { fullloading, dialog } from '@/utils/vant';
import { getFileUrl, getIdCardAge } from '@/filters';
import { getCerTypePersonList } from "@/constants/account"
import { useRequest } from '@/hooks/request'
import { queryTencentUsereSignRecords, requestCheckCardNum } from '@/services/api/account';
import { addAuthReq } from '@/business/user/account';
import { validateRules } from '@/constants/regex';
import { useUserStore } from '@/stores'
import { useNavigation } from '@mobile/router/navigation'
import { getWskhOpenAccountConfigs } from '@/services/api/account'
import { getUserId, getMemberUserId } from '@/services/methods/user'
import AppSelect from '@mobile/components/base/select/index.vue'
import AppUploader from '@mobile/components/base/uploader/index.vue'

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

const showHalfBodyPhoto = shallowRef('0')
const showCardBackPhoto = shallowRef('0')
const halfBodyPhotoTitle = shallowRef('手持证件照')

// 获取网上开户配置
useRequest(getWskhOpenAccountConfigs, {
    params: {
        configs: '53,54,78'
    },
    onSuccess: (res) => {
        /// 是否显示半身照和 证件背面照
        showCardBackPhoto.value = res.data.filter(e => e.configid === 53)[0].configvalue ?? '0'
        showHalfBodyPhoto.value = res.data.filter(e => e.configid === 54)[0].configvalue ?? '0'
        halfBodyPhotoTitle.value = res.data.filter(e => e.configid === 78)[0].configvalue ?? '手持证件照'
    }
})

const isReadonly = false//computed(() => userESignRecords.value.some((e) => e.recordstatus === 3))

/// 查询记录
const { loading: buttonLoading } = useRequest(queryTencentUsereSignRecords, {
    params: {
        userId: getUserId(),
        memberUserId: getMemberUserId()
    },
    onError: (err) => {
        showFailToast(err)
    }
})

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

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

const h_afterRead = (filePath: string) => {
    formData.halfbodyphotourl = filePath
}

// 表单验证规则
const formRules: { [key in keyof Model.AddAuthReq]?: FieldRule[] } = {
    username: [{
        required: true,
        message: '请输入用户姓名',
    }],
    mobile: [{
        required: true,
        message: '请输入手机号码',
        validator: (val) => {
            if (validateRules.phone.validate(val)) {
                return true
            }
            return validateRules.phone.message
        }
    }],
    cardnum: [{
        required: true,
        message: '请输入证件号码',
        validator: (val) => {
            if (formData.cardtype != 0) {
                return true
            } else {
                if (validateRules.cardno.validate(val)) {
                    if (getIdCardAge(val)) {
                        return '开户失败，您的年龄不符合开户要求'
                    }
                    return true
                }
                return validateRules.cardno.message
            }
        }
    }],
    cardbackphotourl: [{
        required: true,
        message: '请上传证件反面照片',
    }],
    cardfrontphotourl: [{
        required: true,
        message: '请上传证件正面照片',
    }],
    halfbodyphotourl: [{
        required: true,
        message: '请上传'+halfBodyPhotoTitle.value,
    }],
}

const onCheckCardNum = () => {
    fullloading((hideLoading) => {
        requestCheckCardNum({
            data: {
                cardnum: formData.cardnum
            }
        }).then(() => {
            formSubmit().then((res) => {
                if (res.code.toString() !== '0') {
                    showFailToast(res.message)
                } else {
                    hideLoading()
                    dialog('提交请求成功，请耐心等待审核！').then(() => {
                        router.back()
                    })
                }
            }).catch((err) => {
                formData.cardnum = ''
                hideLoading(err, 'fail')
            })
        }).catch((err) => {
            hideLoading(err, 'fail')
        })
    })
}

onMounted(() => {
    formData.mobile = userStore.userInfo?.mobile2 ?? ''
})
</script>