人脸验证流程完善
This commit is contained in:
parent
96fe22b0f1
commit
9a75a03342
|
|
@ -1,7 +1,11 @@
|
|||
import { request } from '@/api'
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* 获取照片
|
||||
*/
|
||||
export async function getCardInfo(): Promise<any> {
|
||||
return request.get<any>('/aws/getInfo')
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传实时照片
|
||||
|
|
|
|||
|
|
@ -93,3 +93,9 @@ export async function editUserApi(params: {
|
|||
export async function checkAccountIdIsSonForUser(params: { account_id: string }) {
|
||||
return request.get<boolean>('/user/checkAccountIdIsSonForUser', params)
|
||||
}
|
||||
/**
|
||||
* 获取用户信息
|
||||
*/
|
||||
export async function getUserBaseInfo(params: { account_id: string }) {
|
||||
return request.get<boolean>('/user/getUserBaseInfo', params)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ import { ref, reactive, onMounted } from 'vue'
|
|||
import * as faceapi from 'face-api.js'
|
||||
import { checkLiveness, uploadLivePhoto, verifyCard } from '@/api/modules/livenessVerification.ts'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { clearStorage } from '@/utils/storage/index.ts'
|
||||
import { setStorage } from '@/utils/storage/index.ts'
|
||||
import { getUserBaseInfo } from '@/api/modules/user.ts'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
|
|
@ -86,8 +87,11 @@ function startDetection() {
|
|||
router.back()
|
||||
return ElMessage.error('检测失败')
|
||||
}
|
||||
clearStorage()
|
||||
router.push('/user/login')
|
||||
const user = await getUserBaseInfo()
|
||||
data.userInfo = user.user
|
||||
setStorage('userInfo', user.user)
|
||||
// clearStorage()
|
||||
router.push('/dashboard')
|
||||
ElMessage.warning('请重新登录')
|
||||
} catch (e) {
|
||||
ElMessage.error(e.message)
|
||||
|
|
|
|||
|
|
@ -1,207 +1,147 @@
|
|||
<template>
|
||||
<div class="archives">
|
||||
<div class="bar">
|
||||
<h4>档案管理</h4>
|
||||
<span :class="['status', isActive === true ? 'active' : '']">未认证</span>
|
||||
<span class="info">资料审核包含身份信息/联络信息/实名认证/合规文件，需要管理员审核</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="tab">
|
||||
<div class="tab-item">
|
||||
<el-button :type="tabType === 'identity' ? 'primary' : 'default'" @click="tabType = 'identity'">身份信息</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
<p class="warn">
|
||||
<el-icon>
|
||||
<WarnTriangleFilled />
|
||||
</el-icon>
|
||||
请填写正确的个人身份信息，以确保所有功能正常使用
|
||||
</p>
|
||||
<ArchivesForm ref="archivesFormRef" :form-data="archivesForm" :form-rules="archivesFormRules"
|
||||
:form-items="formOptions" :options-map="archivesFormOptionsMap" :row-gutter="rowGutter"
|
||||
:col-span="colSpan">
|
||||
<template #upload>
|
||||
<div class="upload">
|
||||
<div>
|
||||
<p class="warn">请上传证件正面</p>
|
||||
<el-upload class="avatar-uploader" action="" :show-file-list="true"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div>
|
||||
<p class="warn">请上传证件反面</p>
|
||||
<el-upload class="avatar-uploader" action="" :show-file-list="true"
|
||||
:on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
|
||||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||||
<el-icon v-else class="avatar-uploader-icon">
|
||||
<Plus />
|
||||
</el-icon>
|
||||
</el-upload>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</ArchivesForm>
|
||||
</article>
|
||||
</div>
|
||||
<div class="archives">
|
||||
<div class="bar">
|
||||
<h4>档案管理</h4>
|
||||
<span :class="['status', isActive === true ? 'active' : '']">{{
|
||||
isActive ? '已认证' : '未认证'
|
||||
}}</span>
|
||||
<span class="info">资料审核包含身份信息/联络信息/实名认证/合规文件，需要管理员审核</span>
|
||||
</div>
|
||||
<div class="content">
|
||||
<div class="tab">
|
||||
<div class="tab-item">
|
||||
<el-button
|
||||
:type="tabType === 'identity' ? 'primary' : 'default'"
|
||||
@click="tabType = 'identity'"
|
||||
>身份信息</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<article>
|
||||
<p class="warn">
|
||||
<el-icon>
|
||||
<WarnTriangleFilled />
|
||||
</el-icon>
|
||||
请填写正确的个人身份信息，以确保所有功能正常使用
|
||||
</p>
|
||||
|
||||
<div class="upload">
|
||||
<div>
|
||||
<p class="warn">证件正面照片</p>
|
||||
<img :src="cardInfo.card_1" :key="cardInfo.card_1" alt="证件正面照片" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="warn">证件反面照片</p>
|
||||
<img :src="cardInfo.card_2" :key="cardInfo.card_2" alt="证件反面照片" />
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
defineOptions({
|
||||
name: 'Kyc'
|
||||
name: 'Kyc',
|
||||
})
|
||||
import type { UploadProps } from 'element-plus'
|
||||
import { WarnTriangleFilled, Plus } from '@element-plus/icons-vue'
|
||||
|
||||
//组件
|
||||
import ArchivesForm from '@/components/common/Form.vue'
|
||||
|
||||
// 表单配置
|
||||
import { identityFormItems, contactFormItems } from './options'
|
||||
import { WarnTriangleFilled } from '@element-plus/icons-vue'
|
||||
import { getCardInfo } from '@/api/modules/livenessVerification.ts'
|
||||
import { useUserStore } from '@/stores/modules/user.ts'
|
||||
import { ref } from 'vue'
|
||||
const userStore = useUserStore()
|
||||
// 判断是否认证
|
||||
const isActive = ref(false)
|
||||
const isActive = ref(true)
|
||||
// 判断信息类型
|
||||
const tabType = ref('identity')
|
||||
|
||||
/**
|
||||
* @description: 档案管理表单
|
||||
*/
|
||||
const archivesForm = ref({
|
||||
nationality: 'CN',
|
||||
idType: 'ID',
|
||||
idNumber: '',
|
||||
phone: '',
|
||||
email: '',
|
||||
address: '',
|
||||
const cardInfo = ref({
|
||||
card_1: '',
|
||||
card_2: '',
|
||||
})
|
||||
const archivesFormRules = ref()
|
||||
const archivesFormOptionsMap = ref({
|
||||
nationality: [
|
||||
{ label: '中国', value: 'CN' },
|
||||
{ label: '美国', value: 'US' },
|
||||
{ label: '英国', value: 'GB' },
|
||||
{ label: '法国', value: 'FR' },
|
||||
],
|
||||
idType: [
|
||||
{ label: '身份证', value: 'ID' },
|
||||
{ label: '护照', value: 'PASSPORT' },
|
||||
{ label: '其他', value: 'OTHER' },
|
||||
]
|
||||
})
|
||||
const formOptions = computed(() => tabType.value === 'identity' ? identityFormItems : contactFormItems)
|
||||
const rowGutter = ref(20)
|
||||
const colSpan = ref(12)
|
||||
|
||||
const init = async () => {
|
||||
isActive.value = userStore?.userInfo?.real_check !== 1
|
||||
|
||||
const imageUrl = ref('')
|
||||
|
||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
||||
response,
|
||||
uploadFile
|
||||
) => {
|
||||
imageUrl.value = URL.createObjectURL(uploadFile.raw!)
|
||||
const data = await getCardInfo()
|
||||
console.log(data)
|
||||
cardInfo.value = data[0]
|
||||
}
|
||||
|
||||
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
||||
if (rawFile.type !== 'image/jpeg') {
|
||||
ElMessage.error('Avatar picture must be JPG format!')
|
||||
return false
|
||||
} else if (rawFile.size / 1024 / 1024 > 2) {
|
||||
ElMessage.error('Avatar picture size can not exceed 2MB!')
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.archives {
|
||||
height: 100%;
|
||||
height: 100%;
|
||||
|
||||
.bar {
|
||||
.bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
|
||||
.status {
|
||||
background: #f56c6c;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.info {
|
||||
background: var(--el-color-primary-light-5);
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: calc(100% - 55px);
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
article {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
|
||||
.warn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.status {
|
||||
background: #f56c6c;
|
||||
border-radius: 5px;
|
||||
padding: 4px;
|
||||
margin: 0 10px;
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.active {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.info {
|
||||
background: var(--el-color-primary-light-5);
|
||||
padding: 4px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
.upload {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
height: calc(100% - 55px);
|
||||
|
||||
.tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
article {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 5px;
|
||||
padding: 20px;
|
||||
|
||||
.warn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
color: #f56c6c;
|
||||
}
|
||||
}
|
||||
|
||||
.el-form {
|
||||
.upload {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
|
||||
.avatar-uploader {
|
||||
width: 178px;
|
||||
height: 178px;
|
||||
border: 1px dashed var(--el-border-color);
|
||||
border-radius: 6px;
|
||||
|
||||
:deep(.el-upload) {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.el-icon {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #e4e7ed;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,15 +0,0 @@
|
|||
export const identityFormItems = [
|
||||
// 联系电话
|
||||
{ prop: 'phone', label: '联系电话', type: 'input' as const, width: '200px' },
|
||||
// 国籍
|
||||
{ prop: 'nationality', label: '国籍', type: 'select' as const, width: '200px' },
|
||||
// 证件类型
|
||||
// { prop: 'idType', label: '证件类型', type: 'select' as const, width: '200px' },
|
||||
// 上传证件
|
||||
{ prop: 'idCard', slotName: 'upload', label: '上传证件', type: 'upload' as const },
|
||||
]
|
||||
|
||||
export const contactFormItems = [
|
||||
|
||||
]
|
||||
|
||||
Loading…
Reference in New Issue