Skip to content

T
techbook
Commit 4fef5893 authored by zhangyanni's avatar zhangyanni
Browse files
Options

邮箱登录

parent b221a697
Hide whitespace changes
Inline Side-by-side
Showing with 140 additions and 24 deletions
src/components/login/emailLoginCmpt.vue
View file @ 4fef5893
......@@ -5,11 +5,11 @@
<el-tab-pane label="密码登录" name="first">
<el-form :model="emailForm" :rules="rulesCode" ref="emailForm"
class="demo-emailForm">
<el-form-item prop="email" required>
<el-input v-model.trim="emailForm.email" placeholder="请输入邮箱地址" autocomplete maxlength="30"></el-input>
<el-form-item prop="email">
<el-input v-model.trim="emailForm.email" placeholder="请输入邮箱地址" autocomplete maxlength="36"></el-input>
</el-form-item>
<el-form-item prop="pass" style="margin-bottom: 10px !important;">
<el-input type="password" v-model.trim="emailForm.pass" placeholder="请输入密码" maxlength="18"
<el-form-item prop="password" style="margin-bottom: 10px !important;">
<el-input type="password" v-model.trim="emailForm.password" placeholder="请输入密码" maxlength="18"
autocomplete></el-input>
</el-form-item>
<el-form-item class="remumberPass">
......@@ -27,18 +27,21 @@
<el-tab-pane label="验证码登录" name="second">
<el-form :model="emailYzCodeForm" :rules="rulesCode" ref="emailYzCodeForm"
class="demo-emailForm">
<el-form-item prop="email" required>
<el-input v-model.trim="emailYzCodeForm.email" placeholder="请输入邮箱地址" autocomplete></el-input>
<el-form-item prop="email">
<el-input v-model.trim="emailYzCodeForm.email" @input="isTrueEmail" placeholder="请输入邮箱地址" autocomplete maxlength="36"></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem" style="margin-bottom: 30px !important;">
<el-input type="text" v-model.trim="emailYzCodeForm.code" placeholder="请输入验证码" style="float: left;" maxlength="6"
autocomplete></el-input>
<!--<span class="getyzcodeBtn">{{codehtml}}</span>-->
<span class="getdyzcodeBtn">{{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 class="remumberPass" style="height: 30px;">-->
<!--<span>收不到验证码?</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="handleLogin(2,'emailYzCodeForm')">登录
</el-button>
......@@ -55,8 +58,13 @@
<script>
import validate from '../../common/validate';
import publicFunc from '../../common/public';
import sliderCmpt from './slider';
import api from '../../views/loginregister/api/api';
export default {
name: "emailLoginCmpt",
components:{
sliderCmpt
},
data() {
return {
activeName: "first",
......@@ -65,7 +73,7 @@
checked:false,
emailForm: {
email: "",
pass: ""
password: ""
},
emailYzCodeForm: {
email: "",
......@@ -75,17 +83,36 @@
email: [
{required: true, validator: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'}]
}
password:[
{required: true, validator:validate.checkPassWord, trigger: 'blur'}],
code: [{required: true, validator:validate.checkEmailCode, trigger: 'blur'}]
},
bool:false,
errorInfo:"",
isShowSlider:false,
sliderSuccess:false,
timer:null,
showCount:true,
count:''
}
},
methods:{
//手机号是否正确
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="";
}
},
//tab切换
handleTab(tab){
if(tab.name==="first") this.$refs["emailYzCodeForm"].resetFields();
......@@ -109,7 +136,7 @@
//判断复选框是否被勾选 勾选则调用配置cookie方法
if (self.checked == true) {
//传入账号名，密码，和保存天数3个参数
publicFunc.setCookie(self.emailForm.mobile, self.emailForm.pass, 7);
publicFunc.setCookie(self.emailForm.mobile, self.emailForm.password, 7);
}else {
console.log("清空Cookie");
//清空Cookie
......@@ -117,16 +144,30 @@
}
},
//提交注册表单
submitLoginFormFunc(data){
let that =this,
params = data==1?that.emailForm:that.emailYzCodeForm,
apiurl = data==1?api.postEmailPassLoginAxios:api.postEmailCodeLoginAxios;
apiurl(params).then((res)=>{
if(res.code==0){
that.$router.replace("/dashboard");
}else{
that.$message.error(res.msg);
}
}).catch((err)=>{
that.$message.error(err);
})
},
//登录
handleLogin(type,formName){
const that =this;
let params;
this.$refs[formName].validate((valid) => {
if (valid) {
if(type==1){ //1密码登录 2验证码登录
that.isCheckedPassword();
}else{
}
if(type==1) that.isCheckedPassword(); //1密码登录 2验证码登录
that.submitLoginFormFunc(type);
} else {
return false;
}
......@@ -143,11 +184,65 @@
if (arr2[0] == 'userName') {
this.emailForm.email = arr2[1]; //保存到保存数据的地方
} else if (arr2[0] == 'userPwd') {
this.emailForm.pass = arr2[1];
this.emailForm.password = arr2[1];
}
}
}
},
getVerification(data){
this.sliderSuccess = data;
this.isShowSlider = data?false:true;
this.getCodeFunc();
},
//获取验证码掉接口
getCodeFunc(){
let params = {
email:this.emailYzCodeForm.email,
valiType:2
}, that =this;
api.getYZEmailCodeAxios(params).then((res)=>{
if(res.code==0){
that.$message.success("验证码已经发至您的邮箱，请查阅后输入验证码登录");
that.timeoutFunc();
}else{
this.$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)
}
},
//获取验证码
handleGetCode(){
let that = this;
if(this.emailYzCodeForm.email===""){
this.errorInfo = "请先输入邮箱";
this.bool = false;
}
if(this.bool) this.isShowSlider = true;
else this.$message.error(that.errorInfo);
},
},
mounted(){
......
src/views/loginregister/api/api.js
View file @ 4fef5893
......@@ -21,4 +21,24 @@ export default {
postEmailRegisterAxios(params){
return api.fetchLogin("/base/register/byEmail",Qs.stringify(params));
},
//提交手机号密码登录
postPhonePassLoginAxios(params){
return api.fetchLogin("/base/login/phoneByPwd",Qs.stringify(params));
},
//提交手机号验证码登录
postPhoneCodeLoginAxios(params){
return api.fetchLogin("/base/login/phoneByCode",Qs.stringify(params));
},
//提交邮箱密码登录
postEmailPassLoginAxios(params){
return api.fetchLogin("/base/login/emailByPwd",Qs.stringify(params));
},
//提交邮箱验证码登录
postEmailCodeLoginAxios(params){
return api.fetchLogin("/base/login/emailByCode",Qs.stringify(params));
},
}
\ No newline at end of file
src/views/loginregister/pages/emailRegisterCmpt.vue
View file @ 4fef5893
......@@ -6,7 +6,7 @@
<el-form :model="registerForm" :rules="rules" ref="registerForm"
class="demo-loginForm">
<el-form-item prop="email">
<el-input v-model.trim="registerForm.email" @input="isTrueEmail" placeholder="请输入邮箱" autocomplete maxlength="30"></el-input>
<el-input v-model.trim="registerForm.email" @input="isTrueEmail" placeholder="请输入邮箱" autocomplete maxlength="36"></el-input>
</el-form-item>
<el-form-item prop="code" class="yzcodeItem">
<el-input type="text" v-model.trim="registerForm.code" placeholder="请输入邮箱验证码" style="float: left;" maxlength="6"
......
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