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.
243 lines
5.2 KiB
243 lines
5.2 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>
|
|
</view>
|
|
|
|
<!-- 人脸识别说明 -->
|
|
<view class="human-face-desc">
|
|
人脸认证仅能由<text class="name">{{ userInfo.auth.name }}</text>本人完成验证时，请将镜头对准您的脸部
|
|
</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">
|
|
<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,
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['teamList', 'userInfo']),
|
|
},
|
|
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"
|
|
// })
|
|
}
|
|
});
|
|
},
|
|
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)
|
|
}
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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: 70%;
|
|
}
|
|
}
|
|
|
|
// 人脸识别说明
|
|
.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>
|