From 63bf142c5545f67c7871aa3dd0316758e70b4cba Mon Sep 17 00:00:00 2001
From: yvan <8574526@qq.com>
Date: Tue, 12 Aug 2025 10:33:15 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=AE=A0=E7=89=A9=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✨ 新增功能:
- 宠物详情页面：展示完整的宠物信息和最近记录
- 添加宠物页面：支持头像上传、基本信息录入、表单验证
- 添加记录页面：支持多种记录类型、照片上传、日期选择
- 本地存储集成：宠物数据和记录数据持久化存储

🎨 界面优化:
- 使用uView组件构建现代化表单界面
- 支持图片选择和预览功能
- 响应式网格布局展示信息
- 完善的空状态和加载状态

📱 用户体验:
- 表单验证和错误提示
- 图片上传和预览
- 日期选择器集成
- 数据持久化存储

🔧 技术改进:
- 页面路由配置完善
- 自定义导航栏样式
- 组件化开发模式
---
 pages.json                |  27 +++++
 pages/pets/add-pet.vue    | 209 ++++++++++++++++++++++++++++++++
 pages/pets/add-record.vue | 244 ++++++++++++++++++++++++++++++++++++++
 pages/pets/pet-detail.vue | 210 ++++++++++++++++++++++++++++++++
 pages/pets/pets.vue       |  38 ++----
 5 files changed, 703 insertions(+), 25 deletions(-)
 create mode 100644 pages/pets/add-pet.vue
 create mode 100644 pages/pets/add-record.vue
 create mode 100644 pages/pets/pet-detail.vue

diff --git a/pages.json b/pages.json
index 36e98da..5cba2cc 100644
--- a/pages.json
+++ b/pages.json
@@ -32,6 +32,33 @@
 				"navigationBarTextStyle": "black"
 			}
 		},
