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.
420 lines
9.5 KiB
420 lines
9.5 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="https://tennis-oss.xzaiyp.top/2024-10-22/508376c5-64b2-472f-8e25-a2469b632a39.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="https://tennis-oss.xzaiyp.top/2024-10-22/a0bf2da9-c25a-4d5c-8c77-7318bd86227d.png"
|
|
mode="widthFix"></image>
|
|
<view class="text">避免遮挡</view>
|
|
</view>
|
|
<view class="desc-item">
|
|
<image src="https://tennis-oss.xzaiyp.top/2024-10-22/feb72bfb-8271-4e48-8081-d72811543918.png"
|
|
mode="widthFix"></image>
|
|
<view class="text">光线充足</view>
|
|
</view>
|
|
<view class="desc-item">
|
|
<image src="https://tennis-oss.xzaiyp.top/2024-10-22/5fd8a6a7-a13e-44d6-acf1-a7ada94c699d.png"
|
|
mode="widthFix"></image>
|
|
<view class="text">正对充足</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 实名认证 -->
|
|
<div class="btn"
|
|
@click="handleTakePhotoClick"
|
|
v-if="tipsText == '请拍照' && type == 'auth'">
|
|
立即核验
|
|
</div>
|
|
|
|
|
|
<div class="btn"
|
|
@click="handleTakePhotoClick"
|
|
v-else-if="tipsText == '请拍照'">
|
|
<uv-upload
|
|
multiple
|
|
:maxCount="1"
|
|
capture="camera"
|
|
height="180rpx"
|
|
@afterRead="afterRead">
|
|
<view style="display: flex;justify-content: center;
|
|
width: 600rpx;">
|
|
立即核验
|
|
</view>
|
|
</uv-upload>
|
|
</div>
|
|
|
|
|
|
</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 : '',
|
|
}
|
|
},
|
|
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.position.latitude
|
|
self.form.lon = res.position.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
|
|
}
|
|
})
|
|
})
|
|
},
|
|
// 人脸认证通过后拍照
|
|
photo() {
|
|
let self = this
|
|
uni.chooseImage({
|
|
count: 1, //默认9
|
|
sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
// sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['camera '], //这要注意，camera掉拍照，album是打开手机相册
|
|
success: function(res) {
|
|
console.log(JSON.stringify(res.tempFilePaths));
|
|
//后续在这里上传文件
|
|
|
|
self.$Oss.ossUpload(res.tempFilePaths[0]).then(url => {
|
|
self.form.pic = url
|
|
|
|
if(self.form.lat){
|
|
self.submit()
|
|
}else{
|
|
uni.showLoading({
|
|
title: '定位中...'
|
|
})
|
|
self.isLocationSubmit = true
|
|
}
|
|
|
|
})
|
|
|
|
|
|
// uni.navigateTo({
|
|
// url: "/pages/subPack/punchCard/punchCard"
|
|
// })
|
|
}
|
|
});
|
|
},
|
|
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() {
|
|
// #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
|
|
if (Math.abs(pitch) >= standard || Math.abs(roll) >= standard ||
|
|
Math.abs(yaw) >= standard) {
|
|
this.tipsText = '请平视摄像头'
|
|
} else if (face.confArray.global <= 0.8 || face.confArray.leftEye <=
|
|
0.8 || face.confArray.mouth <= 0.8 || face.confArray.nose <= 0.8 ||
|
|
face.confArray.rightEye <= 0.8) {
|
|
this.tipsText = '请勿遮挡五官'
|
|
} else {
|
|
this.tipsText = '请拍照'
|
|
// 这里可以写自己的逻辑了
|
|
// this.handleTakePhotoClick()
|
|
}
|
|
}
|
|
},
|
|
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.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
|
|
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.human-face {
|
|
min-height: 100vh;
|
|
background: white;
|
|
|
|
// 人脸识别说明标题
|
|
.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>
|