feat:实现个人页面修改密码功能

src/views/LoginPage/component/Login.vue

@@ -152,7 +152,7 @@
         store.setUser(data);
         store.setToken(data?.token)
         localStorage.setItem('Authorization', data?.token);
-        localStorage.setItem('User', data);
+        localStorage.setItem('User', JSON.stringify(data));
         router.push(`/home`)
       } else if(_res.data.code === 400){
         ElMessage({message: '用户名或密码错误', type: 'error'})
@@ -173,7 +173,7 @@
         store.setUser(data);
         store.setToken(data?.token)
         localStorage.setItem('Authorization', data?.token);
-        localStorage.setItem('User', data);
+        localStorage.setItem('User', JSON.stringify(data));
         router.push(`/home`)
       } else if(_res.data.code === 400){
         ElMessage({message: '邮箱或验证码错误' + _res.data.msg, type: 'error'})

src/views/Profile.vue

@@ -1,71 +1,59 @@
 <template>
   <div class="personal-center">
     <el-card class="box-card">
-<!--      <div slot="header" class="clearfix">-->
-<!--        <span style="font-size: 25px; font-weight: bold">个人中心</span>-->
-<!--      </div>-->
-<!--      <el-row :gutter="20">-->
-<!--        <el-col :span="12" class="main-info">-->
-<!--          <el-avatar :size="100" :src="user.userAvatar" />-->
-<!--          <div>{{ user.name }}</div>-->
-<!--          <div>{{ user.officialNumber }}</div>-->
-<!--          <div>{{ user.officialEmail }}</div>-->
-<!--        </el-col>-->
-<!--        <el-col :span="12">-->
-<!--          <el-descriptions title="账户信息" :column="1">-->
-<!--            <template #extra>-->
-<!--              <el-button type="primary" @click="visible=true">修改信息</el-button>-->
-<!--            </template>-->
-<!--            <el-descriptions-item label="英文名">{{ user.englishName }}</el-descriptions-item>-->
-<!--            <el-descriptions-item label="性别">{{ user.gender == 'MAN' ? '男': '女' }}</el-descriptions-item>-->
-<!--            <el-descriptions-item label="注册时间">{{ user.createTime }}</el-descriptions-item>-->
-<!--            <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item>-->
-<!--            <el-descriptions-item label="生日">{{ user.birthday }}</el-descriptions-item>-->
-<!--          </el-descriptions>-->
-<!--        </el-col>-->
-<!--      </el-row>-->
-      <el-descriptions
-          title="个人中心"
-          border
-          :column="3">
+
+      <el-descriptions title="个人中心" border :column="3">
           <template #extra>
-            <el-button type="primary" @click="visible=true">修改信息</el-button>
+            <el-button type="primary" @click="passwordChangeVisible=true">修改密码</el-button>
+            <el-button type="primary" @click="infoChangeVisible=true">修改信息</el-button>
           </template>
-
-        <el-descriptions-item
-            :rowspan="3"
-            :width="120"
-            label="头像"
-            >
-          <el-avatar
-            align="center"
-            style="width: 100px; height: 100px"
-            :src="user.userAvatar"/>
+        <el-descriptions-item :rowspan="3" :width="120" label="头像">
+          <el-avatar align="center" style="width: 100px; height: 100px" :src="user.userAvatar"/>
         </el-descriptions-item>
-
         <el-descriptions-item label="姓名">{{ user.name }}</el-descriptions-item>
-        <!-- <el-descriptions-item label="EnglishName">{{ user.englishName }}</el-descriptions-item>
-        <el-descriptions-item label="Gender">{{ user.gender == 'MAN' ? 'man': 'woman' }}</el-descriptions-item> -->
-        
         <el-descriptions-item label="角色">
-          <template v-if="user.role == 'STUDENT'">
-            <el-tag size="small">学生</el-tag>
-          </template>
-          <template v-if="user.role == 'TEACHER'">
-            <el-tag size="small" type="error">教师</el-tag>
-          </template>
+          <el-tag size="small">{{ user.role == 'STUDENT' ? '学生' : '教师'}}</el-tag>
         </el-descriptions-item>
-        
-        <!-- <el-descriptions-item label="Birthday">{{ user.birthday }}</el-descriptions-item> -->
         <el-descriptions-item label="账号">{{ user.officialNumber }}</el-descriptions-item>
-        <!-- <el-descriptions-item label="手机号">{{ user.phone }}</el-descriptions-item> -->
-        <!-- <el-descriptions-item label="contentEmail">{{ user.contentEmail }}</el-descriptions-item> -->
         <el-descriptions-item label="邮箱">{{ user.officialEmail }}</el-descriptions-item>
       </el-descriptions>
     </el-card>
   </div>
 
-  <el-dialog v-model="visible" title="编辑">
+  <el-dialog v-model="passwordChangeVisible" title="修改密码">
+    <el-form :rules="rules" :model="passwordChangeDTO" label-width="auto" ref="formRef">
+      <!--邮箱-->
+      <!-- <el-form-item prop="officialEmail">
+        <el-input v-model="passwordChangeDTO.officialEmail" placeholder="请输入邮箱"></el-input>
+      </el-form-item> -->
+      <!--密码-->
+      <el-form-item prop="password1">
+        <el-input v-model="passwordChangeDTO.password1" placeholder="请输入新密码" show-password></el-input>
+      </el-form-item>
+      <!--再次输入密码-->
+      <el-form-item prop="password2">
+        <el-input v-model="passwordChangeDTO.password2" placeholder="请再次输入密码" show-password></el-input>
+      </el-form-item>
+      <!--输入验证码-->
+      <el-form-item prop="verifyCode">
+        <el-input v-model="passwordChangeDTO.verifyCode" placeholder="向邮箱发生验证码，输入验证码">
+          <template #suffix>
+            <el-button type="text" @click="sendPasswordChangeVerifyCode" :disabled="isStart">
+              {{ isStart ? countdown : '获取验证码' }}
+            </el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="passwordChangeVisible = false">取消</el-button>
+        <el-button type="primary" @click="changePassword(formRef)">确定</el-button>
+      </div>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="infoChangeVisible" title="编辑">
     <el-form :model="userUpdateDTO" label-width="auto" ref="formRef">
       <el-form-item label="头像">
         <el-upload
@@ -94,37 +82,12 @@
         </el-upload>
       </el-form-item>
       <el-form-item label="姓名" >
-        <el-input v-model="user.name" placeholder="请输入名称" disabled></el-input>
-      </el-form-item>
-      <el-form-item label="学号" >
-        <el-input v-model="user.officialNumber" placeholder="请输入名称" disabled></el-input>
+        <el-input v-model="user.name" placeholder="请输入名称"></el-input>
       </el-form-item>
-      <el-form-item label="邮箱" >
-        <el-input v-model="user.officialEmail" placeholder="请输入名称" disabled></el-input>
-      </el-form-item>
-      <!-- <el-form-item label="联系邮箱" >
-        <el-input v-model="userUpdateDTO.contentEmail" placeholder="请输入名称"></el-input>
-      </el-form-item>
-      <el-form-item label="英文名" >
-        <el-input v-model="userUpdateDTO.englishName" placeholder="请输入名称"></el-input>
-      </el-form-item>
-      <el-form-item label="性别" >
-        <el-radio-group v-model="userUpdateDTO.gender" placeholder="请输入名称">
-          <el-radio value="MAN">男</el-radio>
-          <el-radio value="WOMAN">女</el-radio>
-        </el-radio-group>
-      </el-form-item> -->
-      <!-- <el-form-item label="手机号" >
-        <el-input v-model="userUpdateDTO.phone" placeholder="请输入手机号" disabled></el-input>
-      </el-form-item> -->
-      <!-- <el-form-item label="生日" >
-        <el-date-picker v-model="userUpdateDTO.birthday" type="date" placeholder="生日" style="width: 180px"/>
-      </el-form-item> -->
     </el-form>
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="visible = false">取消</el-button>
-<!--        <el-button type="primary" @click="submitForm(formRef)">确定</el-button>-->
+        <el-button @click="infoChangeVisible = false">取消</el-button>
         <el-button type="primary" @click="handleSubmit">确定</el-button>
       </div>
     </template>
@@ -143,7 +106,9 @@
     ElDescriptionsItem,
     ElTable,
     ElTableColumn,
-    ElMessage, type UploadUserFile, type UploadProps, type UploadFile, type UploadFiles, type FormInstance
+    ElMessage, 
+    type FormRules,
+    type UploadUserFile, type UploadProps, type UploadFile, type UploadFiles, type FormInstance
   } from 'element-plus';
     import useApis from "@/apis";
     import {useStore} from "@/store";
