实现用户个人信息更新

src/api/user.ts

@@ -37,3 +37,15 @@ export const userInfo = () => {
             }
         })
 }
+
+
+export const userInfoUpdate = payload => {
+    return axios.post(`${USER_MODULE}`, payload, {headers: {'Content-Type': 'application/json'}})
+        .then(res => {
+            if (res.code == '400') {
+                throw new Error('个人信息更新失败!')
+            } else {
+                return res
+            }
+        })
+}

src/components/Dashboard.vue

@@ -1,11 +1,19 @@
 <script setup lang="ts">
-import {onBeforeMount, ref} from 'vue';
-  import {userInfo} from '../api/user.ts'
+import {onBeforeMount, ref, computed} from 'vue';
+  import {userInfo, userInfoUpdate} from '../api/user.ts'
+import {router} from '../router'
 
   const name = ref('')
   const tel = ref('')
   const address = ref('')
 
+  const password = ref('')
+  const confirmPassword = ref('')
+
+  const hasPasswordInput = computed(() => password.value != '');
+  const hasConfirmPasswordInput = computed(() => confirmPassword.value != '');
+  const isPasswordIdentical = computed(() => password.value == confirmPassword.value);
+
   const isCustomer = ref('true')
   const isStaff = ref('false')
 
@@ -28,25 +36,101 @@ import {onBeforeMount, ref} from 'vue';
 
 
   function updateInfo() {
-    ElMessage({
-      customClass: 'customMessage',
-      type: 'success',
-      message: '更新成功！',
-    })
-    //todo: 更新个人信息
+
+    const payload = {
+      name: name.value,
+      password: null,
+      address: null
+    }
+
+    userInfoUpdate(payload)
+        .then(() => {
+          ElMessage({
+            customClass: 'customMessage',
+            type: 'success',
+            message: '更新成功！',
+          })
+        })
+        .catch(e => {
+          ElMessage({
+            customClass: 'customMessage',
+            type: 'error',
+            message: '更新失败！',
+          })
+        })
+        .finally(() =>{
+          userInfo().then(res => {
+            name.value = res.result.name
+          })
+        })
   }
 
   function updatePassword() {
-    ElMessage({
-      customClass: 'customMessage',
-      type: 'error',
-      message: '更新失败！',
-    })
-    //todo: 更新密码
+
+    const payload = {
+      name: null,
+      password: password.value,
+      address: null
+    }
+
+    userInfoUpdate(payload)
+        .then(() => {
+
+          ElMessageBox.alert(
+              `请重新登录`,
+              '修改成功',
+              {
+                customClass: "customDialog",
+                confirmButtonText: '跳转到登录',
+                type: "success",
+                showClose: false,
+                roundButton: true,
+                center: true
+
+              }).then(() => router.push({ path: "/login" }))
+
+        })
+        .catch(e => {
+          ElMessage({
+            customClass: 'customMessage',
+            type: 'error',
+            message: '更新失败！',
+          })
+        })
+        .finally(() => {
+            password.value = ''
+            confirmPassword.value = ''
+        })
   }
 
   function updateAddress() {
-    //todo: 更新地址
+
+    const payload = {
+      name: null,
+      password: null,
+      address: address.value
+    }
+
+    userInfoUpdate(payload)
+        .then(() => {
+          ElMessage({
+            customClass: 'customMessage',
+            type: 'success',
+            message: '更新成功！',
+          })
+        })
+        .catch(e => {
+          ElMessage({
+            customClass: 'customMessage',
+            type: 'error',
+            message: '更新失败！',
+          })
+        })
+        .finally(() =>{
+          userInfo().then(res => {
+            address.value = res.result.address
+          })
+        })
   }
 
 </script>
@@ -181,19 +265,25 @@ import {onBeforeMount, ref} from 'vue';
 
         <div class="flex flex-row justify-between px-3 py-2 rounded-t-lg bg-gray-100 border-b-2 border-gray-200">
           <span class="ml-1 text-2xl font-semibold text-center">密码</span>
-          <button type="submit" @click="updatePassword"
-                  class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl  text-xs px-4 py-2 text-center">更新</button>
+          <button type="submit" @click="updatePassword" :disabled="!hasConfirmPasswordInput || !isPasswordIdentical"
+                  class="inline text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl text-xs px-4 py-2 text-center disabled:bg-primary-100">更新</button>
         </div>
 
         <form class="m-3">
           <div class="grid grid-cols-2 gap-10 mb-6 mx-4">
             <div>
-              <label for="password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">密码</label>
-              <input type="password" id="password" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
+              <label for="password" class="block mb-2 text-sm font-medium text-gray-900">密码</label>
+              <input type="password" id="password" v-model="password"
+                     class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="•••••••••" required>
             </div>
             <div>
-              <label for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">确认密码</label>
-              <input type="password" id="confirm_password" class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="•••••••••" required>
+              <label v-if="!hasConfirmPasswordInput" for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900">确认密码</label>
+              <label v-else-if="!isPasswordIdentical" for="confirm_password" class="block mb-2 text-sm font-medium text-red-600 ">密码不一致</label>
+              <label v-else for="confirm_password" class="block mb-2 text-sm font-medium text-gray-900">确认密码</label>
+
+              <input type="password" id="confirm_password" v-model="confirmPassword"
+                     :class="{'focus:outline-red-600': hasConfirmPasswordInput && !isPasswordIdentical}"
+                     class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5" placeholder="•••••••••" required>
             </div>
           </div>
         </form>
@@ -206,7 +296,7 @@ import {onBeforeMount, ref} from 'vue';
           <span class="ml-1 text-2xl font-semibold text-center">地址信息</span>
           <button @click="updateAddress"
                   class="block text-white bg-primary-600 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-3xl text-xs px-4 py-2 text-center" type="button">
-            添加地址
+            更新地址
           </button>
         </div>
 
@@ -235,6 +325,10 @@ import {onBeforeMount, ref} from 'vue';
   @apply rounded-2xl text-3xl font-bold
 }
 
+.customDialog {
+  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
+}
+
 </style>