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

<template>
	<view class="pet-detail-page">
		<nav-bar title="宠物档案详情" bgColor="transparent" fontColor="#fff"></nav-bar>
		
		<view class="pet-hero">
			<image :src="petInfo.avatar || defaultAvatar" class="hero-img" mode="aspectFill"></image>
			<view class="hero-overlay"></view>
			<view class="hero-content">
				<view class="hero-main">
					<text class="pet-name">{{ petInfo.name || '加载中...' }}</text>
					<view class="tag-list">
						<text class="gender-tag" :class="genderClass">{{ genderLabel }}</text>
						<text class="size-tag">{{ sizeLabel }}</text>
					</view>
				</view>
				<text class="pet-summary">{{ petInfo.breed }} · {{ petInfo.age || 0 }}岁 · {{ petInfo.weight || 0 }}kg</text>
			</view>
		</view>

		<view class="detail-container">
			<!-- 基础信息 -->
			<view class="section-card">
				<view class="section-header">
					<view class="title-line"></view>
					<text class="section-title">基础信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">宠物编号</text>
						<text class="value">{{ petInfo.id || '-' }}</text>
					</view>
					<view class="info-item">
						<text class="label">所属主人</text>
						<text class="value">{{ petInfo.ownerName || petInfo.userName || petInfo.customerName || '-' }}</text>
					</view>
					<view class="info-item">
						<text class="label">主人电话</text>
						<text class="value">{{ petInfo.ownerPhone || petInfo.phonenumber || '-' }}</text>
					</view>
					<view class="info-item col-2">
						<text class="label">性格关键词</text>
						<text class="value">{{ petInfo.personality || '无' }}</text>
					</view>
					<view class="info-item col-2">
						<text class="label">萌宠性格</text>
						<text class="value block">{{ petInfo.cutePersonality || '暂无详细描述' }}</text>
					</view>
				</view>
			</view>

			<!-- 家庭信息 -->
			<view class="section-card">
				<view class="section-header">
					<view class="title-line"></view>
					<text class="section-title">家庭信息</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">房屋类型</text>
						<text class="value">{{ houseTypeLabel }}</text>
					</view>
					<view class="info-item">
						<text class="label">入门方式</text>
						<text class="value">{{ entryMethodLabel }}</text>
					</view>
					<view class="info-item col-2" v-if="petInfo.entryMethod === 'password'">
						<text class="label">门锁密码</text>
						<text class="value highlight">{{ petInfo.entryPassword || '-' }}</text>
					</view>
					<view class="info-item col-2" v-if="petInfo.entryMethod === 'key'">
						<text class="label">钥匙存放处</text>
						<text class="value">{{ petInfo.keyLocation || '-' }}</text>
					</view>
				</view>
			</view>

			<!-- 健康状况 -->
			<view class="section-card">
				<view class="section-header">
					<view class="title-line"></view>
					<text class="section-title">健康状况</text>
				</view>
				<view class="info-grid">
					<view class="info-item">
						<text class="label">健康状态</text>
						<text class="value" :class="healthClass">{{ petInfo.healthStatus || '未知' }}</text>
					</view>
					<view class="info-item">
						<text class="label">疫苗情况</text>
						<text class="value">{{ petInfo.vaccineStatus || '未记录' }}</text>
					</view>
					<view class="info-item">
						<text class="label">攻击倾向</text>
						<text class="value" :class="petInfo.aggression ? 'red' : ''">{{ petInfo.aggression ? '是' : '否' }}</text>
					</view>
					<view class="info-item col-2">
						<text class="label">既往病史</text>
						<text class="value block">{{ petInfo.medicalHistory || '无' }}</text>
					</view>
					<view class="info-item col-2">
						<text class="label">过敏史</text>
						<text class="value block">{{ petInfo.allergies || '无' }}</text>
					</view>
				</view>
			</view>

			<!-- 备注信息 -->
			<view class="section-card" v-if="petInfo.remark">
				<view class="section-header">
					<view class="title-line"></view>
					<text class="section-title">补充备注</text>
				</view>
				<view class="remark-content">
					{{ petInfo.remark }}
				</view>
			</view>
		</view>

		<view class="footer-bar">
			<button class="edit-btn" @click="goToEdit">编辑档案</button>
		</view>
	</view>
</template>

<script setup>
// @Author: Antigravity
import { ref, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPet } from '@/api/archieves/pet'
import navBar from '@/components/nav-bar/index.vue'
import customerEnums from '@/json/customer.json'

