Newer
Older
DH_Apicture / src / views / system / user / profile / userInfo.vue
@zhangqy zhangqy on 29 Nov 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/user';
  27.  
  28. const props = defineProps({
  29. user: {
  30. type: Object,
  31. },
  32. });
  33.  
  34. const { proxy } = getCurrentInstance();
  35.  
  36. const rules = ref({
  37. nickName: [{ required: true, message: '用户昵称不能为空', trigger: 'blur' }],
  38. email: [
  39. { required: true, message: '邮箱地址不能为空', trigger: 'blur' },
  40. { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] },
  41. ],
  42. phonenumber: [
  43. { required: true, message: '手机号码不能为空', trigger: 'blur' },
  44. { pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/, message: '请输入正确的手机号码', trigger: 'blur' },
  45. ],
  46. });
  47.  
  48. /** 提交按钮 */
  49. function submit() {
  50. proxy.$refs.userRef.validate(valid => {
  51. if (valid) {
  52. updateUserProfile(props.user).then(response => {
  53. proxy.$modal.msgSuccess('修改成功');
  54. });
  55. }
  56. });
  57. }
  58. /** 关闭按钮 */
  59. function close() {
  60. proxy.$tab.closePage();
  61. }
  62. </script>