zhapp/pages/wallet/addBankCard.vue

<template>
	<view class="page">
		<view class="view">
			<u--form labelPosition="left" :model="carInfo" :rules="carRules" ref="uForm" labelWidth="100"
				errorType="toast">
				<u-form-item label="持卡人姓名" borderBottom prop="cardHolderName" :required="true">
					<u--input v-model="carInfo.cardHolderName" border="none" clearable placeholder="请输入持卡人姓名"
						placeholderStyle="text-align:right;" maxlength="20"></u--input>
				</u-form-item>
				<u-form-item label="持卡人手机号" borderBottom prop="cardHolderMobile" :required="true">
					<u--input v-model="carInfo.cardHolderMobile" border="none" type="number" clearable
						placeholder="请输入持卡人手机号" placeholderStyle="text-align:right;" maxlength="11"></u--input>
				</u-form-item>
				<u-form-item label="银行卡号" prop="bankCardNumber" borderBottom :required="true">
					<u--input v-model="carInfo.bankCardNumber" border="none" type="number" clearable
						placeholder="请输入15-19位的银行卡号" placeholderStyle="text-align:right;" maxlength="19"></u--input>
				</u-form-item>
				<u-form-item label="银行" prop="bankName" borderBottom @tap="carnatureShow=true" :required="true">
					<u--input v-model="carInfo.bankName" disabled disabledColor="#ffffff" suffixIcon='arrow-down'
						suffixIconStyle="color:#333;font-size:30rpx" placeholder="请选择"
						placeholderStyle="text-align:right;" clearable border="none"
						style="pointer-events: none"></u--input>
				</u-form-item>
				<u-form-item label="开户行" prop="bankAddress" :required="true">
					<u--input v-model="carInfo.bankAddress" border="none" clearable placeholder="请输入开户行"
						placeholderStyle="text-align:right;" maxlength="20"></u--input>
				</u-form-item>

			</u--form>
		</view>
		<view class="btn dis a-c j-c " @click="submitAudit">
			提交审核
		</view>
		<u-picker :show="carnatureShow" :columns="bnklist" keyName="label" @cancel="carnatureShow=false"
			@confirm="dictionaryConfirm" @close="carnatureShow=false" :closeOnClickOverlay="true"></u-picker>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				carnatureShow: false,
				carInfo: {
					userJzgInfoId: "",
					bankCardNumber: "",
					bankName: "",
					bankAddress: "",
					cardHolderName: "",
					cardHolderMobile: "",
				},
				carRules: {
					cardHolderName: [{
						required: true,
						message: '请输入持卡人姓名',
						trigger: 'blur',
					}],

					cardHolderMobile: [{
						required: true,
						message: '请输入持卡人手机号',
						trigger: 'blur'
					}, {
						pattern: /^1[3-9]\d{9}$/,
						message: '请输入正确格式的手机号',
					}],
					bankCardNumber: [{
						required: true,
						message: '请输入卡号',
						trigger: 'blur',
					}],
					bankAddress: [{
						required: true,
						message: '请输入开户行',
						trigger: 'blur',
					}],
					bankName: [{
						required: true,
						message: '银行必选',
						trigger: 'change',
					}],


				},
				//银行卡下拉列表
				bnklist: [
					[{
							value: '1',
							label: '中国工商银行'
						},
						{
							value: '2',
							label: '中国农业银行'
						},
						{
							value: '3',
							label: '中国银行'
						},
						{
							value: '4',
							label: '中国建设银行'
						},
						{
							value: '5',
							label: '交通银行'
						},
						{
							value: '6',
							label: '中国邮政储蓄银行'
						},
						{
							value: '7',
							label: '招商银行'
						},
						{
							value: '8',
							label: '中信银行'
						},
						{
							value: '9',
							label: '中国光大银行'
						},
						{
							value: '10',
							label: '华夏银行'
						},
						{
							value: '11',
							label: '中国民生银行'
						},
						{
							value: '12',
							label: '广发银行'
						},
						{
							value: '13',
							label: '平安银行'
						},
						{
							value: '14',
							label: '上海浦东发展银行'
						},
						{
							value: '15',
							label: '兴业银行'
						},
						{
							value: '16',
							label: '浙商银行'
						},
						{
							value: '17',
							label: '渤海银行'
						},
						{
							value: '18',
							label: '恒丰银行'
						},
						{
							value: '19',
							label: '北京银行'
						},
						{
							value: '20',
							label: '上海银行'
						},
						{
							value: '21',
							label: '晋商银行'
						},
						{
							value: '22',
							label: '山西银行'
						},
						{
							value: '23',
							label: '农村商业银行'
						},
					],
				],

			}
		},
		onShow() {
			this.carInfo.userJzgInfoId = this.userInfo.sysUser.infoId;
		},
		onLoad() {},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			//提交审核
			submitAudit() {
				this.$refs.uForm.validate().then(async res => {
					let bankres = await this.$http.post('/userInfo/addBankCard', this.carInfo) //添加银行卡
					if (bankres.code == 200) {
						uni.showToast({ //提示
							icon: 'none',
							title: '银行卡添加成功'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: 1
							});
						}, 1000)
					}
				}).catch(errors => {
					uni.$u.toast(errors[0].message)
				})
				// 接口

			},
			//银行卡选择事件
			dictionaryConfirm(e) {
				this.carInfo.bankName = e.value[0].label
				this.carnatureShow = false;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #f8f8f8;
		height: calc(100vh - 88rpx);

	}

	//表单外容器
	.view {
		padding: 0 30rpx 0;
		box-sizing: border-box;
		background: #fff;
	}

	//覆盖表单样式
	::v-deep {
		.uni-input-input {
			text-align: right !important;
			font-weight: bold;
		}

		.uni-input-placeholder {
			color: #999;
		}

		.u-form-item__body {
			padding: 25rpx 0;
		}
	}

	//提交按钮
	.btn {
		background: #FDE935;
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 45rpx 45rpx 45rpx 45rpx;
		margin: 160rpx 40rpx 0;
		font-size: 36rpx;
		color: #1F1F1F;
		font-weight: bold;
	}
</style>