498 lines
12 KiB
Vue
498 lines
12 KiB
Vue
<template>
|
|
<view class="pet-detail-container">
|
|
<!-- 头部操作栏 -->
|
|
<view class="header-actions">
|
|
<text class="page-title">{{ petInfo.name || '宠物详情' }}</text>
|
|
<view class="edit-btn" @click="editPet">
|
|
<text class="edit-text">编辑</text>
|
|
</view>
|
|
</view>
|
|
|
|
<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>
|
|
|
|
<!-- 性格标签展示 -->
|
|
<u-card title="性格特征" :padding="20" v-if="petInfo.personality && petInfo.personality.length > 0">
|
|
<view class="personality-tags">
|
|
<u-tag
|
|
v-for="tag in petInfo.personality"
|
|
:key="tag"
|
|
:text="tag"
|
|
type="primary"
|
|
size="small"
|
|
plain
|
|
></u-tag>
|
|
</view>
|
|
<u-button
|
|
text="重新设置性格"
|
|
type="info"
|
|
size="mini"
|
|
plain
|
|
@click="setPersonality"
|
|
style="margin-top: 20rpx;"
|
|
></u-button>
|
|
</u-card>
|
|
|
|
<u-card title="性格设置" :padding="20" v-else>
|
|
<u-empty mode="data" text="还未设置宠物性格" :show="true">
|
|
<template #bottom>
|
|
<u-button type="primary" text="设置性格特征" size="mini" @click="setPersonality"></u-button>
|
|
</template>
|
|
</u-empty>
|
|
</u-card>
|
|
|
|
<u-gap height="20"></u-gap>
|
|
|
|
<!-- 快捷功能按钮 -->
|
|
<view class="quick-actions">
|
|
<view class="action-row">
|
|
<view class="action-item" @click="addRecord">
|
|
<u-icon name="edit-pen" size="24" color="#81C784"></u-icon>
|
|
<text class="action-text">添加记录</text>
|
|
</view>
|
|
<view class="action-item" @click="chatWithPet">
|
|
<u-icon name="chat" size="24" color="#64B5F6"></u-icon>
|
|
<text class="action-text">AI聊天</text>
|
|
</view>
|
|
<view class="action-item" @click="viewHealth">
|
|
<u-icon name="heart" size="24" color="#FF8A80"></u-icon>
|
|
<text class="action-text">健康档案</text>
|
|
</view>
|
|
</view>
|
|
<view class="action-row">
|
|
<view class="action-item" @click="viewTimeline">
|
|
<u-icon name="clock" size="24" color="#FFB74D"></u-icon>
|
|
<text class="action-text">成长时光</text>
|
|
</view>
|
|
<view class="action-item" @click="viewRecords">
|
|
<u-icon name="list" size="24" color="#9C27B0"></u-icon>
|
|
<text class="action-text">所有记录</text>
|
|
</view>
|
|
<view class="action-item" @click="shareProfile">
|
|
<u-icon name="share" size="24" color="#FF9800"></u-icon>
|
|
<text class="action-text">分享档案</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
petId: '',
|
|
petInfo: {},
|
|
currentLayout: 1,
|
|
activeTab: 0,
|
|
drawerExpanded: false,
|
|
recentRecords: [
|
|
{
|
|
id: 1,
|
|
date: '2024-01-15',
|
|
content: '今天小橘很活泼，食欲很好'
|
|
},
|
|
{
|
|
id: 2,
|
|
date: '2024-01-14',
|
|
content: '带小橘去公园散步，玩得很开心'
|
|
}
|
|
],
|
|
layout1Items: [
|
|
{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
|
|
{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
|
|
{ id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
|
|
{ id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
|
|
{ id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
|
|
{ id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' },
|
|
{ id: 7, icon: '📷', text: '拍照记录', action: 'takePhoto' },
|
|
{ id: 8, icon: '🎵', text: '音频日记', action: 'recordAudio' },
|
|
{ id: 9, icon: '🏥', text: '医疗记录', action: 'medicalRecord' }
|
|
],
|
|
layout2Items: [
|
|
{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
|
|
{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
|
|
{ id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
|
|
{ id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
|
|
{ id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
|
|
{ id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' },
|
|
{ id: 7, icon: '📷', text: '拍照记录', action: 'takePhoto' },
|
|
{ id: 8, icon: '🎵', text: '音频日记', action: 'recordAudio' }
|
|
],
|
|
tabs: [
|
|
{
|
|
id: 1,
|
|
name: '日常',
|
|
items: [
|
|
{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
|
|
{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
|
|
{ id: 3, icon: '📷', text: '拍照记录', action: 'takePhoto' }
|
|
]
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '健康',
|
|
items: [
|
|
{ id: 4, icon: '📊', text: '健康档案', action: 'viewHealth' },
|
|
{ id: 5, icon: '🏥', text: '医疗记录', action: 'medicalRecord' },
|
|
{ id: 6, icon: '💊', text: '用药提醒', action: 'medicineReminder' }
|
|
]
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '其他',
|
|
items: [
|
|
{ id: 7, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
|
|
{ id: 8, icon: '📋', text: '所有记录', action: 'viewRecords' },
|
|
{ id: 9, icon: '🔔', text: '提醒设置', action: 'showReminder' }
|
|
]
|
|
}
|
|
],
|
|
layout7Items: [
|
|
{ id: 1, icon: '📝', text: '添加记录', action: 'addRecord' },
|
|
{ id: 2, icon: '💬', text: 'AI聊天', action: 'chatWithPet' },
|
|
{ id: 3, icon: '📊', text: '健康档案', action: 'viewHealth' },
|
|
{ id: 4, icon: '⏰', text: '成长时光', action: 'viewTimeline' },
|
|
{ id: 5, icon: '📋', text: '所有记录', action: 'viewRecords' },
|
|
{ id: 6, icon: '🔔', text: '提醒设置', action: 'showReminder' }
|
|
]
|
|
}
|
|
},
|
|
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 = {}
|
|
}
|
|
},
|
|
|
|
editPet() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/edit-pet?id=${this.petId}`
|
|
})
|
|
},
|
|
|
|
addRecord() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/select-record-type?petId=${this.petId}`
|
|
})
|
|
},
|
|
|
|
chatWithPet() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-chat-simple?petId=${this.petId}`
|
|
})
|
|
},
|
|
|
|
viewHealth() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/health-charts?petId=${this.petId}`
|
|
})
|
|
},
|
|
|
|
setPersonality() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-personality?petId=${this.petId}`
|
|
})
|
|
},
|
|
|
|
viewTimeline() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-timeline?petId=${this.petId}`
|
|
})
|
|
},
|
|
|
|
viewRecords() {
|
|
uni.navigateTo({
|
|
url: `/pages/pets/pet-records?petId=${this.petId}`
|
|
})
|
|
},
|
|
|
|
shareProfile() {
|
|
uni.showToast({
|
|
title: '分享功能开发中',
|
|
icon: 'none'
|
|
})
|
|
},
|
|
|
|
switchLayout(layoutNumber) {
|
|
this.currentLayout = layoutNumber
|
|
},
|
|
|
|
handleAction(action) {
|
|
switch(action) {
|
|
case 'addRecord':
|
|
this.addRecord()
|
|
break
|
|
case 'chatWithPet':
|
|
this.chatWithPet()
|
|
break
|
|
case 'viewHealth':
|
|
this.viewHealth()
|
|
break
|
|
case 'viewTimeline':
|
|
this.viewTimeline()
|
|
break
|
|
case 'viewRecords':
|
|
this.viewRecords()
|
|
break
|
|
case 'showReminder':
|
|
uni.showToast({
|
|
title: '提醒功能开发中',
|
|
icon: 'none'
|
|
})
|
|
break
|
|
case 'takePhoto':
|
|
uni.chooseImage({
|
|
count: 1,
|
|
sizeType: ['original', 'compressed'],
|
|
sourceType: ['camera'],
|
|
success: () => {
|
|
uni.showToast({
|
|
title: '拍照成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
})
|
|
break
|
|
case 'recordAudio':
|
|
uni.showToast({
|
|
title: '音频功能开发中',
|
|
icon: 'none'
|
|
})
|
|
break
|
|
case 'medicalRecord':
|
|
uni.showToast({
|
|
title: '医疗记录功能开发中',
|
|
icon: 'none'
|
|
})
|
|
break
|
|
case 'medicineReminder':
|
|
uni.showToast({
|
|
title: '用药提醒功能开发中',
|
|
icon: 'none'
|
|
})
|
|
break
|
|
default:
|
|
console.log('未知操作:', action)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.pet-detail-container {
|
|
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header-actions {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20rpx);
|
|
margin: 20rpx 30rpx;
|
|
border-radius: 24rpx;
|
|
padding: 24rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
|
|
|
.page-title {
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
color: #FF8A80;
|
|
}
|
|
|
|
.edit-btn {
|
|
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
|
border-radius: 20rpx;
|
|
padding: 16rpx 24rpx;
|
|
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.edit-text {
|
|
font-size: 28rpx;
|
|
color: #ffffff;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pet-header {
|
|
background: rgba(255, 255, 255, 0.95);
|
|
backdrop-filter: blur(20rpx);
|
|
margin: 0 30rpx 20rpx 30rpx;
|
|
border-radius: 24rpx;
|
|
padding: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
|
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
|
|
|
.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;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* 性格标签 */
|
|
.personality-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 12rpx;
|
|
}
|
|
|
|
/* 快捷功能按钮 */
|
|
.quick-actions {
|
|
background: #ffffff;
|
|
margin: 0 30rpx;
|
|
border-radius: 20rpx;
|
|
padding: 30rpx;
|
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.action-row {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
margin-bottom: 30rpx;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
|
|
.action-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 12rpx;
|
|
padding: 20rpx;
|
|
border-radius: 16rpx;
|
|
transition: all 0.3s ease;
|
|
min-width: 120rpx;
|
|
|
|
&:active {
|
|
background: #F5F5F5;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.action-text {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
}
|
|
}
|
|
}
|
|
</style>
|