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

<template>
	<view class="pet-edit-page">
		<nav-bar title="编辑宠物档案"></nav-bar>
		
		<view v-if="loading" class="loading-state">
			<uni-load-more status="loading"></uni-load-more>
		</view>

		<block v-else>
			<!-- 基础信息 -->
			<view class="section-title">基础信息</view>
			<view class="form-card">
				<view class="form-item">
					<text class="form-label require">宠物名称</text>
					<input class="form-input" v-model="form.name" placeholder="请输入宠物名称" />
				</view>
				<view class="form-item">
					<text class="form-label require">宠物类型</text>
					<picker :range="typeOptions" range-key="label" @change="onTypeChange">
						<view class="picker-value">{{ getTypeLabel }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">所属主人</text>
					<picker :range="customerOptions" range-key="name" @change="onCustomerChange">
						<view class="picker-value" :class="{'placeholder': !form.userId}">{{ getCustomerLabel }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">品种</text>
					<view class="form-combox-wrapper">
						<uni-combox :candidates="breedCandidates" v-model="form.breed" placeholder="请选择或输入品种" emptyTips="未找到对应品种，可直接输入"></uni-combox>
					</view>
				</view>
				<view class="form-item">
					<text class="form-label">性别</text>
					<picker :range="genderOptions" range-key="label" @change="onGenderChange">
						<view class="picker-value">{{ getGenderLabel }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">体型</text>
					<picker :range="sizeOptions" range-key="label" @change="onSizeChange">
						<view class="picker-value" :class="{'placeholder': !form.size}">{{ getSizeLabel }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">年龄(岁)</text>
					<input class="form-input" v-model="form.age" type="number" placeholder="请输入年龄" />
				</view>
				<view class="form-item">
					<text class="form-label require">体重(kg)</text>
					<input class="form-input" v-model="form.weight" type="digit" placeholder="请输入体重" />
				</view>
			</view>

			<!-- 性格特征 -->
			<view class="section-title">性格特征</view>
			<view class="form-card">
				<view class="form-item">
					<text class="form-label">性格关键词</text>
					<input class="form-input" v-model="form.personality" placeholder="例如活泼、粘人" />
				</view>
				<view class="form-item vertical">
					<text class="form-label">萌宠性格描述</text>
					<textarea class="form-textarea" v-model="form.cutePersonality" placeholder="详细描述宠物的性格"></textarea>
				</view>
			</view>

			<!-- 家庭信息 -->
			<view class="section-title">家庭信息</view>
			<view class="form-card">
				<view class="form-item">
					<text class="form-label require">房屋类型</text>
					<picker :range="houseTypeOptions" range-key="label" @change="onHouseTypeChange">
						<view class="picker-value" :class="{'placeholder': !form.houseType}">{{ getHouseTypeLabel }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">入门方式</text>
					<picker :range="entryMethodOptions" range-key="label" @change="onEntryMethodChange">
						<view class="picker-value" :class="{'placeholder': !form.entryMethod}">{{ getEntryMethodLabel }}</view>
					</picker>
				</view>
				<view class="form-item" v-if="form.entryMethod === 'password'">
					<text class="form-label require">门锁密码</text>
					<input class="form-input" v-model="form.entryPassword" placeholder="请输入门锁密码" />
				</view>
				<view class="form-item" v-if="form.entryMethod === 'key'">
					<text class="form-label require">钥匙存放处</text>
					<input class="form-input" v-model="form.keyLocation" placeholder="请输入取钥匙位置" />
				</view>
			</view>

			<!-- 健康状况 -->
			<view class="section-title">健康状况</view>
			<view class="form-card">
				<view class="form-item">
					<text class="form-label require">健康状态</text>
					<picker :range="healthStatusOptions" @change="onHealthChange">
						<view class="picker-value">{{ form.healthStatus || '请选择' }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">疫苗接种</text>
					<picker :range="vaccineOptions" @change="onVaccineChange">
						<view class="picker-value">{{ form.vaccineStatus || '请选择' }}</view>
					</picker>
				</view>
				<view class="form-item">
					<text class="form-label require">攻击倾向</text>
					<picker :range="aggressionOptions" range-key="label" @change="onAggressionChange">
						<view class="picker-value">{{ getAggressionLabel }}</view>
					</picker>
				</view>
				<view class="form-item vertical">
					<text class="form-label require">既往病史</text>
					<textarea class="form-textarea" v-model="form.medicalHistory" placeholder="如有病史请务必记录"></textarea>
				</view>
				<view class="form-item vertical">
					<text class="form-label require">过敏史</text>
					<textarea class="form-textarea" v-model="form.allergies" placeholder="如有过敏源请务必记录"></textarea>
				</view>
				<view class="form-item vertical">
					<text class="form-label">补充备注</text>
					<textarea class="form-textarea" v-model="form.remark" placeholder="请输入其他备注信息"></textarea>
				</view>
			</view>

			<!-- 底部固定操作栏 -->
			<view class="footer-bar">
				<button class="save-btn" @click="onSave">保存修改</button>
			</view>
		</block>
	</view>
</template>

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

const loading = ref(true)
const typeOptions = [{ label: '猫', value: 1 }, { label: '狗', value: 2 }, { label: '其他', value: 3 }]
const genderOptions = [{ label: '未知', value: 0 }, { label: '公', value: 1 }, { label: '母', value: 2 }]
const sizeOptions = [{ label: '小型(0-10kg)', value: 'small' }, { label: '中型(10-25kg)', value: 'medium' }, { label: '大型(25kg+)', value: 'large' }]
const { houseTypeOptions, entryMethodOptions } = customerEnums
const healthStatusOptions = ['健康', '亚健康', '疾病']
const vaccineOptions = ['无', '已打1次', '已打2次', '已打3次']
const aggressionOptions = [{ label: '否', value: 0 }, { label: '是', value: 1 }]

const customerOptions = ref([])
const breedCandidates = ref([])
const petId = ref(null)

const form = reactive({
	id: '', name: '', userId: '', type: 1, breed: '', gender: 0, age: '', weight: '', size: '',
	arrivalTime: '', houseType: '', entryMethod: '', entryPassword: '', keyLocation: '',
	personality: '', cutePersonality: '', healthStatus: '健康', aggression: 0,
	vaccineStatus: '无', medicalHistory: '', allergies: '', remark: ''
})

onLoad(async (options) => {
	if (options.id) {
		petId.value = options.id
		// 1. 获取所有必要的基础数据（客人列表、品种字典）
		await initData()
		// 2. 获取详情并回显
		await fetchDetail()
	} else {
		uni.showToast({ title: '参数错误', icon: 'none' })
		setTimeout(() => uni.navigateBack(), 1500)
	}
})

const initData = async () => {
	try {
		const [custRes, dictRes] = await Promise.all([
			listAllCustomer({ status: 0 }),
			getDicts('sys_pet_breed')
		])
		customerOptions.value = Array.isArray(custRes) ? custRes : (custRes?.data || [])
		const dictList = Array.isArray(dictRes) ? dictRes : (dictRes?.data || [])
		breedCandidates.value = dictList.map(item => item.dictLabel || item.dictValue || item.label || item.value)
	} catch(e) {
		console.error('初始化数据失败', e)
	}
}

const fetchDetail = async () => {
	try {
		loading.value = true
		const res = await getPet(petId.value)
		if (res) {
			// 将接口返回的数据合并到响应式表单对象中
			Object.assign(form, res)
		}
	} catch (e) {
		console.error('获取宠物详情失败', e)
	} finally {
		loading.value = false
	}
}

// 标签转换逻辑
const getTypeLabel = computed(() => typeOptions.find(o => o.value === form.type)?.label || '请选择')
const onTypeChange = (e) => { form.type = typeOptions[e.detail.value].value }

const getCustomerLabel = computed(() => {
	const opt = customerOptions.value.find(o => String(o.id) === String(form.userId))
	return opt ? opt.name : '请选择主人'
})
const onCustomerChange = (e) => { form.userId = customerOptions.value[e.detail.value].id }

const getGenderLabel = computed(() => genderOptions.find(o => o.value === form.gender)?.label || '未知')
const onGenderChange = (e) => { form.gender = genderOptions[e.detail.value].value }

const getSizeLabel = computed(() => sizeOptions.find(o => o.value === form.size)?.label || '请选择')
const onSizeChange = (e) => { form.size = sizeOptions[e.detail.value].value }

const getHouseTypeLabel = computed(() => houseTypeOptions.find(o => o.value === form.houseType)?.label || '请选择')
const onHouseTypeChange = (e) => { form.houseType = houseTypeOptions[e.detail.value].value }

const getEntryMethodLabel = computed(() => entryMethodOptions.find(o => o.value === form.entryMethod)?.label || '请选择')
const onEntryMethodChange = (e) => { form.entryMethod = entryMethodOptions[e.detail.value].value }

const onHealthChange = (e) => { form.healthStatus = healthStatusOptions[e.detail.value] }
const onVaccineChange = (e) => { form.vaccineStatus = vaccineOptions[e.detail.value] }

const getAggressionLabel = computed(() => aggressionOptions.find(o => o.value === form.aggression)?.label || '否')
const onAggressionChange = (e) => { form.aggression = aggressionOptions[e.detail.value].value }

const onSave = async () => {
	// 校验逻辑
	if (!form.name) return uni.showToast({ title: '请输入宠物名称', icon: 'none' })
	if (!form.userId) return uni.showToast({ title: '请选择所属主人', icon: 'none' })
	if (!form.breed) return uni.showToast({ title: '请输入或选择品种', icon: 'none' })
	if (!form.size) return uni.showToast({ title: '请选择体型', icon: 'none' })
	if (!form.age) return uni.showToast({ title: '请输入年龄', icon: 'none' })
	if (!form.weight) return uni.showToast({ title: '请输入体重', icon: 'none' })
	if (!form.houseType) return uni.showToast({ title: '请选择房屋类型', icon: 'none' })
	if (!form.entryMethod) return uni.showToast({ title: '请选择入门方式', icon: 'none' })
	
	try {
		uni.showLoading({ title: '保存中' })
		await updatePet(form)
		uni.hideLoading()
		uni.showToast({ title: '保存成功', icon: 'success' })
		setTimeout(() => uni.navigateBack(), 1000)
	} catch (error) {
		uni.hideLoading()
	}
}
</script>

<style lang="scss" scoped>
.pet-edit-page { min-height: 100vh; background: #f7f8fa; padding-bottom: calc(140rpx + env(safe-area-inset-bottom)); }
.loading-state { padding-top: 100rpx; }
.section-title { font-size: 28rpx; font-weight: bold; color: #666; padding: 24rpx 32rpx 12rpx; }
.form-card { background: #fff; border-radius: 24rpx; padding: 8rpx 32rpx; margin: 0 24rpx; }
.form-item { display: flex; align-items: center; padding: 28rpx 0; border-bottom: 1rpx solid #f5f5f5; }
.form-item:last-child { border-bottom: none; }
.form-item.vertical { flex-direction: column; align-items: flex-start; border-bottom: none; }
.form-item.vertical .form-textarea { width: 100%; height: 160rpx; margin-top: 16rpx; background: #f9f9f9; padding: 16rpx; box-sizing: border-box; border-radius: 12rpx; }
.form-label { width: 220rpx; font-size: 28rpx; color: #333; flex-shrink: 0; }
.form-label.require::before { content: '*'; color: #f56c6c; margin-right: 4rpx; }
.form-input { flex: 1; font-size: 28rpx; color: #333; text-align: right; }
.form-combox-wrapper { flex: 1; min-width: 0; }
.picker-value { flex: 1; font-size: 28rpx; color: #333; text-align: right; min-height: 40rpx; }
.picker-value.placeholder { color: #ccc; }

.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; }
.save-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; }

:deep(.uni-combox) { border: none !important; }
:deep(.uni-combox__input-box) { display: flex; justify-content: flex-end; padding-right: 0; }
:deep(.uni-combox__input) { text-align: right; font-size: 28rpx; padding-right: 0;}
:deep(.uni-combox__input-plholder) { color: #ccc; text-align: right; font-size: 28rpx; padding-right: 0;}
</style>