#I5MD0X 增加修改自己登录密码功能

zyplayer-doc-ui/console-ui/src/common/api/console.js

@@ -10,6 +10,9 @@ export default {
     },
     getSelfUserInfo: data => {
         return request({url: '/user/info/selfInfo', method: 'post', data: Qs.stringify(data)});
+    },
+	updateSelfPwd: data => {
+        return request({url: '/user/info/updateSelfPwd', method: 'post', data: Qs.stringify(data)});
     },
 	selfInfoWithAuth: data => {
         return request({url: '/user/info/selfInfoWithAuth', method: 'post', data: Qs.stringify(data)});

zyplayer-doc-ui/console-ui/src/views/user/MyInfo.vue

@@ -1,12 +1,15 @@
 <template>
 	<div class="my-info-vue">
-		<el-breadcrumb separator-class="el-icon-arrow-right" style="padding: 20px 10px;">
-			<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
-			<el-breadcrumb-item>我的信息</el-breadcrumb-item>
-		</el-breadcrumb>
 		<div style="margin: 0 auto;max-width: 1000px;">
 			<el-card class="box-card">
-				<div slot="header" class="clearfix">我的信息</div>
+				<div slot="header" class="clearfix">
+					<el-row>
+						<el-col :span="12" style="line-height: 40px;">我的信息</el-col>
+						<el-col :span="12" style="text-align: right;">
+							<el-button type="primary" @click="showUpdatePasswordDialog"><i class="el-icon-edit"></i> 修改密码</el-button>
+						</el-col>
+					</el-row>
+				</div>
 				<el-form class="search-form-box" label-width="100px">
 					<el-form-item label="账号：">{{userInfo.userNo}}</el-form-item>
 					<el-form-item label="用户名：">{{userInfo.userName}}</el-form-item>
@@ -17,6 +20,22 @@
 				</el-form>
 			</el-card>
 		</div>
+		<el-dialog title="修改密码" :visible.sync="updatePasswordDialogVisible" width="500px">
+			<el-form label-width="120px" :model="updatePassword" status-icon :rules="updatePasswordRules" ref="passwordForm">
+				<el-form-item label="当前密码" prop="currentPwd">
+					<el-input type="password" v-model="updatePassword.currentPwd" placeholder="请输入当前密码"></el-input>
+				</el-form-item>
+				<el-form-item label="新密码" prop="newPwd">
+					<el-input type="password" v-model="updatePassword.newPwd" placeholder="请输入新密码"></el-input>
+				</el-form-item>
+				<el-form-item label="确认新密码" prop="repeatPwd">
+					<el-input type="password" v-model="updatePassword.repeatPwd" placeholder="请再次输入新密码"></el-input>
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitUpdatePasswordForm">修改密码</el-button>
+				</el-form-item>
+			</el-form>
+		</el-dialog>
 	</div>
 </template>
 
@@ -25,7 +44,18 @@
 	export default {
 		data() {
 			return {
-				userInfo: {}
+				userInfo: {},
+				updatePasswordDialogVisible: false,
+				updatePassword: {
+					currentPwd: '',
+					newPwd: '',
+					repeatPwd: '',
+				},
+				updatePasswordRules: {
+					currentPwd: [{validator: this.validateCurrentPwd, trigger: 'blur'}],
+					newPwd: [{validator: this.validateNewPwd, trigger: 'blur'}],
+					repeatPwd: [{validator: this.validateRepeatPwd, trigger: 'blur'}],
+				},
 			};
 		},
 		mounted: function () {
@@ -37,6 +67,54 @@
 					this.userInfo = json.data;
 				});
 			},
+			showUpdatePasswordDialog() {
+				this.updatePasswordDialogVisible = true;
+			},
+			submitUpdatePasswordForm() {
+				this.$refs.passwordForm.validate((valid) => {
+					if (!valid) {
+						return false;
+					}
+					consoleApi.updateSelfPwd(this.updatePassword).then(json => {
+						this.$message.success("修改成功！请重新登录");
+						setTimeout(() => {
+							consoleApi.userLogout().then(() => {
+								location.reload();
+							}).catch(e => {
+								console.log("退出登录失败", e);
+							});
+						}, 500);
+					});
+				});
+			},
+			validateCurrentPwd(rule, value, callback) {
+				if (value === '') {
+					callback(new Error('请输入密码'));
+				} else {
+					callback();
+				}
+			},
+			validateNewPwd(rule, value, callback) {
+				if (value === '') {
+					callback(new Error('请输入新密码'));
+				} else {
+					if (this.updatePassword.newPwd !== '') {
+						this.$refs.passwordForm.validateField('repeatPwd');
+					}
+					callback();
+				}
+			},
+			validateRepeatPwd(rule, value, callback) {
+				if (value === '') {
+					callback(new Error('请再次输入新密码'));
+				} else {
+					if (this.updatePassword.repeatPwd !== this.updatePassword.newPwd) {
+						callback(new Error('两次输入的密码不一致'));
+					} else {
+						callback();
+					}
+				}
+			},
 		}
 	}