pet/pages/adoption/adoption.vue

<template>
	<view class="adoption-container">
		<u-navbar title="领养专区" :border="false" bg-color="#ff6b6b">
			<template #right>
				<u-icon name="plus" color="white" size="20" @click="publishAdoption"></u-icon>
			</template>
		</u-navbar>

		<u-search placeholder="搜索宠物品种或地区" v-model="searchKeyword" @search="searchPets"></u-search>

		<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">
			<u-card v-for="pet in filteredPets" :key="pet.id" :margin="20" :padding="0" @click="viewDetail(pet)">
				<view class="pet-adoption-item">
					<u-avatar :src="pet.avatar" size="80" shape="square"></u-avatar>
					<view class="pet-info">
						<u-text :text="pet.name" type="primary" size="16" bold></u-text>
						<u-text :text="`${pet.breed} · ${pet.age}岁 · ${pet.gender}`" type="info" size="14"></u-text>
						<u-text :text="pet.location" type="tips" size="12"></u-text>
						<view class="pet-tags">
							<u-tag :text="pet.status" :type="pet.status === '待领养' ? 'success' : 'warning'" size="mini"></u-tag>
						</view>
					</view>
					<view class="contact-btn">
						<u-button text="联系" type="primary" size="mini" @click.stop="contact(pet)"></u-button>
					</view>
				</view>
			</u-card>
		</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-color: #f8f9fa;
	min-height: 100vh;
}

.filter-bar {
	background-color: white;
	padding: 20rpx;
	display: flex;
	gap: 20rpx;

	/deep/ .u-button {
		margin: 0;
	}
}

.adoption-list {
	height: calc(100vh - 300rpx);
}

.pet-adoption-item {
	display: flex;
	align-items: center;
	padding: 20rpx;

	.pet-info {
		flex: 1;
		margin-left: 20rpx;

		.pet-tags {
			margin-top: 10rpx;
		}

		/deep/ .u-text {
			margin-bottom: 8rpx;
		}
	}

	.contact-btn {
		margin-left: 20rpx;
	}
}
</style>