1
This commit is contained in:
+182
-23
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user