完善宠物管理功能
✨ 新增功能: - 宠物详情页面：展示完整的宠物信息和最近记录 - 添加宠物页面：支持头像上传、基本信息录入、表单验证 - 添加记录页面：支持多种记录类型、照片上传、日期选择 - 本地存储集成：宠物数据和记录数据持久化存储 🎨 界面优化: - 使用uView组件构建现代化表单界面 - 支持图片选择和预览功能 - 响应式网格布局展示信息 - 完善的空状态和加载状态 📱 用户体验: - 表单验证和错误提示 - 图片上传和预览 - 日期选择器集成 - 数据持久化存储 🔧 技术改进: - 页面路由配置完善 - 自定义导航栏样式 - 组件化开发模式
This commit is contained in:
@@ -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>
|
||||
Reference in New Issue
Block a user