|
|
|
@ -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> |
|
|
|
|
453530270@qq.com
2 years ago