330 lines
8.5 KiB
Vue
330 lines
8.5 KiB
Vue
<template>
|
|
<view class="pets-container">
|
|
<!-- 自定义导航栏 -->
|
|
<view class="custom-navbar">
|
|
<view class="navbar-content">
|
|
<view class="navbar-title">
|
|
<text class="title-text">🐾 我的宠物</text>
|
|
<text class="subtitle-text">{{ petsList.length }}只小可爱陪伴着你</text>
|
|
</view>
|
|
<view class="navbar-actions">
|
|
<view class="action-btn" @click="showQuickActions = true">
|
|
<u-icon name="apps" color="#FF8A80" size="20"></u-icon>
|
|
</view>
|
|
<view class="action-btn add-btn" @click="addPet">
|
|
<u-icon name="plus" color="#ffffff" size="18"></u-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 统计卡片 -->
|
|
<view class="stats-card" v-if="petsList.length > 0">
|
|
<view class="stats-item">
|
|
<view class="stats-number">{{ totalRecords }}</view>
|
|
<view class="stats-label">记录</view>
|
|
</view>
|
|
<view class="stats-item">
|
|
<view class="stats-number">{{ totalDays }}</view>
|
|
<view class="stats-label">陪伴天数</view>
|
|
</view>
|
|
<view class="stats-item">
|
|
<view class="stats-number">{{ upcomingReminders }}</view>
|
|
<view class="stats-label">待办提醒</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 宠物列表 -->
|
|
<view class="pets-list" v-if="petsList.length > 0">
|
|
<view class="pet-card" v-for="pet in petsList" :key="pet.id" @click="viewPetDetail(pet)">
|
|
<!-- 宠物头像和基本信息 -->
|
|
<view class="pet-header">
|
|
<view class="pet-avatar-container">
|
|
<u-avatar :src="pet.avatar || '/static/default-pet.png'" size="70" shape="circle"></u-avatar>
|
|
<view class="pet-status" :class="pet.healthStatus || 'healthy'">
|
|
<u-icon :name="getHealthIcon(pet.healthStatus)" size="12" color="#ffffff"></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="pet-basic-info">
|
|
<view class="pet-name-row">
|
|
<text class="pet-name">{{ pet.name }}</text>
|
|
<view class="pet-gender" :class="pet.gender === '公' ? 'male' : 'female'">
|
|
<u-icon :name="pet.gender === '公' ? 'man' : 'woman'" size="12" color="#ffffff"></u-icon>
|
|
</view>
|
|
</view>
|
|
<text class="pet-breed">{{ pet.breed }}</text>
|
|
<text class="pet-age">{{ pet.age }}岁 · 陪伴{{ pet.companionDays }}天</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 宠物特征标签 -->
|
|
<view class="pet-tags" v-if="pet.personality && pet.personality.length > 0">
|
|
<u-tag
|
|
v-for="tag in pet.personality.slice(0, 3)"
|
|
:key="tag"
|
|
:text="tag"
|
|
type="primary"
|
|
size="mini"
|
|
plain
|
|
></u-tag>
|
|
</view>
|
|
|
|
<!-- 快捷操作按钮 -->
|
|
<view class="pet-actions">
|
|
<view class="action-item" @click.stop="addRecord(pet)">
|
|
<u-icon name="edit-pen" size="16" color="#81C784"></u-icon>
|
|
<text class="action-text">记录</text>
|
|
</view>
|
|
<view class="action-item" @click.stop="chatWithPet(pet)">
|
|
<u-icon name="chat" size="16" color="#64B5F6"></u-icon>
|
|
<text class="action-text">聊天</text>
|
|
</view>
|
|
<view class="action-item" @click.stop="viewHealth(pet)">
|
|
<u-icon name="heart" size="16" color="#FF8A80"></u-icon>
|
|
<text class="action-text">健康</text>
|
|
</view>
|
|
<view class="action-item" @click.stop="viewTimeline(pet)">
|
|
<u-icon name="clock" size="16" color="#FFB74D"></u-icon>
|
|
<text class="action-text">时光</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view class="empty-state" v-else>
|
|
<image class="empty-image" src="/static/empty-pets.png" mode="aspectFit"></image>
|
|
<text class="empty-title">还没有小伙伴呢</text>
|
|
<text class="empty-desc">添加你的第一只宠物，开始记录美好时光吧~</text>
|
|
<u-button
|
|
class="add-first-pet-btn"
|
|
type="primary"
|
|
text="添加第一只宠物"
|
|
shape="round"
|
|
@click="addPet"
|
|
></u-button>
|
|
</view>
|
|
|
|
<!-- 快捷操作弹窗 -->
|
|
<u-popup v-model="showQuickActions" mode="bottom" border-radius="20">
|
|
<view class="quick-actions-popup">
|
|
<view class="popup-header">
|
|
<text class="popup-title">快捷操作</text>
|
|
<u-icon name="close" size="20" @click="showQuickActions = false"></u-icon>
|
|
</view>
|
|
<view class="quick-actions-grid">
|
|
<view class="quick-action-item" @click="navigateToRecords">
|
|
<u-icon name="list" size="24" color="#81C784"></u-icon>
|
|
<text class="quick-action-text">所有记录</text>
|
|
</view>
|
|
<view class="quick-action-item" @click="navigateToStats">
|
|
<u-icon name="bar-chart" size="24" color="#64B5F6"></u-icon>
|
|
<text class="quick-action-text">数据统计</text>
|
|
</view>
|
|
<view class="quick-action-item" @click="navigateToReminders">
|
|
<u-icon name="bell" size="24" color="#FFB74D"></u-icon>
|
|
<text class="quick-action-text">提醒事项</text>
|
|
</view>
|
|
<view class="quick-action-item" @click="exportData">
|
|
<u-icon name="share" size="24" color="#FF8A80"></u-icon>
|
|
<text class="quick-action-text">数据导出</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
petsList: [],
|
|
showQuickActions: false,
|
|
totalRecords: 0,
|
|
totalDays: 0,
|
|
upcomingReminders: 0
|
|
}
|
|
},
|
|
onShow() {
|
|
this.loadPets()
|
|
this.loadStatistics()
|
|
},
|
|
computed: {
|
|
// 计算总陪伴天数
|
|
totalCompanionDays() {
|
|
return this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
|
|
}
|
|
},
|
|
methods: {
|
|
loadPets() {
|
|
try {
|
|
let pets = uni.getStorageSync('pets') || []
|
|
|
|
// 如果没有宠物数据，添加一些模拟数据
|
|
if (pets.length === 0) {
|
|
pets = [
|
|
{
|
|
id: 1,
|
|
name: '小橘',
|
|
breed: '橘猫',
|
|
age: 2,
|
|
companionDays: 365,
|
|
avatar: '/static/default-pet.png',
|
|
gender: '公',
|
|
weight: '4.5kg',
|
|
birthday: '2022-01-15',
|
|
healthStatus: 'healthy',
|
|
personality: ['活泼', '粘人', '贪吃'],
|
|
lastRecord: '2024-01-15'
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '小白',
|
|
breed: '金毛',
|
|
age: 3,
|
|
companionDays: 1095,
|
|
avatar: '/static/default-pet.png',
|
|
gender: '母',
|
|
weight: '25kg',
|
|
birthday: '2021-03-20',
|
|
healthStatus: 'healthy',
|
|
personality: ['温顺', '聪明', '忠诚'],
|
|
lastRecord: '2024-01-14'
|
|
}
|
|
]
|
|
// 保存模拟数据到本地存储
|
|
uni.setStorageSync('pets', pets)
|
|
}
|
|
|
|
this.petsList = pets
|
|
} catch (error) {
|
|
console.error('加载宠物列表失败', error)
|
|
this.petsList = []
|
|
}
|
|
},
|
|
|
|
loadStatistics() {
|
|
try {
|
|
// 加载统计数据
|
|
const records = uni.getStorageSync('petRecords') || []
|
|
this.totalRecords = records.length
|
|
|
|
// 计算总陪伴天数
|
|
this.totalDays = this.petsList.reduce((total, pet) => total + (pet.companionDays || 0), 0)
|
|
|
|
// 模拟待办提醒数量
|
|
this.upcomingReminders = Math.floor(Math.random() * 5) + 1
|
|
} catch (error) {
|
|
console.error('加载统计数据失败', error)
|
|
}
|
|
},
|
|
|
|
getHealthIcon(status) {
|
|
const iconMap = {
|
|
healthy: 'checkmark',
|
|
warning: 'warning',
|
|
sick: 'close'
|
|
}
|
|
return iconMap[status] || 'checkmark'
|
|
},
|
|
|
|
addPet() {
|
|
uni.navigateTo({
|
|
url: '/pages/pets/add-pet'
|
|
})
|
|
},
|
|
|
|
viewPetDetail(pet) {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-detail?id=${pet.id}`
|
|
})
|
|
},
|
|
|
|
chatWithPet(pet) {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-chat-simple?petId=${pet.id}`
|
|
})
|
|
},
|
|
|
|
addRecord(pet) {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/add-record-simple?petId=${pet.id}`
|
|
})
|
|
},
|
|
|
|
viewHealth(pet) {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/health-charts?petId=${pet.id}`
|
|
})
|
|
},
|
|
|
|
viewTimeline(pet) {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-timeline?petId=${pet.id}`
|
|
})
|
|
},
|
|
|
|
// 快捷操作方法
|
|
navigateToRecords() {
|
|
this.showQuickActions = false
|
|
uni.navigateTo({
|
|
url: '/pages/pets/all-records'
|
|
})
|
|
},
|
|
|
|
navigateToStats() {
|
|
this.showQuickActions = false
|
|
uni.navigateTo({
|
|
url: '/pages/pets/statistics'
|
|
})
|
|
},
|
|
|
|
navigateToReminders() {
|
|
this.showQuickActions = false
|
|
uni.navigateTo({
|
|
url: '/pages/pets/reminders'
|
|
})
|
|
},
|
|
|
|
exportData() {
|
|
this.showQuickActions = false
|
|
uni.showToast({
|
|
title: '数据导出功能开发中',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pets-container {
|
|
background-color: #f8f9fa;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.pet-card-content {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.pet-info {
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
|
|
:deep(.u-text) {
|
|
margin-bottom: 8rpx;
|
|
}
|
|
}
|
|
|
|
.pet-actions {
|
|
margin-left: 20rpx;
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|