邮箱登录

src/components/login/emailLoginCmpt.vue

@@ -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

@@ -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

@@ -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"