zhapp/pages/wallet/bankCardDetails.vue

<template>
	<view class="page" :style="{pointerEvents:carInfo.auditStatus!='2'?'none':''} ">
		<view class="view">
			<u--form labelPosition="left" :model="carInfo" :rules="carRules" ref="uForm" labelWidth="100"
				errorType="message">
				<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="银行卡号" borderBottom prop="bankCardNumber" :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" :required="true" borderBottom @tap="carnatureShow=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="auditProgress mt-2">
			<uni-stepBar :stepList="stepList"></uni-stepBar>
		</view>
		<view class="footer" v-if="carInfo.auditStatus=='2'">
			<view class="submit-btn" @click="submitAudit">
				再次提交
			</view>
		</view>
		<u-picker :show="carnatureShow" :columns="bnklist" keyName="label" @cancel="carnatureShow=false"
			@confirm="dictionaryConfirm" @close="carnatureShow=false" :closeOnClickOverlay="true"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepList: [],
				carnatureShow: false,
				carInfo: {},
				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() {

		},
		onLoad(options) {
			if (options) {
				this.carInfo = JSON.parse(options.info);
				this.stepList = this.carInfo.sysUserJzgInfoBankCardRecordList;
			}
		},
		methods: {
			//提交审核
			async submitAudit() {
				this.$refs.uForm.validate().then(async res => {
					let params = {
						userJzgInfoId: this.carInfo.userJzgInfoId,
						bankCardNumber: this.carInfo.bankCardNumber,
						bankName: this.carInfo.bankName,
						bankAddress: this.carInfo.bankAddress,
						cardHolderName: this.carInfo.cardHolderName,
						cardHolderMobile: this.carInfo.cardHolderMobile,
					}
					let bankres = await this.$http.post('/userInfo/addBankCard', params) //添加银行卡
					if (bankres.code == 200) {
						uni.showToast({ //提示
							icon: 'none',
							title: bankres.msg,
							duration: 1000,
						})
						setTimeout(() => {
							uni.navigateBack(-1)
						}, 1500)
					} else {
						uni.showToast({ //提示
							icon: 'none',
							title: bankres.msg,
						})
					}
				}).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;
		}
	}

	.auditProgress {
		padding: 30rpx;
		box-sizing: border-box;
		background: #fff;
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 25rpx 30rpx 55rpx;

		.submit-btn {
			background: #FDE935;
			padding: 20rpx;
			box-sizing: border-box;
			font-size: 36rpx;
			color: #1F1F1F;
			font-weight: bold;
			text-align: center;
			border-radius: 58rpx 58rpx 58rpx 58rpx;
		}
	}
</style>