cashier_app/entryManager/add/components/business-licence-info.vue

<template>
	<view>
		<view class="u-font-32 font-bold u-m-32 text-center">营业执照信息</view>
		<view class="container">
			<view class="form-item " :class="isRequired">
				<view class="title"> 营业执照</view>
				<my-upload-img v-model="form.licensePic.url" :size="200"
					@uploadSuccess="uploadSuccess($event,'BusinessLicense')"></my-upload-img>
			</view>

			<view class="form-item " :class="isRequired">
				<view class="title"> 营业执照全称</view>
				<up-input placeholder="营业执照全称" :placeholder-class="placeholderClass"
					v-model="form.licenceName"></up-input>
			</view>

			<view class="form-item " :class="isRequired">
				<view class="title"> 营业执照号码</view>
				<up-input placeholder="营业执照号码" :placeholder-class="placeholderClass"
					v-model="form.licenceNo"></up-input>
			</view>

			<view class="form-item " :class="isRequired">
				<view class="title"> 营业执照开始日期</view>
				<up-datetime-picker hasInput :minDate="minDate" :maxDate="dayjs().valueOf()" format="YYYY-MM-DD"
					placeholder="请选择" v-model="form.licenceStartDate" mode="date">
				</up-datetime-picker>
				<!-- <up-input placeholder="营业执照开始日期" :placeholder-class="placeholderClass"
					v-model="form.licenceStartDate"></up-input> -->
			</view>

			<view class="form-item " :class="isRequired">
				<view class="title"> 营业执照结束日期</view>
				<view class="u-m-b-16">
					<up-radio-group v-model="licenceEndDateType">
						<up-radio :name="1" label="有结束日期"></up-radio>
						<up-radio :name="2" label="长期有效"></up-radio>
					</up-radio-group>
				</view>
				<template v-if="licenceEndDateType==1">
					<up-datetime-picker hasInput :minDate="form.licenceStartDate||minDate" :maxDate="maxDate"
						format="YYYY-MM-DD" placeholder="请选择" v-model="form.licenceEndDate" mode="date">
					</up-datetime-picker>
				</template>


			</view>


			<view class="form-item " :class="isRequired">
				<view class="title"> 营业执照注册地址</view>
				<up-input placeholder="营业执照注册地址" :placeholder-class="placeholderClass"
					v-model="form.registeredAddress"></up-input>
			</view>



		</view>
	</view>

</template>

<script setup>
	import dayjs from 'dayjs';
	const minDate = dayjs('1970-01-01 00:00:00').valueOf()
	const maxDate = dayjs('2099-12-31 23:59:59').valueOf()
	const licenceEndDateType = ref(1)
	import {
		reactive,
		watch,
		ref
	} from 'vue';
	import shopSelect from './shop-select.vue'
	import {
		userTypes,
		sexs,
		contactPersonTypes,
		companyChildTypes,
		certTypes
	} from '@/entryManager/data.js'
	const form = reactive({
		"licenceName": "",
		"licenceNo": "",
		"licenceStartDate": "",
		"licenceEndDate": "",
		"registeredAddress": "",
		"licensePic": {
			"url": "",
			"wechatId": "",
			"alipayId": ""
		}
	})


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

	watch(() => licenceEndDateType.value, (newval) => {
		if (newval == 2) {
			form.licenceEndDate = maxDate
		} else {
			form.licenceEndDate = dayjs().add(10, 'year').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
				form.licenceName = data.companyName
				form.licenceNo = data.creditCode
				form.registeredAddress = data.businessAddress
				if (data.validFromDate) {
					form.licenceStartDate = dayjs(data.validFromDate).valueOf()
				}
				if (data.validToDate) {
					form.licenceEndDate = dayjs(data.validToDate).valueOf()
				}
				// console.log(dayjs(form.licenceEndDate).format('YYYY-MM-DD'));
				if (data.validPeriod.includes('长期')) {
					licenceEndDateType.value = 2;
				}
			}
		})
	}

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

	const isRequired = ref('required')

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

			}
		}
	})


	watch(() => props.data, (newval) => {
		console.log('触发父数据更新')
		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
	})
	
	watch(()=>form.licenceEndDate,(newval)=>{
		if(dayjs(newval).format('YYYY-MM-DD')==='2099-12-31'){
			licenceEndDateType.value=2
		} 
	})
</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;
		}
	}

	.input-box {
		padding: 9px 10px;
		border-radius: 4px;
		border: 1px solid #dadbde;
	}
</style>