HM21St_Page_Manager/src/views/login.vue

<template>
  <div class="login">
    <div class="login-left">
        <img src="../assets/login-logo.png" />
    </div>
    <div class="login-container">
        <div class="login-container-inner">
            <h2 class="title-big">登录</h2>
            <p class="title-name">欢迎来到二十一世纪英语智慧阅读平台</p>
            <div class="tabs-box">
                <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">验证码登录</a>
                <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">账号密码登录</a>
            </div>
            <el-form label-position="top" label-width="80px" ref="loginPwdForm" :model="loginPwdForm" class="form" :hide-required-asterisk="true" :rules="rulesPassword" v-show="tabsIndex===0">
                <el-form-item label="用户名/邮箱" prop="userName">
                    <el-input v-model="loginPwdForm.userName" autocomplete="off" placeholder="用户名/邮箱" @blur="handleTrim('loginPwdForm','userName')" maxlength="100">
                    </el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginPwdForm.password" :type="passwordFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('loginPwdForm','password')" maxlength="20">
                        <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('passwordFlag')" v-if="passwordFlag"></i>
                        <i slot="suffix" class="show-icon" @click="changeIcon('passwordFlag')" v-else>
                            <svg-icon icon-class="eye-invisible"></svg-icon>
                        </i>
                    </el-input>
                </el-form-item>
                <el-form-item prop="userAgreeCheck" class="userAgree-box">
                    <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
                        <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
                    </el-checkbox-group>
                    <a class="forgotPwd">忘记密码？</a>
                </el-form-item>
                <el-form-item class="btn-box">
                    <el-button type="primary" @click="onSubmitPassword('loginPwdForm')" size="small" :loading="loading">登录</el-button>
                    <el-button @click="onCancel('loginPwdForm')" size="small">取消</el-button>
                </el-form-item>
            </el-form>
            <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-show="tabsIndex===1">
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" maxlength="20">
                        <template slot="prepend">+86</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="code" class="code-box">
                    <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" maxlength="20">
                    </el-input>
                    <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode">
                        {{ verificationCodeShow ? time+'s' : '发送验证码' }}
                    </el-button>
                </el-form-item>
                <el-form-item prop="userAgreeCheck" class="userAgree-box">
                    <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
                        <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
                    </el-checkbox-group>
                    <a class="forgotPwd">忘记密码？</a>
                </el-form-item>
                <el-form-item class="btn-box">
                    <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :loading="loading">登录</el-button>
                    <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </div>
  
</template>

<script>
import { getLogin } from "@/api/ajax";
import { setToken } from "@/utils/auth";
export default {
  name: "Login",
  props: [],
  data() {
    const validatePhone = (rule, value, callback) => {
        if(this.tabsIndex===1){
            if (value === '') {
                callback(new Error('请输入手机号'));
            } else {
                let reg = /^1[3-9]\d{9}$/;
                let result = reg.test(value);
                if (result) {
                    callback();
                } else {
                    callback(new Error('请输入正确的手机号'));
                }
            }
        }
    };
    return {
      tabsIndex:1,
      loginPwdForm:{
        userName:'',
        password:'',
        type:'ADMIN',
        userAgreeCheck: []
      },
      passwordFlag:false,
      rulesPassword:{
            userName:[
                { required: true, message: '请输入账号', trigger: 'blur' }
            ],
            password:[
                { required: true, message: '请输入密码', trigger: 'blur' }
            ],
            userAgreeCheck:[
                { type: 'array', required: true, message: '请阅读并同意《用户协议》', trigger: 'change' }
            ]
        },
        loginCodeForm:{
            phone:'',
            code:'',
            type:'ADMIN',
            userAgreeCheck: []
        },
        rulesCode:{
            phone:[
                { required: true, validator: validatePhone, trigger: 'blur' }
            ],
            code:[
                { required: true, message: '请输入验证码', trigger: 'blur' }
            ],
            userAgreeCheck:[
                { type: 'array', required: true, message: '请阅读并同意《用户协议》', trigger: 'change' }
            ]
        },
        time: 60, //获取验证码的时间
        verificationCodeShow: false, //是否已经获取了验证码
        loading: false,
        timer: null
    };
  },
  watch: {
    
  },
  methods: {
    // 切换tabs
    handleChangeTabs(value){
        this.tabsIndex = value
    },
    changeIcon(flag){
        this[flag] = !this[flag]
    },
    // 查看用户协议
    lookUserAgreement(){
    },
    // 密码登录提交表单
    onSubmitPassword(formName){
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.loading = true
            let MethodName = "/OrgServer/LoginControl/Login";
            let data = null
            if(this.tabsIndex===0){
                data = {
                    user_type:this.loginPwdForm.type,
                    user_name:this.loginPwdForm.userName,
                    password:this.loginPwdForm.password
                }
            }else{
                data = {
                    user_type:this.loginCodeForm.type,
                    user_name:this.loginCodeForm.phone,
                    password:this.loginCodeForm.code,
                    is_dynamic_verification_code_login:"true",
                    dynamic_verification_code_send_type:"SMS"
                }
            }
            getLogin(MethodName, data)
            .then((res) => {
                this.loading = false
                setToken(res);
                this.$router.push({ path: "/EnterSys" });
                window.location.reload()
            })
            .catch(() => {
                this.loading = false
                this.verificationCodeShow = false;
                clearInterval(this.timer);
                this.time = 60;
            });
          } else {
            return false;
          }
        });
        
    },
    // 取消 恢复到修改前状态
    onCancel(formName){
        this.$refs[formName].resetFields();
    },
    // 发送验证码
    sendCode(time,phone,flag,obj){
        let this_ = this;
        if(this_[time] != 60){
            return
        }
        this_.timer = null;
        if (this_.loginCodeForm[phone]) {
            let reg = /^1[3-9]\d{9}$/;
            let result = reg.test(this_.loginCodeForm[phone]);
            if (!result) {
                this_.$message.warning('请输入正确的手机号');
                return
            }
            this_[flag] = true;
            this_.timer = setInterval(() => {
                this_[time]--;
                if (this_[time] == 0) {
                    this_[flag] = false;
                    clearInterval(this_.timer);
                    this_.timer = null;
                    this_[time] = 60;
                }
            }, 1000);
            let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
            let data = {
                send_type: 'SMS',
                phone_or_email: this_.loginCodeForm.phone,
            };
            getLogin(MethodName, data).then((res) => {
            }).catch(()=>{
                this_[flag] = false;
                clearInterval(this_.timer);
                this_.timer = null;
                this_[time] = 60;
            });

        } else {
            this_.$message.warning('请先输入手机号');
        }
    },
    // 去掉前后空格
    handleTrim(form,fild){
        this[form][fild] = this[form][fild].trim()
    }
  },
  mounted() {
    
  },
};
</script>

