LoginOrRegister.js 11.2 KB
//*
// 登录注册模块
// */

import Loger from "../Loger";
import Ape from "./Ape";
import $ from "jquery";
import ClassDataProxy from "proxy/ClassDataProxy";
import MessageTypes from "../MessageTypes";

let loger = Loger.getLoger('PC-LoginOrRegister');
class LoginOrRegister extends Ape {
    constructor() {
        super();

        this.isLocalStorage();
        this.addEvent();
        this.init();
    }

    init() {
        $('#usersignA').on('click',this._usersignAHandler.bind(this));//关闭注册界面
        $('#userLoginA').on('click',this._userLoginAHandler.bind(this));//关闭登录界面
        $('#skipLoginBtn').on('click',this._skipLoginBtnHandler.bind(this));//注册跳转登录界面
        $('#nowUserSign').on('click',this._nowUserSignHandler.bind(this));//新用户注册

        $('#signPhone').on('focus',this._signFocusHandler.bind(this));//注册判断手机号
        $('#signMail').on('focus',this._signFocusHandler.bind(this));//注册判断手机号
        $('#signPassWord').on('focus',this._signFocusHandler.bind(this));//注册判断密码
        $('#securityCode').on('focus',this._signFocusHandler.bind(this));//注册判断验证码

        $('#signBtn').on('click',this._signBtnHandler.bind(this));//注册信息提交

        $('#userLoginBtn').on('click',this._loginBtnHandler.bind(this));//登录信息提交

        $('#homeUserLoginBtn').on('click',this._homeUserLoginBtnHandler.bind(this));//首页用户登录
        $('#homeUserLoginBtn').on('mouseenter',this._mouseenterHandler.bind(this));//首页用户登录
        $('#exitBox').on('mouseleave',this._mouseleaveHandler.bind(this));//首页用户登录

        $('#exitBtn').on('click',this._exitBtnHandler.bind(this));//退出登录

        $('body').on('click',function(evt){
            if(!$(evt.target).is('#exitBox')){
                $('#exitBox').hide();
            }
        });
    }

    isLocalStorage(){
        let that = this;
        $(window).on('load',function(){
            if(!window.localStorage.getItem('status')){
                $('#homeUserLoginBtn').text('登录');
            }else{

            }
            if(window.localStorage.getItem('status') == 'true'){
                let userType = window.localStorage.getItem('userType')
                $('#homeUserLoginBtn').text(window.localStorage.getItem('loginName'));

                  //  that._showAdministratorInfo();


            }

        })
    }
    addEvent() {

    }
    //关闭注册界面
    _usersignAHandler(){
        $('#userSignBox').hide();
    }
    //关闭登录界面
    _userLoginAHandler(){
        $('#userLoginBox').hide();
    }
    //注册跳转登录界面
    _skipLoginBtnHandler(){
        $('#userSignBox').hide();
        $('#userLoginBox').show();
    }
    //新用户注册
    _nowUserSignHandler(){
        $('#userLoginBox').hide();
        $('#userSignBox').show();
    }
    //首页用户登录
    _homeUserLoginBtnHandler(){
        if(!window.localStorage.getItem('status')){
            $('#userLoginBox').show();
        }
    }
    _mouseenterHandler(){
        if(window.localStorage.getItem('status') == 'true'){
            $('#exitBox').show();
        }
    }
    _mouseleaveHandler(){
        $('#exitBox').hide();
    }
    _exitBtnHandler(){
        this.clearLocalStorage();
        this.updateInterfaceState();
        this._emit(MessageTypes.LOGIN_OUT);
    }
    clearLocalStorage(){
        window.localStorage.clear();
        ClassDataProxy.userType = ClassDataProxy.USER_TYPE_0;
        ClassDataProxy.loginName ="";
        ClassDataProxy.password =""
        ClassDataProxy.token ="";
        ClassDataProxy.status = false;

    }
    updateInterfaceState(){
        $('#homeUserLoginBtn').text('登录');
        $('#loginName').val('');
        $('#loginPassWord').val('');
        $('#slideshow').show();
        $('#defaultBox').show();
        $('.curriculumBox').show();
        $('#header_list').show();
        $('#header_seek').show();
        $('#androidDownload').show();
        $('#exitBox').hide();
        $('#classManagementBox').hide();
        $('#defaultBtn').addClass('header_listMsgCheck').siblings().removeClass('header_listMsgCheck');
    }

