caimei365-www/src/main/resources/static/js/index.js

// var isFormal = window.location.href.indexOf('www.caimei365.com') !== -1;
// if(isFormal){var _czc = _czc || [];_czc.push(["_setAccount", "1279558759"]);}
var homeData = new Vue({
    el: '#container',
    mixins: [cmsMixins,cmSysVitaMixins],
    data: {
        userId:0,
        asideNav: [],
        // liveList:[],//右侧直播模块
        // cmImageList:[],//右侧活动模块
        // infoList:[],//右侧文章模块
        newsList:[],
        popupFlag:false,
        centerImage:{},//广告活动弹窗
        topAdvertisement:{},// 专属广告图
        couponEntry:2,// 活动优惠券弹窗显示控制
        hotListPageFloor:[],// 新品橱窗
        homePageFloor:[],//楼层
        quickoperaList: [], // 快捷运营入口列表
        supplierList:[],// 优质供应商列表
        recommendList:[],// 推荐列表
        dropScreenShow:false,
        isCmPopup:false,
        isCloseCoupon:false,
        currentHour: new Date().getHours(),
        timeSpeech:'',
        userInfo:{},
        paymentCount:0,//待付款
        waitShipmentsCount:0,//待发货
        shipmentsCount:0,//已发货
        salesReturnCount:0,//退货/款
        listQuery:{
            orderNo:'',
            orderState:0,
            userId:0,
            beginTime:'',
            endTime:'',
            pageNum:1,
            pageSize:1
        },
        orders:null,
        categories:[],
        isMenuHovered:false,
        selectedCategory:null,
        hideTimer:null,
        categoryTabIndex:1
    },
    filters: {

    },
    methods: {
        //切换分类
        handleClickTabS(index){
            this.categories = []
            this.categoryTabIndex = index
            this.GetProductClassify(index);
        },
        //获取一级分类
        GetProductClassify(index){
            const _self = this
            PublicApi.GetProductClassify({typeSort:index,source :'crm'},function (response) {
                if(response.code === 0){
                    _self.categories = response.data
                }
            })
        },
        GetMyPcCenterInfo(userId){
            const _self = this;
            UserApi.GetMyPcCenterInfo({userId:userId},function (response) {
                if(response.code === 0){
                    var data = response.data;
                    _self.userInfo = data.user;
                }
            })
        },
        // 获取订单数量
        GetQueryOrderNum(userId){
            const _self = this;
            OrderApi.GetQueryOrderNum({userId: userId}, function (response) {
                if (response.code === 0) {
                    const data = response.data;
                    _self.paymentCount = data.paymentCount
                    _self.waitShipmentsCount = data.waitShipmentsCount
                    _self.shipmentsCount = data.shipmentsCount
                    _self.salesReturnCount = data.salesReturnCount
                }
            })
        },
        getOrderList(params){//查询订单列表
            const _self = this;
            OrderApi.GetQueryOrderListData(params,function (response) {
                if(response.code === 0){
                    const data = response.data;
                    if(data.list && data.list.length>0) {
                        _self.orders = data.list[0].orderProductList[0];
                    }else{
                        _self.orders = [];
                    }
                }
            })
        },
        handleHidePopup(){
            this.isCmPopup = false
        },
        showDropScreen(){
            this.dropScreenShow = !this.dropScreenShow
        },
        hideDropScreen(){
            this.dropScreenShow = false
        },
        //处理金额
        filtersFormat(value) {
            if (value) {
                return Number(value).toFixed(2)
            } else {
                return '0.00'
            }
        },
        // 快捷运营列表
        footList(arr) {
            if (!Array.isArray(arr)) return []
            let newArr = [],a = []
            let indexNum = isPC ? 12 : 10
            arr.map((item, index) => {
                if (index !== 0 && index % indexNum === 0) {
                    newArr.push(a)
                    a = []
                    a.push(item)
                }
                else a.push(item)
                if (arr.length === (index + 1)) {
                    newArr.push(a)
                }
            })
            return newArr
        },
        // 处理供应商列表
        checkedSupplierList(arr) {
            if (!Array.isArray(arr)) return []
            let newArr = [],a = []
            let indexNum = isPC ? 4 : 4
            arr.map((item, index) => {
                if (index !== 0 && index % indexNum === 0) {
                    newArr.push(a)
                    a = []
                    a.push(item)
                }
                else a.push(item)
                if (arr.length === (index + 1)) {
                    newArr.push(a)
                }
            })
            return newArr
        },
        // 是否显示vip标签价格
        showVipPriceTag(pros){
            console.log('showVipPriceTag',pros.priceFlag)
            if(pros){
                //非会员
                // if(!GLOBAL_VIP_FLAG === 1) return false;
                // 商品所有机构可见
                if(pros.priceFlag === 0  && pros.svipProductFlag === 1 && pros.actStatus !==1 ) return true;
                // 商品价格仅资质机构可见
                if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 && pros.actStatus !==1) return true;
                // 商品价格仅医美机构可见
                if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE === 1 && pros.actStatus !==1) return true;
                // 其它
                return false;
            }
        },
        popupPage(){  // 弹窗点击跳转链接
            window.open(this.centerImage.link)
            // localStorage.setItem('lockTime',Date.now());
            // window.localStorage.setItem('isActivityStatus',true);
        },
        closePopup(){  // 关闭弹窗
              this.popupFlag=false;
              $('.Popup').slideUp(100);
              localStorage.setItem('lockTime',Date.now());
              localStorage.setItem('isActivityStatus',true);
        },
        diffTime(time){
            const date = Date.now();
            console.log('缓存时间戳',time);
            console.log('当前时间戳',date);
            console.log('计算时间戳',(date-time));
            return (date - time) >= 2 * 60 * 1000
        },
        // 页面主图轮播
        swiperBanner: function(){
            setTimeout(function(){
                if (isPC) {
                    $('#swiper-container').slide({
                        mainCell:".swiper-wrapper-banner",
                        titCell:".swiper-pagination-banner span",
                        effect: "leftLoop",
                        prevCell:".swiper-button-prev",
                        nextCell:".swiper-button-next",
                        interTime: 3000,
                        autoPlay: true,
                        autoPage: false,
                        trigger: "mouseover"
                    });
                } else {
                    var swiper = new Swiper('#swiper-container', {
                        loop : true,
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: false
                        },
                        navigation: {
                            nextEl: '.swiper-button-next',
                            prevEl: '.swiper-button-prev'
                        },
                        pagination: {
                            el: '.swiper-pagination',
                            clickable :true
                        }
                    });
                }
            },300);
        },
        GetHomeInit: function(){// 初始化
            const _self = this;
            PublicApi.GetHomeInit({ source: 1 },function(response){
                if(response.code === 0){
                    _self.couponEntry = response.data.couponEntry
                    _self.quickoperaList = _self.footList(response.data.shortcutList)
                    if(isPC){
                        _self.newsList = response.data.annlist.slice(0,2)
                    }else{
                        _self.newsList = response.data.annlist.slice(0,1)
                    }
                    _self.isCmPopup = GLOBAL_USER_ID <= 0
                    const centerImageList = response.data.centerImage
                    if(centerImageList && centerImageList.length > 0){
                        _self.centerImage = response.data.centerImage[0]
                        const isActivityStatus = localStorage.getItem('isActivityStatus');
                        //广告弹窗
                        if(isActivityStatus){
                            const lockTime = localStorage.getItem('lockTime');
                            _self.popupFlag = this.diffTime(lockTime);
                        }else{
                            setTimeout(function () {
                                _self.popupFlag = true;
                            },1000);
                        }
                    }
                    // if(GLOBAL_USER_ID === 0 && _self.couponEntry === 1){
                    //     const isActivityStatus = localStorage.getItem('isActivityStatus');
                    //     //新加优惠券弹窗
                    //     if(isActivityStatus){
                    //         const lockTime = localStorage.getItem('lockTime');
                    //         _self.popupFlag = this.diffTime(lockTime);
                    //     }else{
                    //         setTimeout(function () {
                    //             _self.popupFlag = true;
                    //         },1000);
                    //     }
                    // }
                }
            });
        },
        hanldDetails:function (id){// 跳转公告详情
            const _self = this;
            window.open('/news/details.html?id='+id);
        },
        // GetHomeRightData: function(){//模块加载
        //     var _self = this;
        //     PublicApi.GetHomeRightData({ source: 1 },function(response){
        //         if(response.code == 0){
        //             var data = response.data;
        //             _self.liveList = data.liveList;
        //             _self.cmImageList = data.cmImageList;
        //             _self.infoList = data.infoList;
        //         }else{
        //             CAIMEI.Alert(response.msg, '确定');
        //         }
        //     });
        // },
        GetHomeData: function(){//获取首页楼层
            var _self = this;
            PublicApi.GetHomeData({ source: 1,userId: _self.userId },function(response){
                if(response.code === 0){
                    var data = response.data;
                    _self.homePageFloor = data.zones;
                    _self.hotListPageFloor =  data.pageFloorList;
                    _self.recommendList = data.recommendProducts
                    _self.supplierList =  _self.checkedSupplierList(data.supplierImage);
                    setTimeout(function(){
                        // 图片懒加载
                        $("img[data-original]").lazyload();
                        _self.setAsideNav();
                        _self.swiperFloor();
                        // 设置页面查看更多
                        _self.setReadeMore();
                    },500);
                }else{
                    CAIMEI.Alert(response.msg, '确定');
                }
            });
        },
        PromotionsFormat:function(promo){//促销活动类型数据处理
            if(promo!=null){
                if(promo.type == 1 && promo.mode == 1){
                    return true
                }else{
                    return false
                }
            }
            return false
        },
        setAsideNav: function(){
            var _self = this;
            if (isPC) {
                var titArr = $('.section_page_title').find('h1');
                _self.asideNav = [];
                for (var i=0; i<titArr.length; i++){
                    _self.asideNav.push({
                        id: $(titArr[i]).attr("data-id"),
                        value: $(titArr[i]).text()
                    })
                }
            }
        },
        // 初始化普通轮播图
        initSimpleSwiper: function(){
            $('.recommendBox-wrapper').each(function(index, el){
                var cell = $(el).parents('.swiper-container-floor').find('.swiper-pagination')
                // var cell = $(".swiper-pagination-floor");
                var size = Math.ceil(cell.attr("data-id")/6);
                var span = '';
                for (var i = 0; i < size; i++) {
                    span += '<span></span>';
                }
                cell.html(span);

                $('.mySwiperSlide').slide({
                    mainCell:".recommendBox-wrapper",
                    titCell:".swiper-pagination span",
                    effect: "leftLoop",
                    autoPlay: false,
                    scroll:5,
                    vis:5
                });
            })
        },
        // 商品楼层轮播
        swiperFloor: function(){
            var self = this;
            setTimeout(function(){
                // 商品轮播
                if (isPC) {
                    self.initSimpleSwiper();
                    // var cell = $(".swiper-pagination-floor");
                    // var size = Math.ceil(cell.attr("data-id")/5);
                    // var span = '';
                    // for (var i = 0; i < size; i++) {
                    //     span += '<span></span>';
                    // }
                    // cell.html(span);

                    var swiper = new Swiper(".mySwiper", {
                        slidesPerView: 6,
                        spaceBetween: 13,
                        slidesPerGroup: 5,
                        loop: false,
                        autoplay: {
                            delay: 8000,
                            stopOnLastSlide: false,
                            disableOnInteraction: true,
                        },
                        loopFillGroupWithBlank: false,
                        pagination: {
                            el: ".swiper-pagination",
                            clickable:true
                        }
                    });
                } else {
                    var swiper = new Swiper('.swiper-container-floor', {
                        slidesPerView: 2,
                        slidesPerColumn: 2,
                        spaceBetween:0,
                        slidesPerGroup: 2,
                        autoplay: {
                            delay: 3000,
                            disableOnInteraction: false
                        },
                        pagination: {
                            el: '.swiper-pagination'
                        }
                    });
                }
                // 图片懒加载
                setTimeout(function(){
                    $("#recommendBox img[data-original]").lazyload();
                },0)
            },500);
        },
