From 218dde58c44619b6f5bb0f32a5da7ab494032c29 Mon Sep 17 00:00:00 2001
From: "453530270@qq.com" <aa123456>
Date: Thu, 25 Jan 2024 12:29:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=AA=E4=BA=BA=E8=AE=A4=E8=AF=81=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/user/mycertinfo/personverify.vue | 214 ++++++++++++++++++++++++-
 1 file changed, 211 insertions(+), 3 deletions(-)

diff --git a/pages/user/mycertinfo/personverify.vue b/pages/user/mycertinfo/personverify.vue
index 8183fd0..3e65466 100644
--- a/pages/user/mycertinfo/personverify.vue
+++ b/pages/user/mycertinfo/personverify.vue
@@ -1,6 +1,84 @@
 <template>
-	<view>
+	<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>
 
@@ -8,7 +86,8 @@
 	export default {
 		data() {
 			return {
-				
+				//身份证扫描件
+				pernalJust:"",
 			}
 		},
 		methods: {
@@ -17,6 +96,135 @@
 	}
 </script>
 
-<style>
+<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>