123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216 |
- <template>
- <div class="dialog-overlay" v-if="visible" @click.self="closeDialog">
- <div class="dialog-content">
- <div class="dialog-header">
- <h3>修改密码</h3>
- <button class="close-button" @click="closeDialog">×</button>
- </div>
- <div class="dialog-body">
- <div class="form-group">
- <label>原密码:</label>
- <input type="password" v-model="formData.old_password" placeholder="请输入原密码">
- </div>
- <div class="form-group">
- <label>新密码:</label>
- <input type="password" v-model="formData.new_password" placeholder="请输入新密码">
- </div>
- <div class="form-group">
- <label>确认密码:</label>
- <input type="password" v-model="formData.confirm_password" placeholder="请确认新密码">
- </div>
- </div>
- <div class="dialog-footer">
- <button class="cancel-button" @click="closeDialog">取消</button>
- <button class="confirm-button" @click="handleSubmit">确认</button>
- </div>
- </div>
- </div>
- </template>
- <script>
- import axios from "axios";
- export default {
- name: 'ChangePasswordDialog',
- props: {
- visible: {
- type: Boolean,
- default: false
- }
- },
- data() {
- return {
- formData: {
- old_password: '',
- new_password: '',
- confirm_password: ''
- }
- }
- },
- methods: {
- closeDialog() {
- this.$emit('update:visible', false)
- this.resetForm()
- },
- resetForm() {
- this.formData = {
- old_password: '',
- new_password: '',
- confirm_password: ''
- }
- },
- async handleSubmit() {
- if (!this.formData.old_password) {
- this.$message.error('请输入原密码')
- return
- }
- if (!this.formData.new_password) {
- this.$message.error('请输入新密码')
- return
- }
- if (!this.formData.confirm_password) {
- this.$message.error('请确认新密码')
- return
- }
- if (this.formData.new_password !== this.formData.confirm_password) {
- this.$message.error('两次输入的新密码不一致')
- return
- }
- try {
- const response = await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/change_password`, {
- old_password: this.formData.old_password,
- new_password: this.formData.new_password,
- confirm_password: this.formData.confirm_password
- },
- {
- headers: {
- 'Authorization': `JWT ${localStorage.getItem('token')}`
- }
- }
- )
- if (response.data.code === 200) {
- this.$message.success('密码修改成功')
- this.closeDialog()
- // 调用退出登录接口
- try {
- await axios.post(`${import.meta.env.VITE_BASE_AI_API}/user/logout`, {}, {
- headers: {
- 'Authorization': `JWT ${localStorage.getItem('token')}`
- }
- })
- // 清除token
- localStorage.removeItem('token')
- // 跳转到登录页面
- this.$router.push('/login')
- } catch (logoutError) {
- console.error('退出登录失败:', logoutError)
- // 即使退出失败,也清除token并跳转
- localStorage.removeItem('token')
- this.$router.push('/login')
- }
- } else {
- this.$message.error(response.data.message || '密码修改失败')
- }
- } catch (error) {
- this.$message.error('密码修改失败:' + (error.response?.data?.message || error.message))
- }
- }
- }
- }
- </script>
- <style scoped>
- .dialog-overlay {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: rgba(0, 0, 0, 0.5);
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 1000;
- }
- .dialog-content {
- background: white;
- border-radius: 8px;
- padding: 20px;
- width: 400px;
- box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
- }
- .dialog-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin-bottom: 20px;
- }
- .dialog-header h3 {
- margin: 0;
- color: #333;
- }
- .close-button {
- background: none;
- border: none;
- font-size: 24px;
- cursor: pointer;
- color: #666;
- }
- .form-group {
- margin-bottom: 15px;
- }
- .form-group label {
- display: block;
- margin-bottom: 5px;
- color: #333;
- }
- .form-group input {
- width: 100%;
- padding: 8px;
- border: 1px solid #ddd;
- border-radius: 4px;
- font-size: 14px;
- }
- .dialog-footer {
- display: flex;
- justify-content: flex-end;
- gap: 10px;
- margin-top: 20px;
- }
- .cancel-button, .confirm-button {
- padding: 8px 20px;
- border-radius: 4px;
- cursor: pointer;
- font-size: 14px;
- }
- .cancel-button {
- background: #f5f5f5;
- border: 1px solid #ddd;
- color: #666;
- }
- .confirm-button {
- background: #409EFF;
- border: 1px solid #409EFF;
- color: white;
- }
- .confirm-button:hover {
- background: #66b1ff;
- }
- .cancel-button:hover {
- background: #e8e8e8;
- }
- </style>
|