人脸验证流程完善
This commit is contained in:
parent
96fe22b0f1
commit
9a75a03342
|
|
@ -1,7 +1,11 @@
|
||||||
import { request } from '@/api'
|
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 }) {
|
export async function checkAccountIdIsSonForUser(params: { account_id: string }) {
|
||||||
return request.get<boolean>('/user/checkAccountIdIsSonForUser', params)
|
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 * as faceapi from 'face-api.js'
|
||||||
import { checkLiveness, uploadLivePhoto, verifyCard } from '@/api/modules/livenessVerification.ts'
|
import { checkLiveness, uploadLivePhoto, verifyCard } from '@/api/modules/livenessVerification.ts'
|
||||||
import { useRouter } from 'vue-router'
|
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()
|
const router = useRouter()
|
||||||
|
|
||||||
|
|
@ -86,8 +87,11 @@ function startDetection() {
|
||||||
router.back()
|
router.back()
|
||||||
return ElMessage.error('检测失败')
|
return ElMessage.error('检测失败')
|
||||||
}
|
}
|
||||||
clearStorage()
|
const user = await getUserBaseInfo()
|
||||||
router.push('/user/login')
|
data.userInfo = user.user
|
||||||
|
setStorage('userInfo', user.user)
|
||||||
|
// clearStorage()
|
||||||
|
router.push('/dashboard')
|
||||||
ElMessage.warning('请重新登录')
|
ElMessage.warning('请重新登录')
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
ElMessage.error(e.message)
|
ElMessage.error(e.message)
|
||||||
|
|
|
||||||
|
|
@ -1,207 +1,147 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="archives">
|
<div class="archives">
|
||||||
<div class="bar">
|
<div class="bar">
|
||||||
<h4>档案管理</h4>
|
<h4>档案管理</h4>
|
||||||
<span :class="['status', isActive === true ? 'active' : '']">未认证</span>
|
<span :class="['status', isActive === true ? 'active' : '']">{{
|
||||||
<span class="info">资料审核包含身份信息/联络信息/实名认证/合规文件，需要管理员审核</span>
|
isActive ? '已认证' : '未认证'
|
||||||
</div>
|
}}</span>
|
||||||
<div class="content">
|
<span class="info">资料审核包含身份信息/联络信息/实名认证/合规文件，需要管理员审核</span>
|
||||||
<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>
|
</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>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
name: 'Kyc'
|
name: 'Kyc',
|
||||||
})
|
})
|
||||||
import type { UploadProps } from 'element-plus'
|
import { WarnTriangleFilled } from '@element-plus/icons-vue'
|
||||||
import { WarnTriangleFilled, Plus } from '@element-plus/icons-vue'
|
import { getCardInfo } from '@/api/modules/livenessVerification.ts'
|
||||||
|
import { useUserStore } from '@/stores/modules/user.ts'
|
||||||
//组件
|
|
||||||
import ArchivesForm from '@/components/common/Form.vue'
|
|
||||||
|
|
||||||
// 表单配置
|
|
||||||
import { identityFormItems, contactFormItems } from './options'
|
|
||||||
import { ref } from 'vue'
|
import { ref } from 'vue'
|
||||||
|
const userStore = useUserStore()
|
||||||
// 判断是否认证
|
// 判断是否认证
|
||||||
const isActive = ref(false)
|
const isActive = ref(true)
|
||||||
// 判断信息类型
|
// 判断信息类型
|
||||||
const tabType = ref('identity')
|
const tabType = ref('identity')
|
||||||
|
|
||||||
/**
|
const cardInfo = ref({
|
||||||
* @description: 档案管理表单
|
card_1: '',
|
||||||
*/
|
card_2: '',
|
||||||
const archivesForm = ref({
|
|
||||||
nationality: 'CN',
|
|
||||||
idType: 'ID',
|
|
||||||
idNumber: '',
|
|
||||||
phone: '',
|
|
||||||
email: '',
|
|
||||||
address: '',
|
|
||||||
})
|
})
|
||||||
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 data = await getCardInfo()
|
||||||
|
console.log(data)
|
||||||
const handleAvatarSuccess: UploadProps['onSuccess'] = (
|
cardInfo.value = data[0]
|
||||||
response,
|
|
||||||
uploadFile
|
|
||||||
) => {
|
|
||||||
imageUrl.value = URL.createObjectURL(uploadFile.raw!)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
|
onMounted(() => {
|
||||||
if (rawFile.type !== 'image/jpeg') {
|
init()
|
||||||
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
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.archives {
|
.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;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
margin-bottom: 20px;
|
gap: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
|
||||||
.status {
|
.el-icon {
|
||||||
background: #f56c6c;
|
font-size: 20px;
|
||||||
border-radius: 5px;
|
color: #f56c6c;
|
||||||
padding: 4px;
|
|
||||||
margin: 0 10px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.active {
|
.upload {
|
||||||
background: var(--el-color-primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
background: var(--el-color-primary-light-5);
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 20px;
|
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>
|
</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