YangHuCost/web/users/js/login.js

/**
 * 登录相关js
 *
 * @author CaiAoLin
 * @date 2017/6/8
 * @version
 */
$(document).ready(function () {
    let referer = scUrlUtil.GetQueryString('referer');

    // 载入时先获取相关参数
    $.ajax({
        url: '/captcha',
        type: 'get',
        data: '',
        timeout: 5000,
        error: function() {
            $("#captcha-box").html('验证码加载失败');
        },
        beforeSend: function() {
            $("#captcha-box").html('正在加载验证码');
        },
        success: function(response) {
            $("#captcha-box").html('');
            if (response.success === 0) {
                alert('验证码初始化失败!');
                return false;
            }

            initGeetest({
                // 以下配置参数来自服务端 SDK
                gt: response.gt,
                challenge: response.challenge,
                offline: !response.success,
                new_captcha: response.new_captcha,
                width: '100%'
            }, handler);
        }
    });

    const handler = function(captchaObj) {
        captchaObj.appendTo('#captcha-box');
        captchaObj.onSuccess(function () {
            $(".btn-area").slideDown("fast");
            $('#login').click();
            captchaObj.getValidate();
        });

        $("#login").click(function () {
            if (!valid()) {
                return false;
            }
            let account = $("#inputEmail").val();
            let pw = $("#inputPassword").val();

            // 判断输入的邮箱/手机是否格式正确
            if(/^1[3456789]\d{9}$/.test(account) || /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(account)) {
                // 先判断是否是专业版用户,是的话弹出短信验证
                $.ajax({
                    url: '/accountIsPro',
                    type: 'post',
                    async: true,
                    data: {"account": account, "pw": pw},
                    success: function (response) {
                        if (response.error === 0) {
                            const ispro = response.result;
                            if (!ispro) {
                                login(captchaObj);
                            } else {
                                $('#phonepass').modal('show');
                                $('#proMobile').val(response.data);
                                $('#pro_mobile').text(response.data.substr(0, 3) + '****' + response.data.substr(7, 11));
                            }
                        } else if(response.error === 2) {
                            $('#check_ssoId').val(response.ssoId);
                            $('#phone').modal('show');
                        } else {
                            let msg = response.msg !== undefined ? response.msg : '未知错误';
                            showError(msg, $("input"));
                        }
                    }
                });
            } else {
                $('#emailHelp').text('您输入的 邮箱/手机 格式不对');
            }
        });

        $('#loginPro').click(function () {
            if ($('#smsCode').val() === '') {
                showValidError('请输入验证码',$('#smsCode'));
            } else {
                login(captchaObj);
            }
        });

        $('#check-code').click(function () {
            const mobile = $("#mobile").val();
            const ssoId = $("#check_ssoId").val();
            const code = $("#code").val();
            if(!validMobile(mobile)) {
                return false;
            }
            if(ssoId === undefined || ssoId === '') {
                showValidError('账号有误!', $('#code'));
                return false;
            }
            if($.trim(code) === '') {
                showValidError('验证码不能为空!', $('#code'));
                return false;
            }
            $.ajax({
                url: '/sms/mobile',
                type: 'post',
                data: {ssoId: ssoId, mobile: mobile, code: code},
                error: function() {
                    showValidError('接口出错!',$('#code'));
                },
                beforeSend: function() {
                },
                success: function(response) {
                    if (response.err === 0) {
                        $("#login").click();
                        $('#phone').modal('hide');
                    } else {
                        showValidError(response.msg,$('#code'));
                    }
                }
            })
        });
    };

    $("input").blur(function () {
        cleanError();
        cleanValidError($(this));
    });

    $('#inputEmail').blur(function () {
        let account = $("#inputEmail").val();
        if(!/^1[3456789]\d{9}$/.test(account) && !/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(account)) {
            $('#emailHelp').text('您输入的 邮箱/手机 格式不对');
        }
    });

    $(".form-control").on('input', function () {
        $('#hint').html(' ');
    });

    $("#get-code").click(function() {
        const mobile = $("#mobile").val();
        if(!validMobile(mobile)){
            return false;
        }
        const btn = $(this);
        if(!btn.hasClass('disabled')){
            $.ajax({
                url: '/sms/code',
                type: 'post',
                data: { mobile: mobile, type: 1},
                error: function() {
                    showValidError('短信接口出错!',$('#mobile'));
                },
                beforeSend: function() {
                },
                success: function(response) {
                    if (response.err === 0) {
                        codeSuccess(btn);
                    } else {
                        showValidError(response.msg,$('#mobile'));
                    }
                }
            });
        }
    });

    $("#get-code2").click(function() {
        const mobile = $("#proMobile").val();
        if(!validMobile(mobile)){
            return false;
        }
        const btn = $(this);
        if(!btn.hasClass('disabled')){
            $.ajax({
                url: '/sms/code',
                type: 'post',
                data: { mobile: mobile, type: 3},
                error: function() {
                    showValidError('短信接口出错!',$('#smsCode'));
                },
                beforeSend: function() {
                },
                success: function(response) {
                    if (response.err === 0) {
                        codeSuccess(btn);
                    } else {
                        showValidError(response.msg,$('#smsCode'));
                    }
                }
            });
        }
    });
});

