vue-insagent-app/components/common/commonFormItem/OwnerInfoForm.vue

<template>
	<u-form :model="ownerInfo" :rules="ownerRules" ref="ownerForm" :errorType="errorType" label-width="200"
		style="padding: 0 15px;">
		<u-form-item label="姓名:" prop="name">
			<u-input placeholder="请输入姓名" v-model="ownerInfo.name" type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="证件类型:" prop="identifyType" style="padding: 14rpx 0;">
			<view class="dis a-c j-end" style="width:100%;height: 100%;">
				身份证
			</view>
		</u-form-item>
		<u-form-item label="证件号:" prop="identifyNumber">
			<u-input placeholder="请输入证件号" v-model="ownerInfo.identifyNumber" type="text"
				:custom-style="{textAlign:'right'}" @blur="binddata('identifyNumber', $event,'ownerInfo')"></u-input>
		</u-form-item>
		<u-form-item label="年龄:" prop="age">
			<u-input placeholder="请输入年龄" v-model="ownerInfo.age" disabled type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="性别:" prop="gender">
			<u-input placeholder="请输入性别" v-model="ownerInfo.gender" disabled type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="手机号:" prop="mobile">
			<u-input placeholder="请输入手机号" v-model="ownerInfo.mobile" type="text" maxlength="11"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="地址:" prop="addr">
			<u-input type="textarea" v-model="ownerInfo.addr" :custom-style="{textAlign:'right'}"
				placeholder-style="color:#808080" :auto-height="true" placeholder="请输入地址" />
		</u-form-item>
		<u-form-item label="邮箱:">
			<u-input placeholder="请输入邮箱" v-model="ownerInfo.email" type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="有效期起期:" prop="identifyValidDate">
			<u-input type="select" :select-open="ownerDateShow" v-model="ownerInfo.identifyValidDate"
				placeholder="请选择有效期起期" @click="ownerDateShow = true" :custom-style="{textAlign:'right'}"
				placeholder-style="color:#808080"></u-input>
			<u-picker v-model="ownerDateShow" mode="time" :params="params"
				@confirm="e=> Dateconfirm(e,'ownerInfo','identifyValidDate')"></u-picker>
		</u-form-item>
		<u-form-item label="有效期止期:" prop="identifyValidEndDate">
			<u-input placeholder="有效期止期" v-model="ownerInfo.identifyValidEndDate" type="text"
				:custom-style="{textAlign:'right'}"></u-input>
		</u-form-item>
		<u-form-item label="止期年限:" style="padding: 10rpx 0;">
			<view class="dis a-c j-c">
				<view class="status-data" :class="item.value==ownerValidEndDateholder? 'active':''"
					v-for="(item,index) in endDateList"
					@tap="ValidEndDateClick(item.value,'ownerValidEndDateholder','ownerInfo')" :key="index">
					{{item.label}}
				</view>
			</view>
		</u-form-item>
	</u-form>
</template>

<script>
	export default {
		props: {
			ownerInfo: Object,
			Dateconfirm: Function,
			binddata: Function,
			endDateList: Array,
			ValidEndDateClick: Function,
			ownerValidEndDateholder: {
				type: String,
				default: null,
			},
			errorType: {
				type: Array,
				default: () => ['border-bottom', 'toast'],
			},
		},
		data() {
			return {
				ownerDateShow: false,
				params: {
					year: true, //年
					month: true, //月
					day: true, //日
					hour: false, //时
					minute: false, //分
					second: false, //秒
				},
				ownerRules: {
					name: [{
							required: true,
							message: '请输入车主姓名',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 2,
							maxLength: 5,
							message: '车主姓名长度在 {minLength} 到 {maxLength} 个字符',
						},
						{
							pattern: /^([\u4e00-\u9fa5]{1,6}|[a-zA-Z\.\s]{1,6})$/,
							message: '请输入正确的车主姓名',
						}
					],
					identifyNumber: [{
							required: true,
							message: '请输入车主证件号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
							message: '请输入正确的车主证件号',
						}
					],
					mobile: [{
							required: true,
							message: '请输入车主手机号',
							trigger: ['blur', 'change'],
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							message: '请输入正确的手机号',
						}
					],
					addr: [{
							required: true,
							message: '请输入车主地址',
							trigger: ['blur', 'change'],
						},
						{
							minLength: 8,
							maxLength: 40,
							message: '车主地址长度在 {minLength} 到 {maxLength} 个字符',
						},
					],
					identifyValidDate: [{
						required: true,
						message: '请选择身份证起期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证起期格式错误',
					}],
					identifyValidEndDate: [{
						required: true,
						message: '请选择身份证止期',
						trigger: ['blur', 'change'],
					}, {
						pattern: /^\d{4}-\d{2}-\d{2}$/,
						message: '身份证止期格式错误',
					}]
				},
			}
		},
		methods: {
			validate(callback) {
				this.$refs.ownerForm.setRules(this.ownerRules);
				this.$refs.ownerForm.validate(valid => {
					if (callback) {
						callback(valid);
					}
				});
			},
			setRules(rules) {
				// 更新规则逻辑
				this.ownerRules = rules; // 或者根据需要
			},
		},
	}
</script>

<style scoped lang="scss">
	/* 添加样式 */
	.status-data {
		width: 66px;
		height: 30px;
		margin: 0 7px;
		font-size: 14px;
		border: 1px solid #CDCDCD;
		cursor: pointer;
		text-align: center;
		line-height: 30px;
	}

	.active {
		position: relative;
		background: rgba(0, 82, 255, 0.1);
		color: #0052FF;
		border: 1px solid #0052FF;
		font-weight: 700;
	}

	.active::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 10px;
		height: 10px;
		background-image: url("/static/image/car-insure/before.png");
		background-size: cover;
	}
</style>