yvan
/
pet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
yvan 2025-08-14 20:52:59 +08:00
parent 8d89b4177a
commit a206f83412
3 changed files with 739 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

239
pages/adoption/adoption.vue
View File

@ -509,7 +509,244 @@ class AdoptionManager {
publishTime: new Date(Date.now() - 2 * 24 * 60 * 60 * 1000).toISOString()
})
// 更多测试数据...
// 狗狗数据
testData.push({
id: Date.now() + 2,
name: '小金',
type: 'dog',
breed: 'golden-retriever',
age: 1,
gender: 'female',
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: 'huangpu',
address: '黄浦区宠物收容所'
},
status: 'available',
requirements: [
'有养狗经验',
'有足够活动空间',
'能定期遛狗',
'同意绝育手术'
],
contact: {
name: '上海宠物救助中心',
phone: '139****5678',
wechat: 'sh_pet_rescue',
type: 'organization'
},
publishTime: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString()
})
// 猫咪数据2
testData.push({
id: Date.now() + 3,
name: '小白',
type: 'cat',
breed: 'ragdoll',
age: 3,
gender: 'female',
photos: ['https://images.unsplash.com/photo-1596854407944-bf87f6fdd49e?w=400&h=300&fit=crop', 'https://images.unsplash.com/photo-1548247416-ec66f4900b2e?w=400&h=300&fit=crop'],
description: '小白是一只美丽的布偶猫，性格非常温柔，喜欢被抱抱。毛发柔软，眼睛湛蓝，是典型的布偶猫特征。已绝育，疫苗齐全。',
personality: ['温柔', '安静', '粘人', '优雅'],
health: '健康良好，已绝育，疫苗齐全',
location: {
province: 'guangdong',
city: 'guangzhou',
district: 'tianhe',
address: '天河区动物保护协会'
},
status: 'available',
requirements: [
'有稳定收入',
'室内饲养',
'定期美容',
'同意回访'
],
contact: {
name: '广州动物保护协会',
phone: '137****9012',
wechat: 'gz_animal_care',
type: 'organization'
},
publishTime: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString()
})
// 狗狗数据2
testData.push({
id: Date.now() + 4,
name: '豆豆',
type: 'dog',
breed: 'corgi',
age: 2,
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: 'nanjing',
district: 'xuanwu',
address: '玄武区宠物救助站'
},
status: 'available',
requirements: [
'有养宠经验',
'能接受掉毛',
'定期运动',
'负责任的主人'
],
contact: {
name: '南京宠物救助站',
phone: '135****3456',
wechat: 'nj_pet_help',
type: 'organization'
},
publishTime: new Date(Date.now() - 4 * 24 * 60 * 60 * 1000).toISOString()
})
// 猫咪数据3
testData.push({
id: Date.now() + 5,
name: '小黑',
type: 'cat',
breed: 'mixed',
age: 1,
gender: 'male',
photos: ['https://images.unsplash.com/photo-1513245543132-31f507417b26?w=400&h=300&fit=crop', 'https://images.unsplash.com/photo-1571566882372-1598d88abd90?w=400&h=300&fit=crop'],
description: '小黑是一只可爱的小黑猫，虽然是混血但非常健康活泼。刚刚1岁，正是最可爱的年纪。性格独立但也很亲人，适合各种家庭。',
personality: ['独立', '亲人', '活泼', '好奇'],
health: '健康良好，疫苗已接种',
location: {
province: 'beijing',
city: 'beijing',
district: 'haidian',
address: '海淀区流浪动物救助中心'
},
status: 'reserved',
requirements: [
'爱心家庭',
'室内饲养',
'定期体检',
'不离不弃'
],
contact: {
name: '海淀救助中心',
phone: '136****7890',
wechat: 'hd_animal_rescue',
type: 'organization'
},
publishTime: new Date(Date.now() - 5 * 24 * 60 * 60 * 1000).toISOString()
})
// 兔子数据
testData.push({
id: Date.now() + 6,
name: '雪球',
type: 'rabbit',
breed: 'holland-lop',
age: 1,
gender: 'female',
photos: ['https://images.unsplash.com/photo-1585110396000-c9ffd4e4b308?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: '徐汇区小动物保护基地'
},
status: 'available',
requirements: [
'了解兔子习性',
'提供合适笼舍',
'定期清理',
'耐心照料'
],
contact: {
name: '小动物保护基地',
phone: '138****2468',
wechat: 'small_animal_care',
type: 'organization'
},
publishTime: new Date(Date.now() - 6 * 24 * 60 * 60 * 1000).toISOString()
})
// 狗狗数据3
testData.push({
id: Date.now() + 7,
name: '大黄',
type: 'dog',
breed: 'mixed',
age: 4,
gender: 'male',
photos: ['https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=400&h=300&fit=crop', 'https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=400&h=300&fit=crop'],
description: '大黄是一只忠诚的中华田园犬，虽然年龄稍大但身体健康。性格稳重，对主人非常忠诚，是很好的看家犬和陪伴犬。',
personality: ['忠诚', '稳重', '护主', '温和'],
health: '健康良好，已绝育',
location: {
province: 'guangdong',
city: 'shenzhen',
district: 'futian',
address: '福田区流浪动物救助站'
},
status: 'available',
requirements: [
'有院子更佳',
'能接受中大型犬',
'有责任心',
'不嫌弃年龄'
],
contact: {
name: '深圳流浪动物救助站',
phone: '134****1357',
wechat: 'sz_stray_help',
type: 'organization'
},
publishTime: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()
})
// 猫咪数据4
testData.push({
id: Date.now() + 8,
name: '咪咪',
type: 'cat',
breed: 'siamese',
age: 2,
gender: 'female',
photos: ['https://images.unsplash.com/photo-1606214174585-fe31582dc6ee?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: 'adopted',
requirements: [
'有养猫经验',
'能理解暹罗猫特性',
'室内饲养',
'定期互动'
],
contact: {
name: '苏州宠物救助中心',
phone: '132****8024',
wechat: 'sz_pet_center',
type: 'organization'
},
publishTime: new Date(Date.now() - 8 * 24 * 60 * 60 * 1000).toISOString()
})
return testData
}