//        showSubNav: function(event){
//            var el = event.currentTarget;
//            var parent = $(el).parent();
//            parent.siblings().removeAttr("style").removeClass("on").find(".navItem").hide();
//            if (parent.hasClass("on")) {
//                parent.removeAttr("style").removeClass("on").find(".navItem").slideUp(200);
//            } else {
//                var height = parent.height();
//                parent.addClass("on").find(".navItem").slideDown(200);
//                if (parent.find(".navItem").length>0) {
//                    setTimeout(function(){
//                        height += parent.find(".navItem").height();
//                        parent.css("height",height);
//                    },200);
//                }
//            }
//        },
        // 设置页面查看更多按钮显示
        setReadeMore: function(){
            $(".section_page_more").each(function(){
                var id = $(this).attr('data-id')*1;
                var size = $(this).attr('data-size')*1;
                var el = $(this);
                var readMore = false;
                if (isPC) {
                    if([1,3].indexOf(id) !== -1 && size>7) {
                        readMore = true;
                    }
                    if([2,4].indexOf(id) !== -1 && size>5) {
                        readMore = true;
                    }
                    if([5,6,7].indexOf(id) !== -1 && size>10) {
                        readMore = true;
                    }
                } else {
                    if([1,3].indexOf(id) !== -1 && size>3) {
                        readMore = true;
                    }
                    if([2,4].indexOf(id) !== -1 && size>2) {
                        readMore = true;
                    }
                    if([5,6,7].indexOf(id) !== -1 && size>4) {
                        readMore = true;
                    }
                }
                if (readMore) {
                    el.addClass("show");
                } else {
                    el.parents(".section_page").find(".section_page_main").addClass("max");
                }
            });
        },
        // 点击查看更多
        showMoreItem: function(e){
            var el = e.currentTarget;
            $(el).parents(".section_page").find(".section_page_main").addClass("max");
            $(el).parents(".section_page_more").hide();
        },
        // 设置页面商品价格
        setPriceShown: function(){
            var productIds = [];
            var userId = GLOBAL_USER_ID;
            var shopId = GLOBAL_SHOP_ID;
            var userIdentity = GLOBAL_USER_IDENTITY;
            $(".main_price_text").each(function(){
                var id = $(this).attr('data-id');
                if (productIds.indexOf(id) === -1) {
                    productIds .push(id);
                }
            });
            // 获取商品价格列表
            $.getJSON(coreServer+"/commodity/price/list",{
                userId: GLOBAL_USER_ID,
                productIds: productIds.join(',')
            }).done(function (res) {
                if (res.code === 0 && res.data) {
                    var priceList = res.data;
                    $(".main_price_none").hide();
                    $(".price_grade_club").hide();
                    $(".price_grade_shop").hide();
                    $(".main_price_login").show();
                    priceList.map(function(price){
                        // userIdentity用户身份: 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构
                        // priceFlag: 0公开价格 1不公开价格 2仅对会员机构公开
                        var parent = $(".main_price_text.product_"+ price.productId);
                        var priceFlag = parent.find(".main_price_login").attr('data-id')*1;
                        if (priceFlag===3 || userIdentity===2 || (priceFlag === 0 && userIdentity===4 ) || (userIdentity===3 && shopId === price.shopId*1)) {
                            parent.find(".price_o_num").text(Number(price.originalPrice).toFixed(2));
                            parent.find(".price_num").text(Number(price.price).toFixed(2));
                            if(price.promotions && price.promotions.type*1===1 && price.promotions.mode*1===1){
                                parent.find(".main_price_show").hide();
                                parent.find(".main_price_show.none").show();
                                parent.find(".price_unit").show();
                            }
                        } else if (userIdentity===4 && priceFlag === 2){
                            parent.find(".main_price_show").hide();
                            parent.find(".price_grade_club").show();
                        } else {
                            parent.find(".main_price_show").hide();
                            parent.find(".price_grade_shop").show();
                        }
                    });
                }
            });
        },
        // 快捷运营跳转
        goQuickOpera($event) {
            // 链接跳转
            if ($event.link) window.open($event.link)
            // 文件浏览记录
            BeautyArchiveApi.GetStatisticsAddPv({type: 4, authorId: $event.id}, () => {
                console.log("浏览记录成功")
            })
        },
        // 供应商广告图统计
        setAdvStatistics ($event) {
            BeautyArchiveApi.GetStatisticsAddPv({type: 5, authorId: $event.id}, () => {
                console.log("供应商广告图点击统计成功")
            })
            if ($event.jumpLink) {
                window.open($event.jumpLink)
            }
        },
        handleCloseClick(){// 关闭优惠券宣传banner
            this.isCloseCoupon = false
        },
        //
        handleMenuCategory(category){
            this.selectedCategory = category
        },
        handleMenuLeave() {
            this.isMenuHovered = false
            this.selectedCategory = null
        },
        // 延迟隐藏面板（用于平滑过渡）
        scheduleHidePanel() {
            this.hideTimer = setTimeout(() => {
                this.isMenuHovered = false
                this.selectedCategory = null
            }, 300)
        },
        cancelHidePanel() {
            clearTimeout(this.hideTimer)
        }
    },
    created() {

        if(globalUserData){
            this.userId = this.listQuery.userId = globalUserData.userId;
            this.GetMyPcCenterInfo(this.userId)
            this.GetQueryOrderNum(this.userId)
            this.getOrderList(this.listQuery)
        }
    },
    computed: {
        greeting() {
            if (this.currentHour < 12) return 'Hi~ 上午好 🌞'
            else if (this.currentHour < 18) return 'Hi~ 下午好 ☕'
            else return 'Hi~ 晚上好 🌙'
        },
        // 计算属性控制面板显示
        isPanelVisible(){
            return this.isMenuHovered && this.selectedCategory
        }

    },
    mounted() {
        const _this = this;
        // 页面主图轮播
        this.GetProductClassify(this.categoryTabIndex)
        this.swiperBanner();
        // 获取设置商品价格
        if (GLOBAL_USER_ID) {
            this.GetHomeData();
            this.GetHomeInit();
        }else{
            // 设置页面查看更多
            this.setReadeMore();
            // 设置右侧导航
            this.setAsideNav();
            // 推荐专区商品轮播
            this.swiperFloor();
            this.GetHomeInit();
            this.GetHomeData();
        }
        // Dom加载后
        this.$nextTick(function(){
            // 图片懒加载
            $("img[data-original]").lazyload();
        });
        // 侧边栏滚动判断
        var distance = 0;
        $(window).scroll(function () {
            if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
                return false;
            }
            var scrollSize = Math.max($('html').scrollTop(), $('body').scrollTop());
            if(scrollSize >300){
                $('#sideNav').show();
                if(isPC){
                    // $('#advertising').show();
                    // 鼠标滚动楼层
                    setTimeout(function () {
                        distance = scrollSize;
                    },0);
                    // 侧边导航栏高亮
                    $('.section_page_title').each(function (i,e) {
                        //每个元素距离顶部的距离
                        var top = $(e).offset().top;
                        if(scrollSize > distance){
                            if(scrollSize >= (top-300)){
                                $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
                            }
                        }else {
                            if(scrollSize >= (top-600)){
                                $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
                            }
                        }
                    });
                    // 侧边模块固定 fixed
                    if($('#fixed-wrap').length>0 && $(window).height()>750) {
                        var tocWrap = $('#fixed-wrap');
                        var changeSize = $("#globalHead").outerHeight() + $("#swiper-container").outerHeight() + $("#sidebar").outerHeight();
                        scrollSize >= changeSize ? tocWrap.addClass("fixed") : tocWrap.removeClass("fixed");
                    }
                }
            }else {
                $('#sideNav').hide();
                $('#advertising').hide();
            }
        });
        // 侧边导航
        setTimeout(function(){
            $('#sideNav').on("click", 'a[data-id]',function () {
                var id = $(this).attr('data-id');
                var floorScroll = $('.section_page_title [data-id='+id+']').offset().top-200;
                $('html,body').animate({scrollTop: floorScroll},600);
            });
        },2000);
        //关闭广告图
        // $('#advertising').on('click','.close',function () {
        //     $(this).parents('.item').hide();
        // });
    }
});