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">
				<uni-icons type="search" size="14" color="#999"></uni-icons>
				<input type="text" placeholder="搜索宠物名/主人" class="search-input" />
			</view>
			<button size="mini" class="add-btn" @click="goToAdd">+ 新增档案</button>
		</view>

		<!-- 宠物档案卡片列表 -->
		<view class="list-container">
			<view class="pet-card" v-for="pet in pets" :key="pet.id" @click="handleCardClick(pet)">
				<image :src="pet.avatar" 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 }}</text>
					<view class="health-overview">
						<text class="health-badge">{{ pet.health }}</text>
						<text class="vaccine-info">疫苗: {{ pet.vaccine }}</text>
					</view>
					<view class="card-footer">
						<view class="action-btn-group">
							<text class="btn-item detail" @click.stop="goToDetail(pet)">详情</text>
							<text class="btn-item edit" @click.stop="goToEdit(pet)">编辑</text>
							<text class="btn-item delete" @click.stop="onDelete(pet)">删除</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import navBar from '@/components/nav-bar/index.vue'
import petMockData from '@/mock/pet.json'

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

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

const onDelete = (pet) => {
	uni.showModal({
		title: '确认删除',
		content: `确定要删除宠物档案 [${pet.name}] 吗？`,
		success: (res) => {
			if (res.confirm) {
				pets.value = pets.value.filter(item => item.id !== pet.id)
				uni.showToast({ title: '删除成功', icon: 'success' })
			}
		}
	})
}

const pets = ref(petMockData.map(p => ({
	id: p.id, name: p.name, breed: p.breed, age: p.age,
	ownerName: p.ownerName, health: p.health, vaccine: p.vaccine, avatar: p.avatar
})))
</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;
	display: flex;
	align-items: center;
	background: #f5f5f5;
	border-radius: 32rpx;
	padding: 12rpx 20rpx;
	gap: 12rpx;
}

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

.add-btn {
	font-size: 24rpx;
	font-weight: bold;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #333;
	border: none;
	border-radius: 32rpx;
	padding: 12rpx 28rpx;
	white-space: nowrap;
}

.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: 1rpx solid #f8f8f8;
	padding-top: 16rpx;
}

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

.btn-item {
	font-size: 24rpx;
	padding: 8rpx 20rpx;
	border-radius: 12rpx;
	border: 1rpx solid #eee;
	color: #666;
}

.btn-item.detail {
	background: #fdf6ec;
	border-color: #faecd8;
	color: #e6a23c;
}

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