1. 忘记密码
自定义页面 路径 /mdiyPage/resetPassword.do对应模版 reset-password.htm
HTML
<div id="app" v-cloak>
<!--表单 - start -->
<template v-if="flag">
<el-form ref="form1" :model="form" :rules="rules" label-position="right" size="large"
label-width="120px">
<el-form-item prop="peoplePhone" label="手机号">
<el-input v-model="form.peoplePhone" placeholder="请输入手机号">
</el-input>
</el-form-item>
<el-form-item label="验证码" prop="rand_code" >
<el-input
v-model="form.rand_code"
:disabled="false"
:readonly="false"
:clearable="true"
placeholder="请输入验证码">
</el-input>
<div >
<img :src="verifCode" @click="code"/>
<div @click="code">
看不清？换一张
</div>
</div>
</el-form-item>
<el-form-item prop="peopleCode" label="短信验证码" >
<el-input v-model="form.peopleCode" placeholder="请输入6位验证码">
</el-input>
<el-button v-text="sendPeopleCodeMsg" :disabled="sendPeopleCodeDisabled" type="info" plain
@click="getPeopleCode"
>
</el-button>
</el-form-item>
<el-form-item label=" " >
<el-button @click="verifierMail" type="primary" :loading="mailLoading">
下一步
</el-button>
</el-form-item>
</el-form>
</template>
<template v-else>
<el-form ref="form2" :model="form" :rules="rules" label-position="right" size="large"
label-width="120px">
<el-form-item prop="newPeoplePassword" label="新密码">
<el-input type="password" v-model="form.newPeoplePassword" placeholder="请输入新密码">
</el-input>
</el-form-item>
<el-form-item prop="rePeoplePassword" label="确认新密码" >
<el-input type="password" v-model="form.rePeoplePassword" placeholder="请再次输入新密码">
</el-input>
</el-form-item>
<el-form-item label="验证码" prop="rand_code">
<el-input
v-model="form.rand_code"
:disabled="false"
:readonly="false"
:clearable="true"
placeholder="请输入验证码">
</el-input>
<div>
<img :src="verifCode" @click="code"/>
<div @click="code" >
看不清？换一张
</div>
</div>
</el-form-item>
<el-form-item label=" " >
<el-button @click="resetPassword" type="primary"
:loading="resetLoading">
确定
</el-button>
</el-form-item>
</el-form>
</template>
<!--表单 - end -->
</div>
JavaScript
<script>
var validatePass = function (rule, value, callback) {
if (value !== app.form.newPeoplePassword) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
var app = new Vue({
el: '#app',
watch: {},
data: {
//重置按钮loading
resetLoading: false,
//下一步（校验手机号）按钮loading
mailLoading: false,
verifCode: ms.base + "/code",
flag: true,
form: {
peoplePhone: "",
newPeoplePassword: "",
rePeoplePassword: "",
peopleCode: "",
rand_code: "",
},
countdown: 0,
sendPeopleCodeDisabled: false,
sendPeopleCodeMsg: "发送验证码",
rules: {
peoplePhone: [{
required: true,
message: '手机号不能为空',
trigger: 'blur'
}, {"pattern": /^1[34578]\d{9}$/, "message": "手机号格式不匹配"}, {
"min": 11,
"max": 11,
"message": "手机号长度必须为11位"
}
],
newPeoplePassword: [{
required: true,
message: '密码不能为空',
trigger: 'blur'
},
{
min: 6,
max: 20,
message: '长度在 6 到 20 个字符',
trigger: 'blur'
}
],
rePeoplePassword: [{
required: true,
message: '密码不能为空',
trigger: 'blur'
},
{
min: 6,
max: 20,
message: '长度在 6 到 20 个字符',
trigger: 'blur'
},
{
validator: validatePass,
trigger: 'blur'
}
],
peopleCode: [
{
required: true,
message: '验证码不能为空',
trigger: 'blur'
},
{
min: 6,
max: 6,
message: '请输入6位验证码',
trigger: 'blur'
},
],
rand_code: [{
required: true,
message: '验证码不能为空',
trigger: 'blur'
},
{
min: 4,
max: 4,
message: '请输入4位验证码',
trigger: 'blur'
},
],
},
},
methods: {
//校验验证码
verifierMail: function () {
var that = this;
that.$refs.form1.validate(function (valid) {
//验证
if (valid) {
ms.http.post('/checkResetPasswordCode.do', {
peopleCode: that.form.peopleCode,
rand_code: that.form.rand_code,
}).then(function (data) {
if (data.result) {
that.flag = false;
that.code();
that.form.rand_code = "";
} else {
that.$notify({
title: '失败',
message: data.msg,
type: 'warning'
});
}
})
}
});
},
//重置密码
resetPassword: function () {
var that = this;
that.$refs.form2.validate(function (valid) {
if (valid) {
that.rssetPwd();
}
});
},
getPeopleCode: function () {
var that = this;
if (that.countdown > 0) {
return;
}
var flag = true;
that.$refs['form1'].validateField(['rand_code', 'peoplePhone'], (Error) => {
if (Error) {
//执行
flag = false;
}
});
if (!flag) {
return;
}
ms.http.post("/isExists.do", {
peoplePhone: that.form.peoplePhone,
}).then(function (data) {
if (!data.result) {
that.$notify({
title: '失败',
message: '该手机号未注册',
type: 'warning'
});
} else {
// 发送手机验证码
ms.http.post('/sendCode.do', {
receive: that.form.peoplePhone,
modelCode: "bindPhone",
type: "sms",
rand_code: that.form.rand_code,
}).then(function (data) {
if (data.result) {
that.$notify({
title: '成功',
message: '验证码已发出，请注意查收！',
type: 'success'
});
that.countdown = 60;
that.countdownSubtract();
that.sendPeopleCodeDisabled = true;
} else {
if (data.msg) {
that.$notify({
title: '失败',
message: data.msg,
type: 'warning'
});
}
}
})
}
});
},
code: function () {
this.verifCode = ms.base + "/code?t=" + (new Date).getTime();
},
rssetPwd: function () {
var that = this;
ms.http.post('/resetPassword.do', {
peopleCode: that.form.peopleCode,
rand_code: that.form.rand_code,
peoplePassword: that.form.newPeoplePassword
}).then(function (data) {
if (data.result) {
that.$notify({
title: '成功',
message: '密码重置成功',
type: 'success'
});
window.location.href = "/mdiyPage/login.do";
} else {
that.$notify({
title: '失败',
message: data.msg,
type: 'warning'
});
}
})
},
countdownSubtract: function () {
this.countdown--;
this.sendPeopleCodeMsg = "重新发送(" + this.countdown + ")";
if (this.countdown == 0) {
this.sendPeopleCodeMsg = "发送验证码";
this.sendPeopleCodeDisabled = false;
return;
}
setTimeout(this.countdownSubtract, 1000);
}
},
created: function () {
this.code();
},
})
</script>