<template>
|
<div class="p-7 py-4 face">
|
<div>
|
<el-row class="px-7" justify="space-between">
|
<el-text class="text-lg">姓名：<span class="font-bold">{{ userInfo.name }}</span></el-text>
|
<el-text class="text-lg">身份证尾号：<span class="font-bold">{{ userInfo.idCard?.slice(-4) }}</span></el-text>
|
</el-row>
|
<el-row justify="center">
|
<el-image :src="$getImageUrl(`/h5/face_default.png`)" style="width: 300px;"></el-image>
|
</el-row>
|
<!-- <video id="video" width="400" height="300" autoplay></video> -->
|
<el-row justify="center">
|
<el-text class="text-xl">请拍摄照片完成人脸认证</el-text>
|
</el-row>
|
<el-row class="my-7">
|
<el-text class="text-info text-center">
|
提示：人脸验证将会进行系统审核，为确保您能快速通过验证，请勿衣着暴露，配合系统指示完成验证。
|
</el-text>
|
</el-row>
|
<el-row class="pt-7">
|
<el-text class="text-xl">拍摄须知</el-text>
|
</el-row>
|
<el-row justify="space-between" class="mt-3">
|
<div v-for="(tip,index) in tipItems" :key="`tip${index}`">
|
<el-image :src="$getImageUrl(`/h5/face_tip_${index+1}.png`)" style="width: 70px;"></el-image>
|
</div>
|
</el-row>
|
</div>
|
<el-row justify="center" class="mb-7">
|
<el-button @click="startCapture" type="primary" style="width: 100%;" size="large">开始拍摄</el-button>
|
</el-row>
|
|
<camera
|
v-if="openCameraFlag"
|
@close="openCameraFlag=false"
|
@handlerSuccess="shootSuccess"
|
></camera>
|
|
<auditDialog
|
v-model="auditDialogFlag"
|
:base64="base64"
|
@handlerSuccess="auditSuccess"
|
>
|
</auditDialog>
|
</div>
|
</template>
|
|
<script>
|
import camera from '@/views/h5/faceAuth/components/camera.vue';
|
import {isWeixin} from '@/utils/UA.js'
|
import auditDialog from '@/views/h5/faceAuth/components/auditDialog.vue';
|
import { useSessionStore } from '@/stores/session.js'
|
import { storeToRefs } from 'pinia';
|
export default {
|
components: {
|
camera,
|
auditDialog
|
},
|
setup() {
|
const { userInfo } = storeToRefs(useSessionStore())
|
return { userInfo }
|
},
|
data() {
|
return {
|
tipItems: [
|
{ label: '标准拍摄', isCheck: true },
|
{ label: '标准拍摄', isCheck: true },
|
{ label: '标准拍摄', isCheck: true },
|
{ label: '标准拍摄', isCheck: true },
|
],
|
openCameraFlag: false,
|
base64: '',
|
auditDialogFlag: false
|
}
|
},
|
computed: {
|
getSigninButtonStyle() {
|
if (this.positionStatus == 'success') {
|
return {
|
'background': '#66d06c',
|
'border-color': '#e7f7eb'
|
}
|
} else {
|
return {
|
'background': '#e1e1e1',
|
'border-color': '#f8f8f8'
|
}
|
}
|
}
|
},
|
async mounted() {
|
this.currentTimeText = this.$dayjs().format('HH:mm')
|
},
|
methods: {
|
getUserPositionStatus(evt) {
|
this.userPositionStatus = evt
|
},
|
startCapture() {
|
if (isWeixin) {
|
console.log('')
|
} else {
|
this.openCameraFlag = true
|
}
|
},
|
shootSuccess(evt) {
|
this.base64 = evt
|
if (this.base64) {
|
this.auditDialogFlag = true
|
}
|
},
|
auditSuccess() {
|
localStorage.setItem('isFace', true)
|
if (!this.getIsSignup()) {
|
this.$router.replace({ path: '/h5/signup', query: { appId: this.appId } })
|
} else {
|
this.$router.replace({ path: '/h5/verForm', query: { appId: this.appId }})
|
}
|
},
|
getIsSignup() {
|
return Boolean(localStorage.getItem('isSignup'))
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.face {
|
height: 100vh;
|
display: flex;
|
flex-direction: column;
|
justify-content: space-between;
|
max-width: 700px;
|
margin: 0 auto;
|
overflow: auto;
|
}
|
.mapBox {
|
width: 300px;
|
height: 300px;
|
border-radius: 150px;
|
}
|
.mask {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
width: 300px;
|
height: 340px;
|
background: radial-gradient(circle at center, transparent 0px, white 160px);
|
z-index: 12; /* 位于红色盒子上方 */
|
}
|
.center-sign {
|
z-index: 13;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
}
|
.text-sign {
|
z-index: 13;
|
position: absolute;
|
left: 50%;
|
top: 66%;
|
white-space: nowrap;
|
transform: translate(-50%, -50%);
|
}
|
.signin-button {
|
width: 140px;
|
height: 140px;
|
border-radius: 70px;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
align-items: center;
|
border: 16px solid
|
}
|
.ripple {
|
position: absolute;
|
top: 0;
|
left: 0;
|
width: 100%;
|
height: 100%;
|
border-radius: 50%;
|
background-color: rgba(255, 255, 255, 0.5);
|
transform: scale(0);
|
animation: ripple 2s ease-out infinite;
|
pointer-events: none; /* 防止波纹遮挡按钮点击 */
|
z-index: 14;
|
}
|
/* 确保按钮文字显示在波纹上方 */
|
.signin-button .el-row {
|
position: relative;
|
z-index: 2;
|
}
|
@keyframes ripple {
|
to {
|
transform: scale(2);
|
opacity: 0;
|
}
|
}
|
</style>
|
