leromro-mini/pages_mine/pages/setupUser/personalInfo.vue

<template>
  <view>
    <up-form labelPosition="left" :model="modelForm" :rules="rulesForm" ref="formRef">
			<up-form-item label="姓名" prop="nickName" borderBottom labelWidth="70">
				<up-input v-model="modelForm.nickName" border="none" placeholder="请输入姓名" :disabled="loading"></up-input>
			</up-form-item>
			<up-form-item label="性别" prop="sex" borderBottom @click="() => !loading && (sexFlag = true)" labelWidth="70">
				<up-input v-model="displaySex" disabled disabledColor="#ffffff" placeholder="请选择性别"
					border="none"></up-input>
				<template #right>
					<up-icon name="arrow-right"></up-icon>
				</template>
			</up-form-item>
			
			<up-form-item label="年龄" prop="age" borderBottom labelWidth="70">
				<up-input v-model="modelForm.age" border="none" placeholder="请输入年龄" :disabled="loading"></up-input>
			</up-form-item>
			<up-form-item label="手机号" prop="phonenumber" borderBottom labelWidth="70">
				<up-input v-model="modelForm.phonenumber" border="none" placeholder="请输入手机号" :disabled="loading"></up-input>
			</up-form-item>
		</up-form>

		<up-action-sheet :show="sexFlag" :actions="sexOptions" @select="sexSelect"
			@close="sexFlag = false"></up-action-sheet>

			<view class="Wrapper-Btn">
				<up-button @click="handleQux" type="error" :plain="true" :hairline="true" text="取消"
					:customStyle="hadlClickEdit" :disabled="loading"></up-button>
				<up-button type="error" @click="handleSubmit" text="保存" :customStyle="hadlClickEdit" :loading="loading" :disabled="loading" />
			</view>
		</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { updateUserInfo, userUserInfoEdit } from '@/api/personaInforMation.js'
import { useStore } from 'vuex'

const store = useStore()
const formRef = ref(null)
const sexFlag = ref(false)
const sexOptions = ref([
  { name: '男', value: 0 },
  { name: '女', value: 1 }
])
const modelForm = ref({
  nickName: '',
  sex: '',
  age: '',
  phonenumber: ''
})
const loading = ref(false)

const rulesForm = ref({
  nickName: {
    type: 'string',
    required: true,
    message: '请输入姓名',
    trigger: ['blur', 'change']
  },
  sex: {
    type: 'number',
    required: true,
    message: '请选择性别',
    trigger: ['change']
  },
  age: {
    type: 'string',
    required: true,
    message: '请输入年龄',
    trigger: ['blur', 'change']
  },
  phonenumber: {
    type: 'string',
    required: true,
    message: '请输入手机号',
    trigger: ['blur', 'change']
  }
})

onMounted(async () => {
  loading.value = true
  try {
    const res = await userUserInfoEdit({})
    if (res && res.code === 200 && res.data) {
      modelForm.value = {
        nickName: res.data.nickName || '',
        sex: res.data.sex !== undefined ? Number(res.data.sex) : '',
        age: res.data.age || '',
        phonenumber: res.data.phonenumber || ''
      }
    } else {
      modelForm.value = {
        nickName: '',
        sex: '',
        age: '',
        phonenumber: ''
      }
    }
  } catch (e) {
    console.error('获取用户信息失败:', e)
    uni.showToast({
      title: '获取用户信息失败',
      icon: 'none'
    })
  } finally {
    loading.value = false
  }
})

const handleQux = () => {
  uni.navigateBack({
    delta: 1
  })
}

const handleSubmit = async () => {
  try {
    if (!formRef.value) {
      console.error('表单引用不存在')
      return
    }
    const valid = await formRef.value.validate()
    if (!valid) return

    loading.value = true
    const params = {
      nickName: modelForm.value.nickName,
      sex: modelForm.value.sex,
      age: modelForm.value.age,
      phonenumber: modelForm.value.phonenumber
    }
    const res = await updateUserInfo(params)
    if (res && res.code === 200) {
      store.commit('SET_NICKNAME', params.nickName)
      uni.showToast({ 
        title: '保存成功', 
        icon: 'success' 
      })
      uni.navigateBack({ delta: 1 })
    } else {
      uni.showToast({ 
        title: res.msg || '保存失败', 
        icon: 'none' 
      })
    }
  } catch (e) {
    console.error('提交失败:', e)
    uni.showToast({ 
      title: '请求异常', 
      icon: 'none' 
    })
  } finally {
    loading.value = false
  }
}
const displaySex = computed({
  get() {
    const option = sexOptions.value.find(item => item.value === modelForm.value.sex)
    return option ? option.name : ''
  },
  set(newValue) {
    const option = sexOptions.value.find(item => item.name === newValue)
    if (option) {
      modelForm.value.sex = option.value
    }
  }
})
function sexSelect(e) {
  modelForm.value.sex = Number(e.value)
  sexFlag.value = false
}
const hadlClickEdit = {
		width: '240rpx',
		marginTop: '30rpx'
	}
</script>

<style scoped>
	.Wrapper-Btn {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>