function login(captchaObj) {
    let account = $("#inputEmail").val();
    let pw = $("#inputPassword").val();
    let geetest_challenge = $('input[name="geetest_challenge"]').val();
    let geetest_validate = $('input[name="geetest_validate"]').val();
    let geetest_seccode = $('input[name="geetest_seccode"]').val();
    let code = $("#smsCode").val();

    $.ajax({
        url: '/login',
        type: 'post',
        data: {
            "account": account,
            "pw": pw,
            "geetest_challenge": geetest_challenge,
            "geetest_validate": geetest_validate,
            "geetest_seccode": geetest_seccode,
            "code": code,
        },
        success: function (response) {
            if (response.error === 0) {
                $('#phonepass').modal('hide');
                const url = response.last_page !== null && response.last_page !== undefined && response.last_page !== '' ?
                    response.last_page : '/pm';
                if (response.login_ask === 0) {
                    location.href = url;
                } else {
                    response.compilation_list = response.compilation_list === undefined || response.compilation_list === '' ?
                        null : JSON.parse(response.compilation_list);
                    if (response.compilation_list === null || response.compilation_list.length <= 0) {
                        location.href = url;
                        return false;
                    }
                    console.log(response.compilation_list);
                    setVersion(response.compilation_list);
                    $('#ver').modal('show');
                }
            } else if(response.error === 2) {
                $('#phonepass').modal('hide');
                captchaObj.reset();
                $('#check_ssoId').val(response.ssoId);
                $('#phone').modal('show');
            } else if(response.error === 3) {
                showValidError(response.msg,$('#smsCode'));
            } else {
                $('#phonepass').modal('hide');
                let msg = response.msg !== undefined ? response.msg : '未知错误';
                showError(msg, $("input"));
                captchaObj.reset();
            }
        },
        error: function (result) {
            showError('内部程序错误', null);
        }
    });
}

/**
 * 获取成功后的操作
 *
 * @param {Object} btn - 点击的按钮
 * @return {void}
 */
function codeSuccess(btn) {
    let counter = 60;
    btn.removeClass('btn-primary').addClass('btn-outline-secondary disabled').text(counter + '秒 重新获取');
    btn.parents().siblings('div').children('input').removeAttr('readonly');

    const countDown = setInterval(function() {
        const countString = counter - 1 <= 0 ? '' : ' ' + (counter - 1) + '秒 ';
        // 倒数结束后
        if (countString === '') {
            clearInterval(countDown);
            btn.removeClass('btn-outline-secondary disabled').addClass('btn-primary').text('获取验证码');
        }
        const text = countString + '重新获取';
        btn.text(text);
        counter -= 1;
    }, 1000);
}

/**
 * 验证手机号是否正确
 *
 * @return {boolean}
 */
function validMobile(mobile) {
    let result = true;
    if($.trim(mobile) === ''){
        showValidError('手机号不能为空!',$('#mobile'));
        return false;
    }
    let mobileValid =  /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1})|(14[0-9]{1}))+\d{8})$/;
    if(!mobileValid.test(mobile)){
        showValidError('手机号码格式有误!',$('#mobile'));
        return false;
    }
    return result;
}

/**
 * 提示验证信息错误
 *
 * @param {string} msg
 * @param {object} element
 * @return {void}
 */
function showValidError(msg, element) {
    if (element !== null) {
        element.addClass('is-invalid');
        element.siblings().text(msg);
    }
}

/**
 * 清除验证信息错误提示
 *
 * @return {void}
 */
function cleanValidError(element) {
    element.removeClass('is-invalid');
    element.siblings().text('');
}

/**
 * 验证数据
 *
 * @return {boolean}
 */
function valid() {
    let result = true;
    let account = $("#inputEmail").val();
    if (account === undefined || account === '') {
        showError('用户名不能为空!', $("#inputEmail"));
        return false;
    }

    let password = $("#inputPassword").val();
    if (password === undefined || password === '') {
        showError('密码不能为空!', $("#inputPassword"));
        return false;
    }

    return result;
}

/**
 * 提示错误
 *
 * @param {string} msg
 * @param {object} element
 * @return {void}
 */
function showError(msg, element) {
    if (element !== null) {
        element.parent().addClass('has-danger');
    }
    $("#message").html(msg);
    $("#error-tips").show("fast");
}

/**
 * 清除错误提示
 *
 * @return {void}
 */
function cleanError() {
    $("input").parent().removeClass('has-danger');
    $("#message").text('');
    $("#error-tips").hide("fast");
}

/**
 * 设置版本信息
 *
 * @param {Object} versionData
 * @return {void}
 */
function setVersion(versionData) {
    let html = '';
    for (let version of versionData) {
        let description = version.description ? version.description : '介绍内容';
        let tmpHtml = '<div class="col-sm-6">' +
            '<div class="card card-block">' +
            '<div class="card-body">' +
            '<h3 class="card-title">'+ version.name +'</h3>' +
            '<p class="card-text">' + description + '</p>' +
            '<a class="btn btn-primary" href="/boot/'+ version._id.toString() +'">开始使用</a>' +
            '</div>' +
            '</div>' +
            '</div>';
        html += tmpHtml;
    }
    $("#version-area").html(html);
}