ohplay_business/src/views/system/user/profile/index.vue

<template>
   <div class="app-container">
      <div class="header">
         <userAvatar />
         <div style="margin-top: 20px;">{{ state.user.nickName }}<el-button link type="primary" icon="Edit" @click="getDialog" /></div>
      </div>
      <el-descriptions title="账号设置" :column="1">
         <el-descriptions-item label="手机号码：">{{ state.user.phonenumber }}</el-descriptions-item>
         <el-descriptions-item label="账号密码：">
            <el-button link type="primary" @click="getDialog_Reset">更改</el-button>
         </el-descriptions-item>
         <el-descriptions-item label="用户邮箱：">{{ state.user.email }}</el-descriptions-item>
         <el-descriptions-item label="所属企业：">
            {{ state.user.tenantName }}
         </el-descriptions-item>
         <el-descriptions-item label="所属角色：">{{ state.roleGroup }}</el-descriptions-item>
         <el-descriptions-item label="创建日期：">{{ state.user.createTime }}</el-descriptions-item>
      </el-descriptions>

      <!-- 昵称修改弹窗 -->
      <el-dialog v-model="dialogVisible" title="编辑" width="500" :before-close="close">
         <el-form ref="infoRef" :model="data.infoForm" :rules="rules">
            <el-form-item label="用户昵称：" prop="nickName">
               <el-input v-model="data.infoForm.nickName" maxlength="30" />
            </el-form-item>
         </el-form>
         <template #footer>
            <el-button type="primary" @click="submit">确定</el-button>
            <el-button @click="close">取消</el-button>
         </template>
      </el-dialog>

      <!-- 修改密码弹窗 -->
      <el-dialog v-model="dialogVisible_reset" title="编辑" width="500" :before-close="closeReset">
         <el-form ref="pwdRef" :model="data.pwdForm" :rules="pwdRules" label-width="100px">
            <el-form-item label="旧密码：" prop="oldPassword">
               <el-input v-model="data.pwdForm.oldPassword" placeholder="请输入旧密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="新密码：" prop="newPassword">
               <el-input v-model="data.pwdForm.newPassword" placeholder="请输入新密码" type="password" show-password />
            </el-form-item>
            <el-form-item label="确认密码：" prop="confirmPassword">
               <el-input v-model="data.pwdForm.confirmPassword" placeholder="请确认新密码" type="password" show-password />
            </el-form-item>
         </el-form>
         <template #footer>
            <el-button type="primary" @click="submit">确定</el-button>
            <el-button @click="closeReset">取消</el-button>
         </template>
      </el-dialog>
   </div>
</template>

<script setup name="Profile">
import userAvatar from "./userAvatar";
import { getUserProfile, updateUserProfile, updateUserPwd } from "@/api/system/user";
import { reactive } from "vue";

const activeTab = ref("userinfo");
const state = reactive({
   user: {},
   roleGroup: {},
   postGroup: {}
});

function getUser() {
   getUserProfile().then(response => {
      state.user = response.data
      state.roleGroup = response.roleGroup
      state.postGroup = response.postGroup
   })
}
getUser()

const { proxy } = getCurrentInstance()

// 弹窗表单
const data = reactive({
   infoForm: {
      nickName: undefined
   },
   pwdForm: {
      oldPassword: undefined,
      newPassword: undefined,
      confirmPassword: undefined
   }
})
// 弹窗状态
const dialogVisible = ref(false)
const dialogVisible_reset = ref(false)
// 校验表单
const rules = reactive({
   nickName: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }]
})
const equalToPassword = (rule, value, callback) => {
   if (data.pwdForm.newPassword !== value) {
      callback(new Error("两次输入的密码不一致"));
   } else {
      callback();
   }
};
const pwdRules = reactive({
   oldPassword: [{ required: true, message: "旧密码不能为空", trigger: "blur" }],
   newPassword: [{ required: true, message: "新密码不能为空", trigger: "blur" }, { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" }],
   confirmPassword: [{ required: true, message: "确认密码不能为空", trigger: "blur" }, { required: true, validator: equalToPassword, trigger: "blur" }]
});


// 打开弹窗
function getDialog() {
   dialogVisible.value = true
   data.infoForm = { nickName: state.user.nickName, phonenumber: state.user.phonenumber, email: state.user.email }
}
function getDialog_Reset() {
   dialogVisible_reset.value = true
}
// 提交按钮
function submit() {
   if (dialogVisible.value) {
      proxy.$refs.infoRef.validate(valid => {
         if (valid) {
            updateUserProfile(data.infoForm).then(response => {
               proxy.$modal.msgSuccess("修改成功");
               state.user.phonenumber = data.infoForm.phonenumber
               state.user.email = data.infoForm.email
               close()
               getUser()
            })
         }
      })
   } else {
      proxy.$refs.pwdRef.validate(valid => {
         if (valid) {
            updateUserPwd(data.pwdForm.oldPassword, data.pwdForm.newPassword).then(response => {
               proxy.$modal.msgSuccess("修改成功");
               closeReset()
            });
         }
      });
   }
}
// 关闭按钮
function close() {
   dialogVisible.value = false
   proxy.$refs.infoRef.resetFields()
}
function closeReset() {
   dialogVisible_reset.value = false
   proxy.$refs.pwdRef.resetFields()
}
</script>

<style lang="scss" scoped>
.header {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   padding: 20px;
}

.el-descriptions {
   border: 1px solid #e4e7ed;
   box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
   border-radius: 4px;
   padding: 20px;
}
</style>