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

<template>
	<view class="">
		<navigation>
			Add 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 Accout'"/>
					</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">
						<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>
		<button @click="submit" class="login-btn"  :class="btncol==1?'on':''" :disabled="btncol==1?false:true">
			Continue
		</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,
				
					form: {
								acctName: '',
								bankCode: '',
								baName:'',
								acctId:'',
								state:'',
								city:'',
								mobile:'',
								email:'',
								ticket:'',
							},
							rules: {
								name: [
									{ 
										required: true, 
										message: 'Please enter your name', 
										// 可以单个或者同时写两个触发验证方式 
										trigger: ['blur'],
									},
								],
								code: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter IFSC Code', 
										trigger: 'blur'
									}
								],
								baName: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter Bank Name', 
										trigger: 'blur'
									}
								],
								accout: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter Bank Accout', 
										trigger: 'blur'
									}
								],
								state: [
									{
									    required: true,
										// min: 5, 
										message: 'Please enter State/Territory', 
										trigger: 'blur'
									}
								],
								city: [
									{
										// min: 5, 
										message: 'Please enter city', 
										trigger: 'blur'
									}
								],
								mobile: [
									{
										required:true,
										// min: 5, 
										message: 'Please enter Mobile Number', 
										trigger: 'blur'
									}
								],
								email: [
									{
										// min: 5, 
										message: 'Please enter email', 
										trigger: 'blur'
									}
								],
							}
			}
		},

		onLoad() {
	        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) {
								const post = api.bankcardList(this.form)
										post.then(res => {
										  console.log(res,333333)
										  uni.showToast({
										  	title: 'Added successfully',
										  	icon: 'success',
										  	duration: 2500
										  })
											})
											.catch(e => {
												uni.showToast({
													title: e,
													icon: 'none',
													duration: 2500
												})
											})
							} else {
								console.log('验证失败');
							}
						});
					}
		
}

			}

		
	
</script>

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