添加人脸识别
This commit is contained in:
wangxiaowei
214
bundle/face/face-info.vue
Normal file
214
bundle/face/face-info.vue
Normal file
@ -0,0 +1,214 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="title">请确保本人操作</view>
|
||||
<view class="desc">为了防范身份信息被冒用，保障资金安全，请保持正脸在取景框中根据屏幕指示完成识别</view>
|
||||
<view class="photo-box">
|
||||
<image src="https://xh.stnav.com/uploads/sport/face1.png" style="width: 280rpx; height: 350rpx;"></image>
|
||||
</view>
|
||||
<view>
|
||||
<view class="desc2">1.为了确保您账户的安全和真实性，我们需要对您进行身份验证；</view>
|
||||
<view class="desc3">2.请您本人亲自完成，请将脸部置于提示框内，并按提示做动作。</view>
|
||||
</view>
|
||||
|
||||
<view class="photo-list" >
|
||||
<view class="photo-item">
|
||||
<view class="">
|
||||
<image src="https://xh.stnav.com/uploads/sport/face2.png" style="width: 90rpx; height: 90rpx;"></image>
|
||||
</view>
|
||||
<view class="">正对手机</view>
|
||||
</view>
|
||||
|
||||
<view class="photo-item">
|
||||
<view class="">
|
||||
<image src="https://xh.stnav.com/uploads/sport/face3.png" style="width: 90rpx; height: 90rpx;"></image>
|
||||
</view>
|
||||
<view class="">正对手机</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<view class="photo-item">
|
||||
<image src="https://xh.stnav.com/uploads/sport/face4.png" style="width: 90rpx; height: 90rpx;"></image>
|
||||
</view>
|
||||
<view class="">正对手机</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="photo-btn" @click="takePhoto">开始录入</view>
|
||||
<!-- <image v-if="imgSrc" :src="imgSrc" style="width: 200rpx; height: 200rpx; margin-top: 20rpx;"></image> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
order_id: 0,
|
||||
imgSrc: '',
|
||||
loadding: true,
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(args) {
|
||||
this.order_id = args.order_id || 0;
|
||||
},
|
||||
|
||||
methods: {
|
||||
takePhoto() {
|
||||
let self = this
|
||||
console.log('take photo')
|
||||
uni.navigateTo({
|
||||
url: `/bundle/face/face-photo?order_id=${this.order_id}`,
|
||||
events:{
|
||||
data: (e) => {
|
||||
// self.imgSrc = path
|
||||
self.uploadFile(e.path, e.order_id)
|
||||
// uni.redirectTo({
|
||||
// url: '/pages/order/cg-my-order'
|
||||
// });
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/*上传图片*/
|
||||
uploadFile: function(filePath, order_id) {
|
||||
console.log("🚀 ~ filePat1, order_id:", filePath)
|
||||
console.log("🚀 ~ filePat2, order_id:", order_id)
|
||||
let self = this;
|
||||
let params = {
|
||||
token: uni.getStorageSync('token'),
|
||||
app_id: self.getAppId()
|
||||
};
|
||||
uni.showLoading({
|
||||
title: '图片上传中'
|
||||
});
|
||||
uni.uploadFile({
|
||||
url: self.websiteUrl + '/index.php?s=/api/file.upload/image',
|
||||
filePath: filePath,
|
||||
name: 'iFile',
|
||||
formData: params,
|
||||
success: function(res) {
|
||||
uni.hideLoading();
|
||||
|
||||
let result = typeof res.data === 'object' ? res.data : JSON.parse(res.data);
|
||||
if (result.code === 1) {
|
||||
setTimeout(() => {
|
||||
uni.showLoading({
|
||||
title: '人脸录入中...'
|
||||
});
|
||||
}, 100);
|
||||
|
||||
console.log("🚀 ~ filePath, order_id2:", filePath, order_id)
|
||||
self._post(
|
||||
'haikang.createPerson/hikCreate',
|
||||
{
|
||||
app_id: self.getAppId(),
|
||||
faceUrl: result.data.file_path,
|
||||
order_id: order_id
|
||||
},
|
||||
function(res) {
|
||||
console.log("🚀 ~ res:", res)
|
||||
uni.hideLoading();
|
||||
setTimeout(() => {
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
duration: 1500,
|
||||
icon: 'success'
|
||||
});
|
||||
}, 100);
|
||||
|
||||
setTimeout(() => {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/cg-my-order?type=2'
|
||||
});
|
||||
}, 800)
|
||||
}
|
||||
);
|
||||
// self.imgSrc = result.data.file_path;
|
||||
} else {
|
||||
// self.showError(result.msg);
|
||||
}
|
||||
},
|
||||
complete: function() {
|
||||
uni.hideLoading();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 16rpx 60rpx 0;
|
||||
padding-bottom: 10rpx;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 40rpx;
|
||||
color: #303133;
|
||||
line-height: 56rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 20rpx;
|
||||
text-align: left;
|
||||
font-size: 26rpx;
|
||||
color: #909399;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.photo-box {
|
||||
margin-top: 52rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.desc2, .desc3 {
|
||||
font-size: 28rpx;
|
||||
color: #606266;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
|
||||
.desc3 {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.photo-list {
|
||||
margin: 70rpx 18rpx 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.photo-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
& view:last-child {
|
||||
margin-top: 20rpx;
|
||||
color: #606266;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.photo-btn {
|
||||
margin-top: 222rpx;
|
||||
width: 630rpx;
|
||||
height: 90rpx;
|
||||
line-height: 90rpx;
|
||||
text-align: center;
|
||||
border-radius: 8rpx;
|
||||
background: #365A9A;
|
||||
font-weight: bold;
|
||||
font-size: 30rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
46
bundle/face/face-photo.vue
Normal file
46
bundle/face/face-photo.vue
Normal file
@ -0,0 +1,46 @@
|
||||
<template>
|
||||
<view>
|
||||
<face-bio-assay :isDev="false" :action="['StraightenHead']" ref="faceDetect" @detectFailed="photoChange" @photoChange="photoChange">
|
||||
</face-bio-assay>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import faceBioAssay from '@/uni_modules/face-bio-assay/components/face-bio-assay/face-bio-assay.vue'
|
||||
export default {
|
||||
components: {
|
||||
faceBioAssay,
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
order_id: 0,
|
||||
}
|
||||
},
|
||||
|
||||
onLoad(args) {
|
||||
this.order_id = args.order_id || 0;
|
||||
this.$refs.faceDetect.initData()
|
||||
},
|
||||
|
||||
methods: {
|
||||
detectFailed() {
|
||||
uni.showToast({
|
||||
title: "人脸核验失败~",
|
||||
icon: 'none'
|
||||
})
|
||||
uni.navigateBack()
|
||||
},
|
||||
|
||||
photoChange(path) {
|
||||
let self = this
|
||||
uni.navigateBack()
|
||||
this.getOpenerEventChannel().emit('data',{path: path, order_id: self.order_id});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -688,7 +688,7 @@ export default {
|
||||
uni.$off("payment")
|
||||
if (params.result) {
|
||||
uni.redirectTo({
|
||||
url: `/bundle/reserve/notice?order_id=${params.order_id}`
|
||||
url: `/bundle/reserve/notice?order_id=${params.order_id}&ground_type=${self.venue.type_id}`
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
@ -761,11 +761,11 @@ export default {
|
||||
uni.$off("payment")
|
||||
if (params.result) {
|
||||
uni.redirectTo({
|
||||
url: `/bundle/reserve/notice?order_id=${params.order_id}`
|
||||
url: `/bundle/reserve/notice?order_id=${params.order_id}&ground_type=${self.venue.type_id}`
|
||||
})
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/order/cg-my-order'
|
||||
url: '/pages/order/cg-my-order?type=2'
|
||||
})
|
||||
}
|
||||
}, 500)
|
||||
|
||||
@ -12,18 +12,39 @@
|
||||
<view class="btn1" @click="seeOrder">查看订单</view>
|
||||
<view class="btn2" @click="done">完成</view>
|
||||
</view>
|
||||
|
||||
<!-- 人脸录入提示 -->
|
||||
<Popup :show="facePopup" radius="16rpx">
|
||||
<view class="notice-popup" style="width: 100%; position: relative;">
|
||||
<image style="width: 36rpx;height: 36rpx;position: absolute; top: 0; right: 46rpx;" src="https://xh.stnav.com/uploads/sport/icon_close.png" mode="" @click="facePopup = false"></image>
|
||||
|
||||
<view class="title">提示</view>
|
||||
<view class="desc" style="text-align: center;">
|
||||
为了给您提供更安全、便捷的入场体验，请完成人脸识别认证。只需几秒钟，轻松刷脸入场！
|
||||
</view>
|
||||
<view class="btn" @click="toTakeFacePhoto">去录入</view>
|
||||
</view>
|
||||
</Popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Popup from '@/components/uni-popup.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Popup,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
order_id: 0
|
||||
order_id: 0,
|
||||
ground_type: 1, // 1 网球 2篮球
|
||||
facePopup: false,
|
||||
};
|
||||
},
|
||||
|
||||
onLoad(args) {
|
||||
this.ground_type = args.ground_type || 1;
|
||||
this.order_id = args.order_id || 0;
|
||||
},
|
||||
|
||||
@ -39,10 +60,23 @@
|
||||
},
|
||||
|
||||
done() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
if (this.ground_type == 1) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
} else if (this.ground_type == 2) {
|
||||
// 篮球场需要人脸录入
|
||||
this.facePopup = true;
|
||||
}
|
||||
},
|
||||
|
||||
// 去录入人脸照片
|
||||
toTakeFacePhoto() {
|
||||
this.facePopup = false;
|
||||
uni.navigateTo({
|
||||
url: `/bundle/face/face-info?order_id=${this.order_id}`
|
||||
});
|
||||
}
|
||||
},
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -111,4 +145,35 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.notice-popup {
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #303133;
|
||||
line-height: 50rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 48rpx;
|
||||
font-weight: 400;
|
||||
font-size: 32rpx;
|
||||
color: #303133;
|
||||
line-height: 52rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
font-size: 32rpx;
|
||||
background: #365A9A;
|
||||
border-radius: 8rpx;
|
||||
margin: 92rpx 44rpx 0;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user