xiaochengxu/pages/Verified/Verified.vue

<!--实名认证页面-->
<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>