u

code/container-ocr/ocr-vue/src/views/user-center/update-password.vue

@@ -1,9 +1,8 @@
-<script setup>
+<script lang="js" setup>
+import { updatePasswordApi } from "@/request/api";
 import { ElMessage } from "element-plus";
 
-import { ref } from "vue";
-
-const loading = ref(false);
+const confirmLoading = ref(false);
 
 const form = ref({
   oldPassword: "",
@@ -11,115 +10,75 @@ const form = ref({
   confirmPassword: "",
 });
 
-function resetFrom() {
-  form.value.oldPassword = "";
-  form.value.newPassword = "";
-  form.value.confirmPassword = "";
-}
-
-async function handleConfirm() {
-  if (form.value.newPassword !== form.value.confirmPassword) {
+function handleConfirm() {
+  if (form.value.newPassword === "") {
+    ElMessage.warning("新密码不能为空");
+    return;
+  }
+  if (form.value.confirmPassword !== form.value.newPassword) {
     ElMessage.warning("新密码和确认密码不一致");
     return;
   }
 
-  loading.value = true;
+  confirmLoading.value = true;
 
-  const requestData = {
-    oldPassword: form.value.oldPassword,
+  updatePasswordApi({
     newPassword: form.value.newPassword,
-  };
-
-  try {
-    const saveRes = await axios.post("/updatePassword", requestData, {
-      headers: { "Content-Type": "application/json" },
+    oldPassword: form.value.oldPassword,
+  })
+    .then((res) => {
+      if (res.success) {
+        // 修改成功
+        ElMessage.success("修改成功");
+        resetForm();
+      }
+    })
+    .finally(() => {
+      confirmLoading.value = false;
     });
+}
 
-    if (saveRes.data.success) {
-      ElMessage.success("密码更新成功");
-      resetFrom();
-    } else {
-      ElMessage.error(`密码更新失败：${saveRes.data.message}`);
-    }
-  } catch (error) {
-    ElMessage.error(`密码更新失败：${error.message || "未知错误"}`);
-  } finally {
-    loading.value = false;
-  }
+function resetForm() {
+  form.value.newPassword = "";
+  form.value.oldPassword = "";
+  form.value.confirmPassword = "";
 }
 </script>
 
 <template>
-  <div class="g3-container">
-    <div class="g3-grid">
-      <div class="g3-cell">
-        <div class="g3-cell-label">旧密码：</div>
-        <el-input v-model="form.oldPassword" type="password" />
-      </div>
-      <div class="g3-cell">
-        <div class="g3-cell-label">新密码：</div>
-        <div class="g3-cell-value">
-          <el-input v-model="form.newPassword" type="password" />
-        </div>
-      </div>
-      <div class="g3-cell">
-        <div class="g3-cell-label">确认密码：</div>
-        <el-input v-model="form.confirmPassword" type="password" />
-      </div>
-    </div>
-    <div class="g3-actions">
-      <el-button type="primary" :loading="loading" @click="handleConfirm"> 确认 </el-button>
-      <el-button :loading="loading" @click="resetFrom"> 重置 </el-button>
+  <div style="width: 360px">
+    <G3Grid>
+      <G3GridGroup :label-width="80" :column="1" label-align="right">
+        <G3GridItem label="旧密码" :span="1">
+          <el-input v-model="form.oldPassword" type="password" show-password />
+        </G3GridItem>
+        <G3GridItem label="新密码" :span="1" required>
+          <el-input v-model="form.newPassword" type="password" show-password />
+        </G3GridItem>
+        <G3GridItem label="确认密码" :span="1" required>
+          <el-input
+            v-model="form.confirmPassword"
+            type="password"
+            show-password
+          />
+        </G3GridItem>
+      </G3GridGroup>
+    </G3Grid>
+
+    <div class="footer">
+      <el-button @click="resetForm">取消</el-button>
+      <el-button type="primary" :loading="confirmLoading" @click="handleConfirm"
+        >确认</el-button
+      >
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
-.g3-container {
-  padding: 16px;
-  width: 400px;
-}
-
-.g3-grid {
-  display: grid;
-  grid-template-columns: repeat(1, 1fr);
-  gap: 1px;
-  border: 1px solid #ddd;
-  background-color: #ddd;
-}
-
-.g3-cell {
-  display: flex;
-  align-items: center;
-  color: #333;
-  font-size: 14px;
-  height: 32px;
-}
-
-.g3-cell-label {
-  padding: 8px;
-  border-right: 1px solid #ddd;
+.footer {
+  margin-top: 12px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  width: 95px;
-  flex-shrink: 0;
-  background: #f9f9f9;
-  height: 100%;
-}
-.g3-cell-value {
-  width: 100%;
-}
-
-.g3-actions {
-  display: flex;
-  margin-top: 12px;
-  justify-content: end;
-}
-
-:deep(.el-input__wrapper) {
-  border: none !important;
-  box-shadow: none !important;
-  border-radius: 0px;
 }
 </style>