You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
481 lines
10 KiB
481 lines
10 KiB
<!-- 人脸识别 -->
|
|
<template>
|
|
<view class="human-face">
|
|
<!-- 自定义导航栏 -->
|
|
<uni-nav-bar dark :fixed="true" shadow background-color="var(--main-color)" status-bar left-icon="left"
|
|
title="人脸识别" @clickLeft="$utils.navigateBack" />
|
|
|
|
<!-- 人脸识别说明标题 -->
|
|
<view class="human-face-title">为保证本人操作，请进行人脸验证</view>
|
|
|
|
<!-- 人脸识别图片 -->
|
|
<view class="human-face-img">
|
|
<image v-if="!isPhoto"
|
|
src="../static/1.png" mode="widthFix">
|
|
</image>
|
|
|
|
<image v-else-if="!!tempImg"
|
|
:src="tempImg" mode="widthFix">
|
|
</image>
|
|
|
|
<camera
|
|
v-else
|
|
:device-position="devicePosition ?'front': 'back'"
|
|
class="camera"
|
|
flash="off"
|
|
resolution='high' />
|
|
</view>
|
|
|
|
<!-- 人脸识别说明 -->
|
|
<view class="human-face-desc"
|
|
v-if="!isPhoto">
|
|
人脸认证仅能由<text class="name">{{ userInfo.auth.name }}</text>本人完成验证时，请将镜头对准您的脸部
|
|
</view>
|
|
|
|
<view class="human-face-desc"
|
|
v-else>
|
|
{{ tipsText }}
|
|
</view>
|
|
|
|
<!-- 说明 -->
|
|
<view class="desc">
|
|
<view class="desc-item">
|
|
<image src="../static/2.png"
|
|
mode="widthFix"></image>
|
|
<view class="text">避免遮挡</view>
|
|
</view>
|
|
<view class="desc-item">
|
|
<image src="../static/3.png"
|
|
mode="widthFix"></image>
|
|
<view class="text">光线充足</view>
|
|
</view>
|
|
<view class="desc-item">
|
|
<image src="../static/4.png"
|
|
mode="widthFix"></image>
|
|
<view class="text">正对充足</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 实名认证 -->
|
|
<view class="btn"
|
|
@click="handleTakePhotoClick"
|
|
v-if="tipsText == successText && type == 'auth'">
|
|
立即核验
|
|
</view>
|
|
|
|
<!-- 人脸核验 -->
|
|
<view class="btn"
|
|
v-else-if="tipsText == successText && !isVerifyFace"
|
|
@click="handleTakePhotoClick">
|
|
立即核验
|
|
</view>
|
|
|
|
<view class="btn"
|
|
v-else-if="tipsText == successText">
|
|
<uv-upload
|
|
multiple
|
|
:maxCount="1"
|
|
capture="camera"
|
|
height="180rpx"
|
|
@afterRead="afterRead">
|
|
<view style="display: flex;justify-content: center;
|
|
width: 600rpx;">
|
|
拍照打卡
|
|
</view>
|
|
</uv-upload>
|
|
</view>
|
|
|
|
|
|
<uv-popup ref="successPopup" :round="30"
|
|
>
|
|
<view class="successPopup">
|
|
|
|
<image src="/static/image/success.png"
|
|
style="width: 320rpx;"
|
|
mode="widthFix"></image>
|
|
|
|
<view class="text">
|
|
核验成功
|
|
</view>
|
|
|
|
<view class="btn">
|
|
<uv-upload
|
|
multiple
|
|
:maxCount="1"
|
|
capture="camera"
|
|
height="180rpx"
|
|
@afterRead="afterRead">
|
|
<view style="display: flex;justify-content: center;
|
|
width: 600rpx;">
|
|
拍照打卡
|
|
</view>
|
|
</uv-upload>
|
|
</view>
|
|
</view>
|
|
</uv-popup>
|
|
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import position from '@/utils/position.js'
|
|
import {
|
|
mapState
|
|
} from 'vuex'
|
|
export default {
|
|
name: "HumanFace",
|
|
data() {
|
|
return {
|
|
isPhoto: false,
|
|
form : {
|
|
pic : '',
|
|
},
|
|
isLocationSubmit : false,//定位完成时提交
|
|
|
|
|
|
tipsText: '', // 错误文案提示
|
|
tempImg: '', // 本地图片路径
|
|
|
|
cameraEngine: null, // 相机引擎
|
|
devicePosition: true, // 摄像头朝向
|
|
isAuthCamera: true, // 是否拥有相机权限
|
|
|
|
type : '',
|
|
|
|
isVerifyFace : false,//人脸核验是否成功
|
|
|
|
successText : '请保持不动',//成功文案
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['teamList', 'userInfo', 'authInfo']),
|
|
},
|
|
onLoad(args) {
|
|
if(args.type){
|
|
this.type = args.type
|
|
}
|
|
this.initData()
|
|
},
|
|
onShow() {
|
|
let self = this
|
|
position.getLocationDetail()
|
|
.then(res => {
|
|
console.log(res);
|
|
self.form.lat = res.latitude
|
|
self.form.lon = res.longitude
|
|
self.form.address = res.address
|
|
if(self.isLocationSubmit){
|
|
self.submit()
|
|
}
|
|
})
|
|
},
|
|
methods: {
|
|
afterRead(e) {
|
|
let self = this
|
|
e.file.forEach(file => {
|
|
self.$Oss.ossUpload(file.url).then(url => {
|
|
self.form.pic = url
|
|
if(self.form.lat){
|
|
self.submit()
|
|
}else{
|
|
uni.showLoading({
|
|
title: '定位中...'
|
|
})
|
|
self.isLocationSubmit = true
|
|
}
|
|
})
|
|
})
|
|
},
|
|
async submit(){
|
|
if (this.$utils.verificationAll(this.form, {
|
|
lat : '经纬度缺失，请打开GPS',
|
|
lon : '经纬度缺失，请打开GPS',
|
|
address : '获取地址失败',
|
|
pic : '请拍照',
|
|
})) {
|
|
return
|
|
}
|
|
|
|
this.$api('clock', this.form, res => {
|
|
if(res.code == 200){
|
|
|
|
uni.showToast({
|
|
title: '打卡成功',
|
|
icon:'none'
|
|
})
|
|
|
|
setTimeout(uni.navigateBack, 1000, -1)
|
|
}else{
|
|
this.$nextTick(() => {
|
|
this.form.image = ''
|
|
this.tempImg = ''
|
|
})
|
|
}
|
|
})
|
|
},
|
|
// 初始化相机引擎
|
|
initData() {
|
|
|
|
let createTime = new Date().getTime()
|
|
let num = 0
|
|
|
|
// #ifdef MP-WEIXIN
|
|
|
|
|
|
// 1、初始化人脸识别
|
|
wx.initFaceDetect()
|
|
// 2、创建 camera 上下文 CameraContext 对象
|
|
this.cameraEngine = wx.createCameraContext()
|
|
// 3、获取 Camera 实时帧数据
|
|
const listener = this.cameraEngine.onCameraFrame((frame) => {
|
|
if (this.tempImg) {
|
|
return;
|
|
}
|
|
// 4、人脸识别，使用前需要通过 wx.initFaceDetect 进行一次初始化，推荐使用相机接口返回的帧数据
|
|
wx.faceDetect({
|
|
frameBuffer: frame.data,
|
|
width: frame.width,
|
|
height: frame.height,
|
|
enablePoint: true,
|
|
enableConf: true,
|
|
enableAngle: true,
|
|
enableMultiFace: true,
|
|
success: (faceData) => {
|
|
let face = faceData.faceInfo[0]
|
|
if (faceData.x == -1 || faceData.y == -1) {
|
|
this.tipsText = '检测不到人'
|
|
}
|
|
if (faceData.faceInfo.length > 1) {
|
|
this.tipsText = '请保证只有一个人'
|
|
} else {
|
|
const {
|
|
pitch,
|
|
roll,
|
|
yaw
|
|
} = face.angleArray;
|
|
|
|
const standard = 0.5
|
|
|
|
let faseP = 0.98
|
|
|
|
if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
|
|
Math.abs(yaw) >= standard) {
|
|
this.tipsText = '请平视摄像头'
|
|
} else if (face.confArray.global <= faseP || face.confArray.leftEye <=
|
|
faseP || face.confArray.mouth <= faseP || face.confArray.nose <= faseP ||
|
|
face.confArray.rightEye <= faseP) {
|
|
this.tipsText = '请勿遮挡五官'
|
|
} else {
|
|
this.tipsText = this.successText
|
|
// 这里可以写自己的逻辑了
|
|
// this.handleTakePhotoClick()
|
|
|
|
// if(num > 2){
|
|
// uni.showToast({
|
|
// title: '人脸核验'
|
|
// })
|
|
// return
|
|
// }
|
|
|
|
// if(createTime - new Date().getTime() > 2000){
|
|
|
|
// }
|
|
}
|
|
}
|
|
},
|
|
fail: (err) => {
|
|
if (err.x == -1 || err.y == -1) {
|
|
this.tipsText = '检测不到人'
|
|
} else {
|
|
this.tipsText = err.errMsg || '网络错误，请退出页面重试'
|
|
}
|
|
},
|
|
})
|
|
})
|
|
// 5、开始监听帧数据
|
|
listener.start()
|
|
|
|
this.isPhoto = true
|
|
// #endif
|
|
},
|
|
|
|
// 拍照
|
|
handleTakePhotoClick() {
|
|
if (this.tipsText != ""
|
|
&& this.tipsText != this.successText
|
|
&& !this.tempImg) {
|
|
return;
|
|
}
|
|
|
|
uni.getSetting({
|
|
success: (res) => {
|
|
if (!res.authSetting['scope.camera']) {
|
|
this.isAuthCamera = false
|
|
uni.openSetting({
|
|
success: (res) => {
|
|
if (res.authSetting['scope.camera']) {
|
|
this.isAuthCamera = true;
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
})
|
|
this.cameraEngine.takePhoto({
|
|
quality: "high",
|
|
success: ({
|
|
tempImagePath
|
|
}) => {
|
|
this.tempImg = tempImagePath
|
|
|
|
// 上传图片
|
|
this.$Oss.ossUpload(tempImagePath).then(url => {
|
|
|
|
// 实名认证，上传人脸
|
|
if(this.type == 'auth'){
|
|
let form = {
|
|
...this.authInfo,
|
|
pic : url
|
|
}
|
|
this.$api('authApply', form, res => {
|
|
if(res.code == 200){
|
|
setTimeout(uni.reLaunch, 1000, {
|
|
url: '/pages/index/index'
|
|
})
|
|
}else{
|
|
setTimeout(uni.navigateBack, 1000, -1)
|
|
}
|
|
})
|
|
return
|
|
}
|
|
|
|
this.form.image = url
|
|
|
|
if(!this.isVerifyFace){
|
|
this.clockVerifyFace()
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
// 人脸核验
|
|
clockVerifyFace(){
|
|
this.$api('clockVerifyFace',
|
|
this.form, res => {
|
|
if(res.code == 200){
|
|
// uni.showToast({
|
|
// title: '核验成功！',
|
|
// icon: 'icon'
|
|
// })
|
|
this.isVerifyFace = true
|
|
this.$refs.successPopup.open()
|
|
}else{
|
|
this.tempImg = ''
|
|
this.form.pic = ''
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.human-face {
|
|
min-height: 100vh;
|
|
background: white;
|
|
|
|
.successPopup{
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
width: 520rpx;
|
|
color: #20D76D;
|
|
gap: 50rpx;
|
|
padding: 40rpx;
|
|
.text{
|
|
font-weight: 900;
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
|
|
|
|
// 人脸识别说明标题
|
|
.human-face-title {
|
|
font-size: 35rpx;
|
|
font-weight: bold;
|
|
margin: 60rpx 0rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
// 人脸识别图片
|
|
.human-face-img {
|
|
display: flex;
|
|
justify-content: center;
|
|
image {
|
|
width: 500rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.camera{
|
|
width: 500rpx;
|
|
height: 500rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
// 人脸识别说明
|
|
.human-face-desc {
|
|
color: #707070;
|
|
width: 55%;
|
|
font-size: 30rpx;
|
|
margin: 30rpx auto;
|
|
text-align: center;
|
|
|
|
.name {
|
|
color: $main-color;
|
|
}
|
|
}
|
|
|
|
// 说明
|
|
.desc {
|
|
width: 80%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 100rpx auto;
|
|
|
|
.desc-item {
|
|
width: 33.33%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
image {
|
|
width: 50%;
|
|
}
|
|
|
|
.text {
|
|
font-size: 30rpx;
|
|
color: #707070;
|
|
margin-top: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
// 立即核验
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 83%;
|
|
background: $main-color;
|
|
color: white;
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
margin: 0rpx auto;
|
|
}
|
|
}
|
|
</style>
|