This commit is contained in:
yvan 2025-08-13 20:39:09 +08:00
parent c7b0b1e5b7
commit 1492f3930c
3 changed files with 240 additions and 226 deletions

View File

@ -26,26 +26,13 @@
<text class="status-text">{{ getStatusText() }}</text>
</view>
<!-- 收藏按钮 -->
<view class="favorite-btn" @click="toggleFavorite">
<text class="favorite-icon">{{ pet.isFavorite ? '❤️' : '🤍' }}</text>
</view>
</view>
<!-- 宠物基本信息 -->
<view class="pet-basic-info">
<view class="pet-header">
<text class="pet-name">{{ pet.name }}</text>
<view class="pet-stats">
<view class="stat-item">
<text class="stat-icon">👁</text>
<text class="stat-count">{{ pet.views }}</text>
</view>
<view class="stat-item">
<text class="stat-icon"></text>
<text class="stat-count">{{ pet.favorites }}</text>
</view>
</view>
</view>
<view class="pet-tags">
@ -260,16 +247,7 @@ export default {
})
},
toggleFavorite() {
this.pet.isFavorite = !this.pet.isFavorite
adoptionManager.toggleFavorite(this.petId, this.pet.isFavorite)
uni.showToast({
title: this.pet.isFavorite ? '已收藏' : '已取消收藏',
icon: 'success',
duration: 1000
})
},
makeCall() {
uni.makePhoneCall({
@ -405,27 +383,7 @@ export default {
}
}
.favorite-btn {
position: absolute;
top: 32rpx;
right: 32rpx;
width: 80rpx;
height: 80rpx;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&:active {
transform: scale(0.9);
}
.favorite-icon {
font-size: 32rpx;
}
}
}
/* 宠物基本信息 */
@ -439,9 +397,6 @@ export default {
border: 1rpx solid rgba(255, 255, 255, 0.3);
.pet-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.pet-name {
@ -449,26 +404,6 @@ export default {
font-weight: bold;
color: #333333;
}
.pet-stats {
display: flex;
gap: 16rpx;
.stat-item {
display: flex;
align-items: center;
gap: 6rpx;
.stat-icon {
font-size: 18rpx;
}
.stat-count {
font-size: 20rpx;
color: #999999;
}
}
}
}
.pet-tags {

View File

@ -217,9 +217,7 @@
<text class="status-icon">{{ getStatusIcon(pet.status) }}</text>
<text class="status-text">{{ getStatusText(pet.status) }}</text>
</view>
<view class="pet-favorite" @click.stop="toggleFavorite(pet)">
<text class="favorite-icon">{{ pet.isFavorite ? '❤️' : '🤍' }}</text>
</view>
</view>
<view class="pet-info">
@ -237,7 +235,11 @@
<text class="detail-text">{{ pet.age }}</text>
</view>
<view class="detail-item">
<text class="detail-icon">{{ pet.gender === 'male' ? '♂️' : '♀️' }}</text>
<u-icon
:name="pet.gender === 'male' ? 'man' : 'woman'"
:color="pet.gender === 'male' ? '#4A90E2' : '#FF69B4'"
size="16"
></u-icon>
<text class="detail-text">{{ pet.gender === 'male' ? '公' : '母' }}</text>
</view>
<view class="detail-item">
@ -255,21 +257,6 @@
<text class="trait-text">{{ trait }}</text>
</view>
</view>
<view class="pet-stats">
<view class="stat-item">
<text class="stat-icon">👁</text>
<text class="stat-count">{{ pet.views }}</text>
</view>
<view class="stat-item">
<text class="stat-icon"></text>
<text class="stat-count">{{ pet.favorites }}</text>
</view>
<view class="contact-type">
<text class="contact-icon">{{ pet.contact.type === 'organization' ? '🏢' : '👤' }}</text>
<text class="contact-text">{{ pet.contact.type === 'organization' ? '机构' : '个人' }}</text>
</view>
</view>
</view>
</view>
@ -603,23 +590,9 @@ export default {
//
viewPetDetail(pet) {
//
adoptionManager.incrementViews(pet.id)
uni.navigateTo({
url: `/pages/adoption/adoption-detail?petId=${pet.id}`
})
},
toggleFavorite(pet) {
pet.isFavorite = !pet.isFavorite
adoptionManager.toggleFavorite(pet.id, pet.isFavorite)
uni.showToast({
title: pet.isFavorite ? '已收藏' : '已取消收藏',
icon: 'success',
duration: 1000
})
}
}
}
@ -629,14 +602,14 @@ export default {
.adoption-container {
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
min-height: 100vh;
overflow-x: hidden;
width: 100vw;
}
/* 头部搜索栏 */
.header-section {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
background: transparent;
padding: 24rpx 32rpx;
border-bottom: 1rpx solid rgba(255, 255, 255, 0.3);
.search-wrapper {
display: flex;
@ -646,41 +619,52 @@ export default {
.search-input-container {
flex: 1;
position: relative;
background: rgba(255, 138, 128, 0.05);
border-radius: 20rpx;
background: transparent;
border: 2rpx solid rgba(255, 255, 255, 0.6);
border-radius: 24rpx;
padding: 0 20rpx;
display: flex;
align-items: center;
box-shadow: 0 2rpx 12rpx rgba(255, 255, 255, 0.1);
.search-icon {
font-size: 24rpx;
margin-right: 12rpx;
color: #999999;
color: #ffffff;
}
.search-input {
flex: 1;
height: 72rpx;
font-size: 24rpx;
color: #333333;
color: #ffffff;
background: transparent;
border: none;
outline: none;
&::placeholder {
color: #ffffff;
}
}
.search-clear {
width: 32rpx;
height: 32rpx;
background: #CCCCCC;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-left: 12rpx;
transition: all 0.3s ease;
&:active {
background: rgba(255, 255, 255, 0.5);
}
.clear-icon {
font-size: 16rpx;
color: white;
color: #ffffff;
}
}
}
@ -689,23 +673,26 @@ export default {
display: flex;
align-items: center;
gap: 8rpx;
background: rgba(255, 138, 128, 0.1);
background: transparent;
border: 2rpx solid rgba(255, 255, 255, 0.4);
border-radius: 16rpx;
padding: 16rpx 20rpx;
transition: all 0.3s ease;
&:active {
transform: scale(0.95);
background: rgba(255, 138, 128, 0.2);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.6);
}
.filter-icon {
font-size: 20rpx;
color: #ffffff;
}
.filter-text {
font-size: 22rpx;
color: #666666;
color: #ffffff;
font-weight: 500;
}
}
@ -938,12 +925,17 @@ export default {
/* 宠物列表区域 */
.pets-scroll {
height: calc(100vh - 200rpx);
padding: 0 20rpx;
height: calc(100vh - 100rpx);
padding: 0 16rpx;
overflow-x: hidden;
width: 100%;
box-sizing: border-box;
}
.pets-list {
padding-bottom: 120rpx;
padding-bottom: 20rpx;
width: 100%;
box-sizing: border-box;
}
.result-summary {
@ -960,29 +952,32 @@ export default {
.pet-card {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
border-radius: 20rpx;
padding: 20rpx;
margin-bottom: 16rpx;
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.1);
border-radius: 16rpx;
padding: 16rpx;
margin: 0 0 16rpx 0;
box-shadow: 0 2rpx 12rpx rgba(255, 138, 128, 0.08);
border: 1rpx solid rgba(255, 255, 255, 0.3);
transition: all 0.3s ease;
width: 100%;
box-sizing: border-box;
&:active {
transform: scale(0.98);
box-shadow: 0 2rpx 8rpx rgba(255, 138, 128, 0.2);
box-shadow: 0 1rpx 6rpx rgba(255, 138, 128, 0.15);
}
.pet-image-container {
position: relative;
width: 100%;
height: 400rpx;
height: 280rpx;
border-radius: 16rpx;
overflow: hidden;
margin-bottom: 16rpx;
margin-bottom: 12rpx;
.pet-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.pet-status {
@ -1019,27 +1014,7 @@ export default {
}
}
.pet-favorite {
position: absolute;
top: 16rpx;
right: 16rpx;
width: 56rpx;
height: 56rpx;
background: rgba(255, 255, 255, 0.9);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
&:active {
transform: scale(0.9);
}
.favorite-icon {
font-size: 24rpx;
}
}
}
.pet-info {
@ -1110,24 +1085,9 @@ export default {
.pet-stats {
display: flex;
justify-content: space-between;
justify-content: flex-end;
align-items: center;
.stat-item {
display: flex;
align-items: center;
gap: 6rpx;
.stat-icon {
font-size: 16rpx;
}
.stat-count {
font-size: 18rpx;
color: #999999;
}
}
.contact-type {
display: flex;
align-items: center;

View File

@ -239,15 +239,15 @@ class AdoptionManager {
breed: 'golden-retriever',
age: 1,
gender: 'female',
photos: ['/static/dog1.jpg', '/static/dog2.jpg'],
description: '小白是一只活泼可爱的金毛幼犬,非常聪明,喜欢和小朋友玩耍。',
personality: ['活泼', '聪明', '友善'],
photos: ['https://images.unsplash.com/photo-1552053831-71594a27632d?w=400&h=300&fit=crop', 'https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=400&h=300&fit=crop'],
description: '小白是一只活泼可爱的金毛幼犬,性格温和友善,非常聪明好训练。喜欢和小朋友玩耍,是很好的家庭伴侣犬。目前疫苗接种进行中,身体健康活泼。',
personality: ['活泼', '聪明', '友善', '温和'],
health: '健康良好,疫苗接种中',
location: {
province: 'shanghai',
city: 'shanghai',
district: 'xuhui',
address: '徐汇区某某宠物医院'
address: '徐汇区宠物医院'
},
status: 'available',
requirements: [
@ -259,12 +259,10 @@ class AdoptionManager {
contact: {
name: '张医生',
phone: '139****5678',
wechat: 'dr_zhang',
wechat: 'dr_zhang_sh',
type: 'individual'
},
publishTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString(),
views: 89,
favorites: 12
publishTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
@ -274,9 +272,9 @@ class AdoptionManager {
breed: 'ragdoll',
age: 3,
gender: 'female',
photos: ['/static/cat4.jpg'],
description: '花花是一只美丽的布偶猫,性格温和,适合有经验的铲屎官。',
personality: ['温和', '优雅', '独立'],
photos: ['https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=400&h=300&fit=crop'],
description: '花花是一只美丽的布偶猫,拥有柔软的长毛和温和的性格。她非常优雅安静,适合喜欢安静环境的家庭。已经完成绝育手术,身体健康。',
personality: ['温和', '优雅', '独立', '安静'],
health: '健康良好,已绝育',
location: {
province: 'guangdong',
@ -297,9 +295,7 @@ class AdoptionManager {
wechat: 'cat_lover_li',
type: 'individual'
},
publishTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
views: 234,
favorites: 45
publishTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
@ -309,9 +305,9 @@ class AdoptionManager {
breed: 'holland-lop',
age: 1,
gender: 'male',
photos: ['/static/rabbit1.jpg', '/static/rabbit2.jpg'],
description: '豆豆是一只可爱的荷兰垂耳兔,很亲人,适合新手饲养。',
personality: ['可爱', '亲人', '安静'],
photos: ['https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?w=400&h=300&fit=crop', 'https://images.unsplash.com/photo-1589952283406-b53a7d1347e8?w=400&h=300&fit=crop'],
description: '豆豆是一只可爱的荷兰垂耳兔,性格温顺亲人,很适合新手饲养。它喜欢安静的环境,也喜欢和人互动。身体健康,食欲良好。',
personality: ['可爱', '亲人', '安静', '温顺'],
health: '健康良好',
location: {
province: 'jiangsu',
@ -327,14 +323,12 @@ class AdoptionManager {
'适当运动空间'
],
contact: {
name: '小动物救助中心',
name: '南京小动物救助中心',
phone: '025****3456',
wechat: 'animal_rescue_nj',
type: 'organization'
},
publishTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
views: 67,
favorites: 8
publishTime: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
@ -344,15 +338,15 @@ class AdoptionManager {
breed: 'mixed',
age: 4,
gender: 'male',
photos: ['/static/cat5.jpg'],
description: '黑黑是一只成年混血猫,性格稳重,已经完全社会化。',
personality: ['稳重', '独立', '温顺'],
photos: ['https://images.unsplash.com/photo-1561948955-570b270e7c36?w=400&h=300&fit=crop'],
description: '黑黑是一只成年混血猫,性格稳重独立,已经完全社会化。它很适合有经验的猫奴,不需要太多关注但很忠诚。已完成绝育和疫苗。',
personality: ['稳重', '独立', '温顺', '忠诚'],
health: '健康良好,已绝育',
location: {
province: 'guangdong',
city: 'shenzhen',
district: 'nanshan',
address: '南山区流浪动物救助'
address: '南山区流浪动物救助'
},
status: 'adopted',
requirements: [
@ -367,11 +361,175 @@ class AdoptionManager {
wechat: 'sz_stray_rescue',
type: 'organization'
},
publishTime: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
views: 178,
favorites: 34
publishTime: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString()
})
// 添加更多宠物数据
testData.push({
id: Date.now() + 6,
name: '咪咪',
type: 'cat',
breed: 'siamese',
age: 2,
gender: 'female',
photos: ['https://images.unsplash.com/photo-1513245543132-31f507417b26?w=400&h=300&fit=crop'],
description: '咪咪是一只美丽的暹罗猫,拥有独特的蓝色眼睛和优雅的身姿。性格活泼好奇,喜欢探索新事物,也很喜欢和人交流。',
personality: ['活泼', '好奇', '聪明', '粘人'],
health: '健康良好,已绝育',
location: {
province: 'beijing',
city: 'beijing',
district: 'haidian',
address: '海淀区宠物救助中心'
},
status: 'available',
requirements: [
'有养猫经验',
'能提供足够陪伴',
'室内饲养',
'定期体检'
],
contact: {
name: '海淀宠物救助中心',
phone: '010****2468',
wechat: 'haidian_pet_rescue',
type: 'organization'
},
publishTime: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
id: Date.now() + 7,
name: '旺财',
type: 'dog',
breed: 'corgi',
age: 3,
gender: 'male',
photos: ['https://images.unsplash.com/photo-1518717758536-85ae29035b6d?w=400&h=300&fit=crop', 'https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=400&h=300&fit=crop'],
description: '旺财是一只可爱的柯基犬,拥有短腿和大屁股的经典柯基特征。性格开朗活泼,很喜欢和人玩耍,是很好的家庭伴侣。',
personality: ['开朗', '活泼', '友善', '忠诚'],
health: '健康良好,已绝育',
location: {
province: 'jiangsu',
city: 'suzhou',
district: 'gusu',
address: '姑苏区个人救助'
},
status: 'available',
requirements: [
'有养狗经验',
'每天遛狗',
'有足够空间',
'耐心训练'
],
contact: {
name: '王先生',
phone: '151****7890',
wechat: 'corgi_lover_wang',
type: 'individual'
},
publishTime: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
id: Date.now() + 8,
name: '雪球',
type: 'cat',
breed: 'persian',
age: 1,
gender: 'female',
photos: ['https://images.unsplash.com/photo-1571566882372-1598d88abd90?w=400&h=300&fit=crop'],
description: '雪球是一只纯白色的波斯猫幼猫,毛发柔软蓬松,眼睛是漂亮的蓝色。性格温和安静,喜欢被人抚摸,是很好的陪伴猫咪。',
personality: ['温和', '安静', '亲人', '乖巧'],
health: '健康良好,疫苗接种中',
location: {
province: 'shanghai',
city: 'shanghai',
district: 'jingan',
address: '静安区宠物医院'
},
status: 'available',
requirements: [
'有养长毛猫经验',
'定期梳毛',
'室内饲养',
'定期美容'
],
contact: {
name: '静安宠物医院',
phone: '021****5678',
wechat: 'jingan_pet_hospital',
type: 'organization'
},
publishTime: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
id: Date.now() + 9,
name: '小柴',
type: 'dog',
breed: 'shiba-inu',
age: 2,
gender: 'male',
photos: ['https://images.unsplash.com/photo-1605568427561-40dd23c2acea?w=400&h=300&fit=crop'],
description: '小柴是一只帅气的柴犬,拥有经典的柴犬笑容和独立的性格。它很聪明但有时候有点固执,需要有经验的主人来训练。',
personality: ['独立', '聪明', '固执', '忠诚'],
health: '健康良好,已绝育',
location: {
province: 'guangdong',
city: 'guangzhou',
district: 'yuexiu',
address: '越秀区个人救助'
},
status: 'reserved',
requirements: [
'有养狗经验',
'了解柴犬特性',
'有耐心训练',
'定期运动'
],
contact: {
name: '陈女士',
phone: '138****9012',
wechat: 'shiba_lover_chen',
type: 'individual'
},
publishTime: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000).toISOString()
})
testData.push({
id: Date.now() + 10,
name: '毛毛',
type: 'rabbit',
breed: 'angora',
age: 2,
gender: 'female',
photos: ['https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?w=400&h=300&fit=crop'],
description: '毛毛是一只安哥拉兔,拥有非常柔软蓬松的长毛。性格温顺安静,喜欢被人轻柔地抚摸。需要定期梳毛和护理。',
personality: ['温顺', '安静', '乖巧', '敏感'],
health: '健康良好',
location: {
province: 'jiangsu',
city: 'nanjing',
district: 'qinhuai',
address: '秦淮区小动物救助'
},
status: 'available',
requirements: [
'了解长毛兔护理',
'定期梳毛',
'安静环境',
'耐心照料'
],
contact: {
name: '秦淮动物救助',
phone: '025****1357',
wechat: 'qinhuai_animal_rescue',
type: 'organization'
},
publishTime: new Date(Date.now() - 12 * 24 * 60 * 60 * 1000).toISOString()
})
return testData
}
@ -514,46 +672,7 @@ class AdoptionManager {
}
}
/**
* 增加浏览量
* @param {string} petId 宠物ID
*/
incrementViews(petId) {
try {
const pets = this.getAdoptionPets()
const petIndex = pets.findIndex(pet => pet.id == petId)
if (petIndex !== -1) {
pets[petIndex].views += 1
uni.setStorageSync(this.storageKey, pets)
}
} catch (error) {
console.error('增加浏览量失败:', error)
}
}
/**
* 切换收藏状态
* @param {string} petId 宠物ID
* @param {boolean} isFavorite 是否收藏
*/
toggleFavorite(petId, isFavorite) {
try {
const pets = this.getAdoptionPets()
const petIndex = pets.findIndex(pet => pet.id == petId)
if (petIndex !== -1) {
if (isFavorite) {
pets[petIndex].favorites += 1
} else {
pets[petIndex].favorites = Math.max(0, pets[petIndex].favorites - 1)
}
uni.setStorageSync(this.storageKey, pets)
}
} catch (error) {
console.error('切换收藏状态失败:', error)
}
}
}
export default new AdoptionManager()