@@ -151,13 +116,56 @@
   import {convertIUserToUserUpdateDTO} from "@/utils/convertUtil";
   import type {UserUpdateDTO} from "@/types/dto";
   import {useFormatDate} from "@/hooks/useFormatDate";
+  import { useCountdown } from '@/hooks/useCountdown';
 
   const apis = useApis()
   const store = useStore()
+  const { start, isStart, countdown } = useCountdown();
+
+  const rules = reactive<FormRules<passwordChangeDTO>>({
+    officialEmail: [
+      {
+        required: true,
+        message: "邮箱不能为空",
+        trigger: 'blur'
+      }
+    ],
+    password1: [
+      {
+        required: true,
+        message: "请输入密码",
+        trigger: 'blur'
+      }
+    ],
+    password2: [
+      {
+        required: true,
+        message: "请再次输入密码",
+        trigger: 'blur'
+      }
+    ],
+    verifyCode: [
+      {
+        required: true,
+        message: "验证码不能为空",
+        trigger: 'blur'
+      }
+    ]
+  })
+
+  const formRef = ref<FormInstance>()
+  type passwordChangeDTO = {
+    officialEmail: "",
+    password1: "",
+    password2: "",
+    verifyCode: ""
+  }
+  let passwordChangeDTO = reactive<passwordChangeDTO>({} as passwordChangeDTO)
 
   const user = reactive<IUser>({} as IUser)
   let userUpdateDTO = reactive<UserUpdateDTO>({} as UserUpdateDTO)
