cashier_app/entryManager/add/components/legalPerpole-info.vue

<template>
	<view>
		<view class="u-font-32 font-bold u-m-32 text-center">法人信息</view>
		<view class="container">




			<view class="form-item required">
				<view class="title"> 身份证正面</view>
				<my-upload-img v-model="form.idCardFrontPic.url" :size="200" :maxSize="maxSize"
				@uploadSuccess="uploadSuccess($event,'IdCard','idCardFrontPic')"
				></my-upload-img>
			</view>
			<view class="form-item required">
				<view class="title"> 身份证反面</view>
				<my-upload-img v-model="form.idCardBackPic.url" :size="200" :maxSize="maxSize"
				@uploadSuccess="uploadSuccess($event,'IdCard','idCardBackPic')"
				></my-upload-img>
			</view>

			<view class="form-item required">
				<view class="title"> 身份证手持 图片</view>
				<my-upload-img v-model="form.idCardHandPic.url" :size="200" :maxSize="maxSize"></my-upload-img>
			</view>


			<view class="form-item required">
				<view class="title"> 法人姓名</view>
				<up-input placeholder="法人姓名" :placeholder-class="placeholderClass"
					v-model="form.legalPersonName"></up-input>
			</view>
			<view class="form-item required">
				<view class="title">法人性别</view>
				<up-radio-group v-model="form.legalGender">
					<up-radio v-for="(value,key) in sexs" :label="value" :name="key">
					</up-radio>
				</up-radio-group>
			</view>


			<view class="form-item required">
				<view class="title"> 法人身份证号</view>
				<up-input placeholder="法人身份证号" :placeholder-class="placeholderClass"
					v-model="form.legalPersonId"></up-input>
			</view>
			<view class="form-item required">
				<view class="title"> 法人身份证开始日期</view>
				
				<up-datetime-picker hasInput :minDate="minDate" :maxDate="dayjs().valueOf()" format="YYYY-MM-DD"
					placeholder="请选择" v-model="form.legalIdPersonStartDate" mode="date">
				</up-datetime-picker>
				
				
			
			</view>

			<view class="form-item required">
				<view class="title"> 法人身份证到期日期</view>
				
				<view class="u-m-b-16">
					<up-radio-group v-model="endDateType">
						<up-radio :name="1" label="有结束日期"></up-radio>
						<up-radio :name="2" label="长期有效"></up-radio>
					</up-radio-group>
				</view>
				<template v-if="endDateType==1">
					<up-datetime-picker hasInput :minDate="endDataMinDate"
						:maxDate="maxDate" format="YYYY-MM-DD" placeholder="请选择"
						v-model="form.legalPersonIdEndDate" mode="date">
					</up-datetime-picker>
				</template>
				
			</view>

			<view class="form-item required">
				<view class="title"> 法人电话</view>
				<up-input placeholder="法人电话" :placeholder-class="placeholderClass"
					v-model="form.legalPersonPhone"></up-input>
			</view>

			<view class="form-item required">
				<view class="title">法人地址 </view>
				<up-input placeholder="法人地址" :placeholder-class="placeholderClass"
					v-model="form.legalAddress"></up-input>
			</view>

			<view class="form-item required">
				<view class="title">法人邮箱 </view>
				<up-input placeholder="法人邮箱" :placeholder-class="placeholderClass"
					v-model="form.legalPersonEmail"></up-input>
			</view>







		</view>
	</view>

</template>

<script setup>
	import {
		reactive,
		watch,computed ,
		ref
	} from 'vue';
	import shopSelect from './shop-select.vue'
	import {
		userTypes,
		sexs,
		contactPersonTypes,
		companyChildTypes,
		certTypes
	} from '@/entryManager/data.js'
	const form = reactive({
		"legalPersonName": "",
		"legalPersonId": "",
		"legalIdPersonStartDate":'',
		"legalPersonIdEndDate": '',
		"legalPersonPhone": "",
		"legalPersonEmail": "",
		"legalGender": "",
		"legalAddress": "",
		"idCardHandPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"idCardFrontPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		},
		"idCardBackPic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		}
	})

	

	import {
		getInfoByImg
	} from '@/http/api/order/entryManager.js'


	import dayjs from 'dayjs';
import { includes } from 'lodash';
	const minDate = dayjs('1970-01-01 00:00:00').valueOf()
	const maxDate = dayjs('2099-12-31 23:59:59').valueOf()
	const endDataMinDate = computed(() => {
		if (!form.legalIdPersonStartDate) {
			return maxDate
		}
		if (form.legalIdPersonStartDate) {
			return dayjs(form.legalIdPersonStartDate).add(10, 'year').valueOf()
		}
	})

	const endDateType = ref(1)
	watch(() => endDateType.value, (newval) => {
		if (newval == 2) {
			form.legalPersonIdEndDate = maxDate
		} else {
			form.legalPersonIdEndDate = dayjs().valueOf()
		}
	})





	function uploadSuccess(url, type, key) {
		uni.showLoading({
			type: '识别中，请稍等……！'
		})
		getInfoByImg({
			url,
			type
		}).then(res => {
			uni.hideLoading()
			if (res) {
				const data = res.subImages[0].kvInfo.data
				if (key == 'idCardBackPic') {
					if (data.validPeriod) {
						const [start, end] = data.validPeriod.split('-')
						if (start) {
							form.legalIdPersonStartDate = dayjs(start).valueOf()
						}
						if (end) {
							if (end.includes('长期')) {
								endDateType.value = 2
							} else {
								form.legalPersonIdEndDate = dayjs(end).valueOf()
							}

						}
					}
				}
				if (key == 'idCardFrontPic') {
					form.legalPersonName = data.name
					form.legalPersonId = data.idNumber
					form.legalAddress = data.address
					if(data.sex.includes('男')){
						form.legalGender='0'
					}
					if(data.sex.includes('女')){
						form.legalGender='1'
					}

				}
			}
		})
	}

	const placeholderClass = ref('u-font-28')


	const props = defineProps({
		data: {
			type: Object,
			default: () => {

			}
		},
		maxSize:{
			
		}
	})


	watch(() => props.data, (newval) => {
		for (let key in form) {
			if (props.data.hasOwnProperty(key)) {
				form[key] = props.data[key]
			}
		}
	}, {
		deep: true,
		immediate: true
	})

	const emits = defineEmits(['update'])
	watch(() => form, (newval) => {
		emits('update', newval)
	}, {
		deep: true
	})
</script>

<style lang="scss">
	.container {
		padding: 32rpx 28rpx;
		border-radius: 16rpx;
		margin-bottom: 32rpx;
		background-color: #fff;
	}

	.form-item {
		margin-bottom: 32rpx;

		.title {
			font-weight: 700;
			margin-bottom: 16rpx;
		}

		&.required {
			.title::before {
				content: '*';
				color: red;
			}
		}

		&:last-child {
			margin-bottom: 0;
		}
	}
</style>