xtu_mall/public/assets/js/frontend.js

define(['yzn'], function(Yzn) {
    var Frontend = {
        api: Yzn.api,
        init: function() {
            var si = {};
            //发送验证码
            $(document).on("click", ".btn-captcha", function(e) {
                var type = $(this).data("type") ? $(this).data("type") : 'mobile';
                var btn = this;
                Frontend.api.sendcaptcha = function(btn, type, data, callback) {
                    $(btn).addClass("layui-btn-disabled", true).text("发送中...");

                    Frontend.api.ajax({ url: $(btn).data("url"), data: data }, function(data, ret) {
                        clearInterval(si[type]);
                        var seconds = 60;
                        si[type] = setInterval(function() {
                            seconds--;
                            if (seconds <= 0) {
                                clearInterval(si);
                                $(btn).removeClass("layui-btn-disabled").text("发送验证码");
                            } else {
                                $(btn).addClass("layui-btn-disabled").text(seconds + "秒后可再次发送");
                            }
                        }, 1000);
                        if (typeof callback == 'function') {
                            callback.call(this, data, ret);
                        }
                    }, function() {
                        $(btn).removeClass("layui-btn-disabled").text('发送验证码');
                    });
                };
                if (['mobile', 'email'].indexOf(type) > -1) {
                    var element = $(this).data("input-id") ? $("#" + $(this).data("input-id")) : $("input[name='" + type + "']", $(this).closest("form"));
                    var text = type === 'email' ? '邮箱' : '手机号码';
                    if (element.val() === "") {
                        Layer.msg(text + "不能为空！", { icon: 2 });
                        element.focus();
                        return false;
                    } else if (type === 'mobile' && !element.val().match(/^1[3-9]\d{9}$/)) {
                        Layer.msg("请输入正确的" + text + "！", { icon: 2 });
                        element.focus();
                        return false;
                    } else if (type === 'email' && !element.val().match(/^[\w\+\-]+(\.[\w\+\-]+)*@[a-z\d\-]+(\.[a-z\d\-]+)*\.([a-z]{2,4})$/)) {
                        Layer.msg("请输入正确的" + text + "！", { icon: 2 });
                        element.focus();
                        return false;
                    }

                    var data = { event: $(btn).data("event") };
                    data[type] = element.val();
                    Frontend.api.sendcaptcha(btn, type, data);

                } else {
                    var data = { event: $(btn).data("event") };
                    Frontend.api.sendcaptcha(btn, type, data, function(data, ret) {
                        Layer.open({ title: false, area: ["400px", "430px"], content: "<img src='" + data.image + "' width='400' height='400' /><div class='text-center panel-title'>扫一扫关注公众号获取验证码</div>", type: 1 });
                    });
                }
                return false;
            });

            //阻止IE7以下访问
            if (layui.device.ie && layui.device.ie < 10) {
                Layer.alert('如果您非得使用 IE 浏览器访问，那么请使用 IE10+');
            }


            $('.lay-tips').hover(function() {
                var title = $(this).attr('title');
                Layer.tips(title, $(this))
            }, function() {
                Layer.closeAll('tips')
            })

            //手机端顶部导航切换 - 优化版（防止头部拉长）
            $(document).on("click", ".fly-header .navbar-toggle", function(e) {
                e.stopPropagation();
                var $navbarCollapse = $('.fly-header .navbar-collapse');
                var $iconBars = $('.fly-header .navbar-toggle .icon-bar');
                
                if ($navbarCollapse.hasClass('layui-hide')) {
                    $navbarCollapse.removeClass('layui-hide').addClass('layui-show');
                    // 汉堡菜单动画
                    $iconBars.eq(0).css({
                        'transform': 'rotate(45deg)',
                        'transform-origin': 'center',
                        'width': '20px'
                    });
                    $iconBars.eq(1).css('opacity', '0');
                    $iconBars.eq(2).css({
                        'transform': 'rotate(-45deg)',
                        'transform-origin': 'center',
                        'width': '20px'
                    });
                } else {
                    $navbarCollapse.addClass('layui-hide').removeClass('layui-show');
                    // 恢复汉堡菜单
                    $iconBars.css({
                        'transform': 'none',
                        'opacity': '1',
                        'width': '20px'
                    });
                }
            });
            
            // 点击菜单外部区域关闭菜单
            $(document).on("click", function(e) {
                var $navbarCollapse = $('.fly-header .navbar-collapse');
                var $toggle = $('.fly-header .navbar-toggle');
                var $iconBars = $('.fly-header .navbar-toggle .icon-bar');
                
                if (!$(e.target).closest('.navbar-collapse').length && 
                    !$(e.target).closest('.navbar-toggle').length &&
                    !$navbarCollapse.hasClass('layui-hide')) {
                    $navbarCollapse.addClass('layui-hide').removeClass('layui-show');
                    $iconBars.css({
                        'transform': 'none',
                        'opacity': '1',
                        'width': '20px'
                    });
                }
            });


            //手机设备的简单适配
            var treeMobile = $('.site-tree-mobile'),
                shadeMobile = $('.site-mobile-shade')

            treeMobile.on('click', function() {
                $('body').addClass('site-mobile');
            });

            shadeMobile.on('click', function() {
                $('body').removeClass('site-mobile');
            });

            // 移动端触摸优化 - 防止双击缩放
            var lastTouchEnd = 0;
            document.addEventListener('touchend', function(event) {
                var now = Date.now();
                if (now - lastTouchEnd <= 300) {
                    event.preventDefault();
                }
                lastTouchEnd = now;
            }, false);

            // 移动端菜单滑动关闭支持
            var touchStartY = 0;
            var touchEndY = 0;
            var sideMenu = $('.fly-aside');
            
            sideMenu.on('touchstart', function(e) {
                touchStartY = e.originalEvent.touches[0].clientY;
            });
            
            sideMenu.on('touchmove', function(e) {
                touchEndY = e.originalEvent.touches[0].clientY;
            });
            
            sideMenu.on('touchend', function(e) {
                var diff = touchStartY - touchEndY;
                // 向左滑动关闭菜单
                if (Math.abs(diff) < 10 && $('body').hasClass('site-mobile')) {
                    $('body').removeClass('site-mobile');
                }
            });

            // 移动端输入框自动聚焦优化
            $(document).on('focus', 'input, textarea', function() {
                if ($(window).width() < 768) {
                    setTimeout(function() {
                        window.scrollTo(0, document.body.scrollTop);
                    }, 100);
                }
            });

            // 移动端图片点击放大优化
            $(document).on('click', '.fly-panel img:not(.fly-avatar)', function() {
                if ($(window).width() < 768) {
                    var src = $(this).attr('src');
                    if (src && !$(this).closest('.layui-layer').length) {
                        layer.open({
                            type: 1,
                            backgroundColor: 'rgba(0,0,0,0.9)',
                            shade: false,
                            area: ['100%', '100%'],
                            content: '<div style="display:flex;align-items:center;justify-content:center;height:100vh;"><img src="' + src + '" style="max-width:100%;max-height:100vh;" onclick="layer.closeAll()"></div>',
                            success: function(layero) {
                                layero.on('click', function() {
                                    layer.closeAll();
                                });
                            }
                        });
                    }
                }
            });

        }
    };
    Frontend.api = $.extend(Yzn.api, Frontend.api);
    //将Frontend渲染至全局,以便于在子框架中调用
    window.Frontend = Frontend;

    Frontend.init();
    return Frontend;
});