316 lines
8.2 KiB
Vue
316 lines
8.2 KiB
Vue
<template>
|
||
<view>
|
||
<template v-if="isCertify">
|
||
<uni-list>
|
||
<uni-list-item class="item" title="姓名" :rightText="userInfo.realNameAuth.realName"></uni-list-item>
|
||
<uni-list-item class="item" title="身份证号码" :rightText="userInfo.realNameAuth.identity"></uni-list-item>
|
||
</uni-list>
|
||
</template>
|
||
<template v-else>
|
||
<view class="uni-content">
|
||
<template v-if="verifyFail">
|
||
<view class="face-icon">
|
||
<image src="./face-verify-icon.svg" class="face-icon-image" />
|
||
</view>
|
||
<view class="error-title">{{verifyFailTitle}}</view>
|
||
<view class="error-description">{{verifyFailContent}}</view>
|
||
<button type="primary" @click="retry" v-if="verifyFailCode !== 10013">重新开始验证</button>
|
||
<button type="primary" @click="retry" v-else>返回</button>
|
||
<view class="dev-tip" v-if="isDev">请在控制台查看详细错误（此提示仅在开发环境展示）</view>
|
||
</template>
|
||
<template v-else>
|
||
<text class="title">实名认证</text>
|
||
<uni-forms>
|
||
<uni-forms-item name="realName">
|
||
<uni-easyinput placeholder="姓名" class="input-box" v-model="realName" :clearable="false">
|
||
</uni-easyinput>
|
||
</uni-forms-item>
|
||
<uni-forms-item name="idCard">
|
||
<uni-easyinput placeholder="身份证号码" class="input-box" v-model="idCard" :clearable="false">
|
||
</uni-easyinput>
|
||
</uni-forms-item>
|
||
</uni-forms>
|
||
<uni-id-pages-agreements scope="realNameVerify" ref="agreements" style="margin-bottom: 20px;">
|
||
</uni-id-pages-agreements>
|
||
<button type="primary" :disabled="!certifyIdNext" @click="getCertifyId">确定</button>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import checkIdCard from '@/uni_modules/uni-id-pages/common/check-id-card.js';
|
||
import mixin from '@/uni_modules/uni-id-pages/common/login-page.mixin.js';
|
||
|
||
import {
|
||
store,
|
||
mutations
|
||
} from '@/uni_modules/uni-id-pages/common/store.js'
|
||
|
||
const uniIdCo = uniCloud.importObject('uni-id-co')
|
||
const tempFrvInfoKey = 'uni-id-pages-temp-frv'
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
realName: '',
|
||
idCard: '',
|
||
certifyId: '',
|
||
verifyFail: false,
|
||
verifyFailCode: 0,
|
||
verifyFailTitle: '',
|
||
verifyFailContent: ''
|
||
}
|
||
},
|
||
computed: {
|
||
userInfo() {
|
||
return store.userInfo
|
||
},
|
||
certifyIdNext() {
|
||
return Boolean(this.realName) && Boolean(this.idCard) && (this.needAgreements && this.agree)
|
||
},
|
||
isCertify() {
|
||
return this.userInfo.realNameAuth && this.userInfo.realNameAuth.authStatus === 2
|
||
},
|
||
isDev() {
|
||
return process.env.NODE_ENV === 'development'
|
||
}
|
||
},
|
||
onLoad() {
|
||
const tempFrvInfo = uni.getStorageSync(tempFrvInfoKey);
|
||
if (tempFrvInfo) {
|
||
this.realName = tempFrvInfo.realName
|
||
this.idCard = tempFrvInfo.idCard
|
||
}
|
||
},
|
||
methods: {
|
||
async getCertifyId() {
|
||
if (!this.certifyIdNext) return
|
||
|
||
// #ifndef APP
|
||
return uni.showModal({
|
||
content: "暂不支持实名认证",
|
||
showCancel: false
|
||
})
|
||
// #endif
|
||
|
||
if (!checkIdCard(this.idCard)) {
|
||
uni.showToast({
|
||
title: "身份证不合法",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
|
||
if (
|
||
typeof this.realName !== 'string' ||
|
||
this.realName.length < 2 ||
|
||
!/^[\u4e00-\u9fa5]{1,10}(·?[\u4e00-\u9fa5]{1,10}){0,5}$/.test(this.realName)
|
||
) {
|
||
uni.showToast({
|
||
title: "姓名只能是汉字",
|
||
icon: "none"
|
||
})
|
||
return
|
||
}
|
||
|
||
uni.setStorage({
|
||
key: tempFrvInfoKey,
|
||
data: {
|
||
realName: this.realName,
|
||
idCard: this.idCard
|
||
}
|
||
});
|
||
|
||
const metaInfo = uni.getFacialRecognitionMetaInfo()
|
||
|
||
const res = await uniIdCo.getFrvCertifyId({
|
||
realName: this.realName,
|
||
idCard: this.idCard,
|
||
metaInfo
|
||
})
|
||
|
||
this.certifyId = res.certifyId
|
||
|
||
this.startFacialRecognitionVerify()
|
||
},
|
||
startFacialRecognitionVerify() {
|
||
|
||
// #ifdef APP
|
||
uni.startFacialRecognitionVerify({
|
||
certifyId: this.certifyId,
|
||
progressBarColor: "#2979ff",
|
||
success: () => {
|
||
this.verifyFail = false
|
||
this.getFrvAuthResult()
|
||
},
|
||
fail: (e) => {
|
||
let title = "验证失败"
|
||
let content
|
||
|
||
console.log(
|
||
`[frv-debug] certifyId auth error: certifyId -> ${this.certifyId}, error -> ${JSON.stringify(e, null, 4)}`
|
||
)
|
||
|
||
switch (e.errCode) {
|
||
case 10001:
|
||
content = '认证ID为空'
|
||
break
|
||
case 10010:
|
||
title = '刷脸异常'
|
||
content = e.cause.message || '错误代码: 10010'
|
||
break
|
||
case 10011:
|
||
title = '验证中断'
|
||
content = e.cause.message || '错误代码: 10011'
|
||
break
|
||
case 10012:
|
||
content = '网络异常'
|
||
break
|
||
case 10013:
|
||
this.verifyFailCode = e.errCode
|
||
this.verifyFailContent = e.cause.message || '错误代码: 10013'
|
||
this.getFrvAuthResult()
|
||
|
||
console.log(
|
||
`[frv-debug] 刷脸失败, certifyId -> ${this.certifyId}, 如在开发环境请检查用户的姓名、身份证号与刷脸用户是否为同一用户。如遇到认证ID已使用请检查opendb-frv-logs表中certifyId状态`
|
||
)
|
||
return
|
||
case 10020:
|
||
content = '设备设置时间异常'
|
||
break
|
||
default:
|
||
title = ''
|
||
content = `验证未知错误 (${e.errCode})`
|
||
break
|
||
}
|
||
|
||
this.verifyFail = true
|
||
this.verifyFailCode = e.errCode
|
||
this.verifyFailTitle = title
|
||
this.verifyFailContent = content
|
||
}
|
||
})
|
||
// #endif
|
||
},
|
||
async getFrvAuthResult() {
|
||
const uniIdCo = uniCloud.importObject('uni-id-co', {
|
||
customUI: true
|
||
})
|
||
try {
|
||
uni.showLoading({
|
||
title: "验证中...",
|
||
mask: false
|
||
})
|
||
const res = await uniIdCo.getFrvAuthResult({
|
||
certifyId: this.certifyId
|
||
})
|
||
|
||
const {
|
||
errCode,
|
||
...rest
|
||
} = res
|
||
|
||
if (this.verifyFailContent) {
|
||
console.log(`[frv-debug] 客户端刷脸失败，由实人认证服务查询具体原因，原因：${this.verifyFailContent}`)
|
||
}
|
||
|
||
uni.showModal({
|
||
content: "实名认证成功",
|
||
showCancel: false,
|
||
success: () => {
|
||
mutations.setUserInfo({
|
||
realNameAuth: rest
|
||
})
|
||
this.verifyFail = false
|
||
}
|
||
})
|
||
|
||
uni.removeStorage({
|
||
key: tempFrvInfoKey
|
||
})
|
||
} catch (e) {
|
||
this.verifyFail = true
|
||
this.verifyFailTitle = e.errMsg
|
||
console.error(JSON.stringify(e));
|
||
} finally {
|
||
uni.hideLoading()
|
||
}
|
||
},
|
||
retry() {
|
||
if (this.verifyFailCode !== 10013) {
|
||
this.getCertifyId()
|
||
} else {
|
||
this.verifyFail = false
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
@import "@/uni_modules/uni-id-pages/common/login-page.scss";
|
||
|
||
.checkbox-box,
|
||
.uni-label-pointer {
|
||
align-items: center;
|
||
display: flex;
|
||
flex-direction: row;
|
||
}
|
||
|
||
.item {
|
||
flex-direction: row;
|
||
}
|
||
|
||
.text {
|
||
line-height: 26px;
|
||
}
|
||
|
||
.checkbox-box ::v-deep .uni-checkbox-input {
|
||
border-radius: 100%;
|
||
}
|
||
|
||
.checkbox-box ::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
|
||
border-color: $uni-color-primary;
|
||
color: #FFFFFF !important;
|
||
background-color: $uni-color-primary;
|
||
}
|
||
|
||
.agreements {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.face-icon {
|
||
width: 100px;
|
||
height: 100px;
|
||
margin: 50px auto 30px;
|
||
}
|
||
|
||
.face-icon-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.error-title {
|
||
font-size: 18px;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.error-description {
|
||
font-size: 13px;
|
||
color: #999999;
|
||
margin: 10px 0 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.dev-tip {
|
||
margin-top: 20px;
|
||
font-size: 13px;
|
||
color: #999;
|
||
text-align: center;
|
||
}
|
||
</style>
|