zhapp/components/commonFormItem/InsuredInfoForm.vue

<template>
	<view class="">
		<u--form labelPosition="left" :model="insuredPersonInfo" :rules="insuredRules" ref="insuredForm" labelWidth="80"
			errorType="message">
			<u-form-item label="姓名" prop="name" borderBottom>
				<u-input v-model="insuredPersonInfo.name" border="none" clearable placeholder="请输入姓名"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item label="证件类型" borderBottom @click="identifyTypeShow=true">
				<u-input v-model="insuredPersonInfos.identifyType" border="none" clearable placeholder=""
					placeholderStyle="text-align:right;" suffixIcon='arrow-down'
					suffixIconStyle="color:#333;font-size:30rpx" style="pointer-events: none"></u-input>
			</u-form-item>
			<u-form-item label="证件号" prop="identifyNumber" borderBottom>
				<u-input v-model="insuredPersonInfo.identifyNumber" border="none" clearable placeholder="请输入证件号"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item label="手机号" prop="mobile" borderBottom>
				<u-input v-model="insuredPersonInfo.mobile" border="none" clearable placeholder="请输入手机号" maxlength="11"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item label="地址" prop="addr" borderBottom>
				<u--textarea v-model="insuredPersonInfo.addr" border="none" placeholder="请输入地址"
					autoHeight></u--textarea>
			</u-form-item>
			<u-form-item label="证件起期" prop="identifyValidDate" borderBottom @click="identifyValidDateShow = true; ">
				<u--input v-model="insuredPersonInfo.identifyValidDate" disabled disabledColor="#ffffff" clearable
					suffixIcon='calendar' suffixIconStyle="color:#333;font-size:40rpx" placeholder="请选择证件起期  "
					placeholderStyle="text-align:right;" border="none" style="pointer-events: none"></u--input>

			</u-form-item>
			<u-form-item label="证件止期" prop="identifyValidEndDate" @click="identifyValidEndDateShow = true; ">
				<u--input v-model="insuredPersonInfo.identifyValidEndDate" disabled disabledColor="#ffffff" clearable
					suffixIcon='calendar' suffixIconStyle="color:#333;font-size:40rpx;margin-right:20px"
					placeholder="请选择证件止期  " placeholderStyle="text-align:right;" border="none"
					style="pointer-events: none">
				</u--input>
				<u-checkbox-group v-model="ownerlongTerm" iconPlacement="right" @change="ownerlongTermChange">
					<u-checkbox activeColor="#FDE935" iconColor="#333" labelSize="15px" shape="circle" label="长期有效"
						name="长期有效"></u-checkbox>
				</u-checkbox-group>
			</u-form-item>
		</u--form>
		<u-picker :show="identifyTypeShow" :columns="identifyTypelist" keyName="label" @cancel="identifyTypeShow=false"
			@confirm="identifyTypeConfirm($event,'identifyType','identifyTypeShow')" @close="identifyTypeShow=false"
			:closeOnClickOverlay="true"></u-picker>
		<u-datetime-picker :show="identifyValidDateShow" v-model="identifyValidDatevalue" mode="date"
			:formatter="formatter" @cancel="identifyValidDateShow=false" @close="identifyValidDateShow=false"
			:closeOnClickOverlay="true" @confirm="identifyValidDateconfirm" confirmText="确定"></u-datetime-picker>
		<u-datetime-picker :show="identifyValidEndDateShow" mode="date" v-model="identifyValidEndDatevalue"
			:formatter="formatter" @cancel="identifyValidEndDateShow=false" @confirm="identifyValidEndDateconfirm"
			:closeOnClickOverlay="true" @close="identifyValidEndDateShow=false" confirmText="确定"></u-datetime-picker>
	</view>
</template>

<script>
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		props: {
			insuredPersonInfo: Object,
			insuredPersonInfos: Object,
		},
		data() {
			return {
				identifyValidDatevalue: Number(new Date()), //证件起期
				identifyValidEndDatevalue: Number(new Date()), //证件止期
				identifyTypeShow: false, //证件类型
				identifyValidDateShow: false, //证件起期
				identifyValidEndDateShow: false, //证件止期
				ownerlongTerm: [], //车主长期
				identifyTypelist: [
					[{
							label: "身份证",
							value: "01",
						},
						{
							label: "统一社会信用代码",
							value: "10",
						}
					]
				],
				insuredRules: {
					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: {
			identifyTypeConfirm(value, name, showName) {
				this.insuredPersonInfo[name] = value.value[0].value;
				this.insuredPersonInfos[name] = value.value[0].label;
				this[showName] = false;
			},
			ownerlongTermChange(e) {
				if (e.length) {
					this.insuredPersonInfo.identifyValidEndDate = '9999-12-31';
				} else {
					this.insuredPersonInfo.identifyValidEndDate = '';
				}
			},
			identifyValidDateconfirm(e) {
				this.insuredPersonInfo.identifyValidDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.identifyValidDateShow = false;
			},
			identifyValidEndDateconfirm(e) {
				this.insuredPersonInfo.identifyValidEndDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.identifyValidEndDateShow = false;
			},
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},

			validate(callback) {
				this.$refs.insuredForm.setRules(this.insuredRules)
				this.$refs.insuredForm.validate().then(res => {
					callback(res)
				}).catch(errors => {
					callback(errors)
				})
			}
		},
	}
</script>

<style scoped lang="scss">
	::v-deep {
		.u-textarea {
			text-align: right;
			padding: 0;
			color: #303133;
		}

		.uni-textarea-placeholder {
			color: grey !important;
			text-align: right;
		}
	}

	/* 添加样式 */
	.search {
		width: 112rpx;
		height: 60rpx;
		background: #FDE935;
		border-radius: 100rpx 100rpx 100rpx 100rpx;

	}
</style>