This commit is contained in:
2025-08-13 15:01:36 +08:00
parent 7d32f5d0f9
commit 7830a6ebbd
9 changed files with 182 additions and 4849 deletions
+182 -23
View File
@@ -3,17 +3,26 @@
<!-- 标签切换容器 -->
<view class="tabs-container" v-if="petsList.length > 0">
<view class="tabs-header">
<view
class="tab-btn"
:class="{ 'tab-btn--active': currentTabIndex === index }"
v-for="(pet, index) in petsList"
:key="pet.id"
@click="switchTab(index)"
<scroll-view
class="tabs-scroll"
scroll-x
:show-scrollbar="false"
:enable-flex="true"
>
<view class="tab-avatar gradient-bg-primary">{{ getPetEmoji(pet.breed) }}</view>
<view class="tab-name">{{ pet.name }}</view>
</view>
<view class="add-tab" @click="addPet">
<view class="tabs-content">
<view
class="tab-btn"
:class="{ 'tab-btn--active': currentTabIndex === index }"
v-for="(pet, index) in petsList"
:key="pet.id"
@click="switchTab(index)"
>
<view class="tab-avatar gradient-bg-primary">{{ getPetEmoji(pet.breed) }}</view>
<view class="tab-name">{{ pet.name }}</view>
</view>
</view>
</scroll-view>
<view class="add-tab-fixed" @click="addPet">
<text class="add-tab__icon">➕</text>
<text class="add-tab__text">添加</text>
</view>
@@ -340,6 +349,7 @@ export default {
gender: '母',
weight: '25kg',
birthday: '2021-03-20',
constellation: '双鱼座',
healthStatus: 'healthy',
personality: ['温顺', '聪明', '忠诚'],
lastRecord: '2024-01-14'
@@ -354,9 +364,115 @@ export default {
gender: '母',
weight: '1.2kg',
birthday: '2023-06-15',
constellation: '双子座',
healthStatus: 'healthy',
personality: ['安静', '可爱', '乖巧'],
lastRecord: '2024-01-13'
},
{
id: 4,
name: '小黑',
breed: '哈士奇',
age: 4,
companionDays: 1460,
avatar: '/static/default-pet.png',
gender: '公',
weight: '28kg',
birthday: '2020-05-10',
constellation: '金牛座',
healthStatus: 'healthy',
personality: ['调皮', '精力充沛', '拆家'],
lastRecord: '2024-01-16'
},
{
id: 5,
name: '咪咪',
breed: '波斯猫',
age: 5,
companionDays: 1825,
avatar: '/static/default-pet.png',
gender: '母',
weight: '3.8kg',
birthday: '2019-08-22',
constellation: '处女座',
healthStatus: 'warning',
personality: ['高贵', '优雅', '挑食'],
lastRecord: '2024-01-12'
},
{
id: 6,
name: '豆豆',
breed: '泰迪',
age: 2,
companionDays: 730,
avatar: '/static/default-pet.png',
gender: '公',
weight: '6.2kg',
birthday: '2022-02-14',
constellation: '水瓶座',
healthStatus: 'healthy',
personality: ['聪明', '活泼', '粘人'],
lastRecord: '2024-01-15'
},
{
id: 7,
name: '花花',
breed: '仓鼠',
age: 1,
companionDays: 120,
avatar: '/static/default-pet.png',
gender: '母',
weight: '0.15kg',
birthday: '2023-09-01',
constellation: '处女座',
healthStatus: 'healthy',
personality: ['可爱', '活跃', '爱囤食'],
lastRecord: '2024-01-16'
},
{
id: 8,
name: '彩彩',
breed: '鹦鹉',
age: 3,
companionDays: 900,
avatar: '/static/default-pet.png',
gender: '公',
weight: '0.8kg',
birthday: '2021-11-30',
constellation: '射手座',
healthStatus: 'healthy',
personality: ['聪明', '话多', '模仿'],
lastRecord: '2024-01-14'
},
{
id: 9,
name: '小雪',
breed: '金毛',
age: 1,
companionDays: 200,
avatar: '/static/default-pet.png',
gender: '母',
weight: '18kg',
birthday: '2023-05-20',
constellation: '金牛座',
healthStatus: 'healthy',
personality: ['温顺', '乖巧', '爱玩'],
lastRecord: '2024-01-15'
},
{
id: 10,
name: '小虎',
breed: '橘猫',
age: 6,
companionDays: 2190,
avatar: '/static/default-pet.png',
gender: '公',
weight: '5.8kg',
birthday: '2018-07-08',
constellation: '巨蟹座',
healthStatus: 'warning',
personality: ['慵懒', '贪吃', '老成'],
lastRecord: '2024-01-11'
}
]
// 保存模拟数据到本地存储
@@ -386,7 +502,14 @@ export default {
const expenses = [
{ petId: 1, amount: 580, month: '2024-01' },
{ petId: 2, amount: 890, month: '2024-01' },
{ petId: 3, amount: 120, month: '2024-01' }
{ petId: 3, amount: 120, month: '2024-01' },
{ petId: 4, amount: 1200, month: '2024-01' },
{ petId: 5, amount: 750, month: '2024-01' },
{ petId: 6, amount: 680, month: '2024-01' },
{ petId: 7, amount: 80, month: '2024-01' },
{ petId: 8, amount: 320, month: '2024-01' },
{ petId: 9, amount: 450, month: '2024-01' },
{ petId: 10, amount: 620, month: '2024-01' }
]
this.petExpenses = expenses
} catch (error) {
@@ -414,7 +537,10 @@ export default {
// 获取宠物记录数量
getPetRecordsCount(petId) {
const petRecords = this.petRecords.filter(record => record.petId === petId)
const mockCounts = { 1: 89, 2: 67, 3: 34 }
const mockCounts = {
1: 89, 2: 67, 3: 34, 4: 156, 5: 203,
6: 78, 7: 45, 8: 92, 9: 23, 10: 267
}
return petRecords.length || mockCounts[petId] || 0
},
@@ -427,8 +553,11 @@ export default {
// 获取宠物待办提醒数量
getPetReminders(petId) {
// 模拟获取宠物待办提醒数量
const reminders = [3, 1, 5, 2, 0];
return reminders[petId % reminders.length] || 0;
const reminders = {
1: 3, 2: 1, 3: 5, 4: 2, 5: 4,
6: 0, 7: 1, 8: 3, 9: 2, 10: 6
};
return reminders[petId] || 0;
},
// 获取星座对应的图标
@@ -461,6 +590,15 @@ export default {
return statusMap[status] || '健康'
},
getHealthTagType(status) {
const typeMap = {
healthy: 'success',
warning: 'warning',
sick: 'error'
}
return typeMap[status] || 'success'
},
addPet() {
uni.navigateTo({
url: '/pages/pets/add-pet'
@@ -522,24 +660,40 @@ export default {
.tabs-container {
background: rgba(255, 255, 255, 0.85);
margin: 20rpx 30rpx 30rpx;
margin: 20rpx 20rpx 30rpx;
border-radius: 40rpx;
backdrop-filter: blur(20rpx);
overflow: hidden;
overflow: visible;
box-shadow: 0 16rpx 64rpx rgba(255, 138, 128, 0.2);
border: 2rpx solid rgba(255, 255, 255, 0.3);
}
.tabs-header {
display: flex;
align-items: center;
background: linear-gradient(135deg, rgba(255, 138, 128, 0.2) 0%, rgba(255, 182, 193, 0.2) 100%);
padding: 10rpx;
border-radius: 40rpx 40rpx 0 0;
position: relative;
width: 100%;
box-sizing: border-box;
}
.tabs-scroll {
flex: 1;
white-space: nowrap;
min-width: 0;
overflow: hidden;
}
.tabs-content {
display: flex;
align-items: center;
width: max-content;
}
.tab-btn {
flex: 1;
flex-shrink: 0;
background: none;
border: none;
padding: 24rpx 16rpx;
@@ -548,6 +702,8 @@ export default {
transition: all 0.3s ease;
position: relative;
z-index: 2;
min-width: 120rpx;
width: auto;
}
.tab-btn--active {
@@ -572,11 +728,13 @@ export default {
color: #333;
}
.add-tab {
width: 120rpx;
.add-tab-fixed {
width: 100rpx;
min-width: 100rpx;
flex-shrink: 0;
background: none;
border: none;
padding: 24rpx 16rpx;
padding: 24rpx 8rpx;
text-align: center;
border-radius: 30rpx;
transition: all 0.3s ease;
@@ -585,9 +743,10 @@ export default {
flex-direction: column;
align-items: center;
justify-content: center;
margin-left: 8rpx;
}
.add-tab:active {
.add-tab-fixed:active {
background: rgba(255, 138, 128, 0.15);
}
@@ -642,8 +801,8 @@ export default {
}
.pet-info-section {
width: 60%;
padding-left: 16rpx;
//width: 60%;
padding-left: 80rpx;
padding-right: 8rpx;
}