LocalLivingServicesUniapp/pages/groupMeal/users/bankCard-edit.vue

<template>
	<view class="page-container">
		<u-navbar title="" :autoBack="true" :placeholder="true"></u-navbar>
		
		<view class="header-tips">
			<view class="name">添加银行卡</view>
			<view class="desc">请填写本人的银行卡信息</view>
		</view>

		<view class="form-section">
			<u-form :model="form" :rules="rules" ref="formRef" labelPosition="left" labelWidth="160"
				:labelStyle="{
					fontWeight: '500',
					fontSize: '28rpx',
					color: '#333333',
				}"		
			>
				<u-form-item label="存管银行" prop="bankName" @click="selectBank">
					<u-input v-model="form.bankName" placeholder="请选择"></u-input>
					<u-icon slot="right" name="arrow-right"></u-icon>
				</u-form-item>

				<u-form-item label="银行账号" prop="cardNumber">
					<u-input v-model="form.cardNumber" type="number" placeholder="请输入银行卡号"></u-input>
				</u-form-item>

				<u-form-item label="开户行" prop="branchName">
					<u-input v-model="form.branchName" placeholder="请输入开户行名称"></u-input>
				</u-form-item>
				
				<u-form-item label="姓名" prop="name">
					<u-input v-model="form.name" placeholder="请输入姓名"></u-input>
				</u-form-item>

				<u-form-item label="手机号" prop="phone">
					<u-input v-model="form.phone" type="number" placeholder="请输入手机号"></u-input>
				</u-form-item>
				
				<u-form-item label="短信验证码" prop="verificationCode">
					<u-input v-model="form.verificationCode" type="number" placeholder="6位数字"></u-input>
					<u-button slot="right" type="primary" size="mini" shape="circle" plain @click="getCode">{{tips}}</u-button>
				</u-form-item>
			</u-form>
		</view>
		
		<view class="agreement-section">
			<u-checkbox-group v-model="isAgreed">
				<u-checkbox name="agree" shape="circle" v-model="isAgreed">
					<text class="agreement-text">我已阅读并同意《用户服务协议》</text>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		
		<view class="footer-bar">
			<u-button type="primary" @click="submit">确认绑定</u-button>
		</view>

		<u-verification-code seconds="60" ref="uCode" @change="codeChange" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			form: {
				bankName: '',
				cardNumber: '',
				branchName: '',
				name: '',
				phone: '',
				verificationCode: '',
			},
			rules: {
				bankName: [{ required: true, message: '请选择存管银行', trigger: ['blur', 'change'] }],
				cardNumber: [{ required: true, message: '请输入银行卡号', trigger: ['blur', 'change'] }],
				branchName: [{ required: true, message: '请输入开户行名称', trigger: ['blur', 'change'] }],
				name: [{ required: true, message: '请输入姓名', trigger: ['blur', 'change'] }],
				phone: [{ required: true, message: '请输入手机号', trigger: ['blur', 'change'] }, { validator: (rule, value, callback) => uni.$u.test.mobile(value), message: '手机号码不正确' }],
				verificationCode: [{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] }, { len: 6, message: '验证码必须为6位' }],
			},
			tips: '',
			isAgreed: false,
		};
	},
	mounted() {
		this.$nextTick(() => {
			this.$refs.formRef.setRules(this.rules);
		});
	},
	methods: {
		selectBank() {
			// 模拟跳转到银行选择页面
			uni.showToast({ title: '跳转到银行选择页', icon: 'none' });
		},
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({ title: '正在获取验证码' });
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({ title: '验证码已发送', icon: 'none' });
					this.$refs.uCode.start();
				}, 1000);
			} else {
				uni.$u.toast('倒计时结束后再发送');
			}
		},
		submit() {
			if(this.isAgreed.length === 0) {
				uni.showToast({ title: '请先同意用户协议', icon: 'none' });
				return;
			}
			
			this.$refs.formRef.validate().then(res => {
				console.log('表单校验成功', this.form);
				// uni.showToast({ title: '绑定成功', icon: 'success' });
				// setTimeout(() => {
				// 	uni.navigateBack();
				// }, 1500);
			}).catch(errors => {
				
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.page-container {
	min-height: 100vh;
	background-color: #F7F8FC;
	.header-tips {
		color: #333333;
		padding: 20rpx 30rpx;
		text-align: center;
		.name {
			font-weight: 500;
			font-size: 40rpx;
		}
		.desc {
			font-weight: 400;
			font-size: 28rpx;
		}
	}
	.form-section {
		margin: 0 24rpx;
		padding: 20rpx 24rpx;
		background-color: #fff;

		::v-deep .u-form-item {
			padding: 6rpx 0;
			line-height: 1;
			.u-form-item--left__content {
				flex: none;
				.u-form-item--left__content--required {
					color: #fa3534; 
					left: auto;
					right: 0;
				}
			}
		}
	}
	.agreement-section {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		.agreement-text {
			font-size: 24rpx;
			color: #606266;
			margin-left: 10rpx;
		}
	}
}
.footer-bar {
	::v-deep .u-btn {
		width: 100%;
		height: 76rpx;
		border-radius: 54rpx;
		background: linear-gradient(90deg, #77B6FF 0%, #449AFF 100%);
		&.u-btn--primary--disabled {
			background: #a0cfff;
		}
	}
}
</style>