修改密码请求提交到后端

src/api/user.js

@@ -38,3 +38,8 @@ export const userModifySelfService = async (obj) => {
   await refreshToken()
   return request.post('/user/modifySelf', getReqBody(obj))
 }
+
+export const userModifyPassword = async (obj) => {
+  await refreshToken()
+  return request.post('/user/modifyPwd', getReqBody(obj))
+}

src/components/user/EditPassword.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { ref } from 'vue'
+import { userModifyPassword } from '@/api/user'
 
 defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
@@ -10,6 +11,7 @@ const formModel = ref({
   new_password: '',
   new_password_2: ''
 })
+const isLoading = ref(false)
 
 // 表单的校验规则
 const rules = {
@@ -20,6 +22,16 @@ const rules = {
       pattern: /^\S{6,15}$/,
       message: '密码必须是6-15位的非空字符',
       trigger: 'blur'
+    },
+    {
+      validator: (rule, value, callback) => {
+        if (value === formModel.value.old_password) {
+          callback(new Error('新密码不能与旧密码一致'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'blur'
     }
   ],
   new_password_2: [
@@ -44,7 +56,18 @@ const rules = {
 
 const onComfirm = async () => {
   await form.value.validate()
-  emit('update:modelValue', false)
+  isLoading.value = true
+  const res = userModifyPassword({
+    oldPassword: formModel.value.old_password,
+    password: formModel.value.new_password
+  })
+  res.then(() => {
+    ElMessage.success('密码修改成功')
+    emit('update:modelValue', false)
+  })
+  res.finally(() => {
+    isLoading.value = false
+  })
 }
 
 const onCancle = () => {
@@ -89,7 +112,7 @@ const onReset = () => {
     <template #footer>
       <div class="dialog-footer">
         <el-button @click="onCancle">取消</el-button>
-        <el-button type="primary" @click="onComfirm"> 确认 </el-button>
+        <el-button type="primary" @click="onComfirm" :loading="isLoading"> 确认 </el-button>
       </div>
     </template>
   </el-dialog>