academicAdministrationSystem/pages/dogApplication/dogApplication.vue

<template>
	<view style="padding: 20rpx;">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u-divider text="申请人信息" textColor="#9dd574" lineColor="#9dd574" textPosition="left"></u-divider>
		<u-form
				labelWidth="190rpx"
				labelPosition="left"
				:model="model1"
				:rules="rules"
				ref="uForm"
		>
			<u-form-item
					label="申请人类型"
					prop="userInfo.proposerTypeName"
					borderBottom
					@click="showProposerType = true;"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.proposerTypeName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择申请人类型"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="申请人姓名"
					prop="userInfo.nickName"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入申请人姓名"
						v-model="model1.userInfo.nickName"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="证件类型"
					prop="userInfo.cardTypeName"
					borderBottom
					@click="showCardType = true;"
					ref="item1"
			>
				<u--input
						v-model="model1.userInfo.cardTypeName"
						disabled
						disabledColor="#ffffff"
						placeholder="请选择证件类型"
						border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="其他证件类型"
					prop="userInfo.cardTypeOther"
					borderBottom
					ref="item1"
					v-if="model1.userInfo.cardType === '4'"
			>
				<u--input
						placeholder="请输入其他证件类型"
						v-model="model1.userInfo.cardTypeOther"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="证件号码"
					prop="userInfo.idCard"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入证件号码"
						v-model="model1.userInfo.idCard"
						border="none"
				></u--input>
			</u-form-item>
			<view v-if="model1.userInfo.proposerType === '1'">
				<u-divider text="个人信息" textColor="#9dd574" lineColor="#9dd574" textPosition="left"></u-divider>
				<u-form-item
						label="养犬人照片"
						prop="userInfo.avatar"
						borderBottom
						ref="item1"
				>
					<u-upload
					    :fileList="fileList1"
					    @afterRead="afterRead"
					    @delete="deletePic"
						name="1"
						multiple
					    :maxCount="1"
					  ></u-upload>
				</u-form-item>
				<u-form-item
						label="联系电话"
						borderBottom
						ref="item1"
				>
					<u--input
						disabled
						disabledColor="#ffffff"
						v-model="model1.userInfo.phoneNumber"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="电子邮箱"
						prop="userInfo.email"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入电子邮箱"
							v-model="model1.userInfo.email"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="养犬人地址"
						prop="userInfo.address"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入养犬人地址"
							v-model="model1.userInfo.address"
							border="none"
					></u--input>
				</u-form-item>
			</view>
			<view v-if="model1.userInfo.proposerType === '2'">
				<u-divider text="单位信息" textColor="#9dd574" lineColor="#9dd574" textPosition="left"></u-divider>
				<u-form-item
						label="组织名称"
						prop="userInfo.organizationName"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入组织名称"
							v-model="model1.userInfo.organizationName"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="信用代码"
						prop="userInfo.organizationCode"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入信用代码"
							v-model="model1.userInfo.organizationCode"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="联系电话"
						borderBottom
						ref="item1"
				>
					<u--input
						disabled
						disabledColor="#ffffff"
						v-model="model1.userInfo.phoneNumber"
						border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="法人姓名"
						prop="userInfo.legalNickName"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入法人姓名"
							v-model="model1.userInfo.legalNickName"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="法人证件类型"
						prop="userInfo.legalCardTypeName"
						borderBottom
						@click="showLegalCardType = true;"
						ref="item1"
				>
					<u--input
							v-model="model1.userInfo.legalCardTypeName"
							disabled
							disabledColor="#ffffff"
							placeholder="请选择证件类型"
							border="none"
					></u--input>
					<u-icon
							slot="right"
							name="arrow-right"
					></u-icon>
				</u-form-item>
				<u-form-item
						label="法人其他证件类型"
						prop="userInfo.legalCardTypeOther"
						borderBottom
						ref="item1"
						v-if="model1.userInfo.legalCardType === '4'"
				>
					<u--input
							placeholder="请输入法人其他证件类型"
							v-model="model1.userInfo.legalCardTypeOther"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="法人证件号码"
						prop="userInfo.legalIdCard"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入法人证件号码"
							v-model="model1.userInfo.legalIdCard"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="电子邮箱"
						prop="userInfo.email"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入电子邮箱"
							v-model="model1.userInfo.email"
							border="none"
					></u--input>
				</u-form-item>
				<u-form-item
						label="单位地址"
						prop="userInfo.address"
						borderBottom
						ref="item1"
				>
					<u--input
							placeholder="请输入单位地址"
							v-model="model1.userInfo.address"
							border="none"
					></u--input>
				</u-form-item>
			</view>
			<u-divider text="犬只信息" textColor="#9dd574" lineColor="#9dd574" textPosition="left"></u-divider>
			<u-form-item
					label="犬全身照(侧身正脸全身照)"
					prop="userInfo.dogAvatar"
					borderBottom
					ref="item1"
			>
				<u-upload
				    :fileList="fileList2"
				    @afterRead="afterRead"
				    @delete="deletePic"
					name="2"
					multiple
				    :maxCount="1"
				  ></u-upload>
			</u-form-item>
			<u-form-item
					label="犬名"
					prop="userInfo.dogName"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入犬名"
						v-model="model1.userInfo.dogName"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="犬种"
					prop="userInfo.dogKindName"
					borderBottom
					ref="item1"
					@click="showDogKindType = true"
			>
				<u--input
					v-model="model1.userInfo.dogKindName"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择犬种"
					border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="毛色"
					prop="userInfo.color"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入毛色"
						v-model="model1.userInfo.color"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="身高(厘米)"
					prop="userInfo.height"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入身高"
						type = "number"
						v-model="model1.userInfo.height"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="体长(厘米)"
					prop="userInfo.length"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入体长"
						type = "number"
						v-model="model1.userInfo.length"
						border="none"
				></u--input>
			</u-form-item>
			<u-form-item
					label="性别"
					prop="userInfo.dogSexName"
					borderBottom
					ref="item1"
					@click="showDogSexType = true"
			>
				<u--input
					v-model="model1.userInfo.dogSexName"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择犬种"
					border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="出生日期"
					prop="userInfo.birthDate"
					borderBottom
					ref="item1"
					@click="showBirthDate = true;dateType = '1'"
			>
				<u--input
					v-model="model1.userInfo.birthDate"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择出生日期"
					border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="准养日期"
					prop="userInfo.expectedAdoptionDate"
					borderBottom
					ref="item1"
					@click="showBirthDate = true;dateType = '2'"
			>
				<u--input
					v-model="model1.userInfo.expectedAdoptionDate"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择准养日期"
					border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="延续登记日期"
					prop="userInfo.continuationRegistrationDate"
					borderBottom
					ref="item1"
					@click="showBirthDate = true;dateType = '3'"
			>
				<u--input
					v-model="model1.userInfo.continuationRegistrationDate"
					disabled
					disabledColor="#ffffff"
					placeholder="请选择延续登记日期"
					border="none"
				></u--input>
				<u-icon
						slot="right"
						name="arrow-right"
				></u-icon>
			</u-form-item>
			<u-form-item
					label="饲养地点"
					prop="userInfo.feedAddress"
					borderBottom
					ref="item1"
			>
				<u--input
						placeholder="请输入饲养地点"
						v-model="model1.userInfo.feedAddress"
						border="none"
				></u--input>
			</u-form-item>
		</u-form>
		<u-button type="success" text="提交" @click="submitForm"></u-button>
		<u-action-sheet
				:show="showProposerType"
				:actions="proposerTypeActions"
				title="请选择申请人类型"
				@close="showProposerType = false"
				@select="proposerTypeSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showCardType"
				:actions="cardTypeActions"
				title="请选择证件类型"
				@close="showCardType = false"
				@select="cardTypeSelect"
		>
		</u-action-sheet>
		<u-action-sheet
				:show="showLegalCardType"
				:actions="cardTypeActions"
				title="请选择证件类型"
				@close="showLegalCardType = false"
				@select="legalCardTypeSelect"
		>
		</u-action-sheet>
		<u-picker 
				:show="showDogKindType" 
				title="选择犬种" 
				:columns="dogKindList" 
				keyName="dictLabel" 
				@confirm="dogKindConfirm"
				@cancel = "showDogKindType = false"
		>
		</u-picker>
		<u-action-sheet
				:show="showDogSexType"
				:actions="dogSexActions"
				title="请选择性别"
				@close="showDogSexType = false"
				@select="dogSexTypeSelect"
		>
		</u-action-sheet>
		<u-datetime-picker
				:show="showBirthDate"
				mode="date"
				v-model="birthDateValue"
				@confirm="(e) => birthDateConfirm(e, dateType)"
				@cancel="showBirthDate = false"
		></u-datetime-picker>
	</view>
