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="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>