From 1492f3930c1cb655e1812e9ce7dbcca41752700f Mon Sep 17 00:00:00 2001 From: yvan <8574526@qq.com> Date: Wed, 13 Aug 2025 20:39:09 +0800 Subject: [PATCH] 1 --- pages/adoption/adoption-detail.vue | 69 +------- pages/adoption/adoption.vue | 142 ++++++---------- utils/adoptionManager.js | 255 +++++++++++++++++++++-------- 3 files changed, 240 insertions(+), 226 deletions(-) diff --git a/pages/adoption/adoption-detail.vue b/pages/adoption/adoption-detail.vue index ad6ea0a..32713cb 100644 --- a/pages/adoption/adoption-detail.vue +++ b/pages/adoption/adoption-detail.vue @@ -26,26 +26,13 @@ {{ getStatusText() }} - - - {{ pet.isFavorite ? '❤️' : '🤍' }} - + {{ pet.name }} - - - 👁️ - {{ pet.views }} - - - ❤️ - {{ pet.favorites }} - - @@ -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 { diff --git a/pages/adoption/adoption.vue b/pages/adoption/adoption.vue index 5f53db0..fcf90d1 100644 --- a/pages/adoption/adoption.vue +++ b/pages/adoption/adoption.vue @@ -217,9 +217,7 @@ {{ getStatusIcon(pet.status) }} {{ getStatusText(pet.status) }} - - {{ pet.isFavorite ? '❤️' : '🤍' }} - + @@ -237,7 +235,11 @@ {{ pet.age }}岁 - {{ pet.gender === 'male' ? '♂️' : '♀️' }} + {{ pet.gender === 'male' ? '公' : '母' }} @@ -255,21 +257,6 @@ {{ trait }} - - - - 👁️ - {{ pet.views }} - - - ❤️ - {{ pet.favorites }} - - - {{ pet.contact.type === 'organization' ? '🏢' : '👤' }} - {{ pet.contact.type === 'organization' ? '机构' : '个人' }} - - @@ -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; diff --git a/utils/adoptionManager.js b/utils/adoptionManager.js index 8f7ab6d..62aa24c 100644 --- a/utils/adoptionManager.js +++ b/utils/adoptionManager.js @@ -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()