image.png
<!-- 证件识别 -->
<template>
<view>
<view class="container">
<view class="cu-bar bg-white margin-top-xs">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">请拍摄并上传您的身份证照片</text>
<text class="text-ABC text-blue">Driving license</text>
</view>
</view>
<view class="uploadBox">
<view style="width: 70%;">
<view class="uploadItem">
<view class="imgBox imgEx1">
<view class="leftTop"></view>
<view class="leftTop2"></view>
<view class="leftbottom"></view>
<view class="leftbottom2"></view>
<view class="rightTop"></view>
<view class="rightTop2"></view>
<view class="rightbottom"></view>
<view class="rightbottom2"></view>
</view>
<image class="imgUrl" :src="src"></image>
</view>
<view @tap="scan()" class="leftBtn text-white text-lg text-center">拍摄正面</view>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">识别内容核对</text>
<text class="text-ABC text-blue">distinguish</text>
</view>
</view>
<view class="distinguishBox">
<view>
<text class="text-bold disLabel">姓名：</text>
<text>{{names}}</text>
</view>
<view>
<text class="text-bold disLabel">出生：</text>
<text>{{date}}</text>
</view>
<view>
<text class="text-bold disLabel">性别：</text>
<text>{{sex}}</text>
</view>
<view>
<text class="text-bold disLabel">民族：</text>
<text>{{nationality}}</text>
</view>
<view>
<text class="text-bold disLabel">居住地：</text>
<text>{{address}}</text>
</view>
<view>
<text class="text-bold disLabel">身份证号：</text>
<text>{{IdNumbers}}</text>
</view>
</view>
<view class="cu-bar bg-white margin-top">
<view class="action sub-title">
<text class="text-xl text-bold text-blue text-shadow">拍摄要求须知</text>
<text class="text-ABC text-blue">requirement</text>
</view>
</view>
<view class="requirement">
<view>
<text class="text-gray">请上传大陆公民持有的本人有效身份证；</text>
</view>
<view>
<text class="text-gray">拍摄时确保身份证</text>
<text class="text-red">边框完整，</text>
<text class="text-red">字体清晰，</text>
<text class="text-red">亮度均匀；</text>
</view>
<view class="errorBox">
<view class="item1">
<image class="iconImg" src="../../static/discern/ok.png" mode="widthFix"></image>
</view>
<view class="item2">
<image class="iconImg" src="../../static/discern/no.png" mode="widthFix"></image>
</view>
<view class="item3">
<image class="iconImg" src="../../static/discern/no.png" mode="widthFix"></image>
</view>
<view class="item4">
<image class="iconImg" src="../../static/discern/no.png" mode="widthFix"></image>
</view>
</view>
</view>
<view class="submitBtn" @click="getIDCards()">提交认证信息</view>
<view class="submitBtn" @click="getIDCard()">提交认证</view>
</view>
</view>
</template>
<script>
var that;
const card = uni.requireNativePlugin('DC-CardRecognize');
export default {
data() {
return {
list: [
'隐私说明：请按要求上传真实的证件照片，您所上传的行驶证仅用于平台账户绑定，请放心上传'
],
// ../static/me/zjx_me_bg6.jpg
imgUrl1: '',
imgUrl2: '',
info: "",
title: 'input',
focus: false,
// 姓名
name: "",
names: "",
// 民族
nationality: "",
// 地址
address: "",
// 身份证号码
IdNumbers: "",
IdNumber: "",
date: "",
sex: "",
src: "",
httpUrl: "https://aip.baidubce.com/rest/2.0/ocr/v1/general?access_token=",
imageBase64Str: "",
access_token: "",
APIKey: "",// 你的APIKey
SecretKey: ""// 你的SecretKey
}
},
watch: {
},
onReady() {
// 获取屏幕高度
uni.getSystemInfo({
success: res => {
console.log(res.windowHeight)
}
});
},
onLoad() {
that = this;
//token验证
this.getAccess_token();
},
mounted() {
},
methods: {
getAccess_token() {
var that = this
var accessToken = that.cache("accessToken", null, null);
console.log(accessToken)
if (!accessToken) {
uni.request({
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
url: "https://aip.baidubce.com/oauth/2.0/token",
data: {
grant_type: "client_credentials",
client_id: that.APIKey,
client_secret: that.SecretKey
},
success: function(res) {
console.log(res.data.access_token);
//uni.setStorageSync("Baidu",res.data);
that.access_token = res.data.access_token;
that.cache("accessToken", res.data.access_token, null);
}
})
} else {
that.access_token = accessToken;
}
},
//缓存,默认有效期28天
cache: function(key, value, seconds) {
var timestamp = Date.parse(new Date()) / 1000
console.log(timestamp + "===" + key)
if (key && value === null) {
//删除缓存
//获取缓存
var val = uni.getStorageSync(key);
var tmp = val.split("|")
if (!tmp[1] || timestamp >= tmp[1]) {
console.log("key已失效")
uni.removeStorageSync(key)
return ""
} else {
console.log("key未失效")
return tmp[0]
}
} else if (key && value) {
//设置缓存
if (!seconds) {
var expire = timestamp + (3600 * 24 * 28)
} else {
var expire = timestamp + seconds
}
value = value + "|" + expire
uni.setStorageSync(key, value);
} else {
console.log("key不能空")
}
},
getIDCards() {
if (flag) {
console.log("==")
//百度名片识别接口处理开始
uni.showLoading({
mask: true,
title: "识别中，请等待"
});
uni.request({
url: "https://aip.baidubce.com/rest/2.0/ocr/v1/idcard?access_token=" + that.access_token,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: {
image: that.imageBase64Str,
id_card_side: "front"
},
success: function(res) {
console.log(res);
var IdCard = res.data.words_result.公民身份号码.words;
that.IdNumbers = IdCard
var userName = res.data.words_result.姓名.words;
that.names = userName
that.nationality = res.data.words_result.民族.words;
var address = res.data.words_result.住址.words;
that.address = address
var sex = res.data.words_result.性别.words;
that.sex = sex
var date = res.data.words_result.出生.words;
that.date = date
},
complete() {
uni.hideLoading();
}
})
}
},
scan() {
var me = this;
uni.chooseImage({
count: 1,
sizeType: ['compressed'],
sourceType: ['album', 'camera'],
success: function(res) {
var tempFilePath = res.tempFilePaths[0];
me.tempFile = tempFilePath;
plus.io.resolveLocalFileSystemURL(me.tempFile, function(entry) {
entry.file(function(file) {
var fileReader = new plus.io.FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function(evt) {
//console.log("=="+evt.target.result);
that.imageBase64Str = evt.target.result.split(",")[1];
that.src = evt.target.result;
}
})
})
}
})
}
}
}
</script>
<style lang="scss" scoped>
.container {
height: 100%;
}
.uploadBox {
padding: 15rpx 20rpx 40rpx;
background-color: #FFFFFF;
display: flex;
justify-content: center;
// justify-content: space-between;
.leftBtn {
width: 100%;
height: 75rpx;
line-height: 75rpx;
background-color: #007aec;
border-radius: 0 0 12rpx 12rpx;
}
.uploadItem {
width: 100%;
height: 320rpx;
background-color: #f1f7ff;
border-radius: 15rpx;
padding: 30rpx;
position: relative;
.imgUrl {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.imgBox {
width: 100%;
height: 100%;
position: relative;
}
.imgEx1 {
background: url(../../static/discern/ex1.png);
background-size: 82%;
background-repeat: no-repeat;
background-position: center;
}
.imgEx2 {
background: url(../../static/discern/ex2.png);
background-size: 82%;
background-repeat: no-repeat;
background-position: center;
}
.leftTop {
height: 28rpx;
width: 4rpx;
background-color: #007aec;
position: absolute;
left: 0;
}
.leftTop2 {
height: 4rpx;
width: 28rpx;
background-color: #007aec;
position: absolute;
top: 0;
}
.leftbottom {
height: 28rpx;
width: 4rpx;
background-color: #007aec;
position: absolute;
bottom: 0;
}
.leftbottom2 {
height: 4rpx;
width: 28rpx;
background-color: #007aec;
position: absolute;
bottom: 0;
}
.rightTop {
height: 28rpx;
width: 4rpx;
background-color: #007aec;
position: absolute;
right: 0;
}
.rightTop2 {
height: 4rpx;
width: 28rpx;
background-color: #007aec;
position: absolute;
right: 0;
top: 0;
}
.rightbottom {
height: 28rpx;
width: 4rpx;
background-color: #007aec;
position: absolute;
right: 0;
bottom: 0;
}
.rightbottom2 {
height: 4rpx;
width: 28rpx;
background-color: #007aec;
position: absolute;
right: 0;
bottom: 0;
}
}
}
.distinguishBox {
padding: 5rpx 30rpx 20rpx;
background: white;
view {
margin-bottom: 20rpx;
}
}
.disLabel {
text-align-last: justify;
text-align: justify;
text-justify: distribute-all-lines;
min-width: 142rpx;
display: inline-block;
margin-right: 5rpx;
}
.requirement {
padding: 10rpx 30rpx 26rpx;
background: white;
view {
margin-bottom: 10rpx;
}
.errorBox {
display: flex;
justify-content: space-between;
margin-top: 30rpx;
view {
width: 23%;
height: 100rpx;
}
.item1 {
background-image: url(../../static/discern/yes.png);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
.item2 {
background-image: url(../../static/discern/error1.png);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
.item3 {
background-image: url(../../static/discern/error2.png);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
.item4 {
background-image: url(../../static/discern/error3.png);
background-repeat: no-repeat;
background-size: 100%;
position: relative;
}
.iconImg {
width: 60rpx;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -30rpx;
}
}
}
.submitBtn {
width: 90%;
height: 90rpx;
background: #007aec;
line-height: 90rpx;
margin: 50rpx auto;
text-align: center;
font-size: 34rpx;
color: #fff;
border-radius: 12rpx;
}
</style>
