通过用户名和邮箱重置密码
<template> <el-container> <el-main> <div style="margin:0px auto;"> <el-col :span="6"> <img class="logo_img" src="@/assets/images/beijing_logo.png" style="margin-top:-15px;margin-left:90px"> </el-col> <el-col :span="3"> <span class="span" style="margin-left: 30px;">重置密码</span> </el-col> </div> <div class="main" style="width:100%;height:500px"> <div class="lanse" style="background:#3F72C8;width:100%;height:396px;margin-top:50px;margin-left:-20px;position:absolute;"> <div class="baise" style="background:white;width:1128px;height:316px;position: relative; left:50%; top:50%;transform: translate(-50%, -50%)"> <div id="ul" style="text-align:center; position: relative; top: 10%;"> <el-steps :active="active" align-center> <el-step title="确认账号" /> <el-step title="验证邮箱" /> <el-step title="重置密码" /> <el-step title="重置成功" /> </el-steps> </div> <!--步骤1--> <el-form v-show="emailNumberStep1" ref="emailNumberForm1" :model="emailNumberForm1" label-width="80px"> <el-form-item> <span style="width: 250px; margin-left: 340px;">用户名:</span> <el-input v-model="emailNumberForm1.accounts" style="width: 250px; margin-top: 90px;" /> </el-form-item> <el-form-item> <span style="width: 250px; margin-left: 340px; ">邮箱号:</span> <el-input v-model="emailNumberForm1.email" style="width: 250px; margin-top: 8px;" /> </el-form-item> </el-form> <!--步骤2--> <el-form v-show="emailNumberStep2" ref="emailNumberForm2" :inline="true" :model="emailNumberForm2" label-width="80px" style="margin-left: 300px;margin-top: 50px"> <el-form-item label="邮箱："> <span>{{ emailNumberForm2.email }}</span> </el-form-item><br> <el-form-item label="验证码："> <el-input v-model="emailNumberForm2.vertifyCode" placeholder="请输入验证码" style="width: 200px;padding-right: 5%" /> <!--设置隐藏属性，:hidden,点击获取验证码后按钮禁用，倒计时展示：倒计时结束后隐藏，按钮可用--> <el-button type="primary" plain :disabled="isDisabled" @click="getVertifyCode"> <span ref="getVertifyCode" :hidden="isSpanHidden">({{ count }})s后重新获取</span> <span :hidden="isButtonHidden">获取验证码</span> </el-button><br> <span :hidden="isSpanHidden">验证码短信已发出，({{ count }})s内有效，请及时查收</span> </el-form-item> </el-form> <!--步骤3--> <el-form v-show="emailNumberStep3" ref="emailNumberForm3" :inline="true" :model="emailNumberForm3" :rules="emailNumberForm3Rules" label-width="80px" style="margin-left: 320px;margin-top: 50px"> <el-form-item prop="newPass" label="新密码"> <el-input v-model="emailNumberForm3.newPass" type="text" placeholder="新密码（5-12大小写字母、数字）" style="width: 310px" /> </el-form-item><br> <el-form-item prop="checkPass" label="确认密码"> <el-input v-model="emailNumberForm3.checkPass" placeholder="确认密码（5-12大小写字母、数字）" style="width: 310px" show-password /> </el-form-item> </el-form> <!--步骤4--> <el-container v-show="emailNumberStep4"> <div class="steps-button"> <i class="el-icon-success" style="margin-left: 430px;width: 20px;margin-top: 50px; margin-bottom: 50px" /> <span>恭喜您，密码重置成功！</span> </div> </el-container> <div style="margin-left:460px;"> <el-button type="primary" style="margin-left:30px;width:100px;" :disabled="isClickButton" @click="nextPage('emailNumberForm3')">{{ active == 4?'返回首页':'下一步' }}</el-button> <!--isClickButton--> </div> </div> <div> <div class="otherProduces"> <ul> <li v-for="i in produces" :key="i" :label="i" @click="introduce">{{ i }}<hr class="iProduces"></li> </ul> </div> <div class="otherLinks"> <ul> <li>友情链接：</li> <li v-for="i in links" :key="i" :label="i" @click="link">{{ i }}</li> </ul> </div> <img class="policeLogo" src="@/icons/login/police.png"> </div> </div> </div> <hr style="height:2px;border:none;border-top:2px dotted #999999; margin-top: 60px; width: 100%"> <el-footer style="text-align: center"> <span class="footer">北京电力交易中心信息发布网站 国网安备1514A91lF号 ICP国网安备1514A91lF号 <br> Copyright @2010-2016 Stats Grid Corporation of China (SGCC).国家电网公司 版权所有</span><br> </el-footer> </el-main> </el-container> </template> <script> import PxSysUserApi from '../../../../api/pxf-common-authority/PxSysUserApi.js' import SmUtils from '../../../../utils/SmUtils' export default { data() { const validatePass1 = (rule, value, callback) => { console.log(value) if (value === '') { callback(new Error('请输入密码')) // this.isClickButton = true } else { var reg = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,.\/]).{5,12}$/ var flag = reg.test(value) if (!flag) { callback(new Error('请输入5-12位以上字母，数字，特殊字符组合密码')) // this.isClickButton = true } callback() this.isClickButton = false } } var validatePass2 = (rule, value, callback) => { if (value === '') { callback(new Error('请再次输入密码')) // this.isClickButton = true } else if (value !== this.emailNumberForm3.newPass) { callback(new Error('两次输入密码不一致!')) // this.isClickButton = true } else { callback() this.isClickButton = false } } return { emailNumberStep1: true, emailNumberStep2: false, emailNumberStep3: false, emailNumberStep4: false, checked: false, active: 0, produces: ['关于我们', '联系我们', '公式注册'], links: ['国家发改委', '国资委', '国家资源局', '电力企业委员会', '国家电网公司'], isDisabled: false, isSpanHidden: true, isButtonHidden: false, isClickButton: false, timer: null, count: '', emailNumberForm3Rules: { newPass: [ { required: true, validator: validatePass1, trigger: 'blur' } ], checkPass: [ { required: true, validator: validatePass2, trigger: 'blur' } ] }, emailNumberForm1: { accounts: '', email: '' }, emailNumberForm2: { username: '', email: '', vertifyCode: '' }, emailNumberForm3: { newPass: '', checkPass: '' } } }, methods: { nextPage(formName) { if (this.active === 0) { const objUser = { loginName: this.emailNumberForm1.accounts, email: this.emailNumberForm1.email } PxSysUserApi.queryEmail(objUser).then(res => { console.log('queryEmail', res) this.emailNumberForm2.username = this.emailNumberForm1.accounts this.emailNumberForm2.email = this.emailNumberForm1.email if (res.status === 0) { this.emailNumberStep1 = false this.emailNumberStep2 = true this.emailNumberStep3 = false this.emailNumberStep4 = false this.active++ } }).catch(err => { console.error(err) }) } else if (this.active === 1) { this.active++ this.emailNumberStep1 = false this.emailNumberStep2 = false this.emailNumberStep3 = true this.emailNumberStep4 = false } else if (this.active === 2) { PxSysUserApi.getPublicKey().then(res => { console.log('getPublicKey', res) if (res.status === 0) { const obj = { publicKey: res.data, loginName: this.emailNumberForm1.accounts, newAuthKey: SmUtils.encryptSm2(this.emailNumberForm3.newPass, res.data) } PxSysUserApi.updatePsd(obj).then(res => { console.log('updatePsd', res) if (res.status === 0) { this.$message({ message: '更新成功', type: 'success' }) this.active++ this.emailNumberStep1 = false this.emailNumberStep2 = false this.emailNumberStep3 = false this.emailNumberStep4 = true } }).catch(err => { console.error(err) }) } }) } else if (this.active === 3) { this.$refs[formName].validate((valid) => { if (valid) { this.emailNumberStep1 = false this.emailNumberStep2 = false this.emailNumberStep3 = false this.emailNumberStep4 = true this.active++ } }) } else if (this.active === 4) { this.emailNumberStep1 = false this.emailNumberStep2 = false this.emailNumberStep3 = false this.emailNumberStep4 = false this.$router.push({ path: '/marketService/Login', query: { membersId: '1' } }) } }, // 点击获取验证码倒计时 getVertifyCode() { this.isDisabled = true this.isButtonHidden = true this.isSpanHidden = false this.count = 60 this.timer = setInterval(() => { this.isSpanHidden = false this.count-- if (this.count <= 0) { this.isSpanHidden = true this.isButtonHidden = false this.isDisabled = false clearInterval(this.timer) this.timer = null } }, 1000) }, introduce() { }, link() { } } } </script> <style scoped> .span { color: #5096C7; font-size: 14px; font-family: '宋体 Regular', '宋体'; display: block; margin-top:7px; margin-left:15px } .otherProduces{ float: left; height: 27px; margin-left: 35%; margin-top: 90px; } .otherProduces>ul>li{ float: left; list-style: none; width: 30%; margin-right: 3%; margin-top: 10px; height: 27px; font-family: '黑体 Regular', '黑体'; font-size: 13px; color: #5E5E5E; cursor: pointer; } .iProduces{ float: left; margin-left: 75px; margin-top: -15px; width: 1px; height: 16px; border: 1px; border-left: 1px solid #797979; } .otherLinks{ float: left; height: 27px; margin-left: 30%; } .otherLinks>ul{ width: 200%; } .otherLinks>ul>li{ float: left; list-style: none; width: 14%; margin-right: -3%; margin-top: 21px; height: 27px; font-family: '黑体 Regular', '黑体'; font-size: 11px; color: #868686; cursor: pointer; } .otherLinks>ul>li:nth-child(4){ margin-left: -3%; } .otherLinks>ul>li:last-child{ margin-left: 3%; } .policeLogo{ width: 145px; height: 101px; float: left; margin-left: 72%; margin-top: -54px; } .footer { margin-top: 20px; display: block; font-size: 12px; color: silver } </style>
import request from '@/utils/request' /** * Api * @author 李松涛 */ export default class PxSysUserApi { /** * userId查询PxSysWhiteList * @param userId */ static queryByUserId(userId) { return request({ url: '/px-common-authority/pxSysWhiteList/queryByUserId', method: 'post', params: { 'userId': userId } }) } /** * 保存更新 * @param data */ static saveWhiteList(data) { return request({ url: '/px-common-authority/pxSysWhiteList/save', method: 'post', data: data }) } /** * 获取公钥 */ static getPublicKey() { return request({ url: '/px-common-authority/user/getPublicKey', method: 'post' }) } /** * 批量插入 * @param queryParam */ static saveUserRole(queryParam) { return request({ url: '/px-common-authority/pxSysUserRole/insertList', method: 'post', data: queryParam }) } /** * 密码重置 * @param data */ static resetPwd(data) { return request({ url: '/px-common-authority/pxSysUser/resetAuthKey', method: 'post', data: data }) } /** * 修改user信息Type * @param data */ static updateAuthKey(data) { return request({ url: '/px-common-authority/pxSysUser/modifyAuthKey', method: 'post', data: data }) } /** * 修改user信息Type * @param data */ static updateEmailOrPhone(data) { return request({ url: '/px-common-authority/pxSysUser/modifyEmailPhone', method: 'post', data: data }) } /** * 保存更新 * @param id */ static queryById(id) { return request({ url: '/px-common-authority/pxSysUser/queryById', method: 'post', params: { 'id': id } }) } /** * 保存更新 * @param data */ static save(data) { return request({ url: '/px-common-authority/pxSysUser/save', method: 'post', data: data }) } /** * 分页查询 * @param queryParam */ static queryPage(queryParam) { return request({ url: '/px-common-authority/pxSysUser/queryPage', method: 'post', data: queryParam }) } /** * 根据ID删除 * @param id */ static deleteById(id) { return request({ url: '/px-common-authority/pxSysUser/deleteById', method: 'post', params: { 'id': id } }) } /** * 批量删除 * @param data */ static deleteList(data) { return request({ url: '/px-common-authority/pxSysUser/deleteList', method: 'post', data: data }) } /** * 查询用户名是否存在 * @param data */ static queryUsername(data) { return request({ url: '/px-common-authority/pxSysUser/checkLoginNameMobile', method: 'post', data: data }) } /** * 更改密码 * @param data */ static updatePsd(data) { return request({ url: '/px-common-authority/pxSysUser/modifyAuthKeyByEmailMobile', method: 'post', data: data }) } /** * 校验用户名和邮箱 * @param data */ static queryEmail(data) { return request({ url: '/px-common-authority/pxSysUser/checkLoginNameEmail', method: 'post', data: data }) } }