ChangePasswordDialog.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <div class="dialog-overlay" v-if="visible" @click.self="closeDialog">
  3. <div class="dialog-content">
  4. <div class="dialog-header">
  5. <h3>修改密码</h3>
  6. <button class="close-button" @click="closeDialog">&times;</button>
  7. </div>
  8. <div class="dialog-body">
  9. <div class="form-group">
  10. <label>原密码:</label>
  11. <input type="password" v-model="formData.old_password" placeholder="请输入原密码">
  12. </div>
  13. <div class="form-group">
  14. <label>新密码:</label>
  15. <input type="password" v-model="formData.new_password" placeholder="请输入新密码">
  16. </div>
  17. <div class="form-group">
  18. <label>确认密码:</label>
  19. <input type="password" v-model="formData.confirm_password" placeholder="请确认新密码">
  20. </div>
  21. </div>
  22. <div class="dialog-footer">
  23. <button class="cancel-button" @click="closeDialog">取消</button>
  24. <button class="confirm-button" @click="handleSubmit">确认</button>
  25. </div>
  26. </div>
  27. </div>
  28. </template>
  29. <script>
  30. import axios from "axios";
  31. export default {
  32. name: 'ChangePasswordDialog',
  33. props: {
  34. visible: {
  35. type: Boolean,
  36. default: false
  37. }
  38. },
  39. data() {
  40. return {
  41. formData: {
  42. old_password: '',
  43. new_password: '',
  44. confirm_password: ''
  45. }
  46. }
  47. },
  48. methods: {
  49. closeDialog() {
  50. this.$emit('update:visible', false)
  51. this.resetForm()
  52. },
  53. resetForm() {
  54. this.formData = {
  55. old_password: '',
  56. new_password: '',
  57. confirm_password: ''
  58. }
  59. },
  60. async handleSubmit() {
  61. if (!this.formData.old_password) {
  62. this.$message.error('请输入原密码')
  63. return
  64. }
  65. if (!this.formData.new_password) {
  66. this.$message.error('请输入新密码')
  67. return
  68. }
  69. if (!this.formData.confirm_password) {
  70. this.$message.error('请确认新密码')
  71. return
  72. }
  73. if (this.formData.new_password !== this.formData.confirm_password) {
  74. this.$message.error('两次输入的新密码不一致')
  75. return
  76. }
  77. try {
  78. const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/change_password`, {
  79. old_password: this.formData.old_password,
  80. new_password: this.formData.new_password,
  81. confirm_password: this.formData.confirm_password
  82. },
  83. {
  84. headers: {
  85. 'Authorization': `JWT ${localStorage.getItem('token')}`
  86. }
  87. }
  88. )
  89. if (response.data.code === 200) {
  90. this.$message.success('密码修改成功')
  91. this.closeDialog()
  92. // 调用退出登录接口
  93. try {
  94. await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/logout`, {}, {
  95. headers: {
  96. 'Authorization': `JWT ${localStorage.getItem('token')}`
  97. }
  98. })
  99. // 清除token
  100. localStorage.removeItem('token')
  101. // 跳转到登录页面
  102. this.$router.push('/login')
  103. } catch (logoutError) {
  104. console.error('退出登录失败:', logoutError)
  105. // 即使退出失败,也清除token并跳转
  106. localStorage.removeItem('token')
  107. this.$router.push('/login')
  108. }
  109. } else {
  110. this.$message.error(response.data.message || '密码修改失败')
  111. }
  112. } catch (error) {
  113. this.$message.error('密码修改失败:' + (error.response?.data?.message || error.message))
  114. }
  115. }
  116. }
  117. }
  118. </script>
  119. <style scoped>
  120. .dialog-overlay {
  121. position: fixed;
  122. top: 0;
  123. left: 0;
  124. right: 0;
  125. bottom: 0;
  126. background-color: rgba(0, 0, 0, 0.5);
  127. display: flex;
  128. justify-content: center;
  129. align-items: center;
  130. z-index: 1000;
  131. }
  132. .dialog-content {
  133. background: white;
  134. border-radius: 8px;
  135. padding: 20px;
  136. width: 400px;
  137. box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  138. }
  139. .dialog-header {
  140. display: flex;
  141. justify-content: space-between;
  142. align-items: center;
  143. margin-bottom: 20px;
  144. }
  145. .dialog-header h3 {
  146. margin: 0;
  147. color: #333;
  148. }
  149. .close-button {
  150. background: none;
  151. border: none;
  152. font-size: 24px;
  153. cursor: pointer;
  154. color: #666;
  155. }
  156. .form-group {
  157. margin-bottom: 15px;
  158. }
  159. .form-group label {
  160. display: block;
  161. margin-bottom: 5px;
  162. color: #333;
  163. }
  164. .form-group input {
  165. width: 100%;
  166. padding: 8px;
  167. border: 1px solid #ddd;
  168. border-radius: 4px;
  169. font-size: 14px;
  170. }
  171. .dialog-footer {
  172. display: flex;
  173. justify-content: flex-end;
  174. gap: 10px;
  175. margin-top: 20px;
  176. }
  177. .cancel-button, .confirm-button {
  178. padding: 8px 20px;
  179. border-radius: 4px;
  180. cursor: pointer;
  181. font-size: 14px;
  182. }
  183. .cancel-button {
  184. background: #f5f5f5;
  185. border: 1px solid #ddd;
  186. color: #666;
  187. }
  188. .confirm-button {
  189. background: #409EFF;
  190. border: 1px solid #409EFF;
  191. color: white;
  192. }
  193. .confirm-button:hover {
  194. background: #66b1ff;
  195. }
  196. .cancel-button:hover {
  197. background: #e8e8e8;
  198. }
  199. </style>