pet-system-merchant-app/pages/my/pet/list/index.vue

<template>
	<view class="pet-list-page">
		<nav-bar title="宠物档案"></nav-bar>
		<!-- 顶部操作栏 -->
		<view class="action-bar">
			<view class="search-box">
				<text class="search-icon">🔍</text>
				<input type="text" v-model="searchKeyword" placeholder="搜索宠物名/主人" class="search-input"
					confirm-type="search" @confirm="onSearch" />
			</view>
			<view class="add-btn" @click="goToAdd">+ 新增档案</view>
		</view>

		<!-- 宠物档案卡片列表 -->
		<view class="list-container">
			<view class="pet-card" v-for="pet in pets" :key="pet.id" @click="handleCardClick(pet)">
				<image :src="pet.avatarUrl || '/static/icon/pet.svg'" class="pet-photo" mode="aspectFill"></image>
				<view class="card-info">
					<view class="info-top">
						<text class="pet-name">{{ pet.name }}</text>
						<text class="owner-name">{{ pet.ownerName || '-' }}</text>
					</view>
					<text class="pet-meta">{{ pet.breed || '-' }} · {{ pet.age || 0 }}岁</text>
					<view class="health-overview">
						<text class="health-badge">{{ pet.healthStatus || '健康' }}</text>
						<text class="vaccine-info">疫苗: {{ pet.vaccineStatus || '无' }}</text>
					</view>
					<view class="card-footer">
						<view class="action-btn-group">
							<view class="btn-item detail" @click.stop="goToDetail(pet)">详情</view>
							<view class="btn-item edit" @click.stop="goToEdit(pet)">编辑</view>
							<view class="btn-item delete" @click.stop="onDelete(pet)">删除</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="pets.length === 0" style="text-align: center; color: #999; padding: 50rpx 0; font-size: 28rpx;">
				暂无宠物数据
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'
import { listPet, delPet } from '@/api/archieves/pet'

const pets = ref([])
const searchKeyword = ref('')
const pageNum = ref(1)
const pageSize = ref(10)
const hasMore = ref(true)

const loadPets = async (isLoadMore = false) => {
	try {
		uni.showNavigationBarLoading()
		const res = await listPet({
			pageNum: pageNum.value,
			pageSize: pageSize.value,
			keyword: searchKeyword.value
		})
		const rows = res?.rows || []
		if (isLoadMore) {
			pets.value = [...pets.value, ...rows]
		} else {
			pets.value = rows
		}
		hasMore.value = pets.value.length < (res?.total || 0)
	} catch (error) {
		console.error('获取宠物列表失败:', error)
		uni.showToast({ title: typeof error === 'string' ? error : '获取宠物列表失败', icon: 'none' })
	} finally {
		uni.hideNavigationBarLoading()
		uni.stopPullDownRefresh()
	}
}

onShow(() => {
	pageNum.value = 1
	loadPets()
})

onPullDownRefresh(() => {
	pageNum.value = 1
	loadPets()
})

onReachBottom(() => {
	if (hasMore.value) {
		pageNum.value++
		loadPets(true)
	}
})

const onSearch = () => {
	pageNum.value = 1
	loadPets()
}

const goToAdd = () => uni.navigateTo({ url: '/pages/my/pet/add/index' })
const goToDetail = (pet) => uni.navigateTo({ url: `/pages/my/pet/detail/index?id=${pet.id}` })
const goToEdit = (pet) => uni.navigateTo({ url: `/pages/my/pet/edit/index?id=${pet.id}` })

const handleCardClick = (pet) => {
	goToEdit(pet)
}

const onDelete = (pet) => {
	uni.showModal({
		title: '提示',
		content: '确认删除该宠物档案吗?',
		success: async (res) => {
			if (res.confirm) {
				try {
					uni.showLoading({ title: '处理中...' })
					await delPet(pet.id)
					uni.hideLoading()
					uni.showToast({ title: '删除成功', icon: 'success' })
					// 刷新当前页数据
					loadPets()
				} catch (error) {
					uni.hideLoading()
					uni.showToast({ title: typeof error === 'string' ? error : '删除失败', icon: 'none' })
				}
			}
		}
	})
}
</script>

<style lang="scss" scoped>
/* 此部分与原文件保持一致 */
.pet-list-page {
	min-height: 100vh;
	background-color: #f2f2f2;
	padding-bottom: 40rpx;
}

.action-bar {
	display: flex;
	align-items: center;
	padding: 20rpx 24rpx;
	background-color: #fff;
	gap: 16rpx;
}

.search-box {
	flex: 1;
	height: 72rpx;
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 36rpx;
	padding: 0 24rpx;
	gap: 12rpx;
	box-sizing: border-box;
}

.search-icon {
	font-size: 28rpx;
	line-height: 1;
	flex-shrink: 0;
}

.search-input {
	flex: 1;
	font-size: 26rpx;
	background: transparent;
	height: 72rpx;
	line-height: 72rpx;
}

.add-btn {
	height: 72rpx;
	line-height: 72rpx;
	padding: 0 28rpx;
	font-size: 25rpx;
	font-weight: bold;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #fff;
	border: none;
	border-radius: 36rpx;
	margin: 0;
	white-space: nowrap;
	text-align: center;
}

.list-container {
	padding: 24rpx;
}

.pet-card {
	display: flex;
	background: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.04);
}

.pet-photo {
	width: 210rpx;
	height: 280rpx;
	flex-shrink: 0;
}

.card-info {
	flex: 1;
	padding: 24rpx;
	display: flex;
	flex-direction: column;
}

.info-top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 8rpx;
}

.pet-name {
	font-size: 34rpx;
	font-weight: 800;
	color: #333;
}

.owner-name {
	font-size: 24rpx;
	color: #999;
}

.pet-meta {
	font-size: 26rpx;
	color: #666;
	margin-bottom: 16rpx;
}

.health-overview {
	display: flex;
	align-items: center;
	gap: 16rpx;
	margin-bottom: 20rpx;
}

.health-badge {
	font-size: 22rpx;
	color: #2e7d32;
	background: #e8f5e9;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
}

.vaccine-info {
	font-size: 22rpx;
	color: #795548;
	background: #efebe9;
	padding: 4rpx 16rpx;
	border-radius: 8rpx;
}

.card-footer {
	margin-top: auto;
	border-top: 2rpx solid #EEEEEE;
	padding-top: 20rpx;
}

.action-btn-group {
	display: flex;
	justify-content: flex-end;
	gap: 16rpx;
}

.btn-item {
	font-size: 24rpx;
	height: 56rpx;
	line-height: 56rpx;
	padding: 0 24rpx;
	border-radius: 28rpx;
	border: 2rpx solid;
	color: #666;
	text-align: center;
	white-space: nowrap;
}

.btn-item.detail {
	background: #fdf6ec;
	border-color: #f5d89a;
	color: #b88230;
}

.btn-item.edit {
	background: #ecf5ff;
	border-color: #a0cfff;
	color: #409eff;
}

.btn-item.delete {
	color: #f56c6c;
	border-color: #fbc4c4;
	background: #fef0f0;
}
</style>