<style lang="scss" scoped>
.login{
    height: 100vh;
    display: flex;
    width: 100%;
    &-left{
        width: 655px;
        background: url('../assets/login-bg.png') left center no-repeat;
        background-size: 655px 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
            width: 208px;
            padding-top: 32px;
        }
    }
}
.login-container{
    background: #FFFFFF;
    padding: 64px 72px;
    min-height: 100vh;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    &-inner{
        width: 360px;
    }
    .title-big{
        font-weight: 400;
        font-size: 32px;
        line-height: 40px;
        margin: 0;
        color: #1D2129;
    }
    .title-name{
        font-size: 14px;
        line-height: 22px;
        color: #86909C;
        margin: 0 0 40px 0;
    }
    .tabs-box{
        display: flex;
        a{
            font-size: 14px;
            line-height: 22px;
            color: #4E5969;
            border-radius: 100px;
            padding: 5px 16px;
            margin-right: 16px;
            &:hover{
                background: #F2F3F5;
            }
            &.active{
                background: #F2F3F5;
                font-weight: 500;
                color: #165DFF;
            }
        }
    }
    .form{
        margin-top: 40px;
        .show-icon{
            cursor: pointer;
            color: #4E5969;
        }
        .forgotPwd{
            font-size: 14px;
            line-height: 22px;
            color: #165DFF;
        }
    }
}
</style>
<style lang="scss">
.login-container{
    .form{
        .el-form-item__label{
            font-weight: 400;
            font-size: 14px;
            line-height: 22px;
            color: #4E5969;
            padding-bottom: 8px;
        }
        .userAgree-box{
            .el-form-item__content{
                display: flex;
                justify-content: space-between;
                line-height: 22px;
            }
            .el-checkbox-group{
                flex: 1;
                .el-checkbox{
                    color: rgba(0, 0, 0, 0.88);
                    font-weight: 400;
                }
            }
        }
        .btn-box{
            .el-button{
                width: 100%;
            }
            .el-button+.el-button{
                margin-left: 0;
                margin-top: 8px;
            }
        }
        // .el-button--primary{
        //     background: #165DFF;
        //     border-color: #165DFF;
        //     border-radius: 2px;
        //     &:hover{
        //         background: #4080FF;
        //         border-color: #4080FF;
        //     }
        //     &:focus{
        //         background: #0E42D2;
        //         border-color: #0E42D2;
        //     }
        // }
        // .el-button--default{
        //     background: #F2F3F5;
        //     border-radius: 2px;
        //     border: none;
        //     color: #4E5969;
        //     &:hover{
        //         background: #E5E6EB;
        //     }
        //     &:focus{
        //         background: #C9CDD4;
        //     }
        // }
        .code-box{
            .el-form-item__content{
                display: flex;
            }
        }
        .code-input{
            height: 32px;
            .el-input__inner{
                border-radius: 4px 0 0 4px;
            }
        }
        .sendCode{
            border-radius: 0 4px 4px 0;
            margin-top: 1px;
            width: 92px;
            flex-shrink: 0;
        }
        .el-form-item__content,.el-input__icon{
            line-height: 32px;
        }
        .el-input__inner{
            height: 32px;
            color: #1D2129;
            background: #F2F3F5;
            border: none;
        }
        .el-textarea__inner,.el-input-group__prepend{
            color: #1D2129;
        }
        .el-checkbox__input.is-checked+.el-checkbox__label{
            color: #165DFF;
        }
        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
            background: #165DFF;
            border-color: #165DFF;
        }
        .el-input-group__prepend{
            width: 54px;
            height: 32px;
            border: none;
            background: #F2F3F5;
            border-radius: 2px 0px 0px 2px;
            line-height: 32px;
            text-align: center;
            padding: 0;
        }
        .el-input-group--prepend{
            display: flex;
            .el-input__inner{
                margin-left: 8px;
                flex: 1;
            }
        }
    }
}
</style>