installment.starting-service.page.js 8.68 KB
var $ = require('yoho-jquery');
var tip = require('../plugin/tip');
var debounce = require('lodash/debounce');

var Timer = function() {
    this.counter = 0;
    this.countdownTimer = null;
};

var FormModel = function() {
    $.extend(this, {
        userName: '',
        identityCardNo: '',
        cardNo: '',
        bankName: '',
        bankCode: '',
        mobile: '',
        snsCheckCode: '',
        agreements: ''
    });
};

var formModel = new FormModel();

/**
 * 表单验证
 */
var validateForm = function() {
    var applyButton = $('#apply-button');
    var ret = false;

    if (formModel.userName &&
        formModel.identityCardNo &&
        formModel.cardNo &&
        formModel.bankCode &&
        formModel.mobile &&
        formModel.snsCheckCode &&
        formModel.agreements === 'on') {
        applyButton.removeClass('disabled');
        ret = true;
    } else {
        applyButton.addClass('disabled');
        ret = true;
    }

    // 检查手机号码
    if (formModel.cardNo && formModel.cardNo.length >= 16 &&
        formModel.mobile && formModel.mobile.length === 11) {
        $('#send-sms').removeClass('disabled');
    } else {
        $('#send-sms').addClass('disabled');
    }
    return ret;
};

const clearVerifyCode = function() {
    formModel.snsCheckCode = '';
    $('#sns-check-code').val('');
};

var debounceFn = debounce(function(cardNo) {
    formModel.bankCode = '';
    formModel.bankName = '';

    // 获取银行信息
    $.get('/home/installment/bank-info', {cardNo: cardNo}).then(function(result) {
        if (result.code === 200) {
            if (result.data.bankCode) {
                formModel.bankCode = result.data.bankCode;
                formModel.bankName = result.data.bankName;

                // 设置银行名称
                $('#bank-name').text(result.data.bankName);

                // 设置银行图标
                $('#bank-icon').show().attr('src',
                    window.STATIC_RESOURCE_PATH +
                    '/img/home/bank-icons/' + result.data.bankCode + '.png');
                $('#bank-desc').show();
            }

            // 返回1不支持, 孟令阶
            if (result && result.data && result.data.businessSupport === '1') {
                $('#bank-name').text('暂不支持此银行卡');
                $('#bank-desc').show();
                $('#bank-icon').hide();
            }
        } else {
            tip.show(result.message);
            $('#bank-desc').hide();
        }
    });
}, 200);

/**
 *  倒计时
 *
 * @param start 启动回调
 * @param tick 进度回调
 * @param complete 完成回调
 */
Timer.prototype.startCountdown = function(start, tick, complete) {
    var self = this;

    if (this.counter > 0 || this.countdownTimer) {
        return;
    } else {
        this.counter = 59;
    }


    // 启动回调
    if (start) {
        start.call(this);
    }

    if (tick) {
        tick.call(this, this.counter);
    }

    this.complete = complete;


    // 开始计时器
    this.countdownTimer = setInterval(function() {
        self.counter--;

        if (self.counter <= 0) {
            if (complete) {
                clearInterval(self.countdownTimer);

                // 重置计时器
                self.counter = 0;
                self.countdownTimer = null;
                complete.call(self);
            }
        }

        // 完成回调
        if (tick && self.counter > 0) {
            tick.call(self, self.counter);
        }
    }, 1000);

    return this;
};

Timer.prototype.reset = function() {
    if (this.complete) {
        this.complete();
    }
};

/**
 * 点击发送短信事件
 */
$('#send-sms').click(function() {
    var self = this;

    // 数据不完整情况下不能发送验证码
    if ($(this).hasClass('disabled')) {
        return false;
    }

    if ($(this).data('running')) {
        return false;
    }

    $.get('/home/installment/starting-service/verify-code', {
        mobile: formModel.mobile
    }).then(function(result) {
        if (result.code === 200) {
            $(self).data('running', true);
            new Timer().startCountdown(function() {
            }, function(counter) {
                // 进度回调
                $('#send-sms').text(counter + 's');
            }, function() {
                // 倒计时结束后再次显示 "获取验证码"
                $('#send-sms').text('获取验证码');
                $(self).data('running', false);
            });

        } else {
            tip.show(result.message);
            $(self).data('running', false);
        }
    });

    return false;
});

