<template>
|
<el-dialog
|
v-model="dialogFlag"
|
width="80%"
|
style="max-width: 500px;"
|
align-center
|
:show-close="status!='auditing'"
|
:close-on-click-modal="false"
|
:close-on-press-escape="false"
|
>
|
<div class="p-7 pt-0" style="display: flex; flex-direction: column; align-items: center;">
|
<div class="image_box" v-if="['unStart', 'auditing'].includes(status)">
|
<el-image :src="base64"></el-image>
|
<div v-if="status=='auditing'" class="scan-line"></div>
|
</div>
|
<el-row justify="center" v-else-if="['success', 'fail'].includes(status)">
|
<el-image :src="$getImageUrl(`/h5/face_${status}.png`)"></el-image>
|
<el-row>
|
<el-text class="text-lg">人脸验证{{ status=='success'?'':'不' }}通过</el-text>
|
</el-row>
|
<el-row class="mt-2">
|
<el-text v-if="status=='success'">系统已成功审核您的身份</el-text>
|
<el-text v-else-if="status=='fail'">请重新验证您的身份</el-text>
|
</el-row>
|
</el-row>
|
<el-row justify="center" class="mt-5" v-if="status=='auditing'">
|
<el-text>正在审核中，请耐心等待...</el-text>
|
</el-row>
|
<el-button
|
v-if="status=='unStart'"
|
@click="submitAudit"
|
:loading="status=='auditing'"
|
type="primary"
|
size="large" class="mt-5"
|
style="width: 100%;"
|
>
|
提交审核
|
</el-button>
|
<el-button
|
v-else-if="status=='success'"
|
@click="handlerSuccess"
|
type="primary"
|
size="large" class="mt-5"
|
style="width: 100%;"
|
>
|
完成验证
|
</el-button>
|
<el-button
|
v-else-if="status=='fail'"
|
@click="dialogFlag=false"
|
type="primary"
|
size="large" class="mt-5"
|
style="width: 100%;"
|
>
|
确定
|
</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { uploadByBase64 } from '@/utils/tool.js';
|
|
export default {
|
components: {},
|
data() {
|
return {
|
dialogFlag: false,
|
status: ''
|
}
|
},
|
props: {
|
modelValue: {
|
type: Boolean,
|
default: false
|
},
|
base64: {
|
type: String,
|
default: ''
|
}
|
},
|
computed: {
|
|
},
|
created() {
|
|
},
|
watch: {
|
modelValue(val) {
|
this.dialogFlag = val
|
if (val) {
|
this.status = 'unStart'
|
}
|
},
|
dialogFlag(val) {
|
this.$emit('update:modelValue', val)
|
}
|
},
|
methods: {
|
async submitAudit() {
|
this.status = 'auditing'
|
const url = await uploadByBase64(this.base64 ,'人脸照片')
|
if (!url) {
|
this.status = 'fail'
|
return
|
}
|
const params = { faceImgPath: url }
|
this.$axios.get('/system/auth/staff/checkin/face-match', { params }).then(res => {
|
if (res.data.code == 0) {
|
// this.status = res.data.data ? 'success' : 'fail'
|
this.status = 'success'
|
} else {
|
this.status = 'fail'
|
this.$message.error(res.data.msg || "人脸比对失败")
|
}
|
}).catch(() => {
|
this.status = 'fail'
|
})
|
},
|
handlerSuccess() {
|
this.dialogFlag = false
|
this.$emit('handlerSuccess')
|
}
|
}
|
}
|
</script>
|
<style scoped lang="scss">
|
.image_box {
|
position: relative;
|
width: 90%;
|
max-width: 300px;
|
aspect-ratio: 1/1;
|
border-radius: 50% 50%;
|
overflow: hidden;
|
display: flex;
|
justify-content: center;
|
border: 5px solid #5693f4;
|
}
|
/* 扫描线 */
|
.scan-line {
|
position: absolute;
|
left: 0px;
|
right: 0px;
|
height: 50px;
|
background: linear-gradient(0deg, #5693f4, transparent);
|
animation: scan 2s ease-in-out infinite;
|
/* 初始位置设在顶部 */
|
top: -50px;
|
}
|
|
@keyframes scan {
|
0% { top: -50px; }
|
100% { top: 100%; } /* 移动到底部 */
|
}
|
|
</style>
|
