third-login.js 10.3 KB
/**
 * 第三方登录首页
 * @author: TaoHuang
 * @date: 2016/7/12
 */
var $ = require('yoho-jquery');
var phoneRegx = require('../common/mail-phone-regx').phoneRegx;
var EventProxy = require('yoho-eventproxy');

var $regionCodeText = $('#region-code'),
    $regionSelectList = $('#country-select-list'),
    $regionSelectHeader = $('#country-select-header'),
    $phoneNumInput = $('#phone-num'),
    $imgCaptchaInput = $('#verifyCode'),
    $imgCaptchaCtrl = $('.img-captcha-refresh'),
    $smsCaptchaInput = $('#sms-captcha-input'),
    $smsCaptchaCtrl = $('.sms-captcha-send'),
    $nextBtn = $('#validate-phone-next');

var $bindsetpwdForm = $('#bindsetpwd'),
    $bindConfirmForm = $('#bindConfirm'),
    $relateConfirmForm = $('#relateConfirm'),
    $bindedForm = $('#bindedPage');

var $openId = $('#openId');
var $sourceType = $('#sourceType');
var $refer = $('#refer');

var second = 60,
    ep = new EventProxy();

var upDown = {
    up: '',
    down: ''
};

var selectedIcon = '';

function errTip(ele, msg) {
    var $errTip = ele.next('.tips');
    var $errMsg = $errTip.find('.content');

    $errMsg.text(msg);
    return $errTip.removeClass('hide');
}

function hideTip(ele) {
    return ele.next('.tips').addClass('hide');
}

// 短信验证码60s时间
function disableSMSBtn() {
    second -= 1;
    if (second < 0) {
        second = 60;
        $smsCaptchaCtrl.text('获取短信验证码').removeClass('disable').removeClass('second-progress');
    } else {
        $smsCaptchaCtrl.addClass('second-progress').text(second + '秒后可重新操作');
        window.setTimeout(disableSMSBtn, 1000);
    }
}

// 刷新图形验证码
function refreshImgCaptcha() {
    var time = new Date(),
        $captchaImg = $('.img-captcha'),
        captchaImgSrc = $captchaImg.attr('src').split('?')[0];

    $captchaImg.attr('src', captchaImgSrc + '?t=' + time.getTime());
}

// 发送短信验证码
function sendSMSCaptcha() {
    return $.ajax({
        type: 'POST',
        url: '/passport/autouserinfo/sendBindMsg',
        data: {
            mobile: $phoneNumInput.val(),
            area: $regionCodeText.text().replace('+', ''),
            verifyCode: $imgCaptchaInput.val()
        }
    }).then(function(ret) {
        if (ret && ret.code === 400) {
            errTip($imgCaptchaInput, ret.message);
            refreshImgCaptcha();
            ep.emit('img-captcha', false);
        }
    });
}

// 异步验证图形码
function validateImgCaptchaAsync() {
    return $.ajax({
        type: 'POST',
        url: '/passport/images/check',
        data: {
            verifyCode: $imgCaptchaInput.val()
        }
    });
}

// 异步验证短信码
function validateSMSCaptchaAsync() {
    return $.ajax({
        type: 'POST',
        url: '/passport/autouserinfo/checkBindMsg',
        data: {
            code: $smsCaptchaInput.val(),
            mobile: $phoneNumInput.val(),
            area: $regionCodeText.text().replace('+', '')
        }
    });
}

// 同时监听三个事件
ep.tail('phoneNum', 'img-captcha', 'sms-captcha', function(phoneAuth, imgAuth, smsAuth) {

    if (phoneAuth && imgAuth && smsAuth) {
        $nextBtn.removeClass('disable');
    } else {
        $nextBtn.addClass('disable');
    }

});

// 选择国家,变换图标
function changeHeader() {
    var $indicator = $regionSelectHeader.find('.iconfont');

    if ($regionSelectList.hasClass('hide')) {
        $indicator.html(upDown.up);
    } else {
        $indicator.html(upDown.down);
    }
}

// 选择国家列表
$regionSelectList.on('click', '.option', function() {
    var $clickItem = $(this);
    var areaCode = $clickItem.data('code');
    var name = $clickItem.data('value');
    var $selectedItem = $clickItem.siblings('.selected');

    $selectedItem.find('.iconfont').html('').end().removeClass('selected');

    $clickItem.find('.iconfont').html(selectedIcon).end().addClass('selected');

    $regionSelectHeader.find('.name').html(name);
    $regionCodeText.text(areaCode);

    $regionSelectList.addClass('hide');
    changeHeader();
});

// 选择国家头
$regionSelectHeader.on('click', function() {
    $regionSelectList.toggleClass('hide');
    changeHeader();
});

// 确定事件都验证通过
ep.tail('phoneNum', 'img-captcha', function(phoneAuth, imgAuth) {
    if (phoneAuth && imgAuth && !$smsCaptchaCtrl.hasClass('second-progress')) {
        $smsCaptchaCtrl.removeClass('disable');
    } else {
        $smsCaptchaCtrl.addClass('disable');
    }
});