/**
 * 银行卡格式化
 */
$('#cardNo').keyup(function() {
    var value = $(this).val();
    var cardNo = $(this).val().replace(/\s/g, '');

    $(this).val(value.replace(/[^\d]/g, '').replace(/(\d{4})(?=\d)/g, '$1 ')).trigger('change');

    if (cardNo && cardNo.length < 16) {
        $('#bank-desc').hide();
    }
}).blur(function() {
    var cardNo = $(this).val().replace(/\s/g, '');

    if (cardNo && cardNo.length >= 16) {
        debounceFn(cardNo);
    } else {
        $('#bank-desc').hide();
    }
});

/*
$('input').on('change', function() {
    var name = $(this).attr('name');

    if ($(this).is(':checkbox')) {
        formModel[name] = $(this).is(':checked') ? $(this).val() : null;
    } else {
        formModel[name] = $(this).val();
    }

    validateForm();
});
*/

// validateForm();

// 定时更新模型,解决各种浏览器奇葩问题终极办法
setInterval(function() {
    $('input').each(function() {
        var name = $(this).attr('name');

        if ($(this).is(':checkbox')) {
            formModel[name] = $(this).is(':checked') ? $(this).val() : null;
        } else {
            formModel[name] = $(this).val();
        }
    });
    validateForm();
}, 500);


/**
 * 表单提交
 */
$('#apply-button').click(function() {
    var ret = false;
    var that = $(this);

    if ($(this).hasClass('disabled') || !validateForm()) {
        return false;
    }

    // $.ajax({
    //     method: 'post',
    //     url: '/home/installment/activate-service',
    //     data: formModel,
    //     async: false
    // }).then(function(result) {
    //     if (result.code === 200) {
    //         if (result.data.result === 'success') {
    //             // 调用成功
    //             ret = true;
    //         } else {
    //             // 调用失败
    //             if (result.data.resultMsgType === '1') {
    //                 tip.show(result.data.resultMsg);
    //             }

    //             clearVerifyCode();
    //         }

    //     } else {
    //         tip.show(result.message);
    //         clearVerifyCode();
    //     }
    // });

    $.ajax({
        method: 'get',
        async: false,
        url: '/home/installment/starting-service/check-verify-code',
        data: {
            mobile: formModel.mobile,
            code: formModel.snsCheckCode
        }
    }).then(function(result) {
        if (result.code === 200 && result.data.result === '1') {
            return $.ajax({
                method: 'post',
                url: '/home/installment/activate-service',
                data: formModel,
                async: false
            });
        } else {
            clearVerifyCode();
            tip.show(result.message);
        }
    }).then(function(result) {
        var params;

        if (!result) {
            return;
        }

        params = {
            action: 'go.instalmentActivated',
            params: {
                status: result.data && result.data.status || 0
            }
        };

        if (result.code === 200 && result.data) {
            that.attr('href', location.pathname + '?openby:yohobuy=' + encodeURIComponent(JSON.stringify(params)));
            ret = true;
        } else if (result.code === 500) {
            // 接口可能超时返回审核中 by 孟令阶
            params.params.status = '1';
            that.attr('href', location.pathname + '?openby:yohobuy=' + encodeURIComponent(JSON.stringify(params)));
            ret = true;
        } else {
            tip.show(result.message);
            clearVerifyCode();
        }
    });

    return ret;
});


// 使用H5标签后 maxlength 标签失效
$('input[maxlength]').keyup(function() {
    var value = $(this).val(),
        length = $(this).attr('maxlength') || 20;

    $(this).val(value.slice(0, length));
});

$('#agreements').click(function() {
    const params = {
        action: 'go.instalmentProtocol',
        params: {
            protocolUrl: location.protocol + '//' + location.hostname + location.port + $(this).data('href')
        }
    };

    $(this).attr('href', location.pathname + '?openby:yohobuy=' + encodeURIComponent(JSON.stringify(params)));
});

require('./overdue-notice');