first/pages/menu/bankCard/addBankCard/index.vue

<template>
	<view class="">
		<navigation v-if="form.id==null">
			Add Bank Card
		</navigation>
		<navigation v-if="form.id!=null">
			Modify Bank Card
		</navigation>
		<view class="login-body">
			<u-form :model="form" ref="uForm" :rules="rules">
				<u-form-item prop="acctName">
					<u-input v-model="form.acctName" :placeholder="'Actual Name'" @input="btnControl()" />
				</u-form-item>
				<u-form-item prop="bankCode">
					<u-input v-model="form.bankCode" :placeholder="'IFSC Code'" />
				</u-form-item>
				<u-form-item prop="bankName">
					<u-input v-model="form.bankName" :placeholder="'Bank Name'" />
				</u-form-item>
				<u-form-item prop="acctId">
					<u-input v-model="form.acctId" :placeholder="'Bank Account'" />
				</u-form-item>
				<u-form-item prop="certId">
					<u-input v-model="form.certId" :placeholder="'State/Territory'" />
				</u-form-item>
				<u-form-item prop="city">
					<u-input v-model="form.city" :placeholder="'City'" />
				</u-form-item>
				<u-form-item prop="mobile">
					+{{areaCode}}
					<u-input v-model="form.mobile" :placeholder="'Mobile Number'" />
				</u-form-item>
				<u-form-item prop="email">
					<u-input v-model="form.email" :placeholder="'Email'" />
				</u-form-item>
			</u-form>
			<!-- :class="btncol==1?'on':''" :disabled="btncol==1?false:true" -->
			<button @click="submit" class="login-btn on">
				Confirm
			</button>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api'
	import utils from '@/utils'
	import md5 from 'js-md5'
	import store from '@/store'
	import cont from "@/components/navigation/navigation.vue"
	export default {
		data() {
			return {
				// 判断按钮是否选中
				btncol: 0,
				areaCode: '',
				// 判断跳转到提现
				wit:'',
				form: {
					id: null,
					acctName: '',
					bankCode: '',
					acctId: '',
					city: '',
					mobile: '',
					email: '',
					ticket: '',
				},
				rules: {
					acctName: [{
							required: true,
							message: 'Please enter your name',
							// 可以单个或者同时写两个触发验证方式 
							trigger: ['change', 'blur'],
						},

					],
					bankCode: [{
						required: true,
						// min: 5, 
						message: 'Please enter IFSC Code',
						trigger: 'blur'
					}],
					bankName: [{
						required: true,
						// min: 5, 
						message: 'Please enter Bank Name',
						trigger: 'blur'
					}],
					acctId: [{
							required: true,
							// min: 5, 
							message: 'Please enter Bank Account',
							trigger: 'blur'
						},
						// {
						// 			min: 12,
						// 			max: 12,
						// 			message: 'Please enter twelve digits',
						// 			trigger: ['change','blur'],
						// 		},
					],
					certId: [{
						required: true,
						// min: 5, 
						message: 'Please enter State/Territory',
						trigger: 'blur'
					}],
					city: [{
						required: true,
						// min: 5, 
						message: 'Please enter city',
						trigger: 'blur'
					}],
					mobile: [{
							required: true,
							// min: 5, 
							message: 'Please enter Mobile Number',
							trigger: 'blur'
						},
						// {
						// 			min: 9,
						// 			max: 9,
						// 			message: 'Please enter nine digits',
						// 			trigger: ['change','blur'],
						// 		},

					],
					email: [{
							required: true,
							// min: 5, 
							message: 'Please enter email',
							trigger: 'blur'
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// this.$u.test.mobile()就是返回true或者false的
								return this.$u.test.email(value);
							},
							message: 'Mailbox format error',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
				}
			}
		},

		onLoad(item) {
			this.areaCode = uni.getStorageSync('siteInfo').areaCode
			this.form.ticket = uni.getStorageSync('logInfo').data;
			if (JSON.stringify(item) != '{}') {	
				if(item.wid=='widthdrawl'){
					this.wit=item.wid;
				}else{	
					var data = item.card.replace(/""/g, "");
					this.form = JSON.parse(data)
					this.form.ticket = uni.getStorageSync('logInfo').data;
					
				}
			
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		methods: {
			btnControl() {
				this.btncol = 1;
				if (this.form.name == '') {
					this.btncol = 0;
				}
			},


			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						uni.showLoading({})
						const post = api.bindBank(this.form)
						post.then(res => {
								if (res.errCode == 'SUCCESS') {
									if (this.form.id!=null||this.form.id!=''||this.form.id!=undefined) {
										uni.showToast({
											title: 'Successfully',
											icon: 'success',
											duration: 2500
										})
									} else {
										uni.showToast({
											title: 'Successfully',
											icon: 'success',
											duration: 2500
										})
									}
									if(this.wit=='widthdrawl'){
										setTimeout(() => {
											uni.navigateTo({
												url: '../../withdrawl/index'
											})
										}, 2000)
									}else{
										setTimeout(() => {
											uni.navigateTo({
												url: '../index'
											})
										}, 2000)
									}
								
								} else {
									uni.hideLoading()
									uni.showToast({
										title: 'Fail',
										icon: 'none',
										duration: 2500,
									})
								}
							})
							.catch(e => {				
								uni.hideLoading()
							uni.showToast({
								title: 'Fail',
								icon: 'none',
								duration: 2500,
							})
							})
					} else {
						console.log('验证失败');
					}
				});
			}

		}

	}
</script>

<style>
	@import './index.css';
</style>