$phoneNumInput.on('blur', function() {
    var length = $phoneNumInput.val().length;

    $('#phone').removeClass('focus');
    if (length === 0) {
        errTip($phoneNumInput, '请输入手机号码');
        ep.emit('phoneNum', false);
        return;
    }

    if (/^[0-9]+$/.test($phoneNumInput.val())) {

        // 这里只做中国区验证
        if ($regionCodeText.text() === '+86') {

            if (length === 11 && phoneRegx['+86'].test($phoneNumInput.val())) {
                ep.emit('phoneNum', true);
                return;
            } else {
                errTip($phoneNumInput, '手机号码不正确,请重新输入');
                ep.emit('phoneNum', false);
                return;
            }
        }
        ep.emit('phoneNum', true);
        return;
    } else {
        ep.emit('phoneNum', false);
        return;
    }
}).on('focus', function() {
    hideTip($phoneNumInput);
    $('#phone').addClass('focus');
});

$imgCaptchaInput.on('blur', function() {
    var length = $imgCaptchaInput.val().length;

    $imgCaptchaInput.removeClass('focus');

    switch (length) {
        case 4 :
            break;
        case 0:
            errTip($imgCaptchaInput, '请输入验证码');
            refreshImgCaptcha();
            ep.emit('img-captcha', false);
            break;
        default:
            errTip($imgCaptchaInput, '验证码不正确');
            refreshImgCaptcha();
            ep.emit('img-captcha', false);
            break;
    }

    validateImgCaptchaAsync().then(function(result) {
        if (result.code === 200) {
            ep.emit('img-captcha', true);
        } else {
            ep.emit('img-captcha', false);
            refreshImgCaptcha();
        }
    });
}).on('focus', function() {
    hideTip($imgCaptchaInput);
    $imgCaptchaInput.addClass('focus');
});

$imgCaptchaCtrl.on('click', function() {
    refreshImgCaptcha();
});

$smsCaptchaInput.on('blur', function() {
    var length = $smsCaptchaInput.val().length;

    $smsCaptchaInput.removeClass('focus');

    switch (length) {
        case 4:
            break;
        case 0:
            errTip($smsCaptchaInput, '请输入短信验证码');
            ep.emit('sms-captcha', false);
            return;
        default:
            errTip($smsCaptchaInput, '验证码不正确');
            ep.emit('sms-captcha', false);
            return;
    }

    validateSMSCaptchaAsync().then(function(result) {
        if (result.code === 200) {
            ep.emit('sms-captcha', true);
        } else {
            ep.emit('sms-captcha', false);
            errTip($smsCaptchaInput, '验证码不正确');
        }
    });
}).on('focus', function() {
    hideTip($smsCaptchaInput);
    $smsCaptchaInput.addClass('focus');
});

$smsCaptchaCtrl.on('click', function() {
    if ($smsCaptchaCtrl.hasClass('disable') || $smsCaptchaCtrl.hasClass('second-progress')) {
        return;
    }

    validateImgCaptchaAsync().then(function(result) {
        if (result.code === 200) {
            $smsCaptchaCtrl.addClass('disable');
            disableSMSBtn();
            sendSMSCaptcha();
        } else {
            ep.emit('img-captcha', false);
            errTip($imgCaptchaInput, '图形验证码错误');
            refreshImgCaptcha();
        }
    });
});

// 统一设置用户信息
function setUserInfo(user) {
    $('.username').val(user.username);
    $('.headImg').val(user.headImg);
}

// 统一设置第三方的信息
function setThirdPartInfo(third) {
    $('.openId').val(third.openId);
    $('.sourceType').val(third.sourceType);
    $('.refer').val(third.refer);
    $('.mobile').val(third.mobile);
    $('.area').val(third.area);
    $('.verifyCode').val(third.verifyCode);
    $('.code').val(third.code);
}

// 发送数据到设置密码页面
function setPwdPage(thirdPart) {
    setThirdPartInfo(thirdPart);
    $bindsetpwdForm.submit();
}

// 发送数据到绑定确认页面
function bindConfirmPage(thirdPart, user) {
    setThirdPartInfo(thirdPart);
    setUserInfo(user);
    $bindConfirmForm.submit();
}

// 发送数据到关联页面
function relateConfirmPage(thirdPart, user) {
    setThirdPartInfo(thirdPart);
    setUserInfo(user);
    $relateConfirmForm.submit();
}

// 发送数据到已绑定页面
function bindedPage(thirdPart, user) {
    setThirdPartInfo(thirdPart);
    setUserInfo(user);
    $bindedForm.submit();
}

// 下一步
function nextPage() {
    var thirdPart = {
        mobile: $phoneNumInput.val(),
        area: $regionCodeText.text().replace('+', ''),
        openId: $openId.val(),
        sourceType: $sourceType.val(),
        verifyCode: $imgCaptchaInput.val(),
        code: $smsCaptchaInput.val(),
        refer: $refer.val()
    };

    return $.ajax({
        type: 'post',
        url: '/passport/autouserinfo/bindCheck',
        data: {
            mobile: thirdPart.mobile,
            area: thirdPart.area,
            openId: thirdPart.openId,
            sourceType: thirdPart.sourceType
        }
    }).then(function(result) {
        switch (result.code) {
            case 200:
                // 未注册,可绑定,设定密码页面;
                setPwdPage(thirdPart);
                break;
            case 201:
                // 已注册绑定过其他的第三方,绑定确定页面
                bindConfirmPage(thirdPart, result.data.user);
                break;
            case 203:
                // 关联帐号,关联页面
                relateConfirmPage(thirdPart, result.data.user);
                break;
            case 205:
                // 已经绑定过同类型第三方的页面
                bindedPage(thirdPart, result.data.user);
                break;
            default:
                // 出错
                errTip($nextBtn, '输入错误,请重新输入!');
                break;
        }
    });
}

$nextBtn.on('click', function() {
    if ($nextBtn.hasClass('disable')) {
        return;
    }

    nextPage();
});