公司小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

162 lines
3.6 KiB

<!--实名认证页面-->
<template>
<view class="back">
<u-navbar
title="实名认证"
:safeAreaInsetTop="true"
:fixed="true"
bgColor="#FFFFFF00"
:placeholder="true"
:border="true"
/>
<u-line :dashed="false" color="#E2E2E2" customStyle="border: 1rpx solid #E2E2E2;"></u-line>
<text class="top_text">请完善您的个人信息</text>
<u-gap height="50rpx"/>
<view class="form_out_box_global">
<u-form
labelPosition="left"
ref="form1"
:model="player"
:rules="rules"
>
<u-form-item v-for="(item,index) in rules"
:key="item.value"
:prop="index"
borderBottom
@click="onTouchOneItem"
>
<view class="form_item_global">
<text class="form_title_global">{{item.title}}</text>
<input
:placeholder="item.message"
class="form_input_global"
:value="item.value"
placeholder-class="form_input_placeholder_global"
@blur="(obj)=>{
onBlurCallback(index,obj);
}"
/>
</view>
</u-form-item>
</u-form>
<view class="attention_box">
<text class="attention_title">注意事项</text>
<u-parse
:content="content"
class="attention_info"
></u-parse>
</view>
</view>
<button class="confirm_button_global">确定</button>
</view>
</template>
<script>
export default {
onLoad() {
console.log(this.$refs.form1);
console.log(this.rules);
this.$refs.form1.setRules(this.rules);
},
data() {
return {
content : '<p>实名认证所获取的信息均只会用于进行实名认证,不用作其他用途.</p><p> 您所输入的银行卡账号信息必须在实名认证的人名下.</p>',
player : this.$Define.Player,
rules : {
"realName" : {
type : 'string',
title : '姓名',
message : '请输入您的真实姓名',
value : this.$Define.Player.realName,
validator:(obj)=>{
this.player.realName = obj.detail.value;
},
},
"idNumber" : {
type : 'string',
title : '身份证号',
message : '请输入您的身份证号',
value : this.$Define.Player.idNumber,
validator:(obj)=>{
this.player.idNumber = obj.detail.value;
},
},
"bankId" : {
type : 'string',
title : '银行卡号',
message : '请输入您的银行卡号',
value : this.$Define.Player.bankId,
validator:(obj)=>{
this.player.bankId = obj.detail.value;
},
},
"bankAddress" : {
type : 'string',
title : '开户行',
message : '请输入您的开户行',
value : this.$Define.Player.bankAddress,
validator:(obj)=>{
this.player.bankAddress = obj.detail.value;
},
},
},
};
},
methods:{
///点击了某个item反馈
onTouchOneItem(prop){
},
///当前某个表单输入发生了改变的时候回调
onBlurCallback(key,obj){
var item = this.rules[key];
if(item != null){
item.validator(obj);
}
},
},
}
</script>
<style lang="scss" scoped>
.top_text{
width: 288rpx;
height: 45rpx;
font-size: 32rpx;
font-weight: bold;
color: #333333;
opacity: 1;
position: relative;
left: 24rpx;
top: 38rpx;
}
.attention_box{
width: 702rpx;
height: 240rpx;
//background-color: #0081FF;
border-radius: 20rpx;
position: relative;
top: 30rpx;
}
///注意事项
.attention_title{
height: 37rpx;
font-size: 26rpx;
font-weight: 400;
line-height: 37rpx;
color: #666666;
opacity: 1;
position: absolute;
}
.attention_info{
text-indent: 2em;
font-size: 24rpx;
font-weight: 400;
line-height: 40rpx;
position: absolute;
top: 50rpx;
color: #999999;
}
</style>