Newer
Older
urbanLifeline_YanAn / src / views / system / user / profile / userInfo.vue
@zhangqy zhangqy on 3 Oct 1 KB first commit
  1. <template>
  2. <el-form ref="userRef" :model="user" :rules="rules" label-width="80px">
  3. <el-form-item label="用户昵称" prop="nickName">
  4. <el-input v-model="user.nickName" maxlength="30" />
  5. </el-form-item>
  6. <el-form-item label="手机号码" prop="phonenumber">
  7. <el-input v-model="user.phonenumber" maxlength="11" />
  8. </el-form-item>
  9. <el-form-item label="邮箱" prop="email">
  10. <el-input v-model="user.email" maxlength="50" />
  11. </el-form-item>
  12. <el-form-item label="性别">
  13. <el-radio-group v-model="user.sex">
  14. <el-radio label="0"></el-radio>
  15. <el-radio label="1"></el-radio>
  16. </el-radio-group>
  17. </el-form-item>
  18. <el-form-item>
  19. <el-button type="primary" @click="submit">保存</el-button>
  20. <el-button type="danger" @click="close">关闭</el-button>
  21. </el-form-item>
  22. </el-form>
  23. </template>
  24.  
  25. <script setup>
  26. import { updateUserProfile } from '@/api/system/user';
  27. import bus from '@/bus';
  28.  
  29. const props = defineProps({
  30. user: {
  31. type: Object,
  32. },
  33. });
  34.  
  35. const { proxy } = getCurrentInstance();
  36.  
  37. const rules = ref({
  38. nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  39. email: [
  40. { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
  41. { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  42. ],
  43. phonenumber: [
  44. { required: true, message: '手机号码不能为空', trigger: 'blur' },
  45. { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  46. ],
  47. });
  48.  
  49. /** 提交按钮 */
  50. function submit() {
  51. proxy.$refs.userRef.validate(valid => {
  52. if (valid) {
  53. updateUserProfile(props.user).then(response => {
  54. proxy.$modal.msgSuccess('修改成功');
  55. });
  56. }
  57. });
  58. }
  59. /** 关闭按钮 */
  60. function close() {
  61. bus.emit('closeUserCenter');
  62. }
  63. </script>