</template>

<script>
const app = getApp();
export default {
	data() {
		return {
			showProposerType: false,
			showCardType: false,
			showLegalCardType: false,
			showDogKindType:false,
			showDogSexType:false,
			showBirthDate:false,
			dateType:'',
			birthDateValue:Number(new Date()),
			fileList1: [],
			fileList2: [],
			dogKindList:[],
			model1: {
				userInfo: {
					source:'app',
					proposerType: '',
					nickName: '',
					proposerTypeName: '',
					cardType: '',
					cardTypeName: '',
					idCard: '',
					cardTypeOther: '',
					avatar: '',
					phoneNumber:uni.getStorageSync('phonenumber'),
					email:'',
					address:'',
					organizationName:'',
					organizationCode:'',
					legalNickName:'',
					legalCardType:'',
					legalCardTypeName:'',
					legalCardTypeOther:'',
					legalIdCard:'',
					dogAvatar:'',
					dogName:'',
					dogKind:'',
					dogKindName:'',
					color:'',
					height:'',
					length:'',
					dogSex:'',
					dogSexName:'',
					birthDate:'',
					expectedAdoptionDate:'',
					continuationRegistrationDate:'',
					feedAddress:''
				},
			},
			proposerTypeActions: [
				{
					name: '个人',
					value: '1'
				},
				{
					name: '单位',
					value: '2'
				}
			],
			cardTypeActions:[
				{
					name: '身份证',
					value: '1'
				},
				{
					name: '护照',
					value: '2'
				},
				{
					name: '居住证',
					value: '3'
				},
				{
					name: '其它',
					value: '4'
				}
			],
			dogSexActions:[
				{
					name: '雄',
					value: '1'
				},
				{
					name: '雌',
					value: '2'
				},
			],
			rules: {
				'userInfo.proposerTypeName': {
					type: 'string',
					required: true,
					message: '请选择养犬申请人类型',
					trigger: ['blur', 'change']
				},
				'userInfo.nickName': {
					type: 'string',
					required: true,
					message: '请输入养犬人姓名',
					trigger: ['blur', 'change']
				},
				'userInfo.cardTypeName': {
					type: 'string',
					required: true,
					message: '请选择养犬证件类型',
					trigger: ['blur', 'change']
				},
				'userInfo.idCard': {
					type: 'string',
					required: true,
					message: '请输入证件号码',
					trigger: ['blur', 'change']
				},
				'userInfo.cardTypeOther':{
					required: true, 
					message: '请输入其他证件类型',
					trigger: ['change','blur']
				},
				'userInfo.avatar':{
					required: true, 
					message: '请上传用户照片',
					trigger: ['change','blur']
				},
				'userInfo.email':{
					required: true, 
					message: '请输入电子邮箱',
					trigger: ['change','blur']
				},
				'userInfo.address':{
					required: true, 
					message: '请输入地址',
					trigger: ['change','blur']
				},
				'userInfo.organizationName':{
					required: true, 
					message: '请输入组织名称',
					trigger: ['change','blur']
				},
				'userInfo.organizationCode':{
					required: true, 
					message: '请输入信用代码',
					trigger: ['change','blur']
				},
				'userInfo.legalNickName':{
					required: true, 
					message: '请输入法人姓名',
					trigger: ['change','blur']
				},
				'userInfo.legalCardTypeName':{
					required: true, 
					message: '请选择法人证件类型',
					trigger: ['change','blur']
				},
				'userInfo.legalCardTypeOther':{
					required: true, 
					message: '请输入法人其他证件类型',
					trigger: ['change','blur']
				},
				'userInfo.legalIdCard':{
					required: true, 
					message: '请输入法人证件号码',
					trigger: ['change','blur']
				},
				'userInfo.dogAvatar':{
					required: true, 
					message: '请上传犬全身照',
					trigger: ['change','blur']
				},
				'userInfo.dogName':{
					required: true, 
					message: '请输入犬名',
					trigger: ['change','blur']
				},
				'userInfo.dogKindName':{
					required: true, 
					message: '请选择犬种',
					trigger: ['change','blur']
				},
				'userInfo.color':{
					required: true, 
					message: '请输入毛色',
					trigger: ['change','blur']
				},
				'userInfo.height':{
					required: true, 
					message: '请输入身高',
					trigger: ['change','blur']
				},
				'userInfo.length':{
					required: true, 
					message: '请输入体长',
					trigger: ['change','blur']
				},
				'userInfo.dogSexName':{
					required: true, 
					message: '请选择宠物性别',
					trigger: ['change','blur']
				},
				'userInfo.birthDate':{
					required: true, 
					message: '请选择出生日期',
					trigger: ['change','blur']
				},
				'userInfo.expectedAdoptionDate':{
					required: true, 
					message: '请选择准养日期',
					trigger: ['change','blur']
				},
				'userInfo.continuationRegistrationDate':{
					required: true, 
					message: '请选择延续登记日期',
					trigger: ['change','blur']
				},
				'userInfo.feedAddress':{
					required: true, 
					message: '请输入饲养地点',
					trigger: ['change','blur']
				}
			},
			radio: '',
			switchVal: false
		};
	},
	methods: {
		// 删除图片
		deletePic(event) {
			this.model1.userInfo.avatar = '';
			this.$refs.uForm.validateField('userInfo.avatar');
			this[`fileList${event.name}`].splice(event.index, 1);
		},
		// 新增图片
		async afterRead(event) {
			console.log(event,333)
			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`fileList${event.name}`].length;
			lists.map((item) => {
			  this[`fileList${event.name}`].push({
				...item,
				status: "uploading",
				message: "上传中",
			  });
			});
			for (let i = 0; i < lists.length; i++) {
			  const result = await this.uploadFilePromise(lists[i].url);
			  if(event.name === '1'){
				  this.model1.userInfo.avatar = result;
				  this.$refs.uForm.validateField('userInfo.avatar');
			  }
			  if(event.name === '2'){
				  this.model1.userInfo.dogAvatar = result;
				  this.$refs.uForm.validateField('userInfo.dogAvatar');
			  }
			  let item = this[`fileList${event.name}`][fileListLen];
			  this[`fileList${event.name}`].splice(
				fileListLen,
				1,
				Object.assign(item, {
				  status: "success",
				  message: "",
				  url: app.globalData.commonImage+result,
				})
			  );
			  fileListLen++;
			}
		},
		uploadFilePromise(url) {
			return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: app.globalData.commonHttp+"common/upload", // 仅为示例，非真实的接口地址
				filePath: url,
				name: "file",
				header:{
					authorization:'Bearer '+uni.getStorageSync('token')
				},
				success: (res) => {
				  setTimeout(() => {
					resolve(JSON.parse(res.data).fileName);
				  }, 1000);
				},
			  });
			});
		},
		proposerTypeSelect(e) {
			this.model1.userInfo.proposerTypeName = e.name
			this.model1.userInfo.proposerType = e.value
			this.$refs.uForm.validateField('userInfo.proposerTypeName')
		},
		cardTypeSelect(e) {
			this.model1.userInfo.cardTypeName = e.name
			this.model1.userInfo.cardType = e.value
			this.$refs.uForm.validateField('userInfo.cardTypeName')
		},
		legalCardTypeSelect(e){
			this.model1.userInfo.legalCardTypeName = e.name
			this.model1.userInfo.legalCardType = e.value
			this.$refs.uForm.validateField('userInfo.legalCardTypeName')
		},
		dogSexTypeSelect(e){
			this.model1.userInfo.dogSexName = e.name
			this.model1.userInfo.dogSex = e.value
			this.$refs.uForm.validateField('userInfo.dogSexName')
		},
		dogKindConfirm(e){
			this.model1.userInfo.dogKindName = e.value[0].dictLabel
			this.model1.userInfo.dogKind = e.value[0].dictValue
			this.$refs.uForm.validateField('userInfo.dogKindName')
			this.showDogKindType = false
		},
		birthDateConfirm(e,type){
			console.log(e,type)
			if(type === '1'){
				this.model1.userInfo.birthDate = this.formatDate(e.value)
				this.$refs.uForm.validateField('userInfo.birthDate')
			}
			if(type === '2'){
				this.model1.userInfo.expectedAdoptionDate = this.formatDate(e.value)
				this.$refs.uForm.validateField('userInfo.expectedAdoptionDate')
			}
			if(type === '3'){
				this.model1.userInfo.continuationRegistrationDate = this.formatDate(e.value)
				this.$refs.uForm.validateField('userInfo.continuationRegistrationDate')
			}
			this.showBirthDate = false
		},
		formatDate(timestamp) {
		      const date = new Date(timestamp);
		      const year = date.getFullYear();
		      const month = (date.getMonth() + 1).toString().padStart(2, '0');
		      const day = date.getDate().toString().padStart(2, '0');
		      return `${year}-${month}-${day}`;
		},
		async submitForm() {
		  // 动态更新规则
		  // const currentRules = { ...this.rules }; // 浅拷贝当前规则
		 //  if (this.model1.userInfo.cardType !== '4') {
			// // 修改需要取消校验字段的规则
			// currentRules['userInfo.cardTypeOther'] = {
			// 	required: false
			// }
		 //  }
		  
		  // 重新设置规则
		  // this.$refs.uForm.setRules(currentRules);
		  
		  // 进行验证
		  try {
			await this.$refs.uForm.validate();
			this.$http.post('appraisal/DDog',this.model1.userInfo).then(res=>{
				uni.showToast({ title: '提交成功',success() {
					setTimeout(()=>{
						uni.navigateBack();
					},2000)
				} });
			}).catch(err=>{
				
			})
		  } catch (errors) {
			console.log('验证失败', errors);
		  } finally {
			// 可选：提交后恢复初始规则状态
			this.$refs.uForm.setRules(this.rules);
		  }
		}
		
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
    	this.$refs.uForm.setRules(this.rules);
		//获取犬种
		this.$http.get('system/dict/data/type/d_doy_kind').then(res=>{
			this.dogKindList.push(res.data);
		}).catch(err=>{
			
		})
    }
};
</script>

<style>

</style>