pet-front/otherPages/userManage/pet/components/petBaseInfo.vue

<template>
	<view class="">
		<view class="personal-pet-basic-info">
			<view class="personal-pet-info-title border-bottom">
				宠物基本信息
			</view>
			<u--form labelPosition="left" :model="model" ref="uForm">
				<u-form-item required label="昵称" :prop="`petBaseInfo.name`" labelWidth="80" borderBottom>
					<u--input v-model="petBaseInfo.name" placeholder="请输入宠物昵称" @change="nameChange"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
				</u-form-item>
				<u-form-item label="性别" :prop="`petBaseInfo.gender`" labelWidth="80" borderBottom
					@click="showSex = true">
					<u--input v-model="petBaseInfo.gender" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item required label="品种" :prop="`petBaseInfo.breed`" labelWidth="80" borderBottom
					@click="breedSelectOpen">
					<u--input v-model="petBaseInfo.breed" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item required label="体重" :prop="`petBaseInfo.bodyType`" labelWidth="80" borderBottom
					@click="showWeight = true" ref="item1">
					<u--input v-model="petBaseInfo.bodyType" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item label="出生年月" :prop="`petBaseInfo.birthDate`" labelWidth="80" borderBottom
					@click="yearMonthOpen">
					<u--input v-model="petBaseInfo.birthDate" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
				<u-form-item required label="性格" :prop="`petBaseInfo.personality`" labelWidth="80" borderBottom
					@click="dispositionSelectOpen">
					<u--input v-model="petBaseInfo.personality" disabled disabledColor="#ffffff" placeholder="请选择"
						placeholderStyle="text-align:right;color:#AAA" border="none" inputAlign="right"></u--input>
					<u-icon slot="right" name="arrow-right" color="#AAA"></u-icon>
				</u-form-item>
			</u--form>
		</view>
		<view style="background-color: #fffcf2;padding: 10px 20px;" v-show="showDisposition">
			<view style="height: 85%;">
				<u-checkbox-group v-model="petBaseInfo.personality" @change="checkboxChange" iconPlacement="left"
					placement="row" style="flex-wrap: wrap;" activeColor="#ffbf60">
					<u-checkbox :customStyle="{margin: '8px'}" v-for="(item, index) in dispositionActions" :key="item"
						:label="item" :name="item">
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
		
		<u-picker :show="showSex" :showToolbar='false' :columns="sexActions" @cancel="showSex = false"
			:immediateChange="true" @change="sexSelect"></u-picker>
			
		<u-picker :show="showWeight" :showToolbar='false' :columns="weightActions" @cancel="showWeight = false"
			:immediateChange="true" @change="weightSelect"></u-picker>
		<u-overlay :show="showBreed">
			
			<view class="breed-select" style="height: 60%;">
				<u-search shape="round" :show-action="false" v-model="searchValue" @change="searchBreed"></u-search>
				<view style="padding: 10px;height: 80%;overflow: auto;">
					<u-radio-group v-model="tempBreed" placement="column">
						<u-radio v-for="(item,index) in searchBreedData" :customStyle="{marginBottom: '8px'}"
							activeColor="#ffbf60" :label="item" :name="item" :key="item"></u-radio>
					</u-radio-group>
				</view>
				<view class="personal-pet-breed-btns">
					<view class="personal-pet-breed-btn">
						<u-button color="#FFF4E4" @click="breedSelectClose">
							<view style="color: #FFF4E4;">
								取消
							</view>
						</u-button>
					</view>
					<view class="personal-pet-breed-btn" @click="breedSelectConfirm">
						<u-button color="#FFBF60">
							<view style="color: #fff;">
								确定
							</view>
						</u-button>
					</view>
				</view>
			</view>
		</u-overlay>
		<u-datetime-picker :maxDate='getMaxDate()' :minDate="getMinDate()" :show="showBirthday" v-model="tempBirthday"
			mode="year-month" @confirm="yearMonthConfirm" @cancel="yearMonthClose"></u-datetime-picker>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue';

	// 定义 props
	const props = defineProps({
		petType: {
			type: String,
			default: 'dog'
		},
		petBaseInfo: {
			type: Object,
			default: () => ({
				name: '',
				gender: '',
				breed: '',
				bodyType: '',
				birthDate: '',
				personality: ''
			})
		}
	});

	// 定义 emits
	const emits = defineEmits(['update:petBaseInfo']);

	// 定义响应式数据
	const showSex = ref(false);
	const showBreed = ref(false);
	const showWeight = ref(false);
	const showBirthday = ref(false);
	const showDisposition = ref(false);
	const sexActions = ref([
		['男生', '女生']
	]);
	const weightActions = ref([
		['小型（<10 KG）', '中型（10~20KG）', '大型（20KG以上）']
	]);
	const dispositionActions = ref([]);
	const breedData = ref([]);
	const searchBreedData = ref([]);
	const tempBreed = ref('');
	const searchValue = ref('');
	const tempBirthday = ref('');
	const tempDisposition = ref('');
	const uForm = ref(null);
	const item1 = ref(null);

	// 定义方法
	const nameChange = () => {
		updatePetBaseInfo();
	};

	const sexSelect = (e) => {
		props.petBaseInfo.gender = e.value[0];
		showSex.value = false;
		updatePetBaseInfo();
	};

	const weightSelect = (e) => {
		props.petBaseInfo.bodyType = e.value[0];
		showWeight.value = false;
		updatePetBaseInfo();
	};

	const breedSelectOpen = () => {
		searchBreedData.value = breedData.value;
		searchValue.value = '';
		tempBreed.value = props.petBaseInfo.breed;
		showBreed.value = true;
	};

	const searchBreed = () => {
		if (searchValue.value && searchValue.value !== '') {
			searchBreedData.value = breedData.value.filter(e => e.includes(searchValue.value));
		} else {
			searchBreedData.value = breedData.value;
		}
	};

	const breedSelectClose = () => {
		tempBreed.value = '';
		showBreed.value = false;
	};

	const breedSelectConfirm = () => {
		props.petBaseInfo.breed = tempBreed.value;
		showBreed.value = false;
		updatePetBaseInfo();
	};

	const yearMonthOpen = () => {
		if (props.petBaseInfo.birthDate) {
			tempBirthday.value = Number(new Date(props.petBaseInfo.birthDate));
		} else {
			tempBirthday.value = Number(new Date());
		}
		showBirthday.value = true;
	};

	const yearMonthClose = () => {
		showBirthday.value = false;
	};

	const yearMonthConfirm = (e) => {
		const timeFormat = uni.$u.timeFormat;
		props.petBaseInfo.birthDate = timeFormat(e.value, 'yyyy-mm');
		showBirthday.value = false;
		updatePetBaseInfo();
	};

	const dispositionSelectOpen = () => {
		tempDisposition.value = props.petBaseInfo.personality;
		showDisposition.value = true;
	};

	const dispositionSelectClose = () => {
		tempDisposition.value = '';
		showDisposition.value = false;
	};

	const dispositionSelectConfirm = () => {
		props.petBaseInfo.personality = tempDisposition.value;
		showDisposition.value = false;
		updatePetBaseInfo();
	};

	const checkboxChange = (n) => {
		console.log('change', n);
		updatePetBaseInfo();
	};

	const updatePetBaseInfo = () => {
		// 触发 update 事件，将修改后的 petBaseInfo 对象发送给父组件
		emits('update:petBaseInfo', props.petBaseInfo);
	};

	const getPersonalityDataList = () => {
		// getDictList('pet_personality').then(res => {
		//     if (res.code === 200) {
		//         dispositionActions.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
		//     } else {
		//         uni.showToast({
		//             title: '获取性格失败',
		//             icon: 'none'
		//         });
		//     }
		// });
	};

	const getPetBreed = () => {
		let petBreedType = props.petType === 'cat' ? 'pet_brand_cat' : 'pet_brand_dog';
		// getDictList(petBreedType).then(res => {
		//     if (res.code === 200) {
		//         breedData.value = Array.from(new Set(res.data.map(e => e.dictLabel)));
		//     } else {
		//         uni.showToast({
		//             title: '获取种类失败',
		//             icon: 'none'
		//         });
		//     }
		// });
	};

	const getMaxDate = () => {
		return Date.now();
	};

	const getMinDate = () => {
		let dt = new Date();
		dt.setFullYear(dt.getFullYear() - 30);
		return Date.parse(dt);
	};

	// 生命周期钩子
	onMounted(() => {
		// getPersonalityDataList();
		// getPetBreed();
	});
</script>

<style>
	.personal-pet-basic-info {
		background-color: #fff;
		margin-top: 10px;
		padding: 10px 20px;
	}

	.personal-pet-breed-btns {
		display: flex;
		justify-content: space-between;
		box-sizing: border-box;
		background-color: #FFFFFF;
		padding: 20rpx 20rpx 40rpx 20rpx;
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		z-index: 100;
	}

	.personal-pet-breed-btn {
		width: 40%;
	}
</style>