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

<template>
	<view class="pet-edit-page">
		<view class="form-card">
			<view class="form-item">
				<text class="form-label">宠物名称</text>
				<input class="form-input" v-model="form.name" placeholder="请输入宠物名称" />
			</view>
			<view class="form-item">
				<text class="form-label">品种</text>
				<input class="form-input" v-model="form.breed" placeholder="请输入品种" />
			</view>
			<view class="form-item">
				<text class="form-label">性别</text>
				<picker :range="genderOptions" @change="onGenderChange">
					<view class="picker-value">{{ form.gender || '请选择' }}</view>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label">年龄</text>
				<input class="form-input" v-model="form.age" placeholder="请输入年龄" />
			</view>
			<view class="form-item">
				<text class="form-label">体重(kg)</text>
				<input class="form-input" v-model="form.weight" type="digit" placeholder="请输入体重" />
			</view>
			<view class="form-item">
				<text class="form-label">健康状况</text>
				<input class="form-input" v-model="form.health" placeholder="请输入健康状况" />
			</view>
			<view class="form-item">
				<text class="form-label">备注</text>
				<textarea class="form-textarea" v-model="form.note" placeholder="请输入备注信息"></textarea>
			</view>
		</view>
		<button class="save-btn" @click="onSave">保存修改</button>
	</view>
</template>

<script setup>
import { reactive } from 'vue'

const genderOptions = ['公', '母']
const form = reactive({ name: '旺财', breed: '金毛寻回犬', gender: '公', age: '3岁', weight: '30', health: '健康', note: '' })

const onGenderChange = (e) => { form.gender = genderOptions[e.detail.value] }
const onSave = () => {
	uni.showToast({ title: '保存成功', icon: 'success' })
	setTimeout(() => uni.navigateBack(), 1000)
}
</script>

<style lang="scss" scoped>
.pet-edit-page {
	min-height: 100vh;
	background: #f7f8fa;
	padding: 24rpx;
	padding-bottom: 160rpx;
}

.form-card {
	background: #fff;
	border-radius: 24rpx;
	padding: 8rpx 32rpx;
}

.form-item {
	display: flex;
	align-items: center;
	padding: 28rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
}

.form-item:last-child {
	border-bottom: none;
}

.form-label {
	width: 180rpx;
	font-size: 28rpx;
	color: #333;
	flex-shrink: 0;
}

.form-input {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
}

.picker-value {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	text-align: right;
}

.form-textarea {
	flex: 1;
	font-size: 28rpx;
	color: #333;
	height: 160rpx;
}

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