validata.js 3.71 KB
/**
 * 验证码插件
 * @author: feng.chen<feng.chen@yoho.cn>
 * @date: 2017/03/13
 */
let $ = require('yoho-jquery'),
    ImgCheck = require('js/plugin/img-check'),
    tip = require('js/plugin/tip');

let loading = require('js/plugin/loading');

const validType = {
    IMG_CHECK: 1,
    GEETEST: 2
};

// 解决加载w3t统计代码同时使用geetest报错问题
(() => {
    (typeof SVGAnimatedString !== 'undefined') && (SVGAnimatedString.prototype.indexOf = function() {
        return false;
    });
})();

class Validate {
    constructor(container, options, type) {
        this.render(container, options, type);
    }
    render(container, options, type) {
        this.$container = container instanceof $ ? container : $(container);
        this.options = options;
        this.type = type || (this.$container.data('geetest') ? validType.GEETEST : validType.IMG_CHECK);
        if ($('#yohobuy').length < 1) {
            this.$container.after('<input id="yohobuy" type="text" style="display:none;">');
        }
        if (this.type === validType.IMG_CHECK) {
            this.imgCheck = new ImgCheck(this.$container, this.options);
            if (type) {
                this.init();
            }
        } else {
            $.ajax({
                url: '/passport/geetest/register?t=' + (new Date()).getTime(), // 加随机数防止缓存(IE下的问题)
                type: 'get',
                dataType: 'json',
                success: data => {
                    if (data.success) {
                        window.initGeetest && window.initGeetest({
                            gt: data.gt,
                            challenge: data.challenge,
                            offline: !data.success
                        }, (captchaObj) => {
                            this.captchaObj = captchaObj;
                            captchaObj.appendTo(this.$container);
                            this._atWorking = true;
                            this.$container.addClass('hide').addClass('popup');
                        });
                    } else {
                        this.render(container, options, validType.IMG_CHECK);
                    }
                }
            });
            $('.yoho-page').on('touchstart', '#js-img-check', (e) => {
                if ($(e.target).attr('id') !== 'js-img-check') {
                    return;
                }
                this.$container.addClass('hide');
            });
        }
    }
    get atWorking() {
        return this._atWorking;
    }
    refresh() {
        if (this.type === validType.IMG_CHECK) {
            this.imgCheck.refresh();
        } else {
            this.captchaObj.refresh();
        }
    }
    init() {
        if (this.type === validType.IMG_CHECK) {
            this.imgCheck.init();
            this._atWorking = this.imgCheck.atWorking;
        }
    }
    getResults() {
        let yohobuy = $('#yohobuy').val();

        if (yohobuy) {
            return Promise.resolve({yohobuy});
        } else if (this.type === validType.IMG_CHECK) {
            let captcha = this.imgCheck.getResults();

            if (captcha === '0,0,0,0') {
                tip.show('请将所有图片点击旋转至正向朝上');
                return Promise.reject();
            }
            return Promise.resolve({captcha});
        } else {
            loading.showLoadingMask();
            return new Promise((resolve) => {
                loading.hideLoadingMask();
                this.$container.removeClass('hide');
                this.captchaObj.onSuccess(() => {
                    resolve(this.captchaObj.getValidate());
                    this.$container.addClass('hide');
                });
            });
        }
    }
}

module.exports = Validate;