254 lines
7.1 KiB
Vue
254 lines
7.1 KiB
Vue
<template>
|
||
<view>
|
||
<div v-if="isShow">
|
||
<div class="title">人脸识别扫描</div>
|
||
<div class="title-tip">请正对手机，确保光线充足</div>
|
||
<div class="face-scan">
|
||
<u-icon name="/static/images/face-recognition.png" size="180" />
|
||
</div>
|
||
<div class="face-tip">人脸验证过程中仅能由本人完成</div>
|
||
<div class="tip-icon">
|
||
<div class="tip-item">
|
||
<u-icon name="/static/images/eye.png" size="40" />
|
||
<div>避免遮挡</div>
|
||
</div>
|
||
<div class="tip-item">
|
||
<u-icon name="/static/images/well-lit.png" size="40" />
|
||
<div>光线充足</div>
|
||
</div>
|
||
<div class="tip-item">
|
||
<u-icon name="/static/images/front-face-to-phone.png" size="40" />
|
||
<div>正对手机</div>
|
||
</div>
|
||
</div>
|
||
<div class="btn">
|
||
<!-- <u-button type="primary" shape="circle" text="开始录入" @click="openFaceScan" style="margin-bottom: 10px" /> -->
|
||
<u-button type="primary" shape="circle" text="拍照录入" @click="openPhotograph" />
|
||
</div>
|
||
</div>
|
||
|
||
<div v-else>
|
||
<div class="img">
|
||
<u--image :src="url" width="180px" height="180px" shape="circle" />
|
||
</div>
|
||
<div class="img-title">您已完成人脸信息采集</div>
|
||
<div class="img-tip">温馨提示</div>
|
||
<div class="img-tip-content">收集您的信息，以实现在考试中检测是否是您本人操作，请务必录入您本人的面部信息</div>
|
||
<div class="btn">
|
||
<u-button type="primary" shape="circle" text="确定录入" @click="handleSubmit" />
|
||
<!-- <u-button type="primary" plain shape="circle" text="重新录入" @click="openFaceScan" style="margin: 10px 0" /> -->
|
||
<u-button type="primary" plain shape="circle" text="重新拍照" style="margin: 10px 0" @click="openPhotograph" />
|
||
</div>
|
||
</div>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { pathToBase64, base64ToPath } from 'image-tools'
|
||
// import face from '@/uni_modules/mcc-face/index.js'
|
||
import config from 'config.js'
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
isShow: true,
|
||
url: '',
|
||
facePath: '',
|
||
optMode: 'add',
|
||
token: uni.getStorageSync('access_token'),
|
||
userId: uni.getStorageSync('userId')
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.log('🚀 ~ onLoad', this.token, this.userId)
|
||
this.url = uni.getStorageSync('facePath') || ''
|
||
this.optMode = uni.getStorageSync('facePath') ? 'replace' : 'add'
|
||
},
|
||
mounted() {
|
||
// console.log('🚀 ~ mounted', config)
|
||
},
|
||
methods: {
|
||
// 人脸识别
|
||
// openFaceScan() {
|
||
// this.url = ''
|
||
// face.open(['a'], e => {
|
||
// console.log('🚀 ~ e-人脸识别:', e)
|
||
// this.url = e
|
||
// this.isShow = false
|
||
// face.close()
|
||
// })
|
||
// if (!this.url) this.isShow = true
|
||
// },
|
||
// 确定录入
|
||
// handleSubmit() {
|
||
// console.log('🚀 ~ handleSubmit ~ this.url:', this.url)
|
||
// // 上传文件
|
||
// uni.uploadFile({
|
||
// url: config.uploadUrl,
|
||
// filePath: this.url,
|
||
// name: 'data',
|
||
// formData: {
|
||
// photoType: 'face',
|
||
// file: this.url
|
||
// },
|
||
// header: {
|
||
// Authorization: this.token
|
||
// },
|
||
// success: res => {
|
||
// console.log('🚀 ~ res:', res)
|
||
// res = JSON.parse(res.data)
|
||
// this.facePath = res.data.url
|
||
// console.log('🚀 ~ handleSubmit ~ this.facePath:', this.facePath, this.optMode)
|
||
// let params = {
|
||
// userId: this.userId,
|
||
// facePath: this.facePath,
|
||
// optMode: this.optMode,
|
||
// img: this.url
|
||
// }
|
||
// params = JSON.stringify(params)
|
||
// this.$verificationToken()
|
||
// uni.request({
|
||
// url: config.baseUrl + '/exam-student/personalCenter/uploadFaceRecognition',
|
||
// method: 'POST',
|
||
// data: params,
|
||
// header: {
|
||
// 'content-type': 'application/json',
|
||
// Authorization: this.token
|
||
// },
|
||
// success: res => {
|
||
// res = res.data
|
||
// console.log('🚀 ~ this.uploadFaceRecognition ~ res上传成功:', res, res.code)
|
||
// if (res.code == 200) {
|
||
// uni.showToast({
|
||
// title: '人脸信息录入成功',
|
||
// icon: 'none'
|
||
// })
|
||
// uni.removeStorageSync('facePath')
|
||
// uni.setStorageSync('facePath', this.facePath)
|
||
// setTimeout(() => {
|
||
// uni.navigateTo({
|
||
// url: '/pages/YNEduApp/user/user'
|
||
// })
|
||
// }, 1000)
|
||
// } else {
|
||
// uni.showToast({
|
||
// title: res.msg,
|
||
// icon: 'none'
|
||
// })
|
||
// }
|
||
// },
|
||
// fail: err => {
|
||
// console.log('🚀 ~ this.uploadFaceRecognition ~ err:', err)
|
||
// }
|
||
// })
|
||
// },
|
||
// fail: err => {
|
||
// console.log('🚀 ~ err:', err)
|
||
// }
|
||
// })
|
||
// },
|
||
// 拍照录入
|
||
// openPhotograph() {
|
||
// uni.chooseImage({
|
||
// count: 1,
|
||
// sizeType: ['compressed'],
|
||
// sourceType: ['camera'],
|
||
// success: res => {
|
||
// console.log('🚀 ~ res-拍照:', res)
|
||
// this.imgToBase64(res.tempFilePaths[0]).then(base64 => {
|
||
// console.log('🚀 ~ this.imgToBase64 ~ base64:', base64)
|
||
// this.url = base64
|
||
// })
|
||
// this.isShow = false
|
||
// },
|
||
// fail: err => {
|
||
// console.log('🚀 ~ err:', err)
|
||
// }
|
||
// })
|
||
// },
|
||
imgToBase64(data) {
|
||
return new Promise((resolve, reject) => {
|
||
pathToBase64(data)
|
||
.then(base64 => {
|
||
resolve(base64)
|
||
})
|
||
.catch(error => {
|
||
console.error(error)
|
||
reject(error)
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.title {
|
||
padding: 80px 0 20px;
|
||
font-weight: 500;
|
||
font-size: 22px;
|
||
color: #000;
|
||
text-align: center;
|
||
}
|
||
.title-tip,
|
||
.face-tip {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #afaeae;
|
||
text-align: center;
|
||
}
|
||
.face-scan {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding: 25px;
|
||
}
|
||
.tip-icon {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 25px 40px;
|
||
|
||
.tip-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
:nth-child(2) {
|
||
margin-top: 10px;
|
||
color: #6b6b6b;
|
||
}
|
||
}
|
||
}
|
||
.btn {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
padding: 25px 40px;
|
||
}
|
||
.img {
|
||
display: flex;
|
||
justify-content: center;
|
||
padding: 105px 40px 35px;
|
||
}
|
||
.img-title {
|
||
font-weight: 500;
|
||
font-size: 19px;
|
||
color: #333;
|
||
line-height: 18px;
|
||
text-align: center;
|
||
}
|
||
.img-tip {
|
||
padding: 50px 40px 20px;
|
||
font-weight: 500;
|
||
font-size: 15px;
|
||
color: #6b6b6b;
|
||
line-height: 18px;
|
||
}
|
||
.img-tip-content {
|
||
padding: 0 40px 20px;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #6b6b6b;
|
||
line-height: 18px;
|
||
}
|
||
</style>
|