why_in_h5/pages/user/mycertinfo/personverify.vue

<template>
	<view class="pvfbox">
		<view class="pvform">
			
			<view class="form-item">
				<input class="form-item--input" placeholder="姓名" v-model="pernalName"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="身份证号" v-model="pernalCard"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="户籍所在地"/>
			</view>
			
			<view class="form-item">
				<input  class="form-item--input" placeholder="联系地址"/>
			</view>
			<!-- 身份证扫描件 -->
			<view class="image-list" v-if="pernalJust!=''">
				<view class="image-preview" v-for="(image, imageIndex) in pernalJust[0]">
				  <image class="image" mode="aspectFill" :src="image.path"></image>
				</view>
			</view>
			<view class="form-item" v-else>
				<button class="form-item--input" @click="chooseImage('pernalJust')">身份证扫描件</button>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="联系电话"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="邮箱地址"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="银行账户账号"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="开户银行"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="开户行所在地"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="开户银行预留手机号"/>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="推荐中介服务机构"/>
				<view class="form-item-parts"></view>
			</view>
			
			<view class="form-item">
				<input class="form-item--input" placeholder="身份"/>
			</view>
			
			<view class="form-item">
				<input placeholder="认证费用"/>
			</view>
			
			<!-- 隐私政策等 -->
			<view class="privacy">
				<checkbox :checked="isTick" color="#4399ff" class="ckbox" @click="readpri"></checkbox>
				<view class="">
					我已阅读并同意网站的 《<text class="atxt" @click="gotopage('private')">隐私政策</text> 》和 
					《<text class="atxt" @click="gotopage('prototal')">用户注册协议</text>》
				</view>
			</view>
			
			<!-- 提交按钮 -->
			<view class="vf-button" @click="handleLogin">
			  <text>提交认证</text>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//身份证扫描件
				pernalJust:"",
			}
		},
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
.pvfbox{
	width: 100%;
	background: #fff;
	
	.pvform{
		padding: 10rpx;
		
	}
	
	// 输入框元素
	.form-item {
	  display: flex;
	  padding: 18rpx;
	  border-bottom: 1rpx solid #f3f1f2;
	  margin-bottom: 30rpx;
	  height: 96rpx;
	
	  &--input {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		flex: 1;
		height: 100%;
	  }
	
	  &--parts {
		min-width: 100rpx;
		height: 100%;
	  }

	}
	
	// 登录按钮
	.vf-button {
	  width: 100%;
	  height: 86rpx;
	  margin-top: 80rpx;
	  background: linear-gradient(to right, #242e4b, #242e4b);
	  color: #fff;
	  // border-radius: 80rpx;
	  box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.1);
	  letter-spacing: 5rpx;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	}
	// 协议
	.privacy{
		display: flex;
		margin-top: 10rpx;
		
		.ckbox{
			border-radius: 50%;
		}
		
		.atxt{
			color: #4399ff;
		}
	}
	
	.image-list {
	  display: flex;
	  padding: 0 20rpx;
	  margin-top: 20rpx;
	  margin-bottom: -20rpx;
	
	  &:after {
	    clear: both;
	    content: " ";
	    display: table;
	  }
	
	  .image {
	    display: block;
	    width: 100%;
	    height: 100%;
	  }
	
	  .image-picker,.image-preview {
	    width: 196rpx;
	    height: 196rpx;
	    margin-right: 30rpx;
	    margin-bottom: 30rpx;
	    float: left;
	
	    &:nth-child(3n+0) {
	      margin-right: 0;
	    }
	  }
	
	  .image-picker {
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    align-items: center;
	    border: 1rpx dashed #ccc;
	    color: #ccc;
	
	    .choose-icon {
	      font-size: 48rpx;
	      margin-bottom: 6rpx;
	    }
	
	    .choose-text {
	      font-size: 24rpx;
	    }
	  }
	
	  .image-preview {
	    position: relative;
	
	    .image-delete {
	      position: absolute;
	      top: -15rpx;
	      right: -15rpx;
	      height: 42rpx;
	      width: 42rpx;
	      line-height: 42rpx;
	      background: rgba(0, 0, 0, 0.64);
	      border-radius: 50%;
	      color: #fff;
	      font-weight: bolder;
	      font-size: 22rpx;
	      z-index: 10;
	      text-align: center;
	    }
	  }
	  // endl
	}
	
}
</style>