web-zk-h5/pages/mine/realName/realName.vue

<template>
	<view class="content">
		<view class="theform">
			<u--form labelPosition="left" :model="dataForm" :rules="rules" ref="uForm">
				<u-form-item required label-width="180rpx" :label="'真实姓名'" prop="accountName" ref="item1">
					<u--input :placeholder="'请输入'" v-model="dataForm.accountName" disabledColor="#F5F5F5;"></u--input>
				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'性别'" prop="sex" ref="item1">
					<u-radio-group v-model="sexRadio" @change="radioGroupChange">
						<u-radio :customStyle="{marginRight: '16rpx'}" v-for="(item, index) in sexList" :key="index"
							:name="item.value">{{ item.label }}</u-radio>
					</u-radio-group>
				</u-form-item>
				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'证件类型'" prop="idName" @click="showCtype = true; " ref="item1">
					<u--input suffixIcon="arrow-right" readonly v-model="dataForm.idName" disabledColor="#ffffff"
						:placeholder="'请选择'">
					</u--input>
				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'证件号码'" prop="idCard" ref="item1">
					<u--input :placeholder="'请输入'" v-model="dataForm.idCard" disabledColor="#F5F5F5;"></u--input>
				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'银行名称'" @click="showAmount = true; " prop="bankName" ref="item1">
					<u--input suffixIcon="arrow-right" readonly v-model="dataForm.bankName" disabledColor="#ffffff"
						:placeholder="'请选择'">
					</u--input>


				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'银行卡号'" prop="cardNumber" ref="item1">
					<u--input :placeholder="'请输入'" v-model="dataForm.cardNumber" disabledColor="#F5F5F5;"></u--input>
				</u-form-item>

				<u-form-item required label-width="180rpx" :label="'开户支行'" prop="subBankName" ref="item1">
					<u--input :placeholder="'请输入'" v-model="dataForm.subBankName" disabledColor="#F5F5F5;"></u--input>
				</u-form-item>
				<u-form-item required @click="getDiqu" :label="'收货地址'" label-width="180rpx" prop="theaddress">
					<u--input v-model="dataForm.theaddress" readonly suffixIcon="arrow-right" disabledColor="#ffffff"
						:placeholder="'请选择'">
					</u--input>
				</u-form-item>

				<view class="view-class">
					<u-form-item required :label="'详细地址'" class="label-style" label-width="180rpx" prop="address">
						<u-textarea v-model="dataForm.address" placeholder-class="place-class" class="border-color"
            maxlength="200"
							:placeholder="'请输入'" />

					</u-form-item>
				</view>
				<u-form-item required label-width="180rpx" :label="'联系方式'" prop="phone" ref="item1">
					<u--input v-model="dataForm.phone" :placeholder="'请输入'"></u--input>
				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'验证码'" prop="verificationCode" ref="item1">
					<u--input v-model="dataForm.verificationCode" :placeholder="'请输入'">
						<template slot="suffix">
							<text style="color: #18ACFF;" @tap='getCode'>{{tips}}</text>
						</template>
					</u--input>

				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'证件(正面)'" >
					<uploadImg :ifsfz='true' @imageUploaded='imageUploaded1' prop="idFront" style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard1.png`"
						v-model="dataForm.idFront"></uploadImg>

				</u-form-item>
				<u-form-item required label-width="180rpx" :label="'证件(反面)'">
					<uploadImg :ifsfz='true' @imageUploaded='imageUploaded2' prop="idBack" style="margin-right: 30rpx;" :bgimg="`../../../static/images/idCard2.png`"
						v-model="dataForm.idBack"></uploadImg>

				</u-form-item>
				<u-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-code>
				<u-picker @cancel='showAmount=false' :show="showAmount" ref="uPicker" :columns="bankCardChioceList"
					@confirm="confirm" keyName='bankName'></u-picker>
				<u-picker @cancel='showCtype=false' :show="showCtype" ref="uPicker2" :columns="cardTypeList"
					@confirm="confirm2" keyName='label'></u-picker>
			</u--form>

		</view>
		<view class="btnbox">
			<u-button class="subbtn" @click="submit">{{'确定'}}</u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
		<v-address ref="address" @getAddressData="AddressData" :defaultCode="defaultCode"
			@addressData="addressData"></v-address>
	</view>
</template>

<script>
	import * as ban from "@/config/balance.js"
	import address from '@/components/address.vue'
	import uploadImg from '@/components/uploadImg.vue'
	export default {
		components: {
			'v-address': address,
			uploadImg
		},
		data() {
			return {
				showAmount: false,
				showCtype: false,
				dataForm: {
					bankName: "",
					cardNumber: "",
					pkBank: "",
					subBankName: "",
					accountName: "",
					idCard: "",
					pkProvince: "",
					pkCity: "",
					pkCounty: "",
					theaddress: "",
					idFront:"",
					idBack:""
				},
				sexRadio: 1,
				address: "",
				defaultCode: [],
				bankCardChioceList: [], //银行选择
				cardTypeList: [], //证件类型
				sexList: [{
						label: '男',
						value: 1
					},
					{
						label: '女',
						value: 2
					},
				],
				rules: {
					accountName: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					sexRadio: [{

						required: true,
						message: '请选择',
						trigger: 'change',
					}],
					idName: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					}],
					idCard: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					pkBank: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					}],
					address: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger:['blur', 'change']
					}],
					cardNumber: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					subBankName: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					theaddress: [{
						type: 'string',
						required: true,
						message: '请选择',
						trigger: ['change']
					}],
					idFront: [{

						required: true,
						message: '请上传',

					}],
					idBack: [{

						required: true,
						message: '请上传',

					}],
					phone: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],
					verificationCode: [{
						type: 'string',
						required: true,
						message: '请输入',
						trigger: ['blur', 'change']
					}],

				},
				tips: '',
				// refCode: null,
				seconds: 60,

			}
		},
		onLoad() {
			this.getList()

		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},

		methods: {
			imageUploaded1(url){
				this.dataForm.idFront= url
			},
			imageUploaded2(url){
				this.dataForm.idBack= url
			},
			// radio选择发生变化
			radioGroupChange(e) {
				this.dataForm.sex = e
				// console.log('🌈eeee',e)
			},
			AddressData(name) {
				this.dataForm.theaddress = name
			},
			getDiqu() {
				this.$refs.address.setShow()
			},
			addressData(diqu, obj) {
				this.dataForm.theaddress = diqu
				this.dataForm.pkProvince = obj.province
				this.dataForm.pkCity = obj.city
				this.dataForm.pkCounty = obj.county
				this.$forceUpdate()
			},

			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (this.dataForm.phone && this.$u.test.mobile(this.dataForm.phone)) {
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						ban.getVerification({
							phone: this.dataForm.phone
						}).then((res) => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						})
					} else {
						uni.$u.toast('倒计时结束后再发送');
					}
				} else {
					uni.$u.toast(this.dataForm.phone ? '手机号格式不正确' : '请先输入手机号')
					return
				}
			},
			end() {},
			start() {},
			getList() {
				ban.getBankCardChoiceList().then(res => {
					this.bankCardChioceList = [res.data]
				})
				//证件类型
				ban.getCardType().then((res) => {
					this.cardTypeList = [res.data];
				});
			},


			submit() {
				this.$refs.uForm.validate().then(res => {
					ban.addAuthentication(this.dataForm).then(res => {
						if (res.code == 200) {
							uni.$u.toast(res.msg)
							setTimeout(() => {
								uni.navigateBack()
							}, 1500);

						} else {

							uni.$u.toast(res.msg)
						}
					}).catch(err => {

					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
					return false
				})
			},
			confirm2(e) {
				this.dataForm.idName = e.value[0].label
				this.dataForm.idType = e.value[0].value
				this.showCtype = false
			},
			confirm(e) {
				this.dataForm.bankName = e.value[0].bankName
				this.dataForm.pkBank = e.value[0].pkId
				this.showAmount = false
			},

		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-input--radius,
	.u-input--square {
		border-radius: 12rpx;
		// border:2rpx solid #cccccc;
	}

	.content {
		background: #F2F2F2;

		.uni-textarea {
			height: 100rpx;
		}

		.theform {
			margin-top: 6rpx;
			background: #FFFFFF;
			padding: 20rpx 23rpx 48rpx 23rpx;

			.contentye {
				font-size: 28rpx;
				margin-left: 200rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
			}

		}

		.btnbox {
			margin-top: 38rpx;
			padding: 0 20rpx;

			.subbtn {
				background: #005BAC;
				border-radius: 46rpx;
				font-size: 30rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.getcodes {

			background: #2FBC42;
			border-radius: 38rpx;
			color: #fff;
		}


	}
</style>