Calculation/app/public/js/profile.js

/**
 * 账号相关js
 *
 * @author CaiAoLin
 * @date 2018/1/26
 * @version
 */
$(document).ready(function() {
    autoFlashHeight();
    $('[data-toggle="popover"]').popover();
    try {
        if (user !== '') {
            $(".sidebar-title").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_j=' + 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_j=' + 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();
        });

        $('#hide-bind-btn').click(function () {
            $('#mobile-form').hide();
            $('#mobile-form').siblings('.form-group').show();
        });

        $('#del-mobile-btn').click(function () {
            postData('/profile/dsk/api', { type: 'unbindMobile' }, function (response) {
                toastr.success('解绑认证手机成功');
                setTimeout(function () {
                    location.reload();
                }, 1000);
            });
        })

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

        // 移除签章
        $('body').on('click', '.delete-stamp', function () {
            let imgSrc = $(this).siblings('img').attr('src');
            imgSrc = _.replace(imgSrc, fujianOssPath, '');
            const _self = $(this);
            postData('/profile/sign/delete', { type: 'stamp', src: imgSrc }, function (result) {
                _self.parents('.stamp-show').remove();
                toastr.success('移除成功');
            })
        });

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

        // 上传签名
        $('#sign-upload').change(function () {
            const file = this.files[0];
            const filesize = file.size;
            if (filesize > 0.5 * 1024 * 1024) {
                toastr.error('上传的文件大小不能超过512KB！');
                return false;
            }
            const ext = file.name.toLowerCase().split('.').splice(-1)[0];
            const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
            if (!imgStr.test(ext)) {
                toastr.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('');
                });
            }
        })

        // 上传签章
        $('#stamp-upload').change(function () {
            const hadstamp = $('#show-stamp .stamp-show').length;
            const files = this.files;
            if (hadstamp + files.length > 5) {
                toastr.error('最多只能5个签章');
                return
            }
            const formData = new FormData();
            for (const file of files) {
                if (file === undefined) {
                    toast('未选择上传文件！', 'error');
                    return false;
                }
                const ext = file.name.toLowerCase().split('.').splice(-1)[0];
                const imgStr = /(jpg|jpeg|png|bmp|BMP|JPG|PNG|JPEG)$/;
                if (!imgStr.test(ext)) {
                    toastr.error('请上传正确的图片格式文件');
                    return
                }
                const filesize = file.size;
                if (filesize > 0.5 * 1024 * 1024) {
                    toastr.error('上传的文件大小不能超过512KB！');
                    return false;
                }
                formData.append('file[]', file);
            }
            postDataWithFile('/profile/stamp/upload', formData, function (result) {
                let html = '';
                for (const [index, sp] of result.stamp_path.entries()) {
                    html += '<div class="position-absolute fixed-top stamp-show" style="left:'+ (50 + index*130) + 'px;top: 280px;width: 100px">\n' +
                        '                                    <div class="position-relative">\n' +
                        '                                        <a href="javascript:void(0);" title="移除签章" class="position-absolute delete-stamp" style="right: 0;top: 0;color: red;font-size:20px;font-weight: bold;text-decoration:none;">×</a>\n' +
                        '                                        <img src="'+ fujianOssPath + sp +'" width="90">\n' +
                        '                                    </div>\n' +
                        '                                </div>';
                }
                $('#show-stamp').html(html);
                $('#stamp-upload').val('');
            });
        })
    } catch (error) {
        console.log(error);
    }

});

/**
 * 获取成功后的操作
 *
 * @param {Object} btn - 点击的按钮
 * @return {void}
 */
function codeSuccess(btn) {
    let counter = 60;
    btn.attr('disabled', true);
    btn.addClass('disabled').text('重新获取 ' + counter + 'S');
    btn.parent().siblings('input').removeAttr('readonly').attr('placeholder', '输入短信中的6位验证码');
    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.removeAttr('disabled');
            btn.removeClass('disabled');
        }
        const text = '重新获取' + countString;
        btn.text(text);
        counter -= 1;
    }, 1000);
}