index.js 6.85 KB
/**
 * 邮箱登录绑定手机
 * @author: htoo
 * @date: 2018/1/18
 */
var $ = require('yoho-jquery');
var Captcha = require('../../plugins/captcha');
var phoneRegx = require('../common/mail-phone-regx').phoneRegx;
var choosedpic = 'https://cdn.yoho.cn/yohobuy/assets/img/passport/choosed.png';// 已选择图片

var $wrapper = $('.bindwrapper'),
    $phoneTip = $wrapper.find('.phone-err-tip'),
    $nextBtn = $wrapper.find('.yohobindbtn');

var Alert = require('../../common/dialog').Alert;
var dialog = require('./dialog');

var nopermissionoption = $('#nopermissionmessage').html();
var sendmessagehtml = $('.validatewrapper').html();
var second = +$('.second').text();
var passwordCaptchaImg = new Captcha('.captcha-wrap', {checkURI: ''}).init();

passwordCaptchaImg.onSuccess(function() {
    $('#sendmessage').trigger('click');
});
require('../../simple-header');

function changeSecond() {
    second -= 1;
    if (second < 0) {
        second = 60;
        $('.validatewrapper').html(sendmessagehtml);
        return;
    } else {
        $('.second').text(second);
        window.setTimeout(changeSecond, 1000);
    }

}

/**
 * 启动倒计时
 * @return {[type]} [description]
 */
function circleTime() {
    $('.validatewrapper').html(nopermissionoption);
    window.setTimeout(changeSecond, 1000);
}

/**
 * 选择协议
 * @return {[type]} [description]
 */
function chooseProtocol() {
    $('.choosetag').on('change', function() {
        var btnColor = '#f02200';

        if ($(this).prop('checked')) {
            $('.choosewrapper').css({
                'background-image': 'url("' + choosedpic + '")'
            });
        } else {
            $('.choosewrapper').css({
                'background-image': 'none'
            });
            btnColor = '#CCCCCC';
        }
        $nextBtn.css({
            'background-color': btnColor
        });
    });
}

function sendMessageValidate() {
    var mobile = '';
    var area = '';

    $(document).on('click', '#sendmessage', function() {
        mobile = $('.phonenum').val();
        area = $('#areanum').text();

        $.ajax({
            type: 'POST',
            url: '/passport/cert/sendCertMsg',
            data: {
                mobile: mobile,
                area: area,
                verifyCode: passwordCaptchaImg.getResults(),
            }
        }).then(function(data) {
            if (data.code === 200) {
                circleTime();
                return;
            }

            if (data.code !== 200) {
                alert(data.message); // eslint-disable-line
            }
        });

    });
}

/**
 * 判断是否同意协议
 * @return {[type]} [description]
 */
function isagree() {
    return $('.choosetag').prop('checked');
}

/**
 * 选择区域的开关
 * @return {[type]} [description]
 */
function chooseAreaToogle() {
    $('.optionshow').on('click', function() {
        $('.optionslist').toggleClass('hide');
    });
}

/**
 * 选择区域
 * @return {[type]} [description]
 */
function chooseArea() {
    $('.optionitem').on('click', function() {
        var $option = $(this);
        var areanum = $option.attr('areanum');
        var areaname = $option.text();

        $('#areaname').text(areaname);
        $('#areanum').text(areanum);
        $('#areacode').val(areanum);
        $('.optionslist').addClass('hide');
    });
}

/**
 * 取消选择区域
 * @return {[type]} [description]
 */
function cancelChooseArea() {
    $(document).on('click', 'body', function(e) {
        var $target = $(e.target);

        if ($target.hasClass('yohoselectarea') ||
            $target.hasClass('areaname') ||
            $target.hasClass('righttag') ||
            $target.hasClass('optionslist') ||
            $target.hasClass('optionitem')) {
            return;
        } else {
            $('.optionslist').addClass('hide');
        }
    });
}

/**
 * 去掉区域号的加号
 * @return {[type]} [description]
 */
function fixAreaNum() {
    var $opitem = '';
    var itemarecode = '';

    $('.optionitem').each(function() {
        $opitem = $(this);
        itemarecode = $opitem.attr('areanum').replace(/\+/g, '');
        $opitem.attr('areanum', itemarecode);
    });
}

function goLogin(account) {
    account ? window.jumpUrl(`/signin.html?account=${account}`) : window.jumpUrl('/signin.html');
}

function goBind(area, mobile, code) {
    $.post('/passport/cert/certMobile', { area, mobile, code }).then(function(result) {
        if (result.code !== 200) {
            return window.alert(result.message); // eslint-disable-line
        }

        window.jumpUrl('/passport/cert/success');
    });
}


/**
 * 点击下一步
 * @return {[type]} [description]
 */
function nextStep() {
    var mobile = '';
    var areaCode = '';
    var smsCode = '';

    $('#bindfirststep').on('click', function(e) {
        var regx;

        e.preventDefault();
        mobile = $('.phonenum').val();
        areaCode = $('#areanum').text();
        regx = phoneRegx['+' + areaCode];
        smsCode = $('#smscode').val();

        if (!isagree()) {
            return;
        }
        if (mobile === '' || !regx || !regx.test(mobile)) {
            $phoneTip.find('em').text('手机格式错误');
            $phoneTip.removeClass('hide');
            return;
        }

        if (!$.trim(smsCode)) {
            return;
        }

        $.ajax({
            type: 'post',
            url: '/passport/cert/check',
            data: {
                mobile: mobile,
                area: areaCode,
                code: smsCode
            },
            dataType: 'json',
            success: function(data) {
                var isBind, isRegister;

                if (data.code === 200) {
                    isBind = data.data && data.data.isBind;
                    isRegister = data.data && data.data.isRegister;

                    if (isRegister === 'Y') {
                        if (isBind === 'N') {
                            dialog.showBind(() => goLogin(mobile), () => goBind(areaCode, mobile, smsCode));
                        } else {
                            dialog.showBind2(() => goLogin(mobile), () => goBind(areaCode, mobile, smsCode));
                        }
                    } else {
                        goBind(areaCode, mobile, smsCode);
                    }
                } else {
                    if (data && data.message) {
                        new Alert(data.message).show();
                    }
                }
            }
        });
    });
}

$wrapper.on('keydown', '.phonenum', function(e) {
    if (e.keyCode === 13) {
        $nextBtn.trigger('click');
        return false;
    }
});

function init() {
    fixAreaNum(); // 去掉所有区域的+
    chooseProtocol(); // 选择协议
    chooseArea(); // 选择区域
    chooseAreaToogle(); // 选择区域展示或关闭
    cancelChooseArea(); // 取消选择区域
    nextStep(); // 下一步
    sendMessageValidate(); // 发送短信
}
init();