497
pages/pets/add-pet.vue
View File

@ -1,45 +1,136 @@
<template>
<view class="add-pet-container page-container-with-bg">
<u-form :model="petForm" ref="petFormRef" :rules="rules" label-width="120">
<u-card :padding="20" margin="20">
<view class="avatar-section">
<u-avatar :src="petForm.avatar || '/static/default-pet.png'" size="80" shape="circle" @click="chooseAvatar"></u-avatar>
<u-text text="点击上传头像" type="tips" size="12"></u-text>
<!-- 页面标题 -->
<view class="page-header">
<view class="header-title">
<text class="title-icon">🐾</text>
<text class="title-text">添加新宠物</text>
</view>
<text class="header-subtitle">为您的爱宠建立专属档案</text>
</view>
<!-- 头像上传区域 -->
<view class="avatar-card card">
<view class="avatar-section">
<view class="avatar-container" @click="chooseAvatar">
<image
v-if="petForm.avatar"
:src="petForm.avatar"
class="pet-avatar"
mode="aspectFill"
/>
<view v-else class="avatar-placeholder">
<text class="avatar-icon">📷</text>
<text class="avatar-text">添加照片</text>
</view>
<view class="avatar-overlay">
<text class="overlay-icon">✏️</text>
</view>
</view>
</u-card>
<u-card :padding="20" margin="20">
<u-form-item label="宠物姓名" prop="name" required>
<u-input v-model="petForm.name" placeholder="请输入宠物姓名"></u-input>
</u-form-item>
<u-form-item label="品种" prop="breed" required>
<u-input v-model="petForm.breed" placeholder="请输入宠物品种"></u-input>
</u-form-item>
<u-form-item label="性别" prop="gender" required>
<u-radio-group v-model="petForm.gender" placement="row">
<u-radio label="公" name="公"></u-radio>
<u-radio label="母" name="母"></u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="生日" prop="birthday" required>
<u-input v-model="petForm.birthday" placeholder="请选择生日" readonly @click="showDatePicker = true"></u-input>
</u-form-item>
<u-form-item label="体重" prop="weight">
<u-input v-model="petForm.weight" placeholder="请输入体重（如：4.5kg）"></u-input>
</u-form-item>
<u-form-item label="备注" prop="notes">
<u-textarea v-model="petForm.notes" placeholder="记录一些特殊信息..." maxlength="200"></u-textarea>
</u-form-item>
</u-card>
</u-form>
<text class="avatar-tip">点击上传宠物照片</text>
</view>
</view>
<!-- 基本信息表单 -->
<view class="form-card card">
<view class="card-header">
<text class="card-title">基本信息</text>
</view>
<view class="form-content">
<!-- 宠物姓名 -->
<view class="input-container">
<text class="input-label">宠物姓名 <text class="required-star">*</text></text>
<input
class="input-field"
v-model="petForm.name"
placeholder="给您的宠物起个好听的名字"
maxlength="20"
/>
</view>
<!-- 品种 -->
<view class="input-container">
<text class="input-label">品种 <text class="required-star">*</text></text>
<input
class="input-field"
v-model="petForm.breed"
placeholder="如：金毛、英短、布偶猫等"
maxlength="30"
/>
</view>
<!-- 性别选择 -->
<view class="input-container">
<text class="input-label">性别 <text class="required-star">*</text></text>
<view class="gender-options">
<view
class="gender-option"
:class="{ active: petForm.gender === '公' }"
@click="petForm.gender = '公'"
>
<u-icon name="man" size="20" color="#666"></u-icon>
<text class="gender-text">公</text>
</view>
<view
class="gender-option"
:class="{ active: petForm.gender === '母' }"
@click="petForm.gender = '母'"
>
<u-icon name="woman" size="20" color="#666"></u-icon>
<text class="gender-text">母</text>
</view>
</view>
</view>
<!-- 生日 -->
<view class="input-container">
<text class="input-label">生日 <text class="required-star">*</text></text>
<view class="date-input" @click="showDatePicker = true">
<text class="date-text" :class="{ placeholder: !petForm.birthday }">
{{ petForm.birthday || '请选择宠物生日' }}
</text>
<text class="date-icon">📅</text>
</view>
</view>
<!-- 体重 -->
<view class="input-container">
<text class="input-label">体重</text>
<input
class="input-field"
v-model="petForm.weight"
placeholder="如：4.5kg（可选填）"
maxlength="10"
/>
</view>
</view>
</view>
<!-- 备注信息 -->
<view class="notes-card card">
<view class="card-header">
<text class="card-title">备注信息</text>
</view>
<view class="notes-content">
<textarea
class="notes-textarea"
v-model="petForm.notes"
placeholder="记录一些特殊信息，如：性格特点、喜好、注意事项等..."
maxlength="200"
/>
<view class="char-count">
<text class="count-text">{{ petForm.notes?.length || 0 }}/200</text>
</view>
</view>
</view>
<!-- 提交按钮 -->
<view class="submit-section">
<u-button type="primary" text="保存宠物信息" @click="submitForm" :loading="loading"></u-button>
<button class="submit-btn btn-primary" @click="submitForm" :disabled="loading">
<text v-if="loading" class="loading-icon">⏳</text>
<text class="btn-text">{{ loading ? '保存中...' : '保存宠物信息' }}</text>
</button>
</view>
<!-- 日期选择器 -->
@ -182,34 +273,324 @@ export default {
<style lang="scss" scoped>
.add-pet-container {
padding-bottom: 120rpx;
}
.avatar-section {
/* 页面标题 */
.page-header {
text-align: center;
padding: 40rpx 30rpx 30rpx;
.header-title {
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
margin-bottom: 12rpx;
.title-icon {
font-size: 36rpx;
}
.title-text {
font-size: 36rpx;
font-weight: 700;
color: white;
text-shadow: 0 2rpx 8rpx rgba(255, 138, 128, 0.3);
}
}
.header-subtitle {
font-size: 24rpx;
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1rpx 4rpx rgba(255, 138, 128, 0.2);
}
}
/* 头像卡片 */
.avatar-card {
margin: 0 30rpx 24rpx;
.avatar-section {
display: flex;
flex-direction: column;
align-items: center;
padding: 20rpx 0;
.avatar-container {
position: relative;
width: 160rpx;
height: 160rpx;
border-radius: 50%;
overflow: hidden;
margin-bottom: 16rpx;
cursor: pointer;
.pet-avatar {
width: 100%;
height: 100%;
border-radius: 50%;
}
.avatar-placeholder {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #FFE0DD, #FFF0F0);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 3rpx dashed rgba(255, 138, 128, 0.3);
.avatar-icon {
font-size: 48rpx;
margin-bottom: 8rpx;
opacity: 0.6;
}
.avatar-text {
font-size: 22rpx;
color: #999;
}
}
.avatar-overlay {
position: absolute;
bottom: 0;
right: 0;
width: 48rpx;
height: 48rpx;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4rpx 12rpx rgba(255, 138, 128, 0.3);
.overlay-icon {
font-size: 20rpx;
color: white;
}
}
}
.avatar-tip {
font-size: 24rpx;
color: #666;
}
}
}
/* 表单卡片 */
.form-card, .notes-card {
margin: 0 30rpx 24rpx;
padding: 32rpx;
.card-header {
padding-bottom: 20rpx;
border-bottom: 1rpx solid rgba(255, 138, 128, 0.1);
margin-bottom: 24rpx;
.card-title {
font-size: 32rpx;
font-weight: 600;
color: #333;
display: flex;
align-items: center;
&::before {
content: '';
width: 6rpx;
height: 24rpx;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
border-radius: 3rpx;
margin-right: 12rpx;
}
}
}
.form-content {
.input-container {
margin-bottom: 36rpx;
&:last-child {
margin-bottom: 0;
}
.input-label {
display: block;
font-size: 28rpx;
color: #333;
margin-bottom: 12rpx;
font-weight: 600;
.required-star {
color: #FF8A80;
font-weight: 600;
}
}
.input-field {
width: 100%;
height: 88rpx;
padding: 0 24rpx;
border: 2rpx solid rgba(255, 138, 128, 0.2);
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.9);
font-size: 28rpx;
color: #333;
transition: all 0.3s ease;
box-sizing: border-box;
line-height: 84rpx;
&:focus {
border-color: #FF8A80;
background: rgba(255, 255, 255, 1);
box-shadow: 0 0 0 4rpx rgba(255, 138, 128, 0.1);
}
&::placeholder {
color: #999;
}
}
}
}
}
/* 性别选择 */
.gender-options {
display: flex;
flex-direction: column;
align-items: center;
gap: 20rpx;
gap: 16rpx;
.gender-option {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8rpx;
height: 88rpx;
border: 2rpx solid rgba(255, 138, 128, 0.2);
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.9);
transition: all 0.3s ease;
cursor: pointer;
box-sizing: border-box;
&.active {
border-color: #FF8A80;
background: linear-gradient(135deg, #FF8A80, #FFB6C1);
.gender-text {
color: white;
font-weight: 600;
}
:deep(.u-icon) {
color: white !important;
}
}
.gender-text {
font-size: 28rpx;
color: #333;
}
}
}
/* 日期输入 */
.date-input {
display: flex;
align-items: center;
justify-content: space-between;
height: 88rpx;
padding: 0 24rpx;
border: 2rpx solid rgba(255, 138, 128, 0.2);
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
box-sizing: border-box;
.date-text {
font-size: 28rpx;
color: #333;
&.placeholder {
color: #999;
}
}
.date-icon {
font-size: 24rpx;
opacity: 0.6;
}
}
/* 备注区域 */
.notes-content {
.notes-textarea {
width: 100%;
min-height: 200rpx;
padding: 24rpx;
border: 2rpx solid rgba(255, 138, 128, 0.2);
border-radius: 16rpx;
background: rgba(255, 255, 255, 0.9);
font-size: 28rpx;
color: #333;
line-height: 1.6;
resize: none;
box-sizing: border-box;
&:focus {
border-color: #FF8A80;
background: rgba(255, 255, 255, 1);
box-shadow: 0 0 0 4rpx rgba(255, 138, 128, 0.1);
}
&::placeholder {
color: #999;
}
}
.char-count {
text-align: right;
margin-top: 8rpx;
.count-text {
font-size: 22rpx;
color: #999;
}
}
}
/* 提交区域 */
.submit-section {
padding: 40rpx 30rpx;
.submit-btn {
width: 100%;
padding: 24rpx;
border-radius: 28rpx;
font-size: 32rpx;
font-weight: 600;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 12rpx;
&:disabled {
opacity: 0.7;
}
.loading-icon {
font-size: 28rpx;
}
.btn-text {
color: white;
}
}
}
:deep(.u-form-item) {
margin-bottom: 30rpx;
}
:deep(.u-card) {
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(20rpx);
border-radius: 24rpx;
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
border: 1rpx solid rgba(255, 255, 255, 0.3);
}
:deep(.u-button--primary) {
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
border: none;
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
}
</style>

68
pages/review/review.vue
View File

@ -523,7 +523,7 @@ export default {
rating: 4.8,
reviewCount: 1256,
priceRange: '89-156',
image: '/static/product1.jpg',
image: 'https://images.unsplash.com/photo-1589924691995-400dc9ecc119?w=300&h=300&fit=crop',
badge: '热销',
tags: ['室内猫', '营养均衡', '毛球护理'],
isFavorite: false
@ -537,7 +537,7 @@ export default {
rating: 4.7,
reviewCount: 892,
priceRange: '128-268',
image: '/static/product2.jpg',
image: 'https://images.unsplash.com/photo-1551717743-49959800b1f6?w=300&h=300&fit=crop',
badge: '新品',
tags: ['小型犬', '幼犬', '易消化'],
isFavorite: false
@ -551,7 +551,7 @@ export default {
rating: 4.6,
reviewCount: 2341,
priceRange: '45-78',
image: '/static/product3.jpg',
image: 'https://images.unsplash.com/photo-1601758228041-f3b2795255f1?w=300&h=300&fit=crop',
badge: '',
tags: ['无尘', '结团好', '除臭'],
isFavorite: false
@ -565,7 +565,7 @@ export default {
rating: 4.9,
reviewCount: 567,
priceRange: '35-68',
image: '/static/product4.jpg',
image: 'https://images.unsplash.com/photo-1583337130417-3346a1be7dee?w=300&h=300&fit=crop',
badge: '推荐',
tags: ['冻干', '高蛋白', '训练奖励'],
isFavorite: false
@ -579,7 +579,7 @@ export default {
rating: 4.5,
reviewCount: 423,
priceRange: '89-129',
image: '/static/product5.jpg',
image: 'https://images.unsplash.com/photo-1545249390-6bdfa286032f?w=300&h=300&fit=crop',
badge: '',
tags: ['智能', '自动', '互动'],
isFavorite: false
@ -593,10 +593,66 @@ export default {
rating: 4.4,
reviewCount: 234,
priceRange: '156-298',
image: '/static/product6.jpg',
image: 'https://images.unsplash.com/photo-1587300003388-59208cc962cb?w=300&h=300&fit=crop',
badge: '',
tags: ['关节保健', '老年犬', '软糖'],
isFavorite: false
},
{
id: 'p7',
name: '天然猫粮 无谷配方',
brand: '渴望',
category: 'food',
petType: 'cat',
rating: 4.9,
reviewCount: 1834,
priceRange: '200-350',
image: 'https://images.unsplash.com/photo-1548767797-d8c844163c4c?w=300&h=300&fit=crop',
badge: '高端',
tags: ['无谷物', '天然', '高蛋白'],
isFavorite: false
},
{
id: 'p8',
name: '宠物湿巾 杀菌除味',
brand: '怡亲',
category: 'health',
petType: 'all',
rating: 4.3,
reviewCount: 756,
priceRange: '25-45',
image: 'https://images.unsplash.com/photo-1560807707-8cc77767d783?w=300&h=300&fit=crop',
badge: '',
tags: ['杀菌', '除味', '便携'],
isFavorite: false
},
{
id: 'p9',
name: '狗狗咬胶 磨牙棒',
brand: '好主人',
category: 'toy',
petType: 'dog',
rating: 4.6,
reviewCount: 1123,
priceRange: '15-35',
image: 'https://images.unsplash.com/photo-1601758125946-6ec2ef64daf8?w=300&h=300&fit=crop',
badge: '',
tags: ['磨牙', '清洁牙齿', '天然'],
isFavorite: false
},
{
id: 'p10',
name: '猫咪营养膏 增肥补钙',
brand: '卫仕',
category: 'health',
petType: 'cat',
rating: 4.7,
reviewCount: 892,
priceRange: '45-89',
image: 'https://images.unsplash.com/photo-1574158622682-e40e69881006?w=300&h=300&fit=crop',
badge: '营养',
tags: ['营养膏', '增肥', '补钙'],
isFavorite: false
}
]