    _signFocusHandler(evt){
        let _ele = $(evt.target);
        if(_ele.css('color') != 'rgb(0, 0, 0)'){
            _ele.val('')
                .css('color','#000');
        }
    }
    _signName(_name){
        if(!_name.value){
            _name.focus();
            return false;
        }
    }
    _signPhone(phone){
        let reg = "^1[3|4|5|8][0-9]\\d{8}$";
        let re = new RegExp(reg);
        if(!phone.value){
            phone.focus();
            return false;
        }
        if (re.test(phone.value)) {
            $('#signPhone').css('color','#000');
        } else {
            $('#signPhone').val('手机号输入不合法')
                .css('color','#d95136');
            phone.focus();
            return false;
        }
    }
    _signMail(mail){
        let filter  = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
        if(!mail.value){
            mail.focus();
            return false;
        }
        if (filter.test(mail.value)){
            $('#signMail').css('color','#000');
        }
        else {
            $('#signMail').val('电子邮箱输入不合法')
                .css('color','#d95136');
            mail.focus();
            return false;
        }
    }
    //判断密码
    _signPassWord(_passWord){
        let reg = /^[0-9a-zA-Z]{8,12}$/;//密码正则
        if(!_passWord.value){
            _passWord.focus();
            return false;
        }
        if(reg.test(_passWord.value)){
            $('#signPassWord').css('color','#000');
        }else{
            $('#signPassWord').val('密码长度不够或太长')
                .css('color','#d95136');
            _passWord.focus();
            return false;
        }
    }
    //判断验证码
    _securityCode(securityCode){
        let reg= /^\d{4}$/;//验证码正则
        if(!securityCode.value){
            securityCode.focus();
            return false;
        }
        if(reg.test(securityCode.value)){
            $('#securityCode').css('color','#000');
        }else{
            $('#securityCode').val('验证码不正确')
                .css('color','#d95136');
            securityCode.focus();
            return false;
        }
    }
    //注册信息提交
    _signBtnHandler(){
        let _name = document.getElementById("signName");//用户名
        let phone = document.getElementById("signPhone");//手机号
        let mail = document.getElementById("signMail");//邮箱
        let _passWord = document.getElementById("signPassWord");//密码
        let securityCode = document.getElementById("securityCode");//验证码
        let permitSign = document.getElementById("permitSign");//是否同意
        if(_name.value && phone.value && mail.value && _passWord.value && securityCode.value && $(permitSign).is(':checked')){
            let signInfo = {
                "loginName": _name.value, // 登录名
                "password": _passWord.value,  //登录密码
                "companyName":null,  //公司名字
                "userName":_name.value, //用户名
                "userRole":4, // 用户角色 0超级管理员,1管理员,2监课,3老师,4学生
                "userEmail":mail.value, // 用户邮箱
                "userMobile":parseInt(phone.value), // 用户手机号
                "content":"2017-09-01", // 用户简介
                "groupId":1, //用户组id
                "IDcard":123123
            }
            let that = this;
            let _url = ClassDataProxy.locationProtocol + ClassDataProxy.locationProt + '/users/addUser';
            $.ajax({
                type: "POST",
                url: _url,
                data: signInfo,
                timeout:5000,
                success:function(_data){
                    console.log(_data,'成功')
                    //注册成功后 跳转登录界面
                    that._successSign(_data);
                },
                error:function(error){
                    console.log(error,'失败')
                }
            })
        }else{
            this._securityCode(securityCode);//判断验证码
            this._signPassWord(_passWord);//判断密码
            this._signMail(mail);//判断邮箱
            this._signPhone(phone);//判断手机号
            this._signName(_name);//判断用户名
        }
    }
    //注册成功后 跳转登录界面
    _successSign(_data){
        if(_data.code == 200){
            this._skipLoginBtnHandler();
        }
    }
    _loginName(_name){
        if(_name.value){
            _name.focus();
            return false;
        }
    }
    _loginPassWord(_passWord){
        if(_passWord.value){
            _passWord.focus();
            return false;
        }
    }
    //登录信息提交
    _loginBtnHandler(){
        let _name = document.getElementById("loginName");//用户名
        let _passWord = document.getElementById("loginPassWord");//手机号
        if(_name.value && _passWord.value){
            let signInfo = {
                "loginName": _name.value, // 登录名
                "password": _passWord.value,  //登录密码
                "code":"quwerdf"
            }
            let that = this;
            let _url = ClassDataProxy.locationProtocol + ClassDataProxy.locationProt + '/users/login';
            $.ajax({
                type: "POST",
                url: _url,
                data: signInfo,
                timeout:5000,
                success:function(_data){
                    loger.log('登录返回数据',_data)
                    if(_data || _data.code == 200){
                        ClassDataProxy.userType = ClassDataProxy.USER_TYPE_1;
                        //ClassDataProxy.userType= _data.returnData.data.userType;
                        ClassDataProxy.loginName =_name.value;
                        ClassDataProxy.password = _passWord.value;
                        ClassDataProxy.token =_data.returnData.data.token
                        ClassDataProxy.status = true;


                        window.localStorage.setItem("loginName",ClassDataProxy.loginName);
                        window.localStorage.setItem("password", ClassDataProxy.password );
                        window.localStorage.setItem("userType",  ClassDataProxy.userType);
                        window.localStorage.setItem("token", ClassDataProxy.token );
                        window.localStorage.setItem('status',  ClassDataProxy.status);

                        that.successLogin();
                    }
                },
                error:function(error){
                    debugger;
                    console.log(error,'失败')
                }
            })
        }else{
            this._loginName(_name);//登录判断用户名
            this._loginPassWord(_passWord);//登录判断密码
        }
    }
    //用户成功登录
    successLogin(_data){
        //登录成功后显示用户名字
        $('#homeUserLoginBtn').text( ClassDataProxy.loginName);
        this._userLoginAHandler();
        this._emit(MessageTypes.LOGIN_IN,{userType: ClassDataProxy.userType});
    }

}
export default LoginOrRegister;