CBB3/pages/user/approve.vue

<template>
	<view>
		<view class="app-bg">
			<image src="/static/img/tream_bg.png"></image>
		</view>
		<view class="app-h">
			<uni-nav-bar color="#fff" :border="false" statusBar backgroundColor="transparent" left-icon="left" @clickLeft="utils.navigateBack()" fixed title="实名认证"></uni-nav-bar>
		</view>
		<view class="app-body">
			
			<view class="input-view">
				<view class="form-item fx-r fx-bc">
					<view class="label">姓名</view>
					<view class="input">
						<input type="text" v-model="name" placeholder="请输入姓名" />
					</view>
				</view>
				<view class="form-item fx-r fx-bc">
					<view class="label">身份证号码</view>
					<view class="input">
						<input type="idcard" v-model="idcard" placeholder="请输入身份证号码" />
					</view>
				</view>
			</view>
			
		</view>	
		
		<view style="padding: 0px 40px;margin-top: 40px;">
			<view class="btn" @tap="formSubmit">实名认证</view>
		</view>
	</view>
</template>



<script>
	import {mapState,mapMutations} from 'vuex';
	// #ifdef APP
	const aliyunVerify = uni.requireNativePlugin('AP-FaceDetectModule');
	// #endif

	
	export default {
		computed: mapState(['user']),
		data() {
			return {
				name:"",
				idcard : ""
			}
		},
		onLoad(options) {
			// #ifdef H5
				try{
					var url = new URL(window.location.href);
					var dataUrl = url.searchParams.get('response');
					if(dataUrl != null){
						var dataAr = JSON.parse(decodeURIComponent(dataUrl));
						if(dataAr.code == 1000) {
							uni.redirectTo({ url:"approve_ok"});
						} else if(dataAr.code == 1003) {
							uni.redirectTo({ url:"approve_error?error=您取消实名认证"});
						} else {
							uni.redirectTo({ url:"approve_error?error=验证失败，理由:" + dataAr.reason });
						//	uni.showModal({title: '系统提示',content: "",showCancel: false});
						}
					}
				}catch(ex){
					console.log(ex);
				}
			// #endif
			
		},
		methods: {
			formSubmit:function(e){
				if(!this.utils.isDefine(this.name)){
					this.utils.Tip("输入正确的姓名");
					return;
				}
				
				if(!this.utils.isDefine(this.idcard)){
					this.utils.Tip("请输入身份证号码");
					return;
				}
				var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if(!regIdNo.test(this.idcard)){  
					this.utils.Tip("请输入正确身份证号码");
					return;
				}
				let post = {name : this.name,idcard : this.idcard};
				// #ifdef H5
					post.metaInfo = JSON.stringify(window.getMetaInfo());
					post.url = window.location.href;
				// #endif
				
				// #ifdef APP
					post.metaInfo = aliyunVerify.getMetaInfo();
					let p = uni.getSystemInfoSync().platform;
					if (p === "ios") {
						post.metaInfo = JSON.stringify(post.metaInfo);
					}
					post.url = "";
				// #endif
				
				this.utils.loadIng("提交中..")
				this
					.request
					.post("setUserCert",post)
					.then(res => {
						uni.hideLoading();
						
						if(res.code == 200) {
							// #ifdef APP
								aliyunVerify.verify({
								    "certifyId":res.data.id,
								  }, 
								  function(response){
										if(response.code == 1000) {
											uni.redirectTo({
												url:"approve_ok"
											});
											return;
										} 
										
										if (res.code == 1001) {
											this.utils.showAlert({content:"验证失败，系统错误请重启APP重新验证"});
											return;
										}
										
										if (res.code == 1003) {
											return;
										}
										
										if (res.code == 2002) {
											this.utils.showAlert({content:"网络错误请检查是否开启网络连接"});
											return;
										}
										
										if (res.code == 2003) {
											this.utils.showAlert({content:"设备时间错误，请校验时候后重试"});
											return;
										}
										
										if (res.code == 2003) {
											this.utils.showAlert({content:"刷脸失败"});
											return;
										}
										//
										this.utils.showAlert({content:"验证失败，可能你当前手机环境存在异常！请更换在尝试。"});
								  }
								);
							// #endif
							
							// #ifdef H5
								location.href = res.data.url;
							// #endif
							
						}  else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
						
					})
					.catch(res => {
						uni.hideLoading();
						that.utils.showModal("加载失败，重新点击尝试！");
					});	
			}
			
		},
	}
</script>


<style lang="scss">
	.app-bg{
		position: absolute;
		image{width: 100vw;height: 45vw;}
	}
	.app-h{
		height: 45vw;
	}
	.app-body{
		.input-view{
			box-shadow: 0 2px 16px 1px rgba(89, 89, 89, .24) !important;
			background-color: #fff !important;
			margin-top: -80px !important;
			border-radius: 5px !important;
			padding: 0 15px;
			position: relative;
			z-index: 99;
			width: calc(100% - 40px - 30px);
			margin-left: 20px;
			.form-item{
				padding: 10px 0;
				font-size: 14px;
				color: #303133;
				line-height: 36px;
				.label{
					width: 100px;
				}
				.input{width: calc(100% - 100px);}
			}
			
		}
	}
	
	.btn{
		background: #DB292B;
		border-radius: 60rpx;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
		padding: 30rpx 0;
		color: #FAFAFA;
	}
</style>