From 2001258ef47b8d7c39af25d4b914851a48155b18 Mon Sep 17 00:00:00 2001
From: Ran_Chen <1908198662@qq.com>
Date: Mon, 24 Mar 2025 18:08:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BF=AE=E6=94=B9=E5=AF=86?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/apis/module/user.js      |  35 ++++-
 .../src/components/ChangePasswordDialog.vue   | 141 ++++++++++++++++++
 main/manager-web/src/components/HeaderBar.vue |  31 ++--
 3 files changed, 187 insertions(+), 20 deletions(-)
 create mode 100644 main/manager-web/src/components/ChangePasswordDialog.vue

diff --git a/main/manager-web/src/apis/module/user.js b/main/manager-web/src/apis/module/user.js
index 2e9bc6e2..0c917a63 100755
--- a/main/manager-web/src/apis/module/user.js
+++ b/main/manager-web/src/apis/module/user.js
@@ -43,9 +43,9 @@ export default {
             })
             .fail(() => {
                 RequestService.reAjaxFun(() => {
-                  this.unbindDevice(device_id, callback);
+                    this.unbindDevice(device_id, callback);
                 });
-              }).send()
+            }).send()
     },
     // 绑定设备
     bindDevice(deviceCode, callback) {
@@ -71,9 +71,9 @@ export default {
             .method('GET')
             .type('blob')
             .header({
-                  'Content-Type': 'image/gif',
-                  'Pragma': 'No-cache',
-                  'Cache-Control': 'no-cache'
+                'Content-Type': 'image/gif',
+                'Pragma': 'No-cache',
+                'Cache-Control': 'no-cache'
             })
             .success((res) => {
                 RequestService.clearRequestTime();
@@ -173,7 +173,7 @@ export default {
                     this.getAgentList(callback);
                 });
             }).send();
-        },
+    },
 
     getUserInfo(callback) {
         RequestService.sendRequest()
@@ -195,7 +195,7 @@ export default {
         RequestService.sendRequest()
             .url(`${getServiceUrl()}/api/v1/user/agent`)
             .method('POST')
-            .data({ name: agentName })
+            .data({name: agentName})
             .success((res) => {
                 RequestService.clearRequestTime();
                 callback(res);
@@ -221,5 +221,24 @@ export default {
                 });
             }).send();
     },