-  let visible = ref(false)
+  let infoChangeVisible = ref(false)
+  let passwordChangeVisible = ref(false)
   const uploadRef = ref()
   // 用于编辑头像展示预览图片
   const fileList = ref<UploadUserFile[]>([])
@@ -166,7 +174,6 @@
     apis.findUserById(store.user.id)
         .then((res:any) => {
           let data = res.data.data.records[0]
-          data = processData(data)
           Object.assign(user, data)
           Object.assign(userUpdateDTO, convertIUserToUserUpdateDTO(user))
           if(user.userAvatar == null) {
@@ -174,39 +181,25 @@
           }
         })
         .catch((err:any) => {
-          ElMessage({
-            message: "获取用户信息失败:"+err,
-            type: "error"
-          })
+          ElMessage({message: "获取用户信息失败:"+err, type: "error"})
         })
   }
 
-  // 预处理个人信息的注册时间展示
-  const processData = (data:IUser) => {
-    data.createTime = useFormatDate().formatDate(data.createTime)
-    data.birthday = useFormatDate().formatBirthday(data.birthday)
-    return data
-  }
 
   const handleSubmit = () => {
     console.log(userUpdateDTO)
+    return
     apis.updateUser(user.id, userUpdateDTO)
         .then((res:any) => {
-          ElMessage({
-            message: "个人信息修改成功",
-            type: "success"
-          })
+          ElMessage({message: "个人信息修改成功", type: "success"})
           fetchUserData()
         })
         .catch((err:any) => {
-          ElMessage({
-            message: "个人信息修改失败",
-            type: "error"
-          })
+          ElMessage({message: "个人信息修改失败", type: "error"})
           console.log(err)
         })
         .finally(() => {
-          visible.value = false
+          infoChangeVisible.value = false
         })
   }
 
@@ -256,6 +249,59 @@
   onMounted(() => {
     fetchUserData()
   })
+
+  const sendPasswordChangeVerifyCode = () => {
+    passwordChangeDTO.officialEmail = JSON.parse(localStorage.getItem("User")).officialEmail
+    start();
+    console.log(passwordChangeDTO)
+    apis.sendPasswordChangeVerifyCode(passwordChangeDTO.officialEmail)
+    .then((res: any) => {
+      if (res.data.code === 200) {
+        ElMessage({message: '验证码发送成功，请前往您的邮箱查看',type: 'success'})
+      } else {
+        ElMessage({message: '验证码发送失败' + res.data.msg, type: 'error'})
+      }
+    })
+    .catch((err: any) => {
+      ElMessage({message: '验证码发送失败',type: 'error'})
+      console.log(err)
+    })
+    .finally(() => {});
+  }
+
+  const changePassword = async (formEl: FormInstance | undefined) => {
+    if (!formEl) return
+    await formEl.validate((valid, fields) => {
+      if (valid) {
+        if(passwordChangeDTO.password1 != passwordChangeDTO.password2) {
+          ElMessage({message: '两次输入密码不一致', type: 'error'})
+          return
+        } 
+        let data = {
+          officialEmail: passwordChangeDTO.officialEmail,
+          password: passwordChangeDTO.password1,
+          verifyCode: passwordChangeDTO.verifyCode
+        }
+        apis.updatePassword(data).then((res: any) => {
+          if (res.data.code === 200) {
+            ElMessage({message: '密码修改成功',type: 'success'})
+            passwordChangeVisible.value = false
+            passwordChangeDTO.password1 = ''
+            passwordChangeDTO.password2 = ''
+            passwordChangeDTO.verifyCode = ''
+          } else {
+            ElMessage({message: '密码修改失败' + res.data.msg, type: 'error'})
+          }
+        }).catch((err: any) => {
+          ElMessage({message: '网络错误',type: 'error'})
+          console.log(err)
+        }).finally(() => {});
+      } else {
+        ElMessage({message: '请将信息填写完整',type: 'warning'})
+      }
+    })
+  }
+    
 </script>
 
 <style scoped>