hire-wx-houxuanren/pagesD/bank-add.vue

<template>
	<view class="bank-add u-flex-col u-col-center">
		<view class="" style="text-align: left;width: 100%;">
			只能绑定与实名账号一致的用户的银行卡
		</view>
		<view class="back">
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入银行卡卡号" border="none" style="margin-bottom: 40rpx;" v-model="bank_no">
					<u--text text="银行卡号" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入开户行" border="none" v-model="bank_name">
					<u--text text="开户行" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;" >
				<u-input placeholder="请输入持卡人姓名" border="none" v-model="bank_user">
					<u--text text="持卡人姓名" color="#000" slot="prefix" margin="0 3px 0 0"
						style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入银行预留号码" border="none" v-model="bank_mobile">
					<u--text text="手机号" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
			<view class="" style="margin-bottom: 40rpx;">
				<u-input placeholder="请输入验证码" border="none" v-model="code">
					<u--text text="验证码" color="#000" slot="prefix" margin="0 3px 0 0" style="width: 188rpx;"></u--text>
				</u-input>
			</view>
		</view>
		<view class="add-btn" @click="save">
			保存
		</view>
	</view>
</template>

<script>
	import {
		setBank
	} from "@/units/inquire.js"
	export default {
		data() {
			return {
			bank_name: "",
			bank_no: "",
			bank_user: "",
			bank_mobile: "",
			code: ""
			}
		},
		onLoad() {

		},
		methods: {
			save() {
				if (!this.bank_name) {
					this.$u.toast('请填写银行名称')
					return
				}
				if (!this.bank_no) {
					this.$u.toast('请填写银行卡号')
					return
				}
				if (!this.bank_user) {
					this.$u.toast('请填写持卡人姓名')
					return
				}
				if (!thisbank_mobile) {
					this.$u.toast('请填写银行预留号码')
					return
				}
				if (!thiscode) {
					this.$u.toast('请输入验证码')
					return
				}
				uni.showLoading({
					mask: true,
					title: "请稍后"
				})
				setBank({
					bank_name: this.bank_name,
					bank_no: this.bank_no,
					bank_user: this.bank_user,
					bank_mobile: this.bank_mobile,
					code:this.code
				}).then(res => {
					this.$u.toast(res.msg)
					if (res.code == 1) {
						setTimeout(() => {
							uni.navigateBack()
						}, 800)
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.bank-add {
		background: #F3F3F3;
		height: 100vh;
		padding: 20rpx 32rpx 0;
		box-sizing: border-box;

		.back {
			width: 686rpx;
			height: 442rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			padding: 36rpx 24rpx;
			box-sizing: border-box;
			margin-top: 20rpx;
		}
		.add-btn{
			height: 92rpx;
			background: #0C66C2;
			border-radius: 20rpx;
			margin-top:60rpx ;
			width: 100%;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 92rpx;
			text-align: center;
		}
	}
</style>
<style scoped>
	::v-deep .u-text__value {
		width: 188rpx;
	}
</style>