pet-system-merchant-app/pages/my/settings/profile/index.vue

<template>
	<view class="profile-page">
		<nav-bar title="个人信息" bgColor="#fff" color="#000"></nav-bar>
		
		<view class="form-container" v-if="!loading">
			<uni-forms ref="formRef" :model="formData" :rules="rules">
				<view class="form-group">
					<uni-forms-item label="用户昵称" name="nickName" required label-width="160rpx">
						<uni-easyinput v-model="formData.nickName" placeholder="请输入昵称" :inputBorder="false" />
					</uni-forms-item>
					<view class="line"></view>
					
					<uni-forms-item label="手机号码" name="phonenumber" required label-width="160rpx">
						<uni-easyinput type="number" v-model="formData.phonenumber" placeholder="请输入手机号码" :inputBorder="false" />
					</uni-forms-item>
					<view class="line"></view>

					<uni-forms-item label="邮箱" name="email" label-width="160rpx">
						<uni-easyinput v-model="formData.email" placeholder="请输入邮箱" :inputBorder="false" />
					</uni-forms-item>
					<view class="line"></view>

					<uni-forms-item label="性别" name="sex" label-width="160rpx">
						<picker :range="sexOptions" range-key="label" @change="onSexChange">
							<view class="picker-value" :class="{'placeholder': formData.sex === undefined || formData.sex === ''}">
								{{ getSexLabel }}
							</view>
						</picker>
					</uni-forms-item>
				</view>
			</uni-forms>

			<view class="btn-group">
				<button class="submit-btn" @click="submit">保存修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
// @Author: Antigravity
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import navBar from '@/components/nav-bar/index.vue'
import { getInfo, updateUserProfile } from '@/api/system/user'

const loading = ref(true)
const formRef = ref(null)
const formData = reactive({
	nickName: '',
	phonenumber: '',
	email: '',
	sex: '' // 0男 1女 2未知
})

const sexOptions = [
	{ label: '男', value: '0' },
	{ label: '女', value: '1' },
	{ label: '未知', value: '2' }
]

const rules = {
	nickName: {
		rules: [{ required: true, errorMessage: '请输入昵称' }]
	},
	phonenumber: {
		rules: [
			{ required: true, errorMessage: '请输入手机号码' },
			{ pattern: /^1[3-9]\d{9}$/, errorMessage: '请输入正确的手机号码' }
		]
	},
	email: {
		rules: [{ format: 'email', errorMessage: '请输入正确的邮箱格式' }]
	}
}

onLoad(async () => {
    try {
        const res = await getInfo()
        if (res && res.user) {
            formData.nickName = res.user.nickName || ''
            formData.phonenumber = res.user.phonenumber || ''
            formData.email = res.user.email || ''
            formData.sex = res.user.sex || '2'
        }
    } catch (e) {
        console.error('获取个人信息失败', e)
    } finally {
        loading.value = false
    }
})

const getSexLabel = computed(() => {
    const opt = sexOptions.find(o => o.value === String(formData.sex))
    return opt ? opt.label : '请选择'
})

const onSexChange = (e) => {
    formData.sex = sexOptions[e.detail.value].value
}

const submit = async () => {
	try {
		await formRef.value.validate()
		uni.showLoading({ title: '保存中...' })

		await updateUserProfile(formData)
		
		uni.hideLoading()
		uni.showToast({ title: '个人信息修改成功', icon: 'success' })
		setTimeout(() => {
			uni.navigateBack()
		}, 1000)
	} catch (err) {
		uni.hideLoading()
		console.log('保存失败', err)
	}
}
</script>

<style lang="scss" scoped>
.profile-page {
	min-height: 100vh;
	background-color: #f7f8fa;
}

.form-container {
    padding-top: 20rpx;
}

.form-group {
	background: #fff;
	margin: 0 24rpx;
	border-radius: 20rpx;
	padding: 0 32rpx;
}

.line {
	height: 1rpx;
	background: #f5f5f5;
	margin: 0;
}

.btn-group {
	margin: 60rpx 32rpx 32rpx;
}

.submit-btn {
	height: 88rpx;
	line-height: 88rpx;
	background: linear-gradient(90deg, #ffd53f, #ff9500);
	color: #333;
	border: none;
	border-radius: 44rpx;
	font-size: 30rpx;
	font-weight: bold;
}

.picker-value {
    flex: 1;
    font-size: 26rpx;
    color: #666;
    text-align: right;
    min-height: 40rpx;
    line-height: 72rpx;
    padding-right: 20rpx;
}
.picker-value.placeholder {
    color: #999;
}

:deep(.uni-forms-item) {
	border: none !important;
	padding: 10rpx 0;
}
:deep(.uni-forms-item__label) {
    font-size: 28rpx;
    color: #333;
}
:deep(.uni-easyinput__content-input) {
    text-align: right;
    font-size: 26rpx;
}
</style>