pet/pages/pets/pet-detail.vue

<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="warning" text="AI聊天" @click="chatWithPet"></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() {
			try {
				// 从本地存储获取宠物信息
				const pets = uni.getStorageSync('pets') || []
				this.petInfo = pets.find(pet => pet.id == this.petId) || {}

				// 如果没有找到宠物信息，使用默认数据
				if (!this.petInfo.id) {
					this.petInfo = {
						id: this.petId,
						name: '未知宠物',
						breed: '未知品种',
						age: 0,
						companionDays: 0,
						avatar: '/static/default-pet.png',
						gender: '未知',
						weight: '0kg',
						birthday: '未知'
					}
				}
			} catch (error) {
				console.error('加载宠物信息失败', error)
				this.petInfo = {}
			}
		},
		
		goBack() {
			uni.navigateBack()
		},
		
		editPet() {
			uni.navigateTo({
				url: `/pages/pets/edit-pet?id=${this.petId}`
			})
		},
		
		addRecord() {
			uni.navigateTo({
				url: `/pages/pets/add-record-simple?petId=${this.petId}`
			})
		},

		chatWithPet() {
			uni.navigateTo({
				url: `/pages/pets/pet-chat-simple?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>