Skip to content

T
techbook
Commit 3bb5f7a5 authored by zhangyanni's avatar zhangyanni
Browse files
Options

找回密码

parent ef2ab8be
Show whitespace changes
Inline Side-by-side
Showing with 176 additions and 24 deletions
src/views/loginregister/api/api.js
View file @ 3bb5f7a5
......@@ -12,6 +12,16 @@ export default {
return api.fetchLogin("/base/code/sendPhone",Qs.stringify(params));
},
//验证修改密码验证码
getModifyCodeAxios(params){
return api.fetchLogin("/base/code/checkNewPwdCode",Qs.stringify(params));
},
//获取修改密码验证码
getAccountCodeAxios(params){
return api.fetchLogin("/base/code/sendAccount",Qs.stringify(params));
},
//提交手机号注册
postPhoneRegisterAxios(params){
return api.fetchLogin("/base/register/byPhone",Qs.stringify(params));
......@@ -41,4 +51,9 @@ export default {
postEmailCodeLoginAxios(params){
return api.fetchLogin("/base/login/emailByCode",Qs.stringify(params));
},
//修改密码
modifyPassAxios(params){
return api.fetchLogin("/base/emp/updatePwd",Qs.stringify(params));
}
}
\ No newline at end of file
src/views/loginregister/pages/findPasswordCmpt.vue
View file @ 3bb5f7a5
......@@ -3,14 +3,26 @@
<p>找回密码</p>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm"
class="demo-loginForm">
<el-form-item prop="email">
<el-input v-model.trim="ruleForm.email" :placeholder="lang==1?'请输入手机号':'请输入邮箱'" maxlength="36" autocomplete></el-input>
<el-form-item prop="email" v-if="lang==2">
<el-input v-model.trim="ruleForm.email" @input="isTrueEmail" placeholder="请输入邮箱" maxlength="36" autocomplete></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem" required>
<el-input type="text" v-model.trim="ruleForm.code" :placeholder="lang==1?'请输入手机验证码':'请输入邮箱验证码'" style="float: left;"
<el-form-item prop="phone" v-if="lang==1">
<el-input v-model.trim="ruleForm.phone" @input="isTruePhone" placeholder="请输入手机号" maxlength="11" autocomplete></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem" v-if="lang==1">
<el-input type="text" v-model.trim="ruleForm.code" placeholder="请输入手机验证码" style="float: left;"
autocomplete maxlength="6"></el-input>
<span class="getyzcodeBtn" @click="handleGetCode" v-if="showCount">{{codehtml}}</span>
<span class="getdyzcodeBtn" v-if="!showCount">{{count}}s后重发</span>
</el-form-item>
<el-form-item prop="emailCode" class="yzcodeItem" v-if="lang==2">
<el-input type="text" v-model.trim="ruleForm.emailCode" placeholder="请输入邮箱验证码" style="float: left;"
autocomplete maxlength="6"></el-input>
<!--<span class="getyzcodeBtn">{{codehtml}}</span>-->
<span class="getdyzcodeBtn" @click="handleGetCode">{{codehtml}}</span>
<span class="getyzcodeBtn" @click="handleGetCode" v-if="showCount">{{codehtml}}</span>
<span class="getdyzcodeBtn" v-if="!showCount">{{count}}s后重发</span>
</el-form-item>
<el-form-item v-if="isShowSlider">
<sliderCmpt @sendVerification="getVerification"></sliderCmpt>
</el-form-item>
<el-form-item>
<el-button type="primary" class="loginButton" @click="handleSubmit('ruleForm')">确认
......@@ -26,8 +38,13 @@
<script>
import validate from '../../../common/validate';
import publicFunc from '../../../common/public';
import api from '../api/api';
import sliderCmpt from '../../../components/login/slider';
export default {
name: "findPasswordCmpt",
components:{
sliderCmpt
},
data(){
const that = this;
return{
......@@ -35,29 +52,86 @@
lang:window.localStorage.getItem("lang")=="zh-CN"?1:2,
ruleForm:{
email:"",
code:""
code:"",
phone:"",
emailCode:""
},
validateWhich:null,
rules:{
email: [
{required: false, validator:window.localStorage.getItem("lang")=="zh-CN"?validate.checkMobile:validate.checkEmail, trigger: 'blur'}
],
pass:[
{required: true, validator:validate.checkPassWord, trigger: 'blur'},
{min:6,max: 18, message: '密码长度在 6 到 18 个字符', trigger: 'blur'}
],
code: [{required: true, validator:validate.checkCode, trigger: 'blur'},
{min:4,max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur'}]
}
{min:4,max: 6, message: '长度在 4 到 6 个字符', trigger: 'blur'}],
phone: [
{required: true, validator:validate.checkMobile, trigger: 'blur'},
],
},
bool:false,
errorInfo:"",
isShowSlider:false,
sliderSuccess:false,
timer:null,
showCount:true,
count:''
}
},
methods:{
//手机号是否正确
isTruePhone(data){
var reg = /^1[3456789]\d{9}$/;
if (data === '') {
this.bool = false;
this.errorInfo="请先输入手机号";
} else if (!reg.test(data)) {
this.bool = false;
this.errorInfo="请输入正确格式的手机号";
} else {
this.bool = true;
this.errorInfo="";
}
},
//邮箱是否正确
isTrueEmail(data){
var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
if(data===''){
this.bool = false;
this.errorInfo="请输入邮箱";
}else if(!reg.test(data)){
this.bool = false;
this.errorInfo="请输入正确格式的邮箱";
}else{
this.bool = true;
this.errorInfo="";
}
},
//验证验证码
validateCodeFunc(){
let params ={
account:this.lang==1?this.ruleForm.phone:this.ruleForm.email,
code:this.lang==1?this.ruleForm.code:this.ruleForm.emailCode
},that =this;
api.getModifyCodeAxios(params).then((res)=>{
if(res.code==0){
that.$router.replace("/modifyPasswordCmpt")
}else{
that.$message.error(res.msg)
}
}).catch((err)=>{
that.$message.error(err);
})
// that.$router.replace({path:"/modifyPasswordCmpt",query:{id:1}})
},
//确认
handleSubmit(formName){
const that = this;
this.$refs[formName].validate((valid) => {
if (valid) {
that.$router.replace("/modifyPasswordCmpt")
that.validateCodeFunc();
} else {
return false;
}
......@@ -66,14 +140,69 @@
//获取验证码
handleGetCode(){
let that = this;
if(this.lang==1) {
if(this.ruleForm.phone===""){
this.errorInfo = "请先输入手机号";
this.bool = false;
}
}else{
if(this.ruleForm.email===""){
this.errorInfo = "请先输入邮箱";
this.bool = false;
}
}
if(this.bool) this.isShowSlider = true;
else this.$message.error(that.errorInfo);
},
//注册
handleRegister(){
if(this.lang==1) this.$router.replace("/mobileRegisterCmpt");
else this.$router.replace("/emailRegisterCmpt");
},
getVerification(data){
this.sliderSuccess = data;
this.isShowSlider = data?false:true;
this.getCodeFunc();
},
//获取验证码掉接口
getCodeFunc(){
let params = {
account:this.lang==1?this.ruleForm.phone:this.ruleForm.email
}, that =this;
api.getAccountCodeAxios(params).then((res)=>{
if(res.code==0){
var info = that.lang==1?"手机验证码已发送您的手机，请查阅后输入验证码登录":"验证码已发送您的邮箱，请查阅后输入验证码登录"
that.$message.success(info);
that.timeoutFunc();
}else{
that.$message.error(res.msg)
}
}).catch((err)=>{
that.$message.error(err)
})
},
//倒计时
timeoutFunc(){
const TIME_COUNT = 60;
if (!this.timer) {
this.count = TIME_COUNT;
this.showCount = false;
this.timer = setInterval(() => {
if (this.count > 0 && this.count <= TIME_COUNT) {
this.count--;
} else {
this.showCount = true;
clearInterval(this.timer);
this.timer = null;
}
}, 1000)
}
},
},
mounted(){
}
......
src/views/loginregister/pages/modifyPasswordCmpt.vue
View file @ 3bb5f7a5
......@@ -23,6 +23,7 @@
<script>
import validate from '../../../common/validate';
import publicFunc from '../../../common/public';
import api from '../api/api';
export default {
name: "modifyPasswordCmpt",
data(){
......@@ -50,7 +51,7 @@
const that = this;
this.$refs[formName].validate((valid) => {
if (valid) {
that.$router.replace("/passSuccessCmpt")
that.submitPwdFunc();
} else {
return false;
}
......@@ -68,14 +69,20 @@
}
},
//获取验证码
handleGetCode(){
},
//注册
handleRegister(){
//提交密码
submitPwdFunc(){
let params = {
newPwd:this.ruleForm.pass
},that = this;
api.modifyPassAxios(params).then((res)=>{
if(res.code==0){
that.$router.replace("/passSuccessCmpt")
}else{
that.$message.error(res.msg);
}
}).catch((err)=>{
that.$message.error(err);
})
}
},
mounted(){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment