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;
        }
        if ($('#changeLogin').attr('data-status') === 'user') {
            let account = $("#inputEmail").val();
            if(/^1[3456789]\d{9}$/.test(account) || /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(account)) {
                    login();
            } else {
                $('#emailHelp').text('您输入的 邮箱/手机 格式不对');
            }
        } else {
            let account = $("#mobileLogin").val();
            if(/^1[3456789]\d{9}$/.test(account)) {
                    login();
            } else {
                $('#phoneHelp').text('您输入的 手机 格式不对');
            }
        }
        // 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'));
                    }
                }
            });
        }
    });

    // 切换登录方式
    $('#changeLogin').click(function () {
        if ($(this).attr('data-status') === 'user') {
            $(this).attr('data-status', 'sms');
            $('.change-login-p').text('短信登录');
            $(this).text('账号登录');
            $('.sms-login-modal').show();
            $('.user-login-modal').hide();
            $('.sms-login-modal input').attr('disabled', false);
            $('.user-login-modal input').attr('disabled', true);
        } else {
            $(this).attr('data-status', 'user');
            $('.change-login-p').text('账号登录');
            $(this).text('短信登录');
            $('.sms-login-modal').hide();
            $('.user-login-modal').show();
            $('.sms-login-modal input').attr('disabled', true);
            $('.user-login-modal input').attr('disabled', false);
        }
    });

    // 切换到短信登录
    $('#changeSmsLogin').click(function () {
        $('#changeLogin').attr('data-status', 'sms');
        $('.change-login-p').text('短信登录');
        $('#changeLogin').text('账号登录');
        $('.sms-login-modal').show();
        $('.user-login-modal').hide();
        $('.sms-login-modal input').attr('disabled', false);
        $('.user-login-modal input').attr('disabled', true);
        $('#phonepass').modal('hide');
    });

    $("#get-code2").click(function() {
        const mobile = $("#mobileLogin").val();
        if(!validMobile(mobile, 0)){
            return false;
        }
        const btn = $(this);
        if(!btn.hasClass('disabled')){
            // 判断该手机号是否已注册通行账号
            $.ajax({
                url: '/sms/check/mobile',
                type: 'post',
                data: {mobile: mobile},
                error: function() {
                    $('#phoneHelp').text('号码查询接口出错!');
                },
                beforeSend: function() {
                },
                success: function(response) {
                    if (response.err === 0) {
                        $.ajax({
                            url: '/sms/code',
                            type: 'post',
                            data: { mobile: mobile, type: 3},
                            error: function() {
                                $('#phoneHelp').text('短信接口出错!');
                            },
                            beforeSend: function() {
                            },
                            success: function(response) {
                                if (response.err === 0) {
                                    codeSuccess(btn);
                                } else {
                                    $('#phoneHelp').text(response.msg);
                                }
                            }
                        });
                    } else {
                        $('#phoneHelp').text(response.msg);
                    }
                }
            })
        }
    });
});

function login() {
    $.ajax({
        url: '/captcha?t='+ (new Date()).getTime(),
        type: 'get',
        dataType: 'json',
        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%',
                product: "bind"
            }, function (catpchaObj) {
                catpchaObj.onReady(function () {
                    catpchaObj.verify();
                }).onClose(function () {
                }).onSuccess(function () {
                    /* 延迟到动画结束后再alert */
                    var lastUTC = new Date(), duration = 1100;

                    function _alert(msg) {
                        var elapsed = new Date() - lastUTC;
                        if (elapsed >= duration) {
                            return alert(msg)
                        }
                        setTimeout(function () {
                            alert(msg)
                        }, duration - elapsed);
                    }

                    var result = catpchaObj.getValidate();
                    if (!result) {
                        return alert('请完成验证');
                    }
                    $('#login').attr('disabled', true);
                    // let geetest_challenge = $('input[name="geetest_challenge"]').val();
                    // let geetest_validate = $('input[name="geetest_validate"]').val();
                    // let geetest_seccode = $('input[name="geetest_seccode"]').val();

                    const postData = {
                        geetest_challenge: result.geetest_challenge,
                        geetest_validate: result.geetest_validate,
                        geetest_seccode: result.geetest_seccode,
                    };
                    if ($('#changeLogin').attr('data-status') === 'user') {
                        let account = $("#inputEmail").val();
                        let pw = $("#inputPassword").val();
                        postData.account = account;
                        postData.pw = pw;
                    } else {
                        let mobile = $('#mobileLogin').val();
                        let code = $("#codeLogin").val();
                        postData.mobile = mobile;
                        postData.code = code;
                    }

                    $.ajax({
                        url: '/login',
                        type: 'post',
                        data: postData,
                        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');
                                $('#login').removeAttr('disabled');
                            } else if (response.error === 3) {
                                // captchaObj.reset();
                                $('#phonepass').modal('show');
                                $('#mobileLogin').val(response.data);
                                $('#login').removeAttr('disabled');
                            } else {
                                // $('#phonepass').modal('hide');
                                let msg = response.msg !== undefined ? response.msg : '未知错误';
                                showError(msg, $("input"));
                                $('#login').removeAttr('disabled');
                                // captchaObj.reset();
                            }
                        },
                        error: function (result) {
                            showError('内部程序错误', null);
                            $('#login').removeAttr('disabled');
                        }
                    });
                })
            });
        }
    });
}

/**
 * 获取成功后的操作
 *
 * @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, status = 1) {
    let result = true;
    if($.trim(mobile) === ''){
        if (status === 1) {
            showValidError('手机号不能为空!',$('#mobile'));
        } else {
            $('#phoneHelp').text('手机号不能为空!');
        }
        return false;
    }
    let mobileValid = /^1[3456789]\d{9}$/;
    if(!mobileValid.test(mobile)){
        if (status === 1) {
            showValidError('手机号码格式有误!',$('#mobile'));
        } else {
            $('#phoneHelp').text('手机号码格式有误!');
        }
        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;
    if ($('#changeLogin').attr('data-status') === 'user') {
        let account = $("#inputEmail").val();
        if (account === undefined || account === '') {
            showError('用户名不能为空!', $("#inputEmail"));
            return false;
        }

        let password = $("#inputPassword").val();
        if (password === undefined || password === '') {
            showError('密码不能为空!', $("#inputPassword"));
            return false;
        }
    } else {
        let mobile = $('#mobileLogin').val();
        if (mobile === undefined || mobile === '') {
            showError('手机号码不能为空!', $("#mobileLogin"));
            return false;
        }
        let code = $('#codeLogin').val();
        if (code === undefined || code === '') {
            showError('验证码不能为空!', $("#codeLogin"));
            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-4 mb-3">' +
            '<div class="card card-block">' +
            '<div class="card-body">' +
            '<h3 class="card-title">'+ version.name +'</h3>' +
            '<a class="btn btn-primary" href="/boot/'+ version._id.toString() +'">开始使用</a>' +
            '</div>' +
            '</div>' +
            '</div>';
        html += tmpHtml;
    }
    $("#version-area").html(html);
}