From cacf71e5a6b29aedbe2e42a1902b387cfadfad46 Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Thu, 14 Aug 2025 22:13:02 +0800
Subject: [PATCH] 1

---
 pages/pets/edit-pet.vue | 630 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 630 insertions(+)
 create mode 100644 pages/pets/edit-pet.vue

diff --git a/pages/pets/edit-pet.vue b/pages/pets/edit-pet.vue
new file mode 100644
index 0000000..b6ac88f
--- /dev/null
+++ b/pages/pets/edit-pet.vue
@@ -0,0 +1,630 @@
+<template>
+	<view class="edit-pet-container page-container-with-bg">
+		<!-- 页面标题 -->
+		<view class="page-header">
+			<view class="header-title">
+				<text class="title-icon">✏️</text>
+				<text class="title-text">编辑宠物信息</text>
+			</view>
+			<text class="header-subtitle">修改您的爱宠档案</text>
+		</view>
+
+		<!-- 头像上传区域 -->
+		<view class="avatar-card card">
+			<view class="avatar-section">
+				<view class="avatar-container" @click="chooseAvatar">
+					<image
+						v-if="petForm.avatar"
+						:src="petForm.avatar"
+						class="pet-avatar"
+						mode="aspectFill"
+					/>
+					<view v-else class="avatar-placeholder">
+						<text class="avatar-icon">📷</text>
+						<text class="avatar-text">添加照片</text>
+					</view>
+					<view class="avatar-overlay">
+						<text class="overlay-icon">✏️</text>
+					</view>
+				</view>
+				<text class="avatar-tip">点击更换宠物照片</text>
+			</view>
+		</view>
+
+		<!-- 基本信息表单 -->
+		<view class="form-card card">
+			<view class="card-header">
+				<text class="card-title">基本信息</text>
+			</view>
+
+			<view class="form-content">
+				<!-- 宠物姓名 -->
+				<view class="input-container">
+					<text class="input-label">宠物姓名 <text class="required-star">*</text></text>
+					<input
+						class="input-field"
+						v-model="petForm.name"
+						placeholder="给您的宠物起个好听的名字"
+						maxlength="20"
+					/>
+				</view>
+
+				<!-- 品种 -->
+				<view class="input-container">
+					<text class="input-label">品种 <text class="required-star">*</text></text>
+					<input
+						class="input-field"
+						v-model="petForm.breed"
+						placeholder="如：金毛、英短、布偶猫等"
+						maxlength="30"
+					/>
+				</view>
+
+				<!-- 性别 -->
+				<view class="input-container">
+					<text class="input-label">性别 <text class="required-star">*</text></text>
+					<view class="gender-selector">
+						<view 
+							class="gender-option" 
+							:class="{ active: petForm.gender === '公' }"
+							@click="petForm.gender = '公'"
+						>
+							<text class="gender-icon">♂️</text>
+							<text class="gender-text">公</text>
+						</view>
+						<view 
+							class="gender-option" 
+							:class="{ active: petForm.gender === '母' }"
+							@click="petForm.gender = '母'"
+						>
+							<text class="gender-icon">♀️</text>
+							<text class="gender-text">母</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 生日 -->
+				<view class="input-container">
+					<text class="input-label">生日 <text class="required-star">*</text></text>
+					<view class="date-input" @click="showDatePicker = true">
+						<text class="date-text" :class="{ placeholder: !petForm.birthday }">
+							{{ petForm.birthday || '请选择宠物生日' }}
+						</text>
+						<text class="date-icon">📅</text>
+					</view>
+				</view>
+
+				<!-- 体重 -->
+				<view class="input-container">
+					<text class="input-label">体重</text>
+					<input
+						class="input-field"
+						v-model="petForm.weight"
+						placeholder="如：4.5kg（可选填）"
+						maxlength="10"
+					/>
+				</view>
+			</view>
+		</view>
+
+		<!-- 备注信息 -->
+		<view class="notes-card card">
+			<view class="card-header">
+				<text class="card-title">备注信息</text>
+			</view>
+			<view class="notes-content">
+				<textarea
+					class="notes-textarea"
+					v-model="petForm.notes"
+					placeholder="记录一些特殊信息，如：性格特点、喜好、注意事项等..."
+					maxlength="200"
+				/>
+				<view class="char-count">
+					<text class="count-text">{{ petForm.notes?.length || 0 }}/200</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 提交按钮 -->
+		<view class="submit-section">
+			<button class="submit-btn btn-primary" @click="submitForm" :disabled="loading">
+				<text v-if="loading" class="loading-icon">⏳</text>
+				<text class="btn-text">{{ loading ? '保存中...' : '保存修改' }}</text>
+			</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 {
+			petId: '',
+			loading: false,
+			showDatePicker: false,
+			selectedDate: new Date().getTime(),
+			petForm: {
+				name: '',
+				breed: '',
+				gender: '公',
+				birthday: '',
+				weight: '',
+				notes: '',
+				avatar: ''
+			}
+		}
+	},
+	onLoad(options) {
+		this.petId = options.id
+		this.loadPetInfo()
+	},
+	methods: {
+		loadPetInfo() {
+			try {
+				// 从本地存储获取宠物信息
+				const pets = uni.getStorageSync('pets') || []
+				const petInfo = pets.find(pet => pet.id == this.petId)
+				
+				if (petInfo) {
+					this.petForm = {
+						name: petInfo.name || '',
+						breed: petInfo.breed || '',
+						gender: petInfo.gender || '公',
+						birthday: petInfo.birthday || '',
+						weight: petInfo.weight || '',
+						notes: petInfo.notes || '',
+						avatar: petInfo.avatar || ''
+					}
+				}
+			} catch (error) {
+				console.error('加载宠物信息失败', error)
+				uni.showToast({
+					title: '加载失败',
+					icon: 'error'
+				})
+			}
+		},
+		
+		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() {
+			// 简单验证
+			if (!this.petForm.name.trim()) {
+				uni.showToast({
+					title: '请输入宠物姓名',
+					icon: 'none'
+				})
+				return
+			}
+			
+			if (!this.petForm.breed.trim()) {
+				uni.showToast({
+					title: '请输入宠物品种',
+					icon: 'none'
+				})
+				return
+			}
+			
+			if (!this.petForm.birthday) {
+				uni.showToast({
+					title: '请选择宠物生日',
+					icon: 'none'
+				})
+				return
+			}
+			
+			this.savePet()
+		},
+		
+		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)
+			
+			// 模拟保存到本地存储
+			setTimeout(() => {
+				try {
+					let pets = uni.getStorageSync('pets') || []
+					const petIndex = pets.findIndex(pet => pet.id == this.petId)
+					
+					if (petIndex > -1) {
+						// 更新现有宠物信息
+						pets[petIndex] = {
+							...pets[petIndex],
+							...this.petForm,
+							age: age,
+							companionDays: companionDays,
+							updateTime: new Date().toISOString()
+						}
+						
+						uni.setStorageSync('pets', pets)
+						
+						this.loading = false
+						uni.showToast({
+							title: '保存成功',
+							icon: 'success'
+						})
+						
+						setTimeout(() => {
+							uni.navigateBack()
+						}, 1500)
+					} else {
+						this.loading = false
+						uni.showToast({
+							title: '宠物信息不存在',
+							icon: 'error'
+						})
+					}
+				} catch (error) {
+					this.loading = false
+					uni.showToast({
+						title: '保存失败',
+						icon: 'error'
+					})
+				}
+			}, 1000)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-pet-container {
+	padding: 20rpx;
+	padding-bottom: 120rpx;
+}
+
+/* 页面标题 */
+.page-header {
+	text-align: center;
+	margin-bottom: 40rpx;
+	padding: 40rpx 20rpx;
+
+	.header-title {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 16rpx;
+		margin-bottom: 16rpx;
+
+		.title-icon {
+			font-size: 48rpx;
+		}
+
+		.title-text {
+			font-size: 44rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+
+	.header-subtitle {
+		font-size: 28rpx;
+		color: #666666;
+		opacity: 0.8;
+	}
+}
+
+/* 通用卡片样式 */
+.card {
+	background: rgba(255, 255, 255, 0.95);
+	backdrop-filter: blur(20rpx);
+	border-radius: 24rpx;
+	margin-bottom: 24rpx;
+	box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.15);
+	border: 1rpx solid rgba(255, 255, 255, 0.3);
+}
+
+/* 头像卡片 */
+.avatar-card {
+	padding: 40rpx;
+
+	.avatar-section {
+		text-align: center;
+
+		.avatar-container {
+			position: relative;
+			display: inline-block;
+			margin-bottom: 20rpx;
+
+			.pet-avatar {
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 80rpx;
+				border: 4rpx solid #FF8A80;
+				box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.3);
+			}
+
+			.avatar-placeholder {
+				width: 160rpx;
+				height: 160rpx;
+				border-radius: 80rpx;
+				border: 4rpx dashed #CCCCCC;
+				background: #F5F5F5;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				justify-content: center;
+				gap: 8rpx;
+
+				.avatar-icon {
+					font-size: 48rpx;
+					color: #CCCCCC;
+				}
+
+				.avatar-text {
+					font-size: 24rpx;
+					color: #999999;
+				}
+			}
+
+			.avatar-overlay {
+				position: absolute;
+				bottom: 8rpx;
+				right: 8rpx;
+				width: 48rpx;
+				height: 48rpx;
+				background: #FF8A80;
+				border-radius: 24rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-shadow: 0 4rpx 12rpx rgba(255, 138, 128, 0.4);
+
+				.overlay-icon {
+					font-size: 24rpx;
+					color: white;
+				}
+			}
+		}
+
+		.avatar-tip {
+			font-size: 24rpx;
+			color: #999999;
+		}
+	}
+}
+
+/* 表单卡片 */
+.form-card {
+	padding: 32rpx;
+
+	.card-header {
+		margin-bottom: 32rpx;
+
+		.card-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+
+	.form-content {
+		.input-container {
+			margin-bottom: 32rpx;
+
+			&:last-child {
+				margin-bottom: 0;
+			}
+
+			.input-label {
+				font-size: 28rpx;
+				color: #333333;
+				margin-bottom: 16rpx;
+				display: block;
+				font-weight: 500;
+
+				.required-star {
+					color: #FF8A80;
+					margin-left: 4rpx;
+				}
+			}
+
+			.input-field {
+				width: 100%;
+				height: 88rpx;
+				background: rgba(255, 138, 128, 0.05);
+				border: 2rpx solid rgba(255, 138, 128, 0.1);
+				border-radius: 16rpx;
+				padding: 0 24rpx;
+				font-size: 28rpx;
+				color: #333333;
+				box-sizing: border-box;
+				transition: all 0.3s ease;
+
+				&:focus {
+					border-color: #FF8A80;
+					background: rgba(255, 138, 128, 0.08);
+				}
+
+				&::placeholder {
+					color: #CCCCCC;
+				}
+			}
+
+			.gender-selector {
+				display: flex;
+				gap: 16rpx;
+
+				.gender-option {
+					flex: 1;
+					height: 88rpx;
+					background: rgba(255, 138, 128, 0.05);
+					border: 2rpx solid rgba(255, 138, 128, 0.1);
+					border-radius: 16rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					gap: 12rpx;
+					transition: all 0.3s ease;
+
+					&.active {
+						background: #FF8A80;
+						border-color: #FF8A80;
+
+						.gender-icon,
+						.gender-text {
+							color: white;
+						}
+					}
+
+					.gender-icon {
+						font-size: 32rpx;
+						color: #666666;
+					}
+
+					.gender-text {
+						font-size: 28rpx;
+						color: #666666;
+						font-weight: 500;
+					}
+				}
+			}
+
+			.date-input {
+				width: 100%;
+				height: 88rpx;
+				background: rgba(255, 138, 128, 0.05);
+				border: 2rpx solid rgba(255, 138, 128, 0.1);
+				border-radius: 16rpx;
+				padding: 0 24rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				box-sizing: border-box;
+
+				.date-text {
+					font-size: 28rpx;
+					color: #333333;
+
+					&.placeholder {
+						color: #CCCCCC;
+					}
+				}
+
+				.date-icon {
+					font-size: 32rpx;
+					color: #FF8A80;
+				}
+			}
+		}
+	}
+}
+
+/* 备注卡片 */
+.notes-card {
+	padding: 32rpx;
+
+	.card-header {
+		margin-bottom: 24rpx;
+
+		.card-title {
+			font-size: 32rpx;
+			font-weight: bold;
+			color: #333333;
+		}
+	}
+
+	.notes-content {
+		.notes-textarea {
+			width: 100%;
+			min-height: 200rpx;
+			background: rgba(255, 138, 128, 0.05);
+			border: 2rpx solid rgba(255, 138, 128, 0.1);
+			border-radius: 16rpx;
+			padding: 24rpx;
+			font-size: 28rpx;
+			color: #333333;
+			line-height: 1.6;
+			box-sizing: border-box;
+			resize: none;
+
+			&::placeholder {
+				color: #CCCCCC;
+			}
+		}
+
+		.char-count {
+			text-align: right;
+			margin-top: 12rpx;
+
+			.count-text {
+				font-size: 24rpx;
+				color: #999999;
+			}
+		}
+	}
+}
+
+/* 提交按钮 */
+.submit-section {
+	padding: 0 20rpx;
+	margin-top: 40rpx;
+
+	.submit-btn {
+		width: 100%;
+		height: 96rpx;
+		background: linear-gradient(135deg, #FF8A80, #FFB6C1);
+		border: none;
+		border-radius: 24rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 12rpx;
+		box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.4);
+		transition: all 0.3s ease;
+
+		&:active {
+			transform: scale(0.98);
+			box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
+		}
+
+		&:disabled {
+			opacity: 0.6;
+			transform: none;
+		}
+
+		.loading-icon {
+			font-size: 32rpx;
+			color: white;
+		}
+
+		.btn-text {
+			font-size: 32rpx;
+			color: white;
+			font-weight: bold;
+		}
+	}
+}
+</style>