register-new.js 8.58 KB
const $ = require('yoho-jquery');
const $captcha = $('#js-img-check');
const tip = require('plugin/tip');
const showErrTip = tip.show;
const api = require('../api');
const validatePWD = require('../password-check');
const Validate = require('plugin/validata');
const validate = new Validate($captcha, {
    useREM: {
        rootFontSize: 40,
        picWidth: 150
    }
});

class RegisterNew {
    constructor() {
        this.view = {
            clearMobile: $('#clearMobile'),
            countryCodeBtn: $('#countryCodeBtn'),
            countryCodeSelector: $('#countryCodeSelector'),
            getVerifyCodeBtn: $('#getVerifyCodeBtn'),
            regBtn: $('#regBtn'),
            mobileInput: $('input[name=mobile]'),
            verifyCodeInput: $('input[name=verifyCode]'),
            inviteCodeInput: $('input[name=inviteCode]'),
            passwordInput: $('input[name=password]'),
            passwordEyeIcon: $('#passwordEyeIcon'),
            eyeClose: $('.eye-close'),
            eyeOpen: $('.eye-open'),
            tokenInput: $('input[name=token]')
        };

        this.requested = false;

        this.view.clearMobile.on('click', this.clearMobile.bind(this));
        this.view.regBtn.on('click', this.register.bind(this));
        this.view.mobileInput.bind('input', this.changeRegBtnStatus.bind(this));
        this.view.inviteCodeInput.bind('input', this.changeRegBtnStatus.bind(this));
        this.view.passwordInput.bind('input', this.changeRegBtnStatus.bind(this));
        this.view.passwordEyeIcon.on('click', this.passwordShowStatus.bind(this));

        if ($captcha.data('geetest')) {
            this.view.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
        } else {
            validate.init();
            this.view.getVerifyCodeBtn.on('click', this.imgVerifyInit.bind(this));
        }
    }

    /**
     * 图片验证码初始化
     */
    imgVerifyInit() {
        if (!this.view.getVerifyCodeBtn.hasClass('active')) {
            return;
        }
        validate.refresh();
        $(document).off('click.refresh').on('click.refresh', '.img-check-refresh', this.imgVerifyInit.bind(this));
        if (!$('#getVerifyCodeBtnByValidate').length) {
            $captcha.append('<div class="validate-sub-btn"><button id="getVerifyCodeBtnByValidate">获取验证码</button></div>'); // eslint-disable-line
        }
        this.view.getVerifyCodeBtnByValidate = $('#getVerifyCodeBtnByValidate');
        this.view.getVerifyCodeBtnByValidate.on('click', this.getVerifyCode.bind(this));
        $captcha.removeClass('hide');
    }

    /**
     * 清除输入的手机号
     */
    clearMobile() {
        this.view.mobileInput.val('');
    }

    /**
     * 隐藏显示密码
     */
    passwordShowStatus() {
        if (this.view.eyeOpen.hasClass('hide')) {
            this.view.passwordInput.attr('type', 'text');
            this.view.eyeClose.addClass('hide');
            this.view.eyeOpen.removeClass('hide');
        } else {
            this.view.passwordInput.attr('type', 'password');
            this.view.eyeOpen.addClass('hide');
            this.view.eyeClose.removeClass('hide');
        }
    }

    /**
     * 获取验证码倒计时
     */
    countDown(during) {
        let count = during || 59;
        let itime;

        this.view.getVerifyCodeBtn.removeClass('active');

        itime = setInterval(() => {
            if (count === 0) {
                this.view.getVerifyCodeBtn.text('重新发送').addClass('active');
                clearInterval(itime);
            } else {
                this.view.getVerifyCodeBtn.text('重新发送 (' + count-- + '秒)');
                window.setCookie('count', count);

                if (during && parseInt(during, 10) !== 0) {
                    this.view.getVerifyCodeBtn.removeClass('active');
                }
            }
        }, 1000);
    }