const defaultAvatar = 'https://images.unsplash.com/photo-1552053831-71594a27632d?q=80&w=600&auto=format&fit=crop'
const petId = ref(null)
const petInfo = ref({})

const genderOptions = { 0: '未知', 1: '公', 2: '母' }
const sizeOptions = { 'small': '小型', 'medium': '中型', 'large': '大型' }
const { houseTypeOptions, entryMethodOptions } = customerEnums

onLoad((options) => {
	if (options.id) {
		petId.value = options.id
		fetchDetail()
	}
})

const fetchDetail = async () => {
	try {
		uni.showLoading({ title: '加载中...' })
		const res = await getPet(petId.value)
		petInfo.value = res || {}
		uni.hideLoading()
	} catch (e) {
		uni.hideLoading()
		console.error('获取详情失败', e)
	}
}

const genderLabel = computed(() => {
	const g = petInfo.value.gender
	return g === 1 ? '公' : (g === 2 ? '母' : '未知')
})

const genderClass = computed(() => {
	const g = petInfo.value.gender
	return g === 1 ? 'male' : (g === 2 ? 'female' : '')
})

const sizeLabel = computed(() => sizeOptions[petInfo.value.size] || '未知体型')

const houseTypeLabel = computed(() => {
	const opt = houseTypeOptions.find(o => o.value === petInfo.value.houseType)
	return opt ? opt.label : '未记录'
})

const entryMethodLabel = computed(() => {
	const opt = entryMethodOptions.find(o => o.value === petInfo.value.entryMethod)
	return opt ? opt.label : '未记录'
})

const healthClass = computed(() => {
	const s = petInfo.value.healthStatus
	if (s === '健康') return 'green'
	if (s === '疾病') return 'red'
	return 'orange'
})

const goToEdit = () => {
	uni.navigateTo({
		url: `/pages/my/pet/edit/index?id=${petId.value}`
	})
}
</script>

<style lang="scss" scoped>
.pet-detail-page {
	min-height: 100vh;
	background: #f4f6f9;
	padding-bottom: calc(160rpx + env(safe-area-inset-bottom));
}

.pet-hero {
	position: relative;
	height: 520rpx;
	width: 100%;
}

.hero-img {
	width: 100%;
	height: 100%;
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%);
}

.hero-content {
	position: absolute;
	bottom: 60rpx;
	left: 40rpx;
	right: 40rpx;
	z-index: 5;
}

.hero-main {
	display: flex;
	align-items: center;
	margin-bottom: 20rpx;
}

.pet-name {
	font-size: 56rpx;
	font-weight: 800;
	color: #fff;
	margin-right: 24rpx;
}

.tag-list {
	display: flex;
	gap: 12rpx;
}

.gender-tag, .size-tag {
	padding: 4rpx 20rpx;
	border-radius: 30rpx;
	font-size: 22rpx;
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
	backdrop-filter: blur(4rpx);
}

.gender-tag.male { background: rgba(0, 122, 255, 0.6); }
.gender-tag.female { background: rgba(255, 45, 85, 0.6); }

.pet-summary {
	font-size: 28rpx;
	color: rgba(255, 255, 255, 0.9);
}

.detail-container {
	margin-top: -40rpx;
	position: relative;
	z-index: 10;
	padding: 0 24rpx;
}

.section-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 32rpx;
	margin-bottom: 24rpx;
	box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.02);
}

.section-header {
	display: flex;
	align-items: center;
	margin-bottom: 32rpx;
}

.title-line {
	width: 8rpx;
	height: 32rpx;
	background: #ff9500;
	border-radius: 4rpx;
	margin-right: 16rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
}

.info-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32rpx 24rpx;
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.info-item.col-2 {
	grid-column: span 2;
}

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

.value {
	font-size: 28rpx;
	color: #333;
	font-weight: 500;
}

.value.block {
	line-height: 1.6;
	color: #666;
	font-weight: normal;
}

.value.highlight {
	color: #ff9500;
	font-weight: bold;
	font-size: 32rpx;
}

.value.green { color: #4caf50; }
.value.red { color: #f44336; }
.value.orange { color: #ff9800; }

.remark-content {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
}

.footer-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
	box-shadow: 0 -4rpx 16rpx rgba(0,0,0,0.05);
	z-index: 100;
}

.edit-btn {
	width: 100%;
	height: 88rpx;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #333;
	border: none;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	line-height: 88rpx;
}
</style>