MinNan/xueyuan_fenbao/kcXiangQing/baoMing.vue

<template>
	<view class="box">
		<u-navbar title="我要报名" :autoBack="true" bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:bold;color:#121212"></u-navbar>
		<!-- 表单 -->
		<view class="example">
			<uni-forms style="padding: 0 20rpx 0 20rpx" label-position="top" ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<uni-forms-item label="您的姓名" label-width="80px" required name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				<uni-forms-item label="您的联系电话" label-width="100px" required name="mobile">
					<uni-easyinput v-model="valiFormData.mobile" placeholder="请输联系电话" />
				</uni-forms-item>

				<uni-forms-item label="您的身份证" label-width="100px" required name="idCard">
					<uni-easyinput v-model="valiFormData.idCard" placeholder="请输入身份证号" />
				</uni-forms-item>
				<uni-forms-item label="参加人数" label-width="80px" required name="numberPeople">
					<uni-easyinput v-model="valiFormData.numberPeople" placeholder="请输入参加人数" />
				</uni-forms-item>
				<uni-forms-item label="参加人联系电话" label-width="120px" required name="participateMobile">
					<uni-easyinput v-model="valiFormData.participateMobile" placeholder="请输入参加人联系电话" />
				</uni-forms-item>
				<uni-forms-item label="备注">
					<uni-easyinput v-model="valiFormData.notesVal" placeholder="添加备注信息"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
			<view class="text-wrapper_3" @click="submit('valiForm')">
				<text>我要报名</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			/* 表单数据 */
			valiFormData: {
				name: '',
				mobile: '',
				participateMobile: '',
				idCard: '',
				numberPeople: '',
				notesVal: ''
			},
			/* 校验规则 */
			rules: {
				// 对name字段进行必填验证
				name: {
					// name 字段的校验规则
					rules: [
						// 校验 name 不能为空
						{
							required: true,
							errorMessage: '请填写姓名'
						},
						// 对name字段进行长度验证
						{
							minLength: 2,
							maxLength: 6,
							errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					// 当前表单域的字段中文名，可不填写
					label: '姓名',
					validateTrigger: 'submit'
				},
				/* 手机号校验 */
				mobile: {
					// mobile 字段的校验规则
					rules: [
						// 校验 mobile 不能为空
						{
							required: true,
							errorMessage: '请填写联系电话'
						},
						// 对mobile字段进行长度验证
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '{label}长度为 {minLength}  个字符'
						}
					],
					// 当前表单域的字段中文名，可不填写
					label: '手机号',
					validateTrigger: 'submit'
				},
				/* 身份证校验 */
				idCard: {
					// idCard 字段的校验规则
					rules: [
						// 校验 idCard 不能为空
						{
							required: true,
							errorMessage: '请填报名人数'
						},
						// 对idCard字段进行长度验证
						{
							minLength: 18,
							maxLength: 18,
							errorMessage: '{label}长度为 {minLength}  个字符'
						}
					],
					// 当前表单域的字段中文名，可不填写
					label: '身份证号',
					validateTrigger: 'submit'
				},
				/* 参加人数 */
				numberPeople: {
					rules: [
						// 校验 numberPeople 不能为空
						{
							required: true,
							errorMessage: '请填写参加人数'
						}
					]
				},
				/* 手机号校验 */
				participateMobile: {
					// participateMobile 字段的校验规则
					rules: [
						// 校验 participateMobile 不能为空
						{
							required: true,
							errorMessage: '请填写联系电话'
						},
						// 对participateMobile字段进行长度验证
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '{label}长度为 {minLength}  个字符'
						}
					],
					// 当前表单域的字段中文名，可不填写
					label: '手机号',
					validateTrigger: 'submit'
				}
			}
		};
	},
	methods: {
		submit() {
			this.$refs.valiForm.validate(['id'], async (err, valiFormData) => {
				if (!err) {
					console.log('校验成功');
					/* 检验成功 */
					// let auth = this.$db.get('auth');
					// let token = auth.token;
					// console.log(token, 323232323);
					// let res = await this.$api.registeredMember({
					// 	name: this.valiFormData.name,
					// 	mobile: this.valiFormData.mobile,
					// 	id_card: this.valiFormData.idCard
					// });
					// if (res.code == 1) {
					// 	this.$common.successToShow(res.msg);
					// 	uni.switchTab({
					// 		url: '/pages/user/card_processing'
					// 	});
					// }
				}
			});
		}
	}
};
</script>

<style>
.box {
	width: 100%;
	height: 100%;
	background-color: #ca5742;
}
/deep/.uni-forms-item__error {
	color: #000 !important;
}

.text-wrapper_3 {
	background-color: #fde6b0;
	border-radius: 40rpx;
	height: 80rpx;
	display: flex;
	color: #312520;
	text-align: center;
	line-height: 80rpx;
	font-size: 32rpx;
	flex-direction: column;
	width: 620rpx;
	margin-top: 40rpx;
	margin-bottom: 20rpx;
	margin-left: 30rpx;
	font-weight: bold;
}
.example {
	height: 87%;
	background-color: rgba(255, 255, 255, 0.15);
	margin: 20rpx 32rpx 0 32rpx;
}
.uni-forms {
	padding: 0 20rpx 0 20rpx;
}
.uni-forms-item {
	margin-bottom: 30rpx !important;
}
</style>