u

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

@@ -0,0 +1,125 @@
+<script setup>
+import { ElMessage } from "element-plus";
+
+import { ref } from "vue";
+
+const loading = ref(false);
+
+const form = ref({
+  oldPassword: "",
+  newPassword: "",
+  confirmPassword: "",
+});
+
+function resetFrom() {
+  form.value.oldPassword = "";
+  form.value.newPassword = "";
+  form.value.confirmPassword = "";
+}
+
+async function handleConfirm() {
+  if (form.value.newPassword !== form.value.confirmPassword) {
+    ElMessage.warning("新密码和确认密码不一致");
+    return;
+  }
+
+  loading.value = true;
+
+  const requestData = {
+    oldPassword: form.value.oldPassword,
+    newPassword: form.value.newPassword,
+  };
+
+  try {
+    const saveRes = await axios.post("/updatePassword", requestData, {
+      headers: { "Content-Type": "application/json" },
+    });
+
+    if (saveRes.data.success) {
+      ElMessage.success("密码更新成功");
+      resetFrom();
+    } else {
+      ElMessage.error(`密码更新失败：${saveRes.data.message}`);
+    }
+  } catch (error) {
+    ElMessage.error(`密码更新失败：${error.message || "未知错误"}`);
+  } finally {
+    loading.value = false;
+  }
+}
+</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>
+  </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;
+  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>