BlockChainH5/pages/certification/personal.vue

<template>
	<view>
		<!-- 副标题 -->
		<view class="sub-title">
			<text>请正确填写你的个人身份信息</text>
		</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" 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" mode="aspectFit" @click="upload('reverse')" />
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="buttons">
			<button type="default" @click="submitPersonal">提交认证信息</button>
		</view>
	</view>
</template>

<script>
	// import uploading from '@/apis/oss'
	import { personal } from '@/apis/interfaces/certification'
	export default {
		data() {
			return {
				positive: '',
				reverse: '',
				nikcName: '',
				idcardNo: ''
			}
		},
		mounted() {
			
		},
		methods: {
			// 创建钱包
			submitPersonal(){
				if(this.nikcName === '' || this.idcardNo === ''){
					uni.showToast({
						icon: 'none',
						title: '真实姓名或身份证号不能为空'
					})
					return
				}
				personal({
					name: this.nikcName,
					id_card: this.idcardNo
				}).then(res=>{
					uni.showModal({
						title: '提示',
						content: '您的身份认证已完成，是否立即激活钱包~',
						confirmText: '立即激活',
						confirmColor: '#009B69',
						cancelColor: '#666666',
						cancelText: '稍后激活',
						success: res=> {
							if(res.confirm) {
								uni.redirectTo({
									url: '../wallet/mnemonic'
								})
							}
							if(res.cancel) {
								uni.navigateBack()
							}
						}
					})
				}).catch(err => {
					uni.showToast({
						icon: 'none',
						title: err.message
					})
				})
			},
			// 上传身份证
			upload(type){
				uni.chooseImage({
					success(files){
						uni.showToast({
							icon: 'none',
							title: '暂未开放'
						})
						// let filesArr = files.tempFilePaths.map(val => {
						// 	return {
						// 		uri: val
						// 	}
						// })
						// uploading(filesArr)
					}
				})
			}
		}
	}
</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;
		padding: ($padding*2) $padding 0;
		.idcard-item{
			margin: 0 $margin;
			width: calc(50% - #{$margin * 2});
			.idcard-title{
				text-align: center;
				color: $text-gray;
				font-size: $title-size-m;
				padding-bottom: $padding;
			}
			.idcard-block{
				position: relative;
				border-radius: $radius-m;
				box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
				background-color: white;
				padding-top: 63%;
				background-position: center;
				background-size: 36%;
				background-repeat: no-repeat;
				overflow: hidden;
				&.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: 1;
				}
			}
		}
	}
	// 身份信息
	.password{
		padding: 0 $padding * 2;
		.prompt{
			margin-top: $margin * 2;
			font-size: $title-size-m;
			color: $mian-color;
		}
		.group{
			margin-top: $margin;
			border-radius: $radius-m;
			box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
			background-color: white;
			.inputs{
				padding: $padding $padding + 10;
				border-bottom: solid 1rpx $border-color;
				&:last-child{
					border-bottom: none;
				}
				label{
					color: $text-gray;
					font-size: $title-size-m;
				}
				input{
					height: 70rpx;
					line-height: 70rpx;
					font-size: $title-size;
				}
			}
		}
	}
	// 按钮
	.buttons{
		padding: $padding * 2;
		.text{
			text-align: center;
			line-height: 90rpx;
			height: 90rpx;
			margin-bottom: $margin * 2;
			font-size: $title-size-lg;
			color: $mian-color;
			font-weight: bold;
		}
		button{
			height: 90rpx;
			line-height: 90rpx;
			background-color: $mian-color;
			border-radius: $radius-lg;
			color: white;
			font-weight: bold;
			font-size: $title-size;
		}
	}
</style>