    /**
     * 改变登录按钮状态
     */
    changeRegBtnStatus() {
        if (this.view.mobileInput.val() &&
            this.view.passwordInput.val() &&
            this.view.verifyCodeInput.val()) {
            this.view.regBtn.addClass('active');
        } else {
            this.view.regBtn.removeClass('active');
        }
    }

    /**
     * 注册动作处理
     */
    register() {
        let password = this.view.passwordInput.val();

        if (!this.view.regBtn.hasClass('active')) {
            return;
        }

        if (!validatePWD(password)) {
            showErrTip('密码6-20位,请重新输入');
            return;
        }

        this.postRegister();
    }

    /**
     * 提交注册请求
     */
    postRegister() {
        if (this.view.regBtn.hasClass('active')) {
            this.view.regBtn.removeClass('active');
            let postData = {
                password: $.trim(this.view.passwordInput.val()),
                phoneNum: this.view.mobileInput.val(),
                areaCode: this.view.countryCodeSelector.val(),
                smsCode: this.view.verifyCodeInput.val(),
                token: this.view.tokenInput.val(),
                inviteCode: this.view.inviteCodeInput.val()
            };

            return $.ajax({
                type: 'POST',
                url: '/passport/register-new',
                data: postData,
                success: (data) => {
                    let res = data.data;

                    if (data.code === 200) {
                        showErrTip('注册成功');

                        window.setCookie('refer', res.session);
                        window.setCookie('msgDelivery', res.msgDelivery, {expires: 1, path: '/' });

                        // 统计代码:用于统计从哪个渠道注册成功的
                        if (window._yas && window._yas.sendCustomInfo) {
                            window._yas.sendCustomInfo({
                                op: 'YB_REGISTER_SUCCESS_L',
                                ud: window.getUid(),
                                param: JSON.stringify({
                                    C_ID: window._ChannelVary[window.cookie('_Channel')] || 1,
                                    UNION_TYPE: window.queryString.union_type || window.cookie('unionTypeYas') || false
                                })
                            }, true);
                        }

                        setTimeout(function() {
                            location.href = res.href;
                        }, 1500);
                    } else {
                        this.view.regBtn.addClass('active');
                        showErrTip(data.message);
                    }
                },
                error: (data) => {
                    this.view.regBtn.addClass('active');

                    if (data && data.responseJSON && data.responseJSON.message) {
                        showErrTip(data.message);
                    }
                }
            });
        }
    }

    /**
     * 获取验证码
     */
    getVerifyCode() {
        if (!this.view.getVerifyCodeBtn.hasClass('active')) {
            return;
        }

        if (this.requested) {
            return false;
        }

        let areaCode = this.view.countryCodeSelector.val();
        let phoneNum = this.view.mobileInput.val();

        let params = {
            areaCode: areaCode.replace('+', ''),
            phoneNum: this.view.mobileInput.val(),
            inviteCode: this.view.inviteCodeInput.val()
        };

        if (api.phoneRegx[areaCode].test(phoneNum) || areaCode !== '+86') {
            validate.getResults().then(result => {
                this.requested = true;

                $.extend(params, result);

                $.ajax({
                    url: '/passport/reg/verifymobile',
                    type: 'POST',
                    data: params,
                    success: postResult => {
                        validate.type === 2 && validate.refresh();
                        $captcha.addClass('hide');
                        if (postResult.code === 200) {
                            this.view.tokenInput.val(postResult.data.token);
                            this.countDown();
                        } else {
                            (postResult.changeCaptcha && validate.type !== 2) && validate.refresh();

                            showErrTip(postResult.message);
                            this.requested = false;
                        }
                    },
                    error: () => {
                        showErrTip('出错了,请重试');
                        validate.refresh();
                        this.requested = false;
                    }
                });
            });
        }
    }
}

module.exports = RegisterNew;