登录和注册（五）——邮箱找回账号密码、手机号找回账号密码
1、邮箱找回账号
src\views\myCenter\accountManagement\loginRegister\RememberPassword.vue
<template>
<div class="RememberPassword">
<div class="RememberPassword-div">
<div class="RememberPassword-img">
<img src="img/logo.png"/>
</div>
</div>
<div class="RememberPassword-background-image"></div>
<div class="RememberPassword-right" id="firstOne">
<p class="RememberPassword-right-first" @click="phoneRe()">通过手机号找回密码 <img src="img/u79.png" alt="" valign="middle"></p>
<p class="RememberPassword-right-second">
<input @change="dizhi" id="emailw" class="textAll" type="text" placeholder="请输入注册时使用的邮箱地址">
</p>
<p style="position: absolute;top: 97px;height: 10px;left: 68px;color: red;font-size: 13px;font-weight: 200;">{{phoneemail}}</p>
<p class="RememberPassword-right-three">
<input type="text" placeholder="验证码" class="textAll" @blur="tupian()"><img :src="imgCode" valign="middle" @click="gengxin()"></p>
<p class="p2">{{neirongs}}</p>
<p class="RememberPassword-right-four">
<button class="btn" @click="zhaohui">找回密码</button>
</p>
<p class="RememberPassword-right-six" v-show="isShow">重置密码邮件已经发到您的邮箱中，请查收</p>
<p @click="shows" class="show2" v-if="shos2">{{dao}}s后跳转登录页面</p>
<p class="RememberPassword-right-five" @click="logins()">转到登录界面</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
imgCode: process.env.VUE_APP_API_HOST+ '/login/captcha',
isShow: false,
email: '',
shos2: false,
dao: "",
shos: false,
neirongs: "",
phoneemail: '',
simpleCaptcha: '',
num:''
}
},
created(){
this.gengxin()
},
methods: {
phoneRe() {
this.$router.push({path: '/PhonenumberPassword'})
},
shows(){
this.num=-1;
this.settime(0);
this.$router.push({path: '/login'})
},
logins(){
this.num=-1;
this.settime(0);
this.$router.push({path: '/login'})
},
gengxin() {
this.imgCode = process.env.VUE_APP_API_HOST+ '/login/captcha?' + Math.random();
},
settime(countdown) {
var that = this;
var stop = setInterval(function() {
if (countdown == 0) {
if(that.num !=-1){
that.$router.push("/login");
}
clearInterval(stop);
} else {
that.dao = countdown;
countdown--;
}
},1000)
},
tupian(){
var firstOne = document.getElementById('firstOne')
this.simpleCaptcha = firstOne.getElementsByClassName("textAll")[1].value;
if(this.simpleCaptcha == ''){
this.neirongs = '请输入图片验证码'
return false;
}else{
this.neirongs = ''
return true;
}
},
dizhi(){
var firstOne = document.getElementById('firstOne')
this.email = firstOne.getElementsByClassName("textAll")[0].value;
var emails = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
if (this.email == '') {
this.phoneemail = '请输入邮箱地址';
return false;
} else if (!emails.test(this.email)) {
this.phoneemail = "邮箱无效,请重新输入";
return false;
} else {
this.phoneemail = '';
return true
}
},
zhaohui(){
if(this.email == ''){
this.phoneemail = '请输入邮箱地址';
return false;
}else if(!this.dizhi()||!this.tupian()){
return
}
var that = this
var item = {
"email": SG_sm4encrypt(this.email, 'N200y834yEhD5gX5'),
"simpleCaptcha": this.simpleCaptcha
}
this.$http.post(process.env.VUE_APP_API_HOST+ '/user/password/email', item).then(function (res) {
if (res.data.result == '0') {
that.isShow = true
that.shos2 = true
that.settime(5)
that.simpleCaptcha = "";
that.email = "";
}else if (res.data.result == -1) {
that.gengxin()
if(res.data.data.code=='PES_004'){
that.phoneemail = res.data.data.message
}
if(res.data.data.code=='PES_011'){
that.neirongs = res.data.data.message
}
}
})
},
emails(){
this.shos1 = false;
}
},
mounted(){
var isIE9 = navigator.userAgent.match(/MSIE 9.0/) != null;
if(isIE9) {
var firstOne = document.getElementById('firstOne')
var inputs = firstOne.getElementsByClassName("textAll");
for(var i = 0; i < inputs.length; i++) {
inputs[i].index = i;
var text = inputs[i].getAttribute('placeholder');
if(inputs[i].type === 'text' && text){
var text = inputs[i].getAttribute('placeholder');
var defaultValue = inputs[i].defaultValue;
if(defaultValue == '') {
inputs[i].value = text
}
inputs[i].onfocus = function() {
var aa = this.index;
var text = inputs[aa].getAttribute('placeholder');
if(inputs[aa].value == text) {
inputs[aa].value = ''
}
};
inputs[i].onblur = function() {
var aa = this.index
var text = inputs[aa].getAttribute('placeholder');
if(inputs[aa].value == '') {
this.value = text
}
}
};
}
}
}
}
</script>
<style type="text/css" scoped>
.RememberPassword {
width: 100%;
}
.show2 {
color: red;
font-size: 14px;
font-weight: 200;
width: 200px;
margin: 0;
width: 100%;
position: absolute;
top: 330px;
left: 0px;
cursor: pointer;
text-align: center;
text-decoration: underline;
}
.RememberPassword-div {
width: 1200px;
height: 92px;
margin: 0 auto;
}
.RememberPassword-img {
float: left;
width: 344px;
height: 65px;
margin-top: 1%;
}
.RememberPassword-img img {
height: 100%;
}
.RememberPassword-background-image {
width: 100%;
height: 600px;
/* background: url(img/login.png) no-repeat; */
background-size: 100% 100%;
}
.p1 {
position: absolute;
top: 60px;
height: 10px;
left: -70px;
color: red;
font-size: 13px;
font-weight: 200;
}
.p2 {
position: absolute;
top: 164px;
left: 72px;
color: red;
font-size: 13px;
font-weight: 200;
}
.RememberPassword-right {
position: relative;
width: 435px;
height: 358px;
box-sizing: border-box;
background: #fff;
border-radius: 5px;
position: absolute;
top: 220px;
right: 120px;
padding: 22px 55px 0 69px;
overflow: hidden;
}
.RememberPassword-right .RememberPassword-right-first {
float: right;
font-size: 14px;
color: #009788;
cursor: pointer;
}
.RememberPassword-right-second {
width: 306px;
height: 32px;
margin-top: 42px;
}
.RememberPassword-right-second input {
width: 100%;
height: 100%;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border: 1px solid rgba(222, 222, 222, 1);
}
.RememberPassword-right-three {
width: 306px;
height: 32px;
margin-top: 30px;
overflow: hidden;
}
.RememberPassword-right-three input {
width: 155px;
height: 32px;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border: 1px solid rgba(222, 222, 222, 1);
float: left;
}
.RememberPassword-right-three img {
height: 30px;
margin-left: 10px;
float: left;
}
.RememberPassword-right-four {
width: 306px;
height: 40px;
text-align: center;
margin-top: 31px;
}
.RememberPassword-right-four button {
width: 140px;
height: 40px;
background-color: rgba(0, 150, 136, 1);
border: none;
border-radius: 4px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.RememberPassword-right-five {
width: 306px;
text-align: center;
color: #009688;
font-size: 14px;
margin-top: 20px;
cursor: pointer;
}
.RememberPassword-right-six {
color: #FF0000;
width: 306px;
font-size: 14px;
margin-top: 25px;
text-align: center;
}
input::-webkit-input-placeholder{
color: #B4BCCF;
}
</style>
2、手机找回账号
src\views\myCenter\accountManagement\loginRegister\PhonenumberPassword.vue
<template>
<div class="PhonenumberPassword">
<div class="PhonenumberPassword-div">
<div class="PhonenumberPassword-img">
<img src="img/logo.png"/>
</div>
</div>
<div class="PhonenumberPassword-background-image"></div>
<div class="PhonenumberPassword-right" id="firstOne">
<p class="PhonenumberPassword-right-first" @click="emils()">通过邮箱找回密码 <img src="img/u79.png" alt="" valign="middle"></p>
<p class="PhonenumberPassword-right-second" >
<input type="text" id="pho" class="textAll" maxlength="11" @change="sub" placeholder="请输入注册时使用的手机号码">
</p>
<p style="position: absolute;top: 96px;height: 10px;left: 70px;color: red;font-size: 12px;font-weight: 200;">{{inf}}</p>
<p class="PhonenumberPassword-right-three">
<input type="text" @change="tupian()" class="textAll" placeholder="验证码"><img :src="imgCode" valign="middle" @click="gengxin()">
</p>
<p style="font-size: 12px;position: absolute;color: red;">{{neirongs}}</p>
<p class="PhonenumberPassword-right-six">
<input type="text" maxlength="6" class="textAll" @change="shouji()" placeholder="请输入短信验证码"><button class="iphoneBoundBtn" @click="phones()">获取手机验证码</button>
</p>
<p class="p2">{{messages}}</p>
<p class="PhonenumberPassword-right-seven">
<input type="password" @change="pwds()" class="textPass" id="pwd1" placeholder="请输入新的登录密码">
</p>
<p style="position: absolute;font-size: 12px;color: red">{{pwd1infon}}</p>
<p class="PhonenumberPassword-right-eight">
<input type="password" id="pwd2" @change="pwd()" class="textPass" placeholder="请再次输入新的登录密码">
</p>
<p style="position: absolute;font-size: 12px;color: red">{{pwd2infons}}</p>
<p class="PhonenumberPassword-right-four"><button @click="resta()">找回密码</button></p>
<p class="PhonenumberPassword-right-five" @click="logins()">转到登录界面？</p>
</div>
</div>
</template>
<script>
export default {
data () {
return {
imgCode: "",
phone: '',
simpleCaptcha:"",
verificationCode:'',
newCertificate:"",
shows:"",
neirongs:'',
inf:'',
messages:"",
showss:false,
pwd1infon:"",
pwd2infons:''
}
},
methods: {
pwd(){
var pwd1 = document.getElementById("pwd1").value;
var pwd2 = document.getElementById("pwd2").value;
if(pwd2==''){
this.pwd2infons="请再次输入密码";
return false;
}
if(pwd1 == pwd2) {
this.pwd2infons="";
return true;
} else {
this.pwd2infons="两次输入的密码不一致";
return false;
}
},
pwds(){
var firstOne = document.getElementById('firstOne')
this.newCertificate = firstOne.getElementsByClassName("textPass")[0].value;
var mysh=/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(?=([!-~]+)[^a-zA-Z0-9])/g;
if(this.newCertificate==''){
this.pwd1infon = '请输入密码'
return false;
}else if(!mysh.test(this.newCertificate)){
this.pwd1infon = '必须包含大小写字母、数字、特殊字符,长度为8-20';
return false;
}else if(this.newCertificate.length < 8 || this.newCertificate.length > 20){
this.pwd1infon = '必须包含大小写字母、数字、特殊字符,长度为8-20';
return false;
}else if(this.phone == this.newCertificate){
this.pwd1infon = '用户名密码相同，请重新填写';
return false;
}else if(this.newCertificate.indexOf(this.phone) != '-1'){
this.pwd1infon = '密码中含有用户名，请重新填写';
return false;
}else{
var pwd = this.newCertificate
var key = generateSM4Key()
var cipherText = SM4Encrypt(pwd, key);
var cipherKey = SG_sm2Encrypt(key, "045305e570ba7c50795aadf945354eb1396f84cb22ec788d81e7bd1cd6b51c9e53680c942b174050f9b3614a658a790939a5921c0920bacf6a3070e007bf217d70");
this.enPwd = cipherKey + ',' + cipherText;
this.pwd1infon = '';
return true;
}
},
settime(val,countdown) {
var num = Object.freeze({time:countdown.time});
var stop = setInterval(function () {
if (num.time == 0) {
val.removeAttribute("disabled");
val.innerHTML = "获取手机验证码";
clearInterval(stop);
} else {
val.setAttribute("disabled", true);
val.innerHTML = "重新发送(" + num.time + "s)";
var sun = num.time;
sun--;
num = Object.freeze({time:sun});
}
}, 1000)
},
emils(){
this.$router.push({path: '/RememberPassword'})
},
logins(){
this.$router.push({path: '/login'})
},
shouji(){
var firstOne = document.getElementById('firstOne')
this.verificationCode = firstOne.getElementsByClassName("textAll")[2].value;
if(this.verificationCode==''){
this.messages = '请输入手机验证码'
return false;
}else {
this.messages = ''
return true;
}
},
sub(){
var firstOne = document.getElementById('firstOne')
this.phone = firstOne.getElementsByClassName("textAll")[0].value;
var mys = /^((1[3][0-9])|(14[0,1,4,5,6,7,8,9])|(15[0,1,2,3,5,6,7,8,9])|(16[5,6,7])|(17[0,1,3,5,6,7,8])|(18[0-9])|(19[1,8,9]))\d{8}$/;
if(this.phone==''){
this.inf = '请输入手机号';
return false;
}else if(!mys.test(this.phone)){
this.inf = '手机号无效';
return false;
}else {
this.inf = '';
return true;
}
},
tupian(){
var firstOne = document.getElementById('firstOne')
this.simpleCaptcha = firstOne.getElementsByClassName("textAll")[1].value;
if(this.simpleCaptcha==''){
this.neirongs = '请输入图片验证码'
return false;
}else{
this.neirongs = ''
return true;
}
},
gengxin() {
this.imgCode = process.env.VUE_APP_API_HOST+'/login/captcha?'+ Math.random();
},
phones() {
var items = {
"phone": this.encrypt.dataEncrypt(this.phone),
};
var that = this;
this.$http.post(process.env.VUE_APP_API_HOST+ '/login/SMSVerificate',items).then(function (res) {
if(res.data.result == 0){
var iphoneBoundBtn = document.getElementsByClassName("iphoneBoundBtn")[0];
that.settime(iphoneBoundBtn, Object.freeze({time: 60}));
}else {
that.messages = res.data.hint
}
})
},
resta(){
if(this.phone == ''){
this.inf = '请输入手机号';
return false;
}else if(!this.sub()||!this.tupian()||!this.shouji()||!this.pwds()||!this.pwd()) {
return;
}
var item ={
"phone":this.encrypt.dataEncrypt(this.phone),
"simpleCaptcha":this.simpleCaptcha,
'verificationCode': this.verificationCode,
'newCertificate': this.enPwd,
}
var that = this;
this.$http.post(process.env.VUE_APP_API_HOST+'/user/password/phone',item).then(function (res) {
console.log(res)
if(res.data.result =='0'){
that.$router.push("/login")
}else if(res.data.result==-1){
that.gengxin()
if(res.data.data.code =="PES_011"){
that.neirongs = res.data.data.message
}else if(res.data.data.code =="PES_203"){
that.messages = res.data.data.message
}else if(res.data.data.code =="PES_202"){
that.messages = res.data.data.message
}else if(res.data.data.code =="PES_003"){
that.inf = res.data.data.message
}else if(res.data.data.code =="PES_094"){
that.pwd2infons = res.data.data.message
}else if(res.data.data.code =="PES_514"){
that.messages = res.data.data.message
}else if(res.data.data.code =="ERRCODE_002"){
that.neirongs = res.data.data.message
}else {
that.pwd2infons = res.data.data.message
}
}
})
}
},
created(){
this.gengxin()
},
mounted() {
var isIE9 = navigator.userAgent.match(/MSIE 9.0/) != null;
if(isIE9) {
var firstOne = document.getElementById('firstOne')
var inputs = firstOne.getElementsByClassName("textAll");
var inputPass = firstOne.getElementsByClassName("textPass");
for(var i = 0; i < inputs.length; i++) {
inputs[i].index = i;
var text = inputs[i].getAttribute('placeholder');
if(inputs[i].type === 'text' && text){
var text = inputs[i].getAttribute('placeholder');
var defaultValue = inputs[i].defaultValue;
if(defaultValue == '') {
inputs[i].value = text
}
inputs[i].onfocus = function() {
var aa = this.index;
var text = inputs[aa].getAttribute('placeholder');
if(inputs[aa].value == text) {
inputs[aa].value = ''
}
};
inputs[i].onblur = function() {
var aa = this.index
var text = inputs[aa].getAttribute('placeholder');
if(inputs[aa].value == '') {
this.value = text
}
}
};
}
for(var j = 0; j < inputPass.length; j++){
inputPass[j].index = j;
if(inputPass[j].type === 'password'){
if(inputPass[j].type == 'password'){
inputPass[j].type = 'text'
}
var text = inputPass[j].getAttribute('placeholder'),
defaultValue = inputPass[j].defaultValue;
if(defaultValue == '') {
inputPass[j].value = text
}
inputPass[j].onfocus = function() {
var aa = this.index
var text = inputPass[aa].getAttribute('placeholder');
if(inputPass[aa].value == text) {
inputPass[aa].value = ''
}
if(inputPass[aa].type == 'text'){
inputPass[aa].type = 'password'
}
};
inputPass[j].onblur = function() {
var aa = this.index
if(this.value == ''){
if(inputPass[aa].type == 'password'){
inputPass[aa].type = 'text'
}
}
var text = inputPass[aa].getAttribute('placeholder');
if(inputPass[aa].value == '') {
inputPass[aa].value = text
}
}
};
}
}
}
}
</script>
<style type="text/css" scoped>
.PhonenumberPassword {
width: 100%;
}
.p2{
position: absolute;
top: 200px;
left:70px;
color: red;
font-size: 13px;
font-weight:200;
}
.p1{
position: absolute;
top: 56px;
height: 10px;
left:-92px;
color: red;
font-size: 13px;
font-weight:200;
}
.PhonenumberPassword-div {
width: 1200px;
height: 92px;
margin: 0 auto;
}
.PhonenumberPassword-img {
float: left;
width: 344px;
height: 65px;
margin-top: 1%;
}
.PhonenumberPassword-img img{
height: 100%;
}
.PhonenumberPassword-background-image {
width: 100%;
height: 600px;
/* background: url(img/login.png) no-repeat; */
background-size: 100% 100%;
}
.PhonenumberPassword-right{
width: 435px;
height: 455px;
box-sizing: border-box;
background: #fff;
border-radius: 5px;
position: absolute;
top: 158px;
right: 120px;
padding: 22px 55px 0 69px;
overflow: hidden;
}
.PhonenumberPassword-right .PhonenumberPassword-right-first{
float: right;
font-size: 14px;
color: #009788;
cursor: pointer;
}
.PhonenumberPassword-right-second {
width: 306px;
height: 32px;
margin-top: 42px;
}
.PhonenumberPassword-right-second input{
width: 100%;
height: 100%;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border:1px solid rgba(222, 222, 222, 1);
}
.PhonenumberPassword-right-three{
width: 306px;
height: 32px;
margin-top: 20px;
overflow: hidden;
}
.PhonenumberPassword-right-three input{
width: 155px;
height: 32px;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border:1px solid rgba(222, 222, 222, 1);
float: left;
}
.PhonenumberPassword-right-three img{
height: 30px;
width: 102px;
margin-left: 10px;
}
.PhonenumberPassword-right-four{
width: 306px;
height: 40px;
text-align: center;
margin-top: 40px;
}
.PhonenumberPassword-right-four button{
width: 140px;
height: 40px;
background-color: rgba(0, 150, 136, 1);
border: none;
border-radius: 4px;
font-size: 14px;
color: #fff;
cursor: pointer;
}
.PhonenumberPassword-right-five{
width: 306px;
text-align: center;
color: #009688;
font-size: 14px;
margin-top: 20px;
cursor: pointer;
}
.PhonenumberPassword-right-six{
width: 306px;
height: 40px;
margin-top: 20px;
}
.PhonenumberPassword-right-six input {
width: 155px;
height: 32px;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border:1px solid rgba(222, 222, 222, 1);
}
.PhonenumberPassword-right-six button {
width: 103px;
height: 32px;
border-radius: 4px;
box-sizing: border-box;
background-color: rgba(242, 242, 242, 1);
border:1px solid rgba(228, 228, 228, 1);
color: #009688;
font-size: 12px;
margin-left: 10px;
cursor: pointer;
}
.PhonenumberPassword-right-seven {
width: 306px;
height: 32px;
margin-top: 14px;
}
.PhonenumberPassword-right-seven input{
width: 100%;
height: 100%;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border:1px solid rgba(222, 222, 222, 1);
}
.PhonenumberPassword-right-eight {
width: 306px;
height: 32px;
margin-top: 20px;
}
.PhonenumberPassword-right-eight input{
width: 100%;
height: 100%;
border-radius: 4px;
padding-left: 10px;
box-sizing: border-box;
border:1px solid rgba(222, 222, 222, 1);
}
input::-webkit-input-placeholder{
color: #B4BCCC;
}
</style>
3、路由
src\router\index.ts
// // 邮箱找回
{
path: '/RememberPassword',
name: 'RememberPassword',
component: () => import('@/views/myCenter/accountManagement/loginRegister/RememberPassword.vue')
},
// 手机号找回
{
path: '/PhonenumberPassword',
name: 'PhonenumberPassword',
component: () => import('@/views/myCenter/accountManagement/loginRegister/PhonenumberPassword.vue')
},
2330
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
