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

<template>
	<view class="user-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.phone" type="number" 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.address" 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: '张先生', phone: '13800138000', gender: '男', address: '北京市朝阳区', 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>
.user-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: 160rpx; font-size: 28rpx; color: #333; flex-shrink: 0; }
.form-input { flex: 1; font-size: 28rpx; color: #333; text-align: right; }
.picker-value { font-size: 28rpx; color: #333; }
.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>