pet/pages/pets/add-pet.vue

<template>
	<view class="add-pet-container">
		<u-form :model="petForm" ref="petFormRef" :rules="rules" label-width="120">
			<u-card :padding="20" margin="20">
				<view class="avatar-section">
					<u-avatar :src="petForm.avatar || '/static/default-pet.png'" size="80" shape="circle" @click="chooseAvatar"></u-avatar>
					<u-text text="点击上传头像" type="tips" size="12"></u-text>
				</view>
			</u-card>
			
			<u-card :padding="20" margin="20">
				<u-form-item label="宠物姓名" prop="name" required>
					<u-input v-model="petForm.name" placeholder="请输入宠物姓名"></u-input>
				</u-form-item>
				
				<u-form-item label="品种" prop="breed" required>
					<u-input v-model="petForm.breed" placeholder="请输入宠物品种"></u-input>
				</u-form-item>
				
				<u-form-item label="性别" prop="gender" required>
					<u-radio-group v-model="petForm.gender" placement="row">
						<u-radio label="公" name="公"></u-radio>
						<u-radio label="母" name="母"></u-radio>
					</u-radio-group>
				</u-form-item>
				
				<u-form-item label="生日" prop="birthday" required>
					<u-input v-model="petForm.birthday" placeholder="请选择生日" readonly @click="showDatePicker = true"></u-input>
				</u-form-item>
				
				<u-form-item label="体重" prop="weight">
					<u-input v-model="petForm.weight" placeholder="请输入体重（如：4.5kg）"></u-input>
				</u-form-item>
				
				<u-form-item label="备注" prop="notes">
					<u-textarea v-model="petForm.notes" placeholder="记录一些特殊信息..." maxlength="200"></u-textarea>
				</u-form-item>
			</u-card>
		</u-form>
		
		<view class="submit-section">
			<u-button type="primary" text="保存宠物信息" @click="submitForm" :loading="loading"></u-button>
		</view>
		
		<!-- 日期选择器 -->
		<u-datetime-picker 
			:show="showDatePicker" 
			v-model="selectedDate"
			mode="date"
			@confirm="confirmDate"
			@cancel="showDatePicker = false">
		</u-datetime-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			showDatePicker: false,
			selectedDate: new Date().getTime(),
			petForm: {
				name: '',
				breed: '',
				gender: '公',
				birthday: '',
				weight: '',
				notes: '',
				avatar: ''
			},
			rules: {
				name: [
					{
						required: true,
						message: '请输入宠物姓名',
						trigger: 'blur'
					}
				],
				breed: [
					{
						required: true,
						message: '请输入宠物品种',
						trigger: 'blur'
					}
				],
				gender: [
					{
						required: true,
						message: '请选择宠物性别',
						trigger: 'change'
					}
				],
				birthday: [
					{
						required: true,
						message: '请选择宠物生日',
						trigger: 'blur'
					}
				]
			}
		}
	},
	methods: {
		chooseAvatar() {
			uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.petForm.avatar = res.tempFilePaths[0]
				},
				fail: (err) => {
					console.error('选择图片失败', err)
				}
			})
		},
		
		confirmDate(e) {
			const date = new Date(e.value)
			this.petForm.birthday = `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
			this.showDatePicker = false
		},
		
		submitForm() {
			this.$refs.petFormRef.validate().then(valid => {
				if (valid) {
					this.savePet()
				}
			}).catch(errors => {
				console.log('表单验证失败', errors)
			})
		},
		
		savePet() {
			this.loading = true
			
			// 计算陪伴天数
			const birthday = new Date(this.petForm.birthday)
			const today = new Date()
			const companionDays = Math.floor((today - birthday) / (1000 * 60 * 60 * 24))
			
			// 计算年龄
			const age = Math.floor(companionDays / 365)
			
			const petData = {
				...this.petForm,
				id: Date.now(), // 简单的ID生成
				age: age,
				companionDays: companionDays,
				createTime: new Date().toISOString()
			}
			
			// 模拟保存到本地存储
			setTimeout(() => {
				try {
					let pets = uni.getStorageSync('pets') || []
					pets.push(petData)
					uni.setStorageSync('pets', pets)
					
					this.loading = false
					uni.showToast({
						title: '保存成功',
						icon: 'success'
					})
					
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} catch (error) {
					this.loading = false
					uni.showToast({
						title: '保存失败',
						icon: 'error'
					})
				}
			}, 1000)
		}
	}
}
</script>

<style lang="scss" scoped>
.add-pet-container {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
	min-height: 100vh;
}

.avatar-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.submit-section {
	padding: 40rpx 30rpx;
}

:deep(.u-form-item) {
	margin-bottom: 30rpx;
}

:deep(.u-card) {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(20rpx);
	border-radius: 24rpx;
	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
	border: 1rpx solid rgba(255, 255, 255, 0.3);
}

:deep(.u-button--primary) {
	background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
	border: none;
	box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
}
</style>