-
+    // API接口代码修改
+    changePassword(oldPassword, newPassword, successCallback, errorCallback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/change-password`)  // 修改URL
+            .method('PUT')  // 修改方法为PUT
+            .data({
+                old_password: oldPassword,  // 修改参数名
+                new_password: newPassword   // 修改参数名
+            })
+            .success((res) => {
+                RequestService.clearRequestTime();
+                successCallback(res);
+            })
+            .fail((error) => {
+                RequestService.reAjaxFun(() => {
+                    this.changePassword(oldPassword, newPassword, successCallback, errorCallback);
+                });
+            })
+            .send();
+    },
 }
diff --git a/main/manager-web/src/components/ChangePasswordDialog.vue b/main/manager-web/src/components/ChangePasswordDialog.vue
new file mode 100644
index 00000000..19c20fd6
--- /dev/null
+++ b/main/manager-web/src/components/ChangePasswordDialog.vue
@@ -0,0 +1,141 @@
+<template>
+  <el-dialog :visible.sync="visible" width="400px" center>
+    <div
+        style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
+      <div
+          style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
+        <img src="@/assets/login/shield.png" alt="" style="width: 19px;height: 23px; filter: brightness(0) invert(1);" />
+      </div>
+      修改密码
+    </div>
+    <div style="height: 1px;background: #e8f0ff;"/>
+    <div style="margin: 22px 15px;">
+      <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
+        <div style="color: red;display: inline-block;">*</div>
+        旧密码：
+      </div>
+      <div class="input-46" style="margin-top: 12px;">
+        <el-input placeholder="请输入旧密码" v-model="oldPassword" type="password" show-password/>
+      </div>
+      <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;margin-top: 12px;">
+        <div style="color: red;display: inline-block;">*</div>
+        新密码：
+      </div>
+      <div class="input-46" style="margin-top: 12px;">
+        <el-input placeholder="请输入新密码" v-model="newPassword" type="password" show-password/>
+      </div>
+      <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;margin-top: 12px;">
+        <div style="color: red;display: inline-block;">*</div>
+        确认新密码：
+      </div>
+      <div class="input-46" style="margin-top: 12px;">
+        <el-input placeholder="请再次输入新密码" v-model="confirmNewPassword" type="password" show-password/>
+      </div>
+    </div>
+    <div style="display: flex;margin: 15px 15px;gap: 7px;">
+      <div class="dialog-btn" @click="confirm">
+        确定
+      </div>
+      <div class="dialog-btn"
+           style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;"
+           @click="cancel">
+        取消
+      </div>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import userApi from '@/apis/module/user';
+
+export default {
+  name: 'ChangePasswordDialog',
+  props: {
+    visible: {type: Boolean, required: true}
+  },
+  data() {
+    return {
+      oldPassword: "",
+      newPassword: "",
+      confirmNewPassword: ""
+    }
+  },
+  methods: {
+    confirm() {
+      if (!this.oldPassword.trim() || !this.newPassword.trim() || !this.confirmNewPassword.trim()) {
+        this.$message.error('请填写所有字段');
+        return;
+      }
+      if (this.newPassword !== this.confirmNewPassword) {
+        this.$message.error('两次输入的新密码不一致');
+        return;
+      }
+      if (this.newPassword === this.oldPassword) {
+        this.$message.error('新密码不能与旧密码相同');
+        return;
+      }
+
+      // 直接调用修改密码接口
+      userApi.changePassword(this.oldPassword, this.newPassword, (res) => {
+        if (res.code === 0) {
+          this.$message.error(res.msg || '密码修改失败');
+        } else {
+          this.$message.success('密码修改成功');
+          this.$emit('confirm', res);
+          this.$emit('update:visible', false);
+          this.resetForm();
+        }
+      }, (err) => {
+        this.$message.error(err.msg || '密码修改失败');
+      });
+    },
+    cancel() {
+      this.$emit('update:visible', false);
+      this.resetForm();
+    },
+    resetForm() {
+      this.oldPassword = "";
+      this.newPassword = "";
+      this.confirmNewPassword = "";
+    }
+  }
+}
+</script>
+
+<style scoped>
+.input-46 {
+  border: 1px solid #e4e6ef;
+  background: #f6f8fb;
+  border-radius: 15px;
+}
+
+.dialog-btn {
+  cursor: pointer;
+  flex: 1;
+  border-radius: 23px;
+  background: #5778ff;
+  height: 40px;
+  font-weight: 500;
+  font-size: 12px;
+  color: #fff;
+  line-height: 40px;
+  text-align: center;
+}
+
+::v-deep .el-dialog {
+  border-radius: 15px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+::v-deep .el-dialog__headerbtn {
+  display: none;
+}
+
+::v-deep .el-dialog__body {
+  padding: 4px 6px;
+}
+
+::v-deep .el-dialog__header {
+  padding: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue
index a8dff30c..dcaa3c0b 100644
--- a/main/manager-web/src/components/HeaderBar.vue
+++ b/main/manager-web/src/components/HeaderBar.vue
@@ -25,25 +25,31 @@
         <img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
         <el-dropdown trigger="click">
           <span class="el-dropdown-link">
-             {{ userInfo.username }}<i class="el-icon-arrow-down el-icon--right"></i>
+             {{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
           </span>
           <el-dropdown-menu slot="dropdown">
             <el-dropdown-item icon="el-icon-plus" @click.native="">个人中心</el-dropdown-item>
-            <el-dropdown-item icon="el-icon-circle-plus" @click.native="">修改密码</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-circle-plus" @click.native="showChangePasswordDialog">修改密码</el-dropdown-item>
             <el-dropdown-item icon="el-icon-circle-plus-outline" @click.native="">退出登录</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </div>
     </div>
+
+    <!-- 修改密码弹窗 -->
+    <ChangePasswordDialog :visible.sync="isChangePasswordDialogVisible" />
   </el-header>
 </template>
 
 <script>
-import userApi from '@/apis/module/user'
-
+import userApi from '@/apis/module/user';
+import ChangePasswordDialog from './ChangePasswordDialog.vue'; // 引入修改密码弹窗组件
 
 export default {
   name: 'HeaderBar',
+  components: {
+    ChangePasswordDialog
+  },
   props: ['devices'],  // 接收父组件设备列表
   data() {
     return {
@@ -51,7 +57,8 @@ export default {
       userInfo: {
         username: '',
         mobile: ''
-      }
+      },
+      isChangePasswordDialogVisible: false // 控制修改密码弹窗的显示
     }
   },
   mounted() {
@@ -71,10 +78,7 @@ export default {
     // 获取用户信息
     fetchUserInfo() {
       userApi.getUserInfo(({data}) => {
-        this.userInfo = {
-          username: data.data.mobile, // 暂时先使用手机号作为用户名
-          mobile: data.data.mobile
-        }
+        this.userInfo = data.data
       })
     },
 
@@ -96,10 +100,13 @@ export default {
       }
 
       this.$emit('search-result', filteredDevices);
+    },
+
+    // 显示修改密码弹窗
+    showChangePasswordDialog() {
+      this.isChangePasswordDialogVisible = true;
     }
-
   }
-
 }
 </script>
 
@@ -181,4 +188,4 @@ export default {
   color: #3d4566;
 }
 
-</style>
+</style>
\ No newline at end of file