installment.starting-service.page.js 2.91 KB
const $ = require('yoho-jquery');

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

const FormModel = function() {
    Object.assign(this, {
        userName: '',
        identityCardNo: '',
        cardNo: '',
        mobilePhone: '',
        verifyCode: '',
        agreements: ''
    });
};

const formModel = new FormModel();

/**
 *  倒计时
 *
 * @param start 启动回调
 * @param tick 进度回调
 * @param complete 完成回调
 */
Timer.prototype.startCountdown = function(start, tick, complete) {
    if (this.counter > 0 || this.countdownTimer) {
        return;
    } else {
        this.counter = 59;
    }


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

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

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

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

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

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


/**
 * 点击发送短信事件
 */
$('#send-sms').click(function() {
    new Timer().startCountdown(function() {
        $.get('/home/installment/starting-service/verify-code', {}).then((result)=> {
            console.log(result);
        });
    }, function(counter) {
        // 进度回调
        $('#send-sms').text(counter + 's');
    }, function() {
        // 倒计时结束后再次显示 "获取验证码"
        $('#send-sms').text('获取验证码');
    });

    return false;
});

/**
 * 银行卡格式化
 */
$('#cardNo').keyup(function() {
    const value = $(this).val();

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

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

    if (formModel.userName &&
        formModel.identityCardNo &&
        formModel.cardNo &&
        formModel.mobilePhone &&
        formModel.verifyCode &&
        formModel.agreements === 'on') {
        applyButton.prop('disabled', false);
    } else {
        applyButton.prop('disabled', true);
    }
};

// 输入框改变时同时更新模型
$('input').on('change', function() {
    const name = $(this).attr('name');

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

    validateForm();
});

validateForm();

setInterval(()=> {
    validateForm();
}, 500);

/**
 * 表单提交
 */
$('#apply-form').submit(function() {
    $.post('/home/installment/activate-service', formModel).then((result)=> {
        console.log(result);
    });
});