CBB3/pages/user/bank/save/bank.vue

<style lang="scss">
	.app-body{
		padding: 10px 0;
		.input-form {
			background: #fff;
			.item{
				padding: 35rpx 20rpx;
				border-bottom: 1px solid #f1f1f1;
				.label{
					width: 86px;
					font-weight: 400;
					color: #333;
				}
				.value{
					width: calc(100% - 86px);
				}
			}
			
		}
	}
	.input-placeholder {
	    color: #999;
	}
	
	.sbtn{
		font-size: 14px;
		color: #DB292B;
		margin-right: 10rpx;
	}
	.no-sbtn{
		font-size: 14px;
		color: #999999;
		margin-right: 10rpx;
	}
	
	.foot{
		padding: 40rpx 60rpx;
	}
	
	.btn{
		background: #DB292B;
		border-radius: 60rpx;
		text-align: center;
		font-weight: bold;
		font-size: 28rpx;
		padding: 30rpx 0;
		color: #FAFAFA;
	}
	
</style>
<template>
	<view class="app-body">
		
		<view class="input-form">
			<view class="item fx-r fx-bc">
				<view class="label">姓名</view>
				<view class="value">
					<input type="text" v-model="form.name"  placeholder-class="input-placeholder" placeholder="请输入真实姓名" />
				</view>
			</view>
			
			<view class="item fx-r fx-bc">
				<view class="label">银行卡号</view>
				<view class="value">
					<input type="number" v-model="form.payment" placeholder-class="input-placeholder"  placeholder="请输入银行卡号" />
				</view>
			</view>
			
			<view class="item fx-r fx-bc">
				<view class="label">所属银行</view>
				<view class="value">
					<input type="text" v-model="form.bank_name"  placeholder-class="input-placeholder"  placeholder="请输入所属银行" />
				</view>
			</view>
			
			
			<view class="item fx-r fx-bc">
				<view class="label">所属支行</view>
				<view class="value">
					<input type="text" v-model="form.bank"  placeholder-class="input-placeholder"  placeholder="请输入所属支行" />
				</view>
			</view>
			
			
			<view class="item fx-r fx-bc">
				<view class="label">验证码</view>
				<view class="value fx-r ">
					<input type="number" v-model="form.verify"  placeholder-class="input-placeholder" style="width: 186px;" placeholder="请输入验证码" />
					<view class="fx-g1"></view>
					<view v-if="verifyCount <= 0" class="sbtn" @tap="getVcode">验证码</view>
					<view v-else class="no-sbtn">{{ verifyCount }} S</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="foot">
			<view class="btn ihover" @tap="tapSubmit">保存</view>
		</view>
		
	</view>
	
	
</template>


<script>
	import {mapState,mapMutations} from 'vuex';
	export default {
		computed: mapState(['user']),
		data() {
			return {
				form : {},
				verifyCount : 0,
				type : 3
			}
		},
		onLoad(options) {
			this.getData();
		},
		methods: {
		
			getData:function(e){
				uni.showLoading({ title: '获取数据中..' });
				var that = this;
				this
					.request
					.post("getBankItem",{type : this.type})
					.then(res => {
					uni.hideLoading();	
					if(res.code == 200) {
						if(res.data != null) this.form = res.data;
					} else {
						that.utils.Tip(res.msg);
					}
				}).catch(res => {
					uni.hideLoading();
					that.utils.Tip(res.msg);
				});
			},
			
			getVcode: function() {
				if (this.verifyCount > 0) return;
				uni.showLoading({ title: "获取中..."});
				this
					.request
					.post("userYzm",{type : "bank"})
					.then(res => {
						uni.hideLoading();
						if (res.code == 200) {
							if (res.data.status == 2) {
								this.utils.CountDowm(res.data.time, (e, s) => {
									this.verifyCount = e;
								});
							}
			
							if (res.data.status == 1) {
								this.utils.CountDowm(120, (e, s) => {
									this.verifyCount = e;
								});
							}
						} else {
							uni.showToast({
								title: res.msg,
								mask: true,
								icon: 'none'
							});
						}
					})
					.catch(err => {
						uni.showToast({
							title: '获取失败',
							mask: true,
							icon: 'none'
						});
						uni.hideLoading();
					});
			},
			
			
			
			tapSubmit:function(e){
				
				if(this.form.name == ""){
					uni.showToast({
						title:"请输入真实姓名",icon:"none",mask:true
					})
					return;
				}
				
				if(this.form.payment == ""){
					uni.showToast({
						title:"请输入银行卡号",icon:"none",mask:true
					})
					return;
				}
				
				if(this.form.bank == ""){
					uni.showToast({
						title:"请输入卡归属银行",icon:"none",mask:true
					})
					return;
				}
					
				if (this.form.verify == '') {
					uni.showToast({
						title: '请输入验证码',
						mask: true,
						icon: 'none'
					});
					return;
				}	
				
				uni.showLoading({ title: '提交数据中..' });
				this.request
				.post("bankSave",{
					...this.form,
					type : this.type
				})
				.then(res=>{
					uni.hideLoading();
					if(res.code == 200) {
						uni.navigateBack();
					} else {
						uni.showToast({ title:res.msg,icon:"none",mask:true});
					}
				})
				.catch(res=>{
					uni.hideLoading();
					uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
				});
			}
		}
	}
</script>