douhuo-h5/pages/sheet/idcard.vue

<template>
	<view class="content">
		<view class="idcard">
			<view class="idcardTitle">
				<view class="idcardTitle-name">
					身份认证
				</view>
				<view class="idcardTitle-tips">
					应监管要求，请先进行身份认证
				</view>
			</view>
			<view class="idcardImg">
				<view class="idcardImg-label" @click="updImg('frontCard')">
					<image class="idcardImg-img" mode="widthFix" :src="frontCard.showpath ? frontCard.showpath : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/5ed55d77ed9c1e818a943cd7b4b7d28a.png'"></image>
					<view class="idcardImg-text">
						点击上传正面
					</view>
				</view>
				<view class="idcardImg-label" @click="updImg('backCard')">
					<image class="idcardImg-img" mode="widthFix" :src="backCard.showpath ? backCard.showpath : 'https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/4a266e0dec95a3b15cf50ac58e37c478.png'"></image>
					<view class="idcardImg-text">
						点击上传反面
					</view>
				</view>
			</view>
			<view class="idcardInfo">
				<view class="idcardInfo-label">
					<view class="idcardInfo-name">
						姓名
					</view>
					<view class="idcardInfo-input active">
						{{realData.name ? realData.name : '待自动输入'}}
					</view>
				</view>
				<view class="idcardInfo-label">
					<view class="idcardInfo-name">
						身份证号
					</view>
					<view class="idcardInfo-input">
						{{realData.id_card ? realData.id_card : '身份证号'}}
					</view>
				</view>
				<view class="idcardInfo-label">
					<view class="idcardInfo-name">
						有效期限
					</view>
					<view class="idcardInfo-input">
						{{realData.expiration_date ? realData.expiration_date : '待自动输入'}}
					</view>
				</view>
			</view>
		</view>
		<view class="idcardBtn">
			<view class="idcardBtn-tips">
				<img src="@/static/imgs/card_ensure.png">个人信息安全保障中
			</view>
			<button class="idcardBtn-go" type="default" :disabled="realData == ''" @click="faceClick">立即认证</button>
		</view>
		
		<!-- <view @click="$Router.push({name: 'Authsuccess'})">认证成功后会-临时跳转</view> -->
	</view>
</template>

<script>
	import { realName, faceUrl } from '@/apis/interfaces/user'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				// 身份证正面
				frontCard:{
				    showpath: '',
				    path	: ''
				},
				
				// 身份证反面
				backCard:{
				    showpath: '',
				    path	: ''
				},
				
				realData	: '',   // 个人信息
				authShortUrl: ''  // 人脸识别地址-第三方
				
			}
		},
		onLoad() {},
		onShow() {
		    
		},
		methods: {
			// 认证信息
			realInfo() {
			    realName({
					front_card: this.frontCard.path,
					back_card : this.backCard.path,
					redirect_url: "https://web.douhuofalv.com/sheet/authSuccess",
					// redirect_url: "https://web.douhuotest.douhuofalv.com/sheet/authSuccess"
				}).then(res => {
			        this.realData     = res.certification
					this.authShortUrl = res.sign.authShortUrl
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 上传图片
			updImg(type){
				uni.chooseImage({
					count	: 1,
					success	: path => {
						uploads([{
							uri   : path.tempFilePaths[0]
						}], {
							driver: "private-oss"
						}).then(res => {
			                this[type].showpath = res.url[0]
			                this[type].path = res.path[0]
							if(this.frontCard.path !=='' && this.backCard.path !=='') {
								// 获取认证信息
								this.realInfo();
							}
						}).catch(err => {
							uni.showToast({
								title: err.message,
								icon : 'none'
							})
						})
					}
				})
			},
			
			// 人脸识别
			faceClick() {
				window.location.href = this.authShortUrl
				// const newUrl = this.authShortUrl
				// let faceUrl= encodeURIComponent(newUrl)
				// uni.navigateTo({
				//     url: '/webview/webview?faceUrl=' + faceUrl
				// });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: $padding;
		box-sizing: border-box;
		height: 100vh;
		overflow-y: scroll;
	}
	.idcard {
		background-color: #ffffff;
		border-radius: $radius;
		box-sizing: border-box;
	}
	.idcardTitle {
		margin: 0 0 $margin + 20;
		line-height: 60rpx;
		.idcardTitle-name {
			color: $text-color;
			font-size: $title-size + 16;
			font-weight: 600;
		}
		.idcardTitle-tips {
			color: #7c8495;
			font-size: $title-size-lg;
		}
	}
	
	.idcardImg {
		display: flex;
		margin: $margin -15rpx;
		.idcardImg-label {
			flex: 2;
			text-align: center;
			background-color: #fdf4f5;
			padding: $padding $padding + 10 $padding + 58;
			margin: 0 15rpx;
			position: relative;
			border-radius: $radius-sm;
			overflow: hidden;
			.idcardImg-img {
				width: 100%;
			}
			.idcardImg-text {
				text-align: center;
				position: absolute;
				width: 100%;
				background-color: $mian-color;
				color: #ffffff;
				left: 0;
				bottom: 0;
				line-height: 68rpx;
				font-size: $title-size-m;
				opacity: .9;
			}
		}
	}
	
	.idcardInfo-label {
		display: flex;
		line-height: 120rpx;
		border-bottom: 2rpx solid #f5f5f5;
		&:last-child {
			border: none;
		}
		.idcardInfo-name {
			flex: 1;
			color: #637392;
		}
		.idcardInfo-input {
			color: #d2d5dd;
			&.active {
				color: #000000;
			}
		}
	}
	
	.idcardBtn {
		margin-top: $margin * 4;
		text-align: center;
		padding: 0 $padding;
		box-sizing: border-box;
		.idcardBtn-tips {
			color: #8091aa;
			line-height: 90rpx;
			font-size: $title-size-m;
			img {
				width: 40rpx;
				height: 40rpx;
				vertical-align: -10rpx;
				margin-right: 5rpx;
			}
		}
		.idcardBtn-go {
			background-color: $mian-color;
			color: #ffffff;
			border-radius: $radius * 3;
			line-height: 90rpx;
			font-size: $title-size + 2;
			&[disabled] {
				background-color: #fdc5d3;
			}
		}
	}
</style>