ADD 账户信息 增加密码修改模板

src/views/userCenter/index.vue

@@ -45,6 +45,7 @@
 			account: defineAsyncComponent(() => import('./user/account')),
 			seting: defineAsyncComponent(() => import('./user/seting')),
 			pushSettings: defineAsyncComponent(() => import('./user/pushSettings')),
+			password: defineAsyncComponent(() => import('./user/password')),
 			space: defineAsyncComponent(() => import('./user/space')),
 			logs: defineAsyncComponent(() => import('./user/logs')),
 			upToEnterprise: defineAsyncComponent(() => import('./user/upToEnterprise'))
@@ -65,6 +66,11 @@
 								title: "个人设置",
 								component: "seting"
 							},
+							{
+								icon: "el-icon-lock",
+								title: "密码",
+								component: "password"
+							},
 							{
 								icon: "el-icon-bell",
 								title: "通知设置",

src/views/userCenter/user/password.vue

@@ -0,0 +1,80 @@
+<template>
+	<el-card shadow="never" header="修改密码">
+		<el-alert title="密码更新成功后，您将被重定向到登录页面，您可以使用新密码重新登录。" type="info" show-icon style="margin-bottom: 15px;"/>
+		<el-form ref="form" :model="form" :rules="rules" label-width="120px" style="margin-top:20px;">
+			<el-form-item label="当前密码" prop="userPassword">
+				<el-input v-model="form.userPassword" type="password" show-password placeholder="请输入当前密码"></el-input>
+				<div class="el-form-item-msg">必须提供当前登录用户密码才能进行更改</div>
+			</el-form-item>
+			<el-form-item label="新密码" prop="newPassword">
+				<el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
+				<sc-password-strength v-model="form.newPassword"></sc-password-strength>
+				<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
+			</el-form-item>
+			<el-form-item label="确认新密码" prop="confirmNewPassword">
+				<el-input v-model="form.confirmNewPassword" type="password" show-password placeholder="请再次输入新密码"></el-input>
+			</el-form-item>
+			<el-form-item>
+				<el-button type="primary" @click="save">保存密码</el-button>
+			</el-form-item>
+		</el-form>
+	</el-card>
+</template>
+
+<script>
+	import scPasswordStrength from '@/components/scPasswordStrength'
+
+	export default {
+		components: {
+			scPasswordStrength
+		},
+		data() {
+			return {
+				form: {
+					userPassword: "",
+					newPassword: "",
+					confirmNewPassword: ""
+				},
+				rules: {
+					userPassword: [
+						{ required: true, message: '请输入当前密码'}
+					],
+					newPassword: [
+						{ required: true, message: '请输入新密码'}
+					],
+					confirmNewPassword: [
+						{ required: true, message: '请再次输入新密码'},
+						{validator: (rule, value, callback) => {
+							if (value !== this.form.newPassword) {
+								callback(new Error('两次输入密码不一致'));
+							}else{
+								callback();
+							}
+						}}
+					]
+				}
+			}
+		},
+		methods: {
+			save(){
+				this.$refs.form.validate(valid => {
+					if (valid) {
+						this.$alert("密码修改成功，是否跳转至登录页使用新密码登录", "修改成功", {
+							type: 'success',
+							center: true
+						}).then(() => {
+							this.$router.replace({
+								path: '/login'
+							})
+						}).catch(() => {})
+					}else{
+						return false
+					}
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+</style>