+		{
+			"path": "pages/pets/pet-detail",
+			"style": {
+				"navigationBarTitleText": "宠物详情",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/pets/add-pet",
+			"style": {
+				"navigationBarTitleText": "添加宠物",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/pets/add-record",
+			"style": {
+				"navigationBarTitleText": "添加记录",
+				"navigationBarBackgroundColor": "#ffffff",
+				"navigationBarTextStyle": "black",
+				"navigationStyle": "custom"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
diff --git a/pages/pets/add-pet.vue b/pages/pets/add-pet.vue
new file mode 100644
index 0000000..2e973c3
--- /dev/null
+++ b/pages/pets/add-pet.vue
@@ -0,0 +1,209 @@
+<template>
+	<view class="add-pet-container">
+		<u-navbar title="添加宠物" left-icon="arrow-left" @left-click="goBack"></u-navbar>
+		
+		<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: {
+		goBack() {
+			uni.navigateBack()
+		},
+		
+		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-color: #f8f9fa;
+	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;
+}
+</style>
diff --git a/pages/pets/add-record.vue b/pages/pets/add-record.vue
new file mode 100644
index 0000000..17cedfa
--- /dev/null
+++ b/pages/pets/add-record.vue
@@ -0,0 +1,244 @@
+<template>
+	<view class="add-record-container">
+		<u-navbar title="添加记录" left-icon="arrow-left" @left-click="goBack"></u-navbar>
+		
+		<u-form :model="recordForm" ref="recordFormRef" :rules="rules" label-width="120">
+			<u-card :padding="20" margin="20">
+				<u-form-item label="记录类型" prop="type" required>
+					<u-radio-group v-model="recordForm.type" placement="row">
+						<u-radio label="日常" name="daily"></u-radio>
+						<u-radio label="喂食" name="feeding"></u-radio>
+						<u-radio label="健康" name="health"></u-radio>
+						<u-radio label="其他" name="other"></u-radio>
+					</u-radio-group>
+				</u-form-item>
+				
+				<u-form-item label="记录日期" prop="date" required>
+					<u-input v-model="recordForm.date" placeholder="请选择日期" readonly @click="showDatePicker = true"></u-input>
+				</u-form-item>
+				
+				<u-form-item label="记录内容" prop="content" required>
+					<u-textarea v-model="recordForm.content" placeholder="记录宠物的状态、行为或其他信息..." maxlength="500" :count="true"></u-textarea>
+				</u-form-item>
+				
+				<u-form-item label="添加照片" prop="photos">
+					<view class="photo-section">
+						<view class="photo-list">
+							<view class="photo-item" v-for="(photo, index) in recordForm.photos" :key="index">
+								<image :src="photo" mode="aspectFill" @click="previewImage(photo)"></image>
+								<u-icon name="close-circle-fill" color="#ff4757" size="16" @click="removePhoto(index)"></u-icon>
+							</view>
+							<view class="add-photo-btn" @click="choosePhotos" v-if="recordForm.photos.length < 9">
+								<u-icon name="camera" size="24" color="#999"></u-icon>
+								<text class="add-text">添加照片</text>
+							</view>
+						</view>
+					</view>
+				</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 {
+			petId: '',
+			loading: false,
+			showDatePicker: false,
+			selectedDate: new Date().getTime(),
+			recordForm: {
+				type: 'daily',
+				date: this.formatDate(new Date()),
+				content: '',
+				photos: []
+			},
+			rules: {
+				type: [
+					{
+						required: true,
+						message: '请选择记录类型',
+						trigger: 'change'
+					}
+				],
+				date: [
+					{
+						required: true,
+						message: '请选择记录日期',
+						trigger: 'blur'
+					}
+				],
+				content: [
+					{
+						required: true,
+						message: '请输入记录内容',
+						trigger: 'blur'
+					}
+				]
+			}
+		}
+	},
+	onLoad(options) {
+		this.petId = options.petId
+	},
+	methods: {
+		formatDate(date) {
+			return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`
+		},
+		
+		goBack() {
+			uni.navigateBack()
+		},
+		
+		confirmDate(e) {
+			const date = new Date(e.value)
+			this.recordForm.date = this.formatDate(date)
+			this.showDatePicker = false
+		},
+		
+		choosePhotos() {
+			const remainingCount = 9 - this.recordForm.photos.length
+			uni.chooseImage({
+				count: remainingCount,
+				sizeType: ['compressed'],
+				sourceType: ['album', 'camera'],
+				success: (res) => {
+					this.recordForm.photos.push(...res.tempFilePaths)
+				},
+				fail: (err) => {
+					console.error('选择图片失败', err)
+				}
+			})
+		},
+		
+		removePhoto(index) {
+			this.recordForm.photos.splice(index, 1)
+		},
+		
+		previewImage(src) {
+			uni.previewImage({
+				urls: this.recordForm.photos,
+				current: src
+			})
+		},
+		
+		submitForm() {
+			this.$refs.recordFormRef.validate().then(valid => {
+				if (valid) {
+					this.saveRecord()
+				}
+			}).catch(errors => {
+				console.log('表单验证失败', errors)
+			})
+		},
+		
+		saveRecord() {
+			this.loading = true
+			
+			const recordData = {
+				...this.recordForm,
+				id: Date.now(),
+				petId: this.petId,
+				createTime: new Date().toISOString()
+			}
+			
+			// 模拟保存到本地存储
+			setTimeout(() => {
+				try {
+					let records = uni.getStorageSync('petRecords') || []
+					records.unshift(recordData) // 最新记录在前
+					uni.setStorageSync('petRecords', records)
+					
+					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-record-container {
+	background-color: #f8f9fa;
+	min-height: 100vh;
+}
+
+.photo-section {
+	.photo-list {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 20rpx;
+		
+		.photo-item {
+			position: relative;
+			width: 150rpx;
+			height: 150rpx;
+			
+			image {
+				width: 100%;
+				height: 100%;
+				border-radius: 10rpx;
+			}
+			
+			/deep/ .u-icon {
+				position: absolute;
+				top: -8rpx;
+				right: -8rpx;
+			}
+		}
+		
+		.add-photo-btn {
+			width: 150rpx;
+			height: 150rpx;
+			border: 2rpx dashed #ddd;
+			border-radius: 10rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			gap: 10rpx;
+			
+			.add-text {
+				font-size: 24rpx;
+				color: #999;
+			}
+		}
+	}
+}
+
+.submit-section {
+	padding: 40rpx 30rpx;
+}
+
+/deep/ .u-form-item {
+	margin-bottom: 30rpx;
+}
+</style>
diff --git a/pages/pets/pet-detail.vue b/pages/pets/pet-detail.vue
new file mode 100644
index 0000000..f7198b3
--- /dev/null
+++ b/pages/pets/pet-detail.vue
@@ -0,0 +1,210 @@
+<template>
+	<view class="pet-detail-container">
+		<u-navbar :title="petInfo.name || '宠物详情'" left-icon="arrow-left" @left-click="goBack">
+			<template #right>
+				<u-icon name="edit-pen" size="20" @click="editPet"></u-icon>
+			</template>
+		</u-navbar>
+		
+		<view class="pet-header">
+			<u-avatar :src="petInfo.avatar || '/static/default-pet.png'" size="80" shape="circle"></u-avatar>
+			<view class="pet-basic-info">
+				<u-text :text="petInfo.name" type="primary" size="18" bold></u-text>
+				<u-text :text="`${petInfo.breed} · ${petInfo.gender}`" type="info" size="14"></u-text>
+				<u-text :text="`${petInfo.age}岁 · ${petInfo.weight}`" type="tips" size="12"></u-text>
+			</view>
+		</view>
+		
+		<u-gap height="20"></u-gap>
+		
+		<u-card title="基本信息" :padding="20">
+			<view class="info-grid">
+				<view class="info-item">
+					<u-text text="生日" type="tips" size="12"></u-text>
+					<u-text :text="petInfo.birthday" type="primary" size="14"></u-text>
+				</view>
+				<view class="info-item">
+					<u-text text="陪伴天数" type="tips" size="12"></u-text>
+					<u-text :text="`${petInfo.companionDays}天`" type="primary" size="14"></u-text>
+				</view>
+				<view class="info-item">
+					<u-text text="体重" type="tips" size="12"></u-text>
+					<u-text :text="petInfo.weight" type="primary" size="14"></u-text>
+				</view>
+				<view class="info-item">
+					<u-text text="性别" type="tips" size="12"></u-text>
+					<u-text :text="petInfo.gender" type="primary" size="14"></u-text>
+				</view>
+			</view>
+		</u-card>
+		
+		<u-gap height="20"></u-gap>
+		
+		<u-card title="最近记录" :padding="20">
+			<view class="records-list" v-if="recentRecords.length > 0">
+				<view class="record-item" v-for="record in recentRecords" :key="record.id">
+					<view class="record-date">{{ record.date }}</view>
+					<view class="record-content">{{ record.content }}</view>
+				</view>
+			</view>
+			<u-empty v-else mode="data" text="暂无记录" :show="true"></u-empty>
+		</u-card>
+		
+		<u-gap height="20"></u-gap>
+		
+		<view class="action-buttons">
+			<u-button type="primary" text="添加记录" @click="addRecord"></u-button>
+			<u-button type="success" text="健康档案" @click="viewHealth"></u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			petId: '',
+			petInfo: {},
+			recentRecords: [
+				{
+					id: 1,
+					date: '2024-01-15',
+					content: '今天小橘很活泼，食欲很好'
+				},
+				{
+					id: 2,
+					date: '2024-01-14',
+					content: '带小橘去公园散步，玩得很开心'
+				}
+			]
+		}
+	},
+	onLoad(options) {
+		this.petId = options.id
+		this.loadPetInfo()
+	},
+	methods: {
+		loadPetInfo() {
+			// 模拟从本地存储或API获取宠物信息
+			const mockPets = [
+				{
+					id: 1,
+					name: '小橘',
+					breed: '橘猫',
+					age: 2,
+					companionDays: 365,
+					avatar: '/static/cat-avatar.jpg',
+					gender: '公',
+					weight: '4.5kg',
+					birthday: '2022-01-15'
+				},
+				{
+					id: 2,
+					name: '小白',
+					breed: '金毛',
+					age: 3,
+					companionDays: 1095,
+					avatar: '/static/dog-avatar.jpg',
+					gender: '母',
+					weight: '25kg',
+					birthday: '2021-03-20'
+				}
+			]
+			
+			this.petInfo = mockPets.find(pet => pet.id == this.petId) || {}
+		},
+		
+		goBack() {
+			uni.navigateBack()
+		},
+		
+		editPet() {
+			uni.navigateTo({
+				url: `/pages/pets/edit-pet?id=${this.petId}`
+			})
+		},
+		
+		addRecord() {
+			uni.navigateTo({
+				url: `/pages/pets/add-record?petId=${this.petId}`
+			})
+		},
+		
+		viewHealth() {
+			uni.navigateTo({
+				url: `/pages/pets/health-record?petId=${this.petId}`
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.pet-detail-container {
+	background-color: #f8f9fa;
+	min-height: 100vh;
+}
+
+.pet-header {
+	background-color: white;
+	padding: 30rpx;
+	display: flex;
+	align-items: center;
+	
+	.pet-basic-info {
+		margin-left: 30rpx;
+		flex: 1;
+		
+		/deep/ .u-text {
+			margin-bottom: 8rpx;
+		}
+	}
+}
+
+.info-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr;
+	gap: 30rpx;
+	
+	.info-item {
+		display: flex;
+		flex-direction: column;
+		
+		/deep/ .u-text:first-child {
+			margin-bottom: 8rpx;
+		}
+	}
+}
+
+.records-list {
+	.record-item {
+		padding: 20rpx 0;
+		border-bottom: 1rpx solid #f0f0f0;
+		
+		&:last-child {
+			border-bottom: none;
+		}
+		
+		.record-date {
+			font-size: 24rpx;
+			color: #999;
+			margin-bottom: 8rpx;
+		}
+		
+		.record-content {
+			font-size: 28rpx;
+			color: #333;
+		}
+	}
+}
+
+.action-buttons {
+	padding: 30rpx;
+	display: flex;
+	gap: 20rpx;
+	
+	/deep/ .u-button {
+		flex: 1;
+	}
+}
+</style>
diff --git a/pages/pets/pets.vue b/pages/pets/pets.vue
index 1e1dba9..b29b09e 100644
--- a/pages/pets/pets.vue
+++ b/pages/pets/pets.vue
@@ -34,34 +34,22 @@
 export default {
 	data() {
 		return {
-			petsList: [
-				// 示例数据
-				{
-					id: 1,
-					name: '小橘',
-					breed: '橘猫',
-					age: 2,
-					companionDays: 365,
-					avatar: '/static/cat-avatar.jpg',
-					gender: '公',
-					weight: '4.5kg',
-					birthday: '2022-01-15'
-				},
-				{
-					id: 2,
-					name: '小白',
-					breed: '金毛',
-					age: 3,
-					companionDays: 1095,
-					avatar: '/static/dog-avatar.jpg',
-					gender: '母',
-					weight: '25kg',
-					birthday: '2021-03-20'
-				}
-			]
+			petsList: []
 		}
 	},
+	onShow() {
+		this.loadPets()
+	},
 	methods: {
+		loadPets() {
+			try {
+				const pets = uni.getStorageSync('pets') || []
+				this.petsList = pets
+			} catch (error) {
+				console.error('加载宠物列表失败', error)
+				this.petsList = []
+			}
+		},
 		addPet() {
 			uni.navigateTo({
 				url: '/pages/pets/add-pet'