Calculation/app/public/js/profile.js

/**
 * 账号相关js
 *
 * @author CaiAoLin
 * @date 2018/1/26
 * @version
 */
$(document).ready(function() {
    autoFlashHeight();
    try {
        if (user !== '') {
            $(".title-bar h2").text(user);
        }
        $.validator.addMethod("isMobile", function(value, element) {
            var length = value.length;
            var mobile = /^1[3456789]\d{9}$/;
            return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");
        const options = {
            rules: '',
            errorPlacement: function(error, element) {
                $(element).addClass('is-invalid');
                $('.input-group-append').after(error);
            },
            errorClass: "invalid-feedback",
            errorElement: "div",
            highlight: false,
            success: function(element) {
                $(element).siblings('input').removeClass('is-invalid');
                $(element).remove();
            },
        };

        options.rules = {
            auth_mobile: {
                required: true,
                isMobile: true,
            },
        };
        $("#mobile-form").validate(options);
        // 获取验证码
        let isPosting = false;
        $("#get-code").click(function() {
            if (isPosting) {
                return false;
            }
            if(!$("#mobile-form").valid()) {
                return false;
            }

            const mobile = $("input[name='auth_mobile']").val();
            const btn = $(this);

            $.ajax({
                url: '/profile/code?_csrf=' + csrf,
                type: 'post',
                data: { mobile: mobile },
                dataTye: 'json',
                error: function() {
                    isPosting = false;
                },
                beforeSend: function() {
                    isPosting = true;
                },
                success: function(response) {
                    isPosting = false;
                    if (response.err === 0) {
                        codeSuccess(btn);
                        $("input[name='code']").removeAttr('readonly');
                        $("#bind-btn").removeClass('disabled').removeClass('btn-secondary').addClass('btn-primary');
                    } else {
                        toast(response.msg, 'error');
                    }
                }
            });
        });

        // 绑定按钮
        $("#bind-btn").click(function() {
            const code = $("input[name='code']").val();
            const mobile = $("input[name='auth_mobile']").val();
            if ($(this).hasClass('disabled')) {
                return false;
            }
            if (!(/^1[3456789]\d{9}$/.test(mobile))) {
                toast('请填写正确的手机号码', 'error');
                return false;
            }
            if (code.length < 6) {
                // alert('请填写正确的验证码');
                toast('请填写正确的验证码', 'error');
                return false;
            }
            $.ajax({
                url: '/profile/bind?_csrf=' + csrf,
                type: 'post',
                data: { auth_mobile: mobile, code: code },
                dataTye: 'json',
                success: function(response) {
                    if (response.err === 0) {
                        window.location.href = response.url;
                    } else {
                        toast(response.msg, 'error');
                    }
                }
            });
        });
        // 修改手机
        $('#change-mobile').click(function () {
            $(this).parents('.form-group').hide();
            $('#mobile-form').show();
        });

        // 移除签名
        $('#delete-sign').click(function () {
            postData('/profile/sign/delete', {}, function (result) {
                $('#sign-show').remove();
                toast('移除成功', 'success');
            })
        });

        // 签名模式切换
        $('.sign-type').click(function () {
            if (parseInt($(this).val()) === 1) {
                $('#show-upload').hide();
                $('#show-qrcode').show();
            } else {
                $('#show-upload').show();
                $('#show-qrcode').hide();
            }
        });

        // 上传签名
        $('#sign-upload').change(function () {
            const file = this.files[0];
            const ext = file.name.toLowerCase().split('.').splice(-1)[0];
            const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
            if (!imgStr.test(ext)) {
                toast('请上传正确的图片格式文件','error');
                return
            }
            if ($(this).val()) {
                const formData = new FormData();
                formData.append('file', this.files[0]);
                postDataWithFile('/profile/sign/upload', formData, function (result) {
                    const html = '<img src="/public/upload/sign/'+ result.sign_path +'" width="90">';
                    $('#sign-show').html(html);
                    $('#sign-upload').val('');
                });
            }
        })
    } catch (error) {
        console.log(error);
    }

});

/**
 * 获取成功后的操作
 *
 * @param {Object} btn - 点击的按钮
 * @return {void}
 */
function codeSuccess(btn) {
    let counter = 60;
    btn.addClass('disabled').text('重新获取 ' + counter + 'S');
    btn.parent().siblings('input').removeAttr('readonly').attr('placeholder', '输入短信中的5位验证码');
    const bindBtn = $("#bind-btn");
    bindBtn.removeClass('btn-secondary disabled').addClass('btn-primary');

    const countDown = setInterval(function() {
        const countString = counter - 1 <= 0 ? '' : ' ' + (counter - 1) + 'S';
        // 倒数结束后
        if (countString === '') {
            clearInterval(countDown);
            btn.removeClass('disabled');
        }
        const text = '重新获取' + countString;
        btn.text(text);
        counter -= 1;
    }, 1000);
}