BlockChainH5/pages/certification/personal.vue

<template>
	<view>
		<!-- 填写姓名 -->
		<view class="password">
			<view class="group">
				<view class="inputs">
					<label>真实姓名</label>
					<input type="text" v-model="nikcName" placeholder="请输入您的真实姓名" />
				</view>
				<view class="inputs">
					<label>身份证件号</label>
					<input type="idcard" v-model="idcardNo" placeholder="请输入身份证件号码" />
				</view>
			</view>
		</view>
		<!-- 上传证件号 -->
		<view class="idcard-flex">
			<view class="idcard-item">
				<view class="idcard-title">
					<text>上传身份证正面</text>
				</view>
				<view class="idcard-block positive">
					<image :src="positive.showpath" mode="aspectFit" @click="upload('positive')"/>
				</view>
			</view>
			<view class="idcard-item">
				<view class="idcard-title">
					<text>上传身份证背面</text>
				</view>
				<view class="idcard-block reverse">
					<image :src="reverse.showpath" mode="aspectFit" @click="upload('reverse')"></image>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="buttons">
			<button type="default" @click="submitPersonal">提交认证信息</button>
		</view>
	</view>
</template>

<script>
	import { personal } from '@/apis/interfaces/certification'
	import { uploads } from '@/apis/interfaces/uploading'
	export default {
		data() {
			return {
				positive: {
					showpath: '',
					path: ''
				},
				reverse : {
					showpath: '',
					path: ''
				},
				nikcName: '',
				idcardNo: ''
			}
		},
		methods: {
			// 创建钱包
			submitPersonal(){
				if(this.nikcName === '' || this.idcardNo === ''){
					uni.showToast({
						icon: 'none',
						title: '真实姓名或身份证号不能为空'
					})
					return
				}
				personal({
					name: this.nikcName,
					id_card: this.idcardNo,
					front_card: this.positive.path,
					back_card: this.reverse.path,
				}).then(res=>{
					uni.showModal({
						title: '提示',
						content: '个人认证信息已提交，请耐心等待审核',
						showCancel: false,
						confirmColor: '#8b64fd',
						success: modalRes => {
							this.$Router.back()
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},
			// 上传身份证
			upload(key){
				uni.chooseImage({
					count: 1,
					success: files=> {
						uploads([{
							uri: files.tempFilePaths[0]
						}]).then(res => {
							this[key] = {
								showpath: res.url[0],
								path: res.path[0]
							}
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 副标题
	.sub-title{
		color: $text-gray;
		text-align: center;
		margin: $margin * 2 $margin;
		font-size: $title-size-m;
	}
	// 上传证件
	.idcard-flex{
		display: flex;
		margin-top: $margin - 10;
		background: white;
		padding: $padding $padding/2;
		.idcard-item{
			margin: 0 $margin/2;
			width: calc(50% - #{$margin});
			.idcard-title{
				text-align: center;
				color: $text-gray;
				font-size: $title-size-sm;
				padding-bottom: $padding;
			}
			.idcard-block{
				position: relative;
				border:solid 1rpx $border-color-lg;
				background-color: white;
				padding-top: 63%;
				background-position: center;
				background-size: 36%;
				background-repeat: no-repeat;
				overflow: hidden;
				box-sizing: border-box;
				&.positive{
					background-image: url(../../static/background/idcard-positive.png);
				}
				&.reverse{
					background-image: url(../../static/background/idcard-reverse.png);
				}
				image{
					position: absolute;
					top: 0;
					left: 0;
					height: 100%;
					width: 100%;
					z-index: 2;
				}
			}
		}
	}
	// 身份信息
	.password{
		.prompt{
			margin-top: $margin * 2;
			font-size: $title-size-m;
			color: $mian-color;
		}
		.group{
			background-color: white;
			.inputs{
				position: relative;
				height: 90rpx;
				padding-left: 220rpx;
				padding-right: $padding;
				&::before{
					position: absolute;
					left: $margin;
					bottom: 0;
					right: 0;
					height: 1rpx;
					background: $border-color;
					content: " ";
				}
				&:last-child::before{
					display: none;
				}
				label{
					position: absolute;
					left: $margin;
					height: 90rpx;
					line-height: 90rpx;
					color: $text-gray;
					font-size: $title-size-lg;
				}
				input{
					height: 90rpx;
					line-height: 90rpx;
					font-size: $title-size-lg;
				}
			}
		}
	}
	// 按钮
	.buttons{
		padding: $padding;
		button{
			height: 90rpx;
			line-height: 90rpx;
			background-color: $mian-color-deep;
			border-radius: 0;
			color: white;
			font-size: $title-size-lg;
			&::after{
				border: none;
			}
		}
	}
</style>