installment.starting-service.page.js 4.94 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: '',
        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.mobile &&
        formModel.snsCheckCode &&
        formModel.agreements === 'on') {
        applyButton.removeClass('disabled');
        ret = true;
    } else {
        applyButton.addClass('disabled');
        ret = true;
    }

    return ret;
};

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

var debounceFn = debounce(function(cardNo) {
    // 获取银行信息
    $.get('/home/installment/bank-info', {cardNo: cardNo}).then(function(result) {
        if (result.code === 200) {
            if (result.data.bankCode) {
                // 设置银行名称
                $('#bank-name').text(result.data.bankName);

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

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

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

    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 >= 15) {
        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() {
    validateForm();
}, 500);


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

    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();
        }
    });

    return ret;
});