xiaochengxu/pages/Verified/Verified.vue

<!--实名认证页面-->
<template>
	<view class="back">
		<u-navbar
			title="实名认证"
			:safeAreaInsetTop="true"
			:fixed="true"
			bgColor="#FFFFFF00"
			:placeholder="true"
			:border="true"
			@leftClick="onTouchBackButton"
		/>
		<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 style="font-size: 28rpx;font-weight: 400;color: #666666;">注意事项</text>
				<u-parse
					:content="content"
					class="attention_info"
				></u-parse>
			</view>
		</view>
		<u-gap height="15rpx"/>
		<button class="confirm_button" @click="onTouchConfirmButton">确定</button>
	</view>
</template>

<script>
	var Define = getApp().globalData.Define;
	var Player	= getApp().globalData.Player;
	import {post} from '@/common/api.js'
	export default {
		onLoad() {
			this.$refs.form1.setRules(this.rules);
		},
		data() {
			return {
				content : '<p>1.实名认证获取的信息均只会用于进行实名认证.</p><p>2.您所输入的银行卡账号信息必须在实名认证的人名下.</p><p>3.实名认证信息不会保存到本地，如果您需要修改，请重新填写.</p>',
				player : Player,
				rules : {
					"username" : {
						type : 'string',
						title : '姓名',
						message : '请输入您的真实姓名',
						value : Player.username,
						validator:(obj)=>{
							this.player.username = obj.detail.value;
						},
					},
					"identitycardnum" : {
						type : 'string',
						title : '身份证号',
						message : '请输入您的身份证号',
						value : Player.identitycardnum,
						validator:(obj)=>{
							this.player.identitycardnum = obj.detail.value;
						},
					},
					"bankcard"   : {
						type : 'string',
						title : '银行卡号',
						message : '请输入您的银行卡号',
						value : Player.bankcard,
						validator:(obj)=>{
							this.player.bankcard = obj.detail.value;
						},
					},
					"deposit" : {
						type : 'string',
						title : '开户行',
						message : '请输入您的开户行',
						value : Player.deposit,
						validator:(obj)=>{
							this.player.deposit = obj.detail.value;
						},
					},
				},
			};
		},
		methods:{
			///点击了某个item反馈
			onTouchOneItem(prop){
				
			},
			///当前某个表单输入发生了改变的时候回调
			onBlurCallback(key,obj){
				var item = this.rules[key];
				if(item != null){
					item.validator(obj);
				}
			},
			///点击了返回按钮
			onTouchBackButton(){
				uni.navigateBack({
					
				});
			},
			///点击了提交按钮
			async onTouchConfirmButton(){
				//收集信息，交给服务器
				var username 		= this.player.username;
				var identitycardnum	= this.player.identitycardnum;
				var deposit			= this.player.deposit;
				var bankcard		= this.player.bankcard;
				///下方代码仅供测试用
				let data		= {
					username : username,
					identitycardnum : identitycardnum,
					deposit : deposit,
					bankcard : bankcard,
				};
				uni.showLoading();
				var res = await post('users/authrealname',data);
				console.log("实名认证返回：",res);
				uni.hideLoading();
				if(res.length <= 1){
					return;
				}
				let info = res[1];
				let code = info.data.code;
				if(code == 0){
					//成功了。
					this.player.needrealname = 0;
					uni.navigateBack();
				}
			}
		},
	}
</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{
		width: 104rpx;
		font-size: 26rpx;
		font-weight: 400;
		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;
	}
	.confirm_button{
		width: 702rpx;
		height: 90rpx;
		background: #D49B4B;
		opacity: 1;
		border-radius: 93rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		position: fixed;
		font-size: 36rpx;
		font-weight: 400;
		color: #FFFFFF;
		bottom: 40rpx;
		left: 24rpx;
	}
</style>