pet-front-order/pages/personalCenter/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>

			<u-picker :show="showSex" :showToolbar='false' :columns="sexActions" @cancel="showSex = false" :immediateChange="true"
				@confirm="sexSelect"></u-picker>
			<u-picker :show="showWeight" :showToolbar='false' :columns="weightActions" @cancel="showWeight = false" :immediateChange="true"
				@confirm="weightSelect"></u-picker>
					

			<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>
	import { getDictList } from "@/api/system/user"
	export default {
		data() {
			return {
				showSex: false,
				showWeight: false,
				showBirthday: false,
				sexActions: [['男生','女生']],
				weightActions: [['小型（<10 KG）','中型（10~20KG）', '大型（20KG以上）']],
				tempBirthday: ''
			}
		},
		
		watch: {
			'petBaseInfo.breed': {
				handler(newVal) {
					console.log('品种数据更新:', newVal);
					this.updatePetBaseInfo();
				},
				immediate: true
			}
		},
		props:{
			petType: {
			    type: String,
			    default: 'dog'
			},
			petBaseInfo:{
				type: Object,
				default: ()=> ({
					name: '',
					gender: '',
					breed: '',
					bodyType: '',
					birthDate: '',
					personality: ''
				})
			}
		},

		methods: {
			nameChange(){
				this.updatePetBaseInfo()
			},
			sexSelect(e) {
				this.petBaseInfo.gender = e.value[0];
				this.showSex = false;
				this.updatePetBaseInfo()
			},
			weightSelect(e) {
				this.petBaseInfo.bodyType = e.value[0];
				this.showWeight=false;
				this.updatePetBaseInfo()
			},
			breedSelectOpen() {
				// 跳转到品种选择页面
				uni.navigateTo({
					url: `/pages/personalCenter/breedSelect?petType=${this.petType}&selectedBreed=${encodeURIComponent(this.petBaseInfo.breed || '')}`
				});
			},

			yearMonthOpen() {
				if (this.petBaseInfo.birthDate) {
					this.tempBirthday = Number(new Date(this.petBaseInfo.birthDate))
				} else {
					this.tempBirthday = Number(new Date())
				}
				this.showBirthday = true;
			},
			yearMonthClose() {
				this.showBirthday = false;
			},
			yearMonthConfirm(e) {
				const timeFormat = uni.$u.timeFormat;
				this.petBaseInfo.birthDate = timeFormat(e.value, 'yyyy-mm');
				this.showBirthday = false;
				this.updatePetBaseInfo()
			},
			dispositionSelectOpen() {
				// 跳转到性格选择页面
				uni.navigateTo({
					url: `/pages/personalCenter/personalitySelect?personality=${encodeURIComponent(this.petBaseInfo.personality || '')}`
				});
			},

			updatePetBaseInfo() {
			  // 触发 update 事件，将修改后的 petBaseInfo 对象发送给父组件
			  this.$emit('update:petBaseInfo', this.petBaseInfo);
			},


			getMaxDate(){
				return Date.now()
			},
			getMinDate(){
				let dt = new Date();
				dt.setFullYear(dt.getFullYear() - 30)
				return Date.parse(dt)
			}
		}
	}
</script>

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

</style>