JT-CIM/src/views/Main/components/modifyPassword.vue

<!-- 修改密码组件 -->
<script setup>
	import {
		ElMessage
	} from 'element-plus'
</script>

<template>
	<div class="main" v-show="isshow" v-drag>
		<div class="title header">
			重置密码
		</div>
		<div style="height: 10rem;"></div>
		<el-form label-width="100rem" style="max-width: 460rem">
			<el-form-item label="账号:">
				<el-input v-model="user.account" disabled />
			</el-form-item>
			<el-form-item label="旧密码:">
				<el-input v-model="user.oldpassword" placeholder="请输入旧密码" />
			</el-form-item>
			<el-form-item label="新密码:">
				<el-input v-model="user.newpassword" placeholder="请输入8位以上大小写字母、数字、特殊字符" @change="newPwdChange" @input="newPwdChange" />
				<div class="PasswordStrength">
					<span id="weak">弱</span>
					<span id="medium">中</span>
					<span id="strong">强</span>
				</div>
			</el-form-item>
			<el-form-item label="确认密码:">
				<el-input v-model="user.enterpassword" @input="isenterpassword" placeholder="请再次输入新密码" />
				<el-icon :size="20" v-show="isicon" color="#ff2700" class="icon_warning">
					<WarningFilled />
				</el-icon>
				<span v-show="isicon">两次密码输入不一致!</span>
			</el-form-item>
		</el-form>
		<div class="footer">
			<el-button type="primary" @click="submit">确定</el-button>
			<el-button type="default" @click="cancel">关闭</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				user: {
					account: '', //用户账号
					oldpassword: '', //旧密码
					newpassword: '', //新密码
					enterpassword: '', //确定密码
				},

				isshow: false, //控制弹框是否显示
				isicon: false, //判断两次密码输入是否一致
				id: '', //用户主键
				info: '', //用户信息
			}
		},
		methods: {
			//表单提交事件
			submit() {
				if (!this.user.account || !this.user.newpassword || !this.user.oldpassword || !this.user.enterpassword) {
					ElMessage.error('请输入完整信息！')
					return
				} else if (this.user.newpassword !== this.user.enterpassword) {
					ElMessage.error('两次输入密码不一致！')
					return
				} else if (this.user.oldpassword !== this.info.password) {
					ElMessage.error('密码输入错误！')
					return
				}
				let data = {
					password: this.$md5(this.user.newpassword)
				}
				this.$http.post('/postSubmit', {
					tableName: 'base_sys_user',
					keyValue: this.id,
					formData: data
				}).then(res => {
					if (res.success == true) {
						ElMessage.success('密码修改成功！')
						this.isshow = false
						this.$router.push('/login')
					}
				})
			},
			//关闭修改密码弹出框
			cancel() {
				this.isshow = false
			},
			//判断两次密码是否一致
			isenterpassword() {
				if (this.user.newpassword != this.user.enterpassword) {
					this.isicon = true
				} else {
					this.isicon = false
				}
			},

			/**
			 * 监听新密码变化,修改密码强弱提示
			 */
			newPwdChange() {
				var password = this.user.newpassword;
				var level = this.ReturnPasswordStrength(password);
				if (level == "weak") {
					document.getElementById("weak").style.background = "#ffd800";
				} else {
					document.getElementById("weak").style.background = "#808080";
				}
				if (level == "medium") {
					document.getElementById("medium").style.background = "#ff6a00";
				} else {
					document.getElementById("medium").style.background = "#808080";
				}
				if (level == "strong") {
					document.getElementById("strong").style.background = "#f00";
				} else {
					document.getElementById("strong").style.background = "#808080";
				}
			},

			/**
			 * 返回密码强弱
			 * @param {Object} password
			 */
			ReturnPasswordStrength(password) {
				//强 ==> 密码长度大于等于8位数 包含大写字母[A-Z] + 小写字母[a-z] + 数字[0-9] + 非单词字符的特殊字符[标点符号，空格啥的这些] 结尾
				var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");

				//中 ==> 密码长度大于等于8位数 大写字母[A-Z] + 小写字母[a-z] 或者 大写字母[A-Z] + 数字[0-9] 或者 小写字母[a-z] + 数字[0-9] + 任意字符 结尾
				var mediumRegex = new RegExp("^(?=.{8,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");

				//弱 ==> 大于等于8位 任何字符或者数字 (如果达不到这个条件就是弱，所以这里需要用false判断)
				var weakRegex = new RegExp("(?=.{8,}).*", "g");

				if (weakRegex.test(password)) { //必须先要满足  弱  条件
					if (mediumRegex.test(password)) { //必须先要满足  弱  条件  才能   满足  中  条件
						if (strongRegex.test(password)) { //必须先要满足  中  条件才能  满足  强  条件
							return "strong";
						} else {
							return "medium";
						}
					} else {
						return "weak";
					}
				} else {
					return "weak";
				}
			},

		},
		mounted() {
			//在这里获取账户信息密码
			this.info = JSON.parse(localStorage.getItem('person'))
			this.user.account = this.info.account
			// this.user.oldpassword = info.password
			this.id = this.info.id
		}
	}
</script>



<style lang="scss" scoped>
	.main {
		position: absolute;
		top: 200rem;
		left: calc(50% - 250rem);
		z-index: 1;
		background-color: white;
		width: 500rem;
		height: 300rem;
		box-shadow: 0 0 5rem 1rem #82d5fb;
		user-select: none;
	}

	.icon_warning {
		z-index: 100;
	}

	.title {
		height: 40rem;
		background-color: rgb(240, 244, 247);
		line-height: 40rem;
		text-align: center;
		color: black;
		border-bottom: 1rem solid lightgray;
	}

	.footer {
		height: 50rem;
		background-color: rgb(240, 244, 247);
		line-height: 50rem;
		border-top: 1rem solid lightgray;
		text-align: right;
		padding-right: 10rem;
	}

	.PasswordStrength span {
		display: inline-block;
		width: 80rem;
		height: 20rem;
		line-height: 20rem;
		background: #808080;
		font-size: 10rem;
		text-align: center;
		color: #fff;

		//弱
		#weak {
			border-top-left-radius: 5rem;
			border-bottom-left-radius: 5rem;
			border-right: 0rem solid;
			margin-left: 20rem;
			margin-right: 3rem;
		}

		//中
		#medium {
			border-left: 0rem solid;
			border-right: 0rem solid;
			margin-left: -5rem;
			margin-right: 3rem;
		}

		//强
		#strong {
			border-top-right-radius: 5rem;
			border-bottom-right-radius: 5rem;
			border-left: 0rem solid;
			margin-left: -5rem;
		}
	}
	.el-form-item{
		margin-bottom: 18rem !important;
	}
</style>