zhapp/components/commonFormItem/OwnerInfoForm.vue

<template>
	<view class="">
		<u--form labelPosition="left" :model="ownerInfo" :rules="ownerRules" ref="ownerForm" labelWidth="80"
			errorType="message">
			<u-form-item label="姓名" prop="name" borderBottom>
				<u-input v-model="ownerInfo.name" border="none" clearable placeholder="请输入姓名"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item label="车主类型" borderBottom @click="propertyShow=true">
				<u-input v-model="ownerInfos.property" 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="证件类型" borderBottom>
				<u-input v-model="ownerInfos.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 v-if="ownerInfo.property==1" label="证件号" prop="identifyNumber" borderBottom>
				<u-input v-model="ownerInfo.identifyNumber" border="none" maxlength="18" clearable placeholder="请输入证件号"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>

			<u-form-item v-if="ownerInfo.property==2" label="社会信用代码" prop="organizationCode" borderBottom
				labelWidth="120">
				<u-input v-model="ownerInfo.organizationCode" border="none" clearable maxlength="18"
					placeholder="请输入统一社会信用代码" placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item v-if="ownerInfo.property==2" label="注册资金" borderBottom>
				<u--input v-model="ownerInfo.registeredCapital" border="none" clearable placeholder="请输入注册资金"
					placeholderStyle="text-align:right;">
				</u--input>
				<view class="suffixClass">
					万元
				</view>
			</u-form-item>
			<u-form-item label="手机号" prop="mobile" borderBottom>
				<u-input v-model="ownerInfo.mobile" border="none" clearable placeholder="请输入手机号" maxlength="11"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>

			<u-form-item v-if="ownerInfo.property==2" label="车主座机" borderBottom>
				<u-input v-model="ownerInfo.tel" border="none" clearable placeholder="请输入车主座机"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item v-if="ownerInfo.property==2" label="车主联系人" borderBottom>
				<u-input v-model="ownerInfo.legalPerson" border="none" clearable placeholder="请输入车主联系人"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item v-if="ownerInfo.property==2" label="联系人证件号码" borderBottom labelWidth="120">
				<u-input v-model="ownerInfo.leaderIdentifyNumber" border="none" clearable placeholder="请输入联系人证件号码"
					placeholderStyle="text-align:right;"></u-input>
			</u-form-item>
			<u-form-item label="联系人有效期止期" v-if="ownerInfo.property==2" prop="leaderOtherEffectiveDate" borderBottom
				labelWidth="150" @click="leaderOtherEffectiveDateShow = true; ">
				<u--input v-model="ownerInfo.leaderOtherEffectiveDate" 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="省市区" v-if="ownerInfo.property==2" borderBottom @click="addressPickershow=true">
				<u-input v-model="ownerInfos.fullAddress" 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="addr" borderBottom>
				<u--textarea v-model="ownerInfo.addr" border="none" placeholder="请输入地址" autoHeight></u--textarea>
			</u-form-item>
			<u-form-item label="证件起期" prop="identifyValidDate" borderBottom @click="identifyValidDateShow = true; ">
				<u--input v-model="ownerInfo.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="ownerInfo.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="propertyShow" :columns="propertylist" keyName="label" @cancel="propertyShow=false"
			@confirm="propertyConfirm($event,'property','propertyShow')" @close="propertyShow=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>
		<!-- 有效期止期 -->
		<u-datetime-picker :show="leaderOtherEffectiveDateShow" v-model="leaderOtherEffectiveDatevalue" mode="date"
			:formatter="formatter" @cancel="leaderOtherEffectiveDateShow=false"
			@close="leaderOtherEffectiveDateShow=false" :closeOnClickOverlay="true"
			@confirm="leaderOtherEffectiveDateconfirm" confirmText="确定"></u-datetime-picker>
		<!-- 省市区组件 -->
		<uni-areaCascadePicker :show="addressPickershow" @confirm="addressConfirm" @close="addressPickershow=false"
			@cancel="addressPickershow=false"></uni-areaCascadePicker>
	</view>
</template>

<script>
	var dateTime = new Date();
	let Year = dateTime.getFullYear();
	let Month = Number(dateTime.getMonth() + 1);
	export default {
		props: {
			ownerInfo: Object,
			ownerInfos: Object,
			carInfo: Object, //车辆信息
		},
		data() {
			return {

				propertyShow: false,
				leaderOtherEffectiveDatevalue: Number(new Date()),
				identifyValidDatevalue: Number(new Date()), //证件起期
				identifyValidEndDatevalue: Number(new Date()), //证件止期
				identifyValidDateShow: false, //证件起期
				identifyValidEndDateShow: false, //证件止期
				leaderOtherEffectiveDateShow: false, //有效期止期
				addressPickershow: false, //省市区
				ownerlongTerm: [], //车主长期
				propertylist: [
					[{
						label: "个人",
						value: "1",
					}, {
						label: "法人",
						value: "2",
					}]
				],
				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: '请输入正确的车主姓名',
						}
					],
					organizationCode: [{
						required: true,
						message: '请输入统一社会信用代码',
						trigger: ['blur', 'change'],
					}],
					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: '身份证止期格式错误',
					}]
				},
			}
		},
		watch: {

		},
		methods: {
			addressConfirm(value) {
				if (value) {
					this.ownerInfos.fullAddress = value.fullAddress;
					this.ownerInfo.provinceCode = value.codes[0];
					this.ownerInfo.cityCode = value.codes[1];
					this.ownerInfo.countyCode = value.codes[2];
				}
				this.addressPickershow = false;
			},
			ownerlongTermChange(e) {
				if (e.length) {
					this.ownerInfo.identifyValidEndDate = '9999-12-31';
				} else {
					this.ownerInfo.identifyValidEndDate = '';
				}
			},
			propertyConfirm(value, name, showName) {
				this.ownerInfo[name] = value.value[0].value;
				this.ownerInfos[name] = value.value[0].label;
				this[showName] = false;
				if (value.value[0].value == '1') { //个人
					this.ownerInfos.identifyType = "身份证";
					this.ownerInfo.identifyType = "01";
				} else {
					this.ownerInfos.identifyType = "营业执照";
					this.ownerInfo.identifyType = "10";
				}
			},
			identifyValidDateconfirm(e) {
				this.ownerInfo.identifyValidDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.identifyValidDateShow = false;
			},
			identifyValidEndDateconfirm(e) {
				this.ownerInfo.identifyValidEndDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.identifyValidEndDateShow = false;
			},
			leaderOtherEffectiveDateconfirm(e) {
				this.ownerInfo.leaderOtherEffectiveDate = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				this.leaderOtherEffectiveDateShow = 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.ownerForm.setRules(this.ownerRules)
				this.$refs.ownerForm.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;
		}

		.u-checkbox__icon-wrap {
			margin-left: 10rpx;
		}
	}

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

	}

	.suffixClass {
		margin-left: 10rpx;
		font-size: 30rpx;
	}
</style>