311 lines
6.5 KiB
Vue
311 lines
6.5 KiB
Vue
<template>
|
||
<view class="adoption-container">
|
||
<view class="search-container">
|
||
<u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>
|
||
<view class="publish-btn" @click="publishAdoption">
|
||
<text class="publish-text">发布</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="filter-bar">
|
||
<u-button v-for="filter in filters" :key="filter.key"
|
||
:text="filter.name"
|
||
:type="currentFilter === filter.key ? 'primary' : 'info'"
|
||
size="mini"
|
||
plain
|
||
@click="setFilter(filter.key)">
|
||
</u-button>
|
||
</view>
|
||
|
||
<scroll-view class="adoption-list" scroll-y="true">
|
||
<view v-for="pet in filteredPets" :key="pet.id" class="pet-card" @click="viewDetail(pet)">
|
||
<view class="pet-adoption-item">
|
||
<view class="pet-avatar">
|
||
<image :src="pet.avatar || '/static/default-pet.png'" class="avatar-image" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="pet-info">
|
||
<text class="pet-name">{{ pet.name }}</text>
|
||
<text class="pet-details">{{ pet.breed }} · {{ pet.age }}岁 · {{ pet.gender }}</text>
|
||
<text class="pet-location">{{ pet.location }}</text>
|
||
<view class="pet-tags">
|
||
<view class="status-tag" :class="{ 'available': pet.status === '待领养' }">
|
||
<text class="tag-text">{{ pet.status }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="contact-btn" @click.stop="contact(pet)">
|
||
<text class="btn-text">联系</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
searchKeyword: '',
|
||
currentFilter: 'all',
|
||
filters: [
|
||
{ key: 'all', name: '全部' },
|
||
{ key: 'cat', name: '猫咪' },
|
||
{ key: 'dog', name: '狗狗' },
|
||
{ key: 'available', name: '待领养' }
|
||
],
|
||
adoptionPets: [
|
||
{
|
||
id: 1,
|
||
name: '小花',
|
||
breed: '中华田园猫',
|
||
age: 1,
|
||
gender: '母',
|
||
location: '北京市朝阳区',
|
||
status: '待领养',
|
||
avatar: '/static/cat1.jpg',
|
||
type: 'cat',
|
||
description: '性格温顺，已绝育，已接种疫苗'
|
||
},
|
||
{
|
||
id: 2,
|
||
name: '大黄',
|
||
breed: '金毛',
|
||
age: 2,
|
||
gender: '公',
|
||
location: '上海市浦东新区',
|
||
status: '待领养',
|
||
avatar: '/static/dog1.jpg',
|
||
type: 'dog',
|
||
description: '活泼可爱，喜欢和人玩耍'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
filteredPets() {
|
||
let result = this.adoptionPets
|
||
|
||
if (this.currentFilter !== 'all') {
|
||
if (this.currentFilter === 'available') {
|
||
result = result.filter(pet => pet.status === '待领养')
|
||
} else {
|
||
result = result.filter(pet => pet.type === this.currentFilter)
|
||
}
|
||
}
|
||
|
||
if (this.searchKeyword) {
|
||
result = result.filter(pet =>
|
||
pet.name.includes(this.searchKeyword) ||
|
||
pet.breed.includes(this.searchKeyword) ||
|
||
pet.location.includes(this.searchKeyword)
|
||
)
|
||
}
|
||
|
||
return result
|
||
}
|
||
},
|
||
methods: {
|
||
setFilter(key) {
|
||
this.currentFilter = key
|
||
},
|
||
|
||
searchPets() {
|
||
// 搜索逻辑在computed中处理
|
||
},
|
||
|
||
publishAdoption() {
|
||
uni.navigateTo({
|
||
url: '/pages/adoption/publish'
|
||
})
|
||
},
|
||
|
||
viewDetail(pet) {
|
||
uni.navigateTo({
|
||
url: `/pages/adoption/detail?id=${pet.id}`
|
||
})
|
||
},
|
||
|
||
contact(pet) {
|
||
uni.showModal({
|
||
title: '联系方式',
|
||
content: '请添加微信：pet_love_123',
|
||
showCancel: false
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.adoption-container {
|
||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 25%, #FECFEF 50%, #F8BBD9 100%);
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.search-container {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20rpx);
|
||
margin: 20rpx 30rpx;
|
||
border-radius: 24rpx;
|
||
padding: 20rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 16rpx;
|
||
|
||
.publish-btn {
|
||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||
border-radius: 20rpx;
|
||
padding: 16rpx 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.publish-text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
|
||
.filter-bar {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20rpx);
|
||
margin: 20rpx 30rpx;
|
||
border-radius: 24rpx;
|
||
padding: 24rpx;
|
||
display: flex;
|
||
gap: 20rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||
|
||
:deep(.u-button) {
|
||
margin: 0;
|
||
background: rgba(255, 138, 128, 0.1);
|
||
border: 2rpx solid rgba(255, 138, 128, 0.3);
|
||
border-radius: 20rpx;
|
||
}
|
||
|
||
: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);
|
||
}
|
||
}
|
||
|
||
.adoption-list {
|
||
height: calc(100vh - 300rpx);
|
||
padding: 0 30rpx;
|
||
}
|
||
|
||
.pet-card {
|
||
background: rgba(255, 255, 255, 0.95);
|
||
backdrop-filter: blur(20rpx);
|
||
margin: 20rpx 0;
|
||
border-radius: 24rpx;
|
||
box-shadow: 0 8rpx 32rpx rgba(255, 138, 128, 0.2);
|
||
border: 1rpx solid rgba(255, 255, 255, 0.3);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.98);
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.3);
|
||
}
|
||
}
|
||
|
||
.pet-adoption-item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 24rpx;
|
||
|
||
.pet-avatar {
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
border-radius: 20rpx;
|
||
overflow: hidden;
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.2);
|
||
|
||
.avatar-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.pet-info {
|
||
flex: 1;
|
||
margin-left: 24rpx;
|
||
|
||
.pet-name {
|
||
font-size: 32rpx;
|
||
font-weight: 600;
|
||
color: #FF8A80;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.pet-details {
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
display: block;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.pet-location {
|
||
font-size: 24rpx;
|
||
color: #999999;
|
||
display: block;
|
||
margin-bottom: 16rpx;
|
||
}
|
||
|
||
.pet-tags {
|
||
.status-tag {
|
||
background: rgba(255, 193, 7, 0.1);
|
||
border: 2rpx solid rgba(255, 193, 7, 0.3);
|
||
border-radius: 16rpx;
|
||
padding: 8rpx 16rpx;
|
||
display: inline-block;
|
||
|
||
&.available {
|
||
background: rgba(76, 175, 80, 0.1);
|
||
border-color: rgba(76, 175, 80, 0.3);
|
||
|
||
.tag-text {
|
||
color: #4CAF50;
|
||
}
|
||
}
|
||
|
||
.tag-text {
|
||
font-size: 24rpx;
|
||
color: #FFC107;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.contact-btn {
|
||
background: linear-gradient(135deg, #FF8A80 0%, #FFB6C1 100%);
|
||
border-radius: 20rpx;
|
||
padding: 16rpx 24rpx;
|
||
box-shadow: 0 4rpx 16rpx rgba(255, 138, 128, 0.4);
|
||
transition: all 0.3s ease;
|
||
|
||
&:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 28rpx;
|
||
color: #ffffff;
|
||
font-weight: 500;
|
||
}
|
||
}
|
||
}
|
||
</style>
|