1不撑、用戶名、身份證號
<template>
<view class="phone_login">
<uni-nav-bar :border="false" :fixed="true"? statusBar="true" color="#FFFFFF" title="實名認(rèn)證" backgroundColor="rgba(0, 0, 0, 0.1)"></uni-nav-bar>
<!-- 文字說明 -->
<view class="tips">
<image class="img" mode="widthFix" src="../../../static/mine/rz-icon1.png"></image>
</view>
<view class="input_1 view_input">
<input type="text" placeholder="請輸入真實姓名" maxlength="-1" placeholder-class="aaa" v-model="name" />
</view>
<view class="input_3 view_input">
<input type="text" placeholder="請輸入身份證號" v-model="code" placeholder-class="aaa" :adjust-position="true" />
</view>
<view class="btn_5">
<view><text>* 身份證僅支持綁定一次昌讲，請勿輸入錯誤。</text></view>
</view>
<view class="btn_1 box_bg zongse" @click="submitIdcard()">提交</view>
</view>
</template>
<script>
export default {
data() {
return {
name: '',
code: '',
}
},
onLoad() {
},
onShow() {
// 開啟禁止截屏
// #ifdef APP
uni.getSystemInfo({
success: function (info) {
if (info.platform == 'android') {
uni.setUserCaptureScreen({
enable: false
});
}
},
})
// #endif
},
methods: {
//根據(jù)身份證號計算年齡
getAgeFromIdCard(idCard) {
? ? // 身份證號碼為18位，前6位為地址碼逼庞，接下來的8位為出生日期克蚂，最后的是驗證碼
? ? // 提取出生日期（yyyyMMdd）
? ? var birthDateString = idCard.substring(6, 14);
? ? var today = new Date();
? ? var todayYear = today.getFullYear();
? ? var todayMonth = today.getMonth() + 1; // 月份從0開始
? ? var todayDay = today.getDate();
? ? var birthYear = parseInt(birthDateString.substring(0, 4), 10);
? ? var birthMonth = parseInt(birthDateString.substring(4, 6), 10);
? ? var birthDay = parseInt(birthDateString.substring(6, 8), 10);
? ? var age = todayYear - birthYear;
? ? if (todayMonth < birthMonth || (todayMonth == birthMonth && todayDay < birthDay)) {
? ? ? ? age--; // 今天還沒到生日闺鲸，年齡減一
? ? }
? ? return age;
},
//提交身份證信息
submitIdcard(){
let that=this;
if (that.name == '') {
uni.showToast({
title: "請輸入姓名！",
icon: 'none'
})
return false;
}
if (that.code == "") {
uni.showToast({
title: "請輸入身份證號碼埃叭！",
icon: 'none'
})
return false;
}
const regExp = /(^\d{15}$)|(^\d{17}(\d|X)$)/;
if(!regExp.test(that.code)){
uni.showToast({
title: "請輸入正確的身份證號碼摸恍！",
icon: 'none'
})
return false;
}
let age=that.getAgeFromIdCard(that.code);
// console.log(age);
if(age<18){
uni.showToast({
title: "您還未滿18歲，無法實名認(rèn)證！",
icon: 'none'
})
return false;
}
},
},
}
</script>
<style lang="scss">
.tips{
width:90%;
margin:40rpx auto 40rpx auto;
padding:40rpx;
font-size:28rpx;
line-height: 150%;
text-align: center;
.img{
width:40%;
}
}
.btn_4 {
width: 500rpx;
height: 64rpx;
display: flex;
justify-content: space-around;
margin: 48rpx auto 0;
color: #999999;
font-size: 24rpx;
>view {
text-align: center;
}
image {
width: 80rpx;
height: 80rpx;
}
}
.btn_3 {
text-align: center;
font-size: 28rpx;
font-weight: 400;
color: #999999;
margin: 100rpx auto 0;
}
.aaa {
font-size: 28rpx;
}
.text_head {
font-size: 36rpx;
font-weight: bold;
padding-left: 30rpx;
box-sizing: border-box;
margin-top: 48rpx;
}
button::after {
border: none;
background: none;
color: none;
}
.btn_5 {
width: 670rpx;
height: 25rpx;
font-size: 26rpx;
font-weight: 400;
// color: #999999;
display: flex;
margin: 42rpx auto;
/* justify-content: center; */
image {
width: 36rpx;
height: 36rpx;
margin-right: 10rpx;
}
text {
color: #FF3535;
}
}
.btn_1 {
width: 690rpx;
height: 98rpx;
border-radius: 10rpx;
margin: 88rpx auto 0;
font-size: 32rpx;
font-weight: 400;
color: #FFFFFF;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.input_3_btn {
position: absolute;
top: 16rpx;
right: 16rpx;
color: #FFFFFF;
font-size: 26rpx;
display: flex;
justify-content: center;
align-items: center;
box-sizing: border-box;
width: 188rpx;
height: 60rpx;
border-radius: 10rpx;
}
.input_1 {
margin-top: 50rpx !important;
width:750rpx;
.uni-input-input{
width:750rpx;
}
}
.view_input {
width: 690rpx;
height: 90rpx;
margin: 24rpx auto;
font-size: 30rpx;
position: relative;
display: flex;
align-items: center;
background: rgba(#FFFFFF, .2);
border-radius: 10rpx;
padding-left: 20rpx;
.uni-input-input{
width:750rpx;
font-size: 32rpx;
border: none;
}
}
.logo {
margin: 100rpx auto 50rpx;
border-radius: 10px;
font-size: 64rpx;
font-weight: bold;
text-align: center;
>image {
width: 170rpx;
height: 170rpx;
/* border: 1px solid salmon; */
}
>view {
/* position: absolute;
width: 24rpx;
height: 24rpx;
border: 4rpx solid #FDC83E;
border-radius: 50%;
left: 400rpx;
top: 6rpx; */
font-size: 32rpx;
}
}
.phone_login {
// padding-bottom: 200rpx;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
position: relative;
}
</style>
2立镶、初始化livepusher并調(diào)用
<template>
<view class="phone_login">
<uni-nav-bar :border="false" :fixed="true"? left-icon="left" @clickLeft="back"? statusBar="true" color="#FFFFFF" title="拍照認(rèn)證" backgroundColor="rgba(0, 0, 0, 0.1)"></uni-nav-bar>
<view class="face-icon">
<image class="icon" mode="widthFix" src="../../../static/mine/face-icon.png"></image>
</view>
<view class="btn_1 box_bg zongse" v-if="showP" @click="snapshotPusher()">拍照認(rèn)證</view>
</view>
</template>
<script>
// #ifdef APP
import permission from "@/util/permission.js";
// #endif
export default {
data() {
return {
realname: '',
idcard: '',
image:'',
imgData: '',
pusher: null,
scanWin: null,
faceInitTimeout: null,
snapshTimeout: null,
uploadFileTask: null,
cilckSwitch: false, //防止多次點(diǎn)擊
showP:false
}
},
onLoad(options) {
this.idcard=options.idcard;
this.realname=options.realname;
//#ifdef APP-PLUS
this.faceInit();
//#endif
},
onShow() {
})
// #endif
},
onHide() {
// console.log('hide')
this.faceInitTimeout && clearTimeout(this.faceInitTimeout);
this.snapshTimeout && clearTimeout(this.snapshTimeout);
//this.scanWin.hide();
},
methods: {
//初始化
faceInit() {
let that=this;
uni.showLoading({
title:'加載中...'
})
this.faceInitTimeout = setTimeout(async () => {
//創(chuàng)建livepusher
if (uni.getSystemInfoSync().platform === 'android') {
const data1 = await permission.requestAndroidPermission(
"android.permission.RECORD_AUDIO")
const data2 = await permission.requestAndroidPermission("android.permission.CAMERA")
if (data1 == 1 && data2 == 1) {
this.pusherInit();
}
} else {
this.pusherInit();
}
// 覆蓋在視頻之上的內(nèi)容壁袄，根據(jù)實際情況編寫
// 利用plus.webview.create將掃描框頁面及掃描動畫（xxx.html）覆蓋在視頻之上；
// this.scanWin = plus.webview.create('/static/456.html', '', {
//? background: 'transparent'
// });
// //新引入的webView顯示
// this.scanWin.show();
},2000);
},
//初始化播放器
pusherInit() {
// 獲取當(dāng)前窗口
const currentWebview = this.$mp.page.$getAppWebview();
// 創(chuàng)建推流媚媒，url不填寫代表不上傳
this.pusher = plus.video.createLivePusher('livepusher',{
url: '',
top: '10%',
left: '15%',
width: '70%',
height: '300px',
position: 'absolute',
muted: true,
orientation:'vertical',
'z-index': 999,
});
// 將推流對象加到當(dāng)前頁面中
currentWebview.append(this.pusher);
// 4.異步反轉(zhuǎn)攝像頭和執(zhí)行快照
this.faceTimeout = setTimeout(() => {
//反轉(zhuǎn)攝像頭
this.pusher.switchCamera();
this.pusher.orientation
//開始預(yù)覽
this.pusher.preview();
this.showP=true;
uni.hideLoading();
}, 1000)
},
//快照
snapshotPusher() {
if (this.cilckSwitch) {
uni.showToast({
? ? title: '請勿頻繁點(diǎn)擊',
icon: 'none'
})
return
}
this.cilckSwitch = true
let that = this
uni.showLoading({
title:'人臉采集中嗜逻，請拿穩(wěn)設(shè)備',
icon:'none'
})
that.snapshTimeout = setTimeout(() => {
that.pusher.snapshot(
e => {
//拿到本地文件路徑
var src = e.tempImagePath;
uni.hideLoading();
//獲取圖片base64
that.getMinImage(src);
that.cilckSwitch = false
},
function(e) {
plus.nativeUI.alert('snapshot error: ' + JSON.stringify(e));
that.cilckSwitch = false
}
);
}, 3000);
},
//使用plus.zip.compressImage壓縮圖片
getMinImage(imgPath) {
let that=this;
uni.showLoading({
title: '數(shù)據(jù)對比中...',
icon: 'none'
})
let zipParams={};
uni.getSystemInfo({
? success: function (info) {
? ? if (info.platform == 'ios') {
zipParams={
src: imgPath,
dst: imgPath,
overwrite: true,
quality:70,
width:'300px',
height:'400px'
}
? ? } else {
? ? ? zipParams={
src: imgPath,
dst: imgPath,
overwrite: true,
quality:70,
rotate:270,
width:'400px',
height:'300px'
}
? ? }
? }
});
plus.zip.compressImage(zipParams,
zipRes => {
setTimeout(() => {
var reader = new plus.io.FileReader();
reader.onloadend = res => {
//獲取圖片base64
var speech = res.target.result; //base64圖片
// console.log(speech)
that.imgData = speech;
uni.hideLoading();
that.goFace();
};
//一定要使用plus.io.convertLocalFileSystemURL將target地址轉(zhuǎn)換為本地文件地址，否則readAsDataURL會找不到文件
reader.readAsDataURL(plus.io.convertLocalFileSystemURL(zipRes.target));
}, 1000);
},
function(error) {
console.log('Compress error!', error);
}
);
},
//人臉照片校驗
goFace(){
let that=this;
let images=that.imgData;
// #ifdef APP
// uni.getSystemInfo({
//? success: function (info) {
//? ? if (info.platform == 'ios') {
// images=images.replace('data:image/png;base64,','');
//? ? } else {
//? ? ? images=images.replace('data:image/jpeg;base64,','');
//? ? }
//? }
// });
images=images.replace('data:image/jpeg;base64,','');
// console.log(images);
// return false;
that.req({
url: 'xxxxxxxxxxxxx',
Loading: true,
data: {
realname: that.realname,
idcard: that.idcard,
image:images
},
success(res) {
if (res.code == 200) {
uni.setStorageSync('is_realuser','1');//0 未實名? 1已實名
uni.showToast({
title: "恭喜您缭召，認(rèn)證成功栈顷！",
duration:2000
})
setTimeout(function() {
uni.switchTab({
url:'/pages/shouye/index'
})
}, 2000);
}else{
uni.showToast({
title: res.msg,
icon: 'none',
duration:3000
})
setTimeout(function(){
uni.navigateBack();
},2000)
}
}
})
// #endif
},
},
}
</script>
<style lang="scss">
.text_head {
font-size: 36rpx;
font-weight: bold;
padding-left: 30rpx;
box-sizing: border-box;
margin-top: 48rpx;
}
button::after {
border: none;
background: none;
color: none;
}
.btn_1 {
width: 690rpx;
height: 98rpx;
border-radius: 10rpx;
margin:300rpx auto 0;
font-size: 32rpx;
font-weight: 400;
color: #FFFFFF;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
.face-icon{
margin:80rpx auto;
display:flex;
flex-direction: row;
align-items: center;
justify-content: center;
.icon{
width:300rpx;
height:300rpx;
}
}
.phone_login {
// padding-bottom: 200rpx;
width: 100vw;
min-height: 100vh;
box-sizing: border-box;
position: relative;
}
</style>
