caimei365-www/src/main/resources/static/js/activity/activityTopic.js

var activity = new Vue({
    el: '#activity',
    data: {
        listLoading: true, //加载动画
        hotlist: [],       //热搜词
        recommendPage: 1,  //
        floorList: [],    //楼层列表
        pageInfo: null,
        userId: 0,         //用户id
        typeSort: '',
        showflag: false,   //对话框
        params: {          //请求参数
            pageId: '',
            userId: '',
            source: 1
        },
        nav_linkName: '',   //导航名
        isPc: window.isPC
    },
    filters: {
        NumFormat: function (value) {//处理金额
            return Number(value).toFixed(2);
        },
        marginRight: function (index) {
            var strArr = index.toString().split('');
            var lastStr = strArr[strArr.length - 1];
            return lastStr === '2' || lastStr === '7'
        }
    },
    computed: {},
    created: function () {
        // this.init();
    },
    methods: {
        //促销活动类型数据处理
        PromotionsFormat: function (promo) {
            if (promo !== null) {
                if (promo.type === 1 && promo.mode === 1) {
                    return true;
                } else {
                    return false;
                }
            }
            return false;
        },
        closeup: function () {
            this.showflag = false;
            document.body.style.overflow = '';
        },
        showNav: function () {
            var _this = this;
            _this.showflag = !_this.showflag;
            if (_this.showflag) {
                document.body.style.overflow = 'hidden';
            } else {
                document.body.style.overflow = '';
            }
        },
        toserch: function (item) {
            window.location.href = '/product/classify-'+this.typeSort+'-'+item.bigTypeID+'.html?name='+this.nav_linkName
        },
        //查看更多
        showMore: function (page) {
            page.isPageMore = false
        },
        //初始化数据
        init: function () {
            this.nav_linkName = decodeURI(CAIMEI.getUrlParam('name'));
            //判断用户是否登录
            var userInfo = localStorage.getItem('userInfo');
            if (userInfo) {
                this.params.userId = JSON.parse(userInfo).userId;
            }
            //获取页面id
            this.params.pageId = getUrlParam('id');
            this.getFloorData()
        },
        //处理商品状态
        fromatFloorProductStatus: function (formatData) {
            formatData.forEach(function (item) {
                item.floorImageList = item.floorImageList.filter(function (val) {
                    return val.pcStatus === '1'
                });
            });
        },
        //获取页面数据
        getFloorData: function () {
            var _self = this;
            ProductApi.getActivityData(_self.params, function (res) {
                if (res.code === 0) {
                    _self.floorList = res.data.floorList;
                    _self.pageInfo = res.data.page;
                    setTimeout(function () {
                        _self.fromatFloorProductStatus(_self.floorList);
                        if (_self.isPc) {
                            _self.initFloorListPc(_self.floorList);
                        } else {
                            _self.initFloorListMobile(_self.floorList);
                        }
                        _self.listLoading = false;
                        _self.initSwiper();
                    });
                } else {
                    CAIMEI.Alert(res.msg, '确定');
                }
            })
        },
        // PC楼层数据处理
        initFloorListPc: function (floorList) {
            var _that = this
            floorList.forEach(function (list) {
                if (list.floorContent) {

                    var tempType = list.floorContent.templateType
                    switch (tempType) {
                        case '1':
                            list.floorImageList = _that.swiperDataFormat(
                                list.floorImageList,
                                12
                            )
                            break
                        case '2':
                        case '6':
                            list.floorImageList = _that.swiperDataFormat(list.floorImageList, 6)
                            break
                        case '3':
                        case '9':
                            list.floorImageList = _that.swiperDataFormat(list.floorImageList, 4)
                            break
                        case '11':
                        case '12':
                        case '13':
                        case '15':
                        case '17':
                        case '19':
                        case '20':
                            list.floorImageList.length > 5 && (list.isPageMore = true)
                            break
                        case '14':
                            list.floorImageList.length > 10 && (list.isPageMore = true)
                            break
                        case '16':
                        case '18':
                            list.floorImageList.length > 7 && (list.isPageMore = true)
                            break
                        default:
                            break
                    }
                }

            })
        },
        // 移动端楼层数据处理
        initFloorListMobile: function (floorList) {
            var _that = this
            floorList.forEach(function (list) {
                if (list.floorContent) {
                    var tempType = list.floorContent.templateType
                    switch (tempType) {
                        case '1':
                            list.floorImageList = _that.swiperDataFormat(list.floorImageList, 8)
                            break
                        case '2':
                            list.floorImageList = _that.swiperDataFormat(list.floorImageList, 6)
                            break
                        case '9':
                            list.floorImageList.length > 2 && (list.isPageMore = true)
                            list.floorImageList = _that.swiperDataFormat(list.floorImageList, 4)
                            break
                        case '21':
                            list.floorImageList = _that.swiperDataFormat(list.floorImageList, 4)
                            break
                        case '3':
                        case '6':
                            list.floorImageList.length > 4 && (list.isPageMore = true)
                            break
                        case '4':
                        case '8':
                            list.floorImageList.length > 2 && (list.isPageMore = true)
                            break
                        case '10':
                            list.floorImageList.length > 1 && (list.isPageMore = true)
                            break
                        case '11':
                        case '12':
                        case '13':
                        case '15':
                            list.floorImageList.length > 2 && (list.isPageMore = true)
                            break
                        case '14':
                        case '19':
                        case '20':
                            list.floorImageList.length > 4 && (list.isPageMore = true)
                            break
                        case '16':
                        case '17':
                        case '18':
                            list.floorImageList.length > 3 && (list.isPageMore = true)
                            break
                        default:
                            break
                    }
                }
            })
        },
        // 轮播图数据处理
        swiperDataFormat: function (list, n) {
            var result = []
            var page = Math.ceil(list.length / n)
            for (var i = 0; i < page; i++) {
                result.push(list.splice(0, n))
            }
            return result
        },
        // 轮播图样式生产方法
        swiperStyle: function (tempType, swiperEl, btns) {
            var swiper = null
            var slides = $(swiperEl).find('.swiper-slide').length
            var option = {
                loop: true,
                noSwiping: false,
                noSwipingClass: 'no-swiping',
            }
            if (typeof Object.assign != 'function') {
                Object.assign = function (target) {
                    'use strict';
                    if (target == null) {
                        throw new TypeError('Cannot convert undefined or null to object');
                    }
                    target = Object(target);
                    for (var index = 1; index < arguments.length; index++) {
                        var source = arguments[index];
                        if (source != null) {
                            for (var key in source) {
                                if (Object.prototype.hasOwnProperty.call(source, key)) {
                                    target[key] = source[key];
                                }
                            }
                        }
                    }
                    return target;
                };
            }
            if (
                tempType === '1' ||
                tempType === '2' ||
                tempType === '3' ||
                tempType === '6' ||
                tempType === '9'
            ) {
                var myOption = {
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        bulletClass: 'cm-bullet', //需设置.my-bullet样式
                        bulletActiveClass: 'cm-bullet-active',
                        clickable: true,
                    },
                }
                Object.assign(option, myOption);
            } else if (tempType === '21') {
                var myOption1 = {
                    autoplay: {
                        delay: 5000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '.swiper-pagination',
                        bulletClass: 'cm-bullet', //需设置.my-bullet样式
                        bulletActiveClass: 'cm-bullet-active',
                        clickable: true,
                    },
                }

                if (this.isPc) {
                    var myOption2 = {
                        slidesPerView: 5,
                        slidesPerGroup: 5,
                        spaceBetween: 16,
                    }
                    if(slides <= 5){
                        myOption1.autoplay=false;
                        option.loop = false;
                        myOption1.pagination = false;
                    }
                    Object.assign(option, myOption2);
                }
                Object.assign(option, myOption1);
            } else if (tempType === '4' || tempType === '8') {
                var myOption1 = {
                    slidesPerView: 2,
                    slidesPerGroup: 2,
                    spaceBetween: 16,
                    noSwipingClass: 'no-swiping',
                    navigation: {
                        nextEl: btns.next,
                        prevEl: btns.prev,
                    },
                }
                if (Math.ceil(slides / 2) === 1) {
                    option.noSwiping = true
                    option.loop = false
                    $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
                }
                Object.assign(option, myOption1);
            } else if (tempType === '5') {
                var myOption1 = {
                    slidesPerView: 3,
                    slidesPerGroup: 3,
                    spaceBetween: 16,
                    navigation: {
                        nextEl: btns.next,
                        prevEl: btns.prev,
                    },
                }
                if (Math.ceil(slides / 3) === 1) {
                    option.noSwiping = true
                    option.loop = false
                    $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
                }
                Object.assign(option, myOption1);
            } else if (tempType === '7') {
                var myOption1 = {
                    slidesPerView: 4,
                    slidesPerGroup: 4,
                    spaceBetween: 16,
                    navigation: {
                        nextEl: btns.next,
                        prevEl: btns.prev,
                    },
                }
                if (Math.ceil(slides / 4) === 1) {
                    option.noSwiping = true
                    option.loop = false
                    $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
                }
                Object.assign(option, myOption1);
            } else if (tempType === '10') {
                var myOption1 = {
                    navigation: {
                        nextEl: btns.next,
                        prevEl: btns.prev,
                    },
                }
                if (slides === 1) {
                    option.noSwiping = true
                    option.loop = false
                    $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
                }
                Object.assign(option, myOption1);
            }
            return function () {
                if (slides > 1) {
                    swiper = new Swiper(swiperEl, option)
                    if (swiper.pagination.bullets) {
                        for (i = 0; i < swiper.pagination.bullets.length; i++) {
                            swiper.pagination.bullets[i].onmouseover = function () {
                                this.click()
                            }
                        }
                    }
                }
            }
        },
        // 初始化轮播图
        initSwiper: function () {
            var _that = this;
            setTimeout(function () {
                var swiperTemps = [
                    '1',
                    '2',
                    '3',
                    '4',
                    '5',
                    '6',
                    '7',
                    '8',
                    '9',
                    '10',
                    '21',
                ];
                $('.swiper-container').each(function (i, el) {
                    // 通过轮播图id解析出模板id及轮播图el
                    var tempType = el.id.split('-')[1];
                    var swiperEl = '#' + el.id;
                    var btns = {
                        prev: '',
                        next: '',
                    };
                    // 初始化轮播图按钮控件class
                    var btnList = $(el).parent().find('.cm-swiper-button');
                    if (btnList.length === 2) {
                        btns.prev = '.' + btnList[0].classList[2];
                        btns.next = '.' + btnList[1].classList[2];
                    }
                    if (swiperTemps.indexOf(tempType) !== -1) {
                        console.log(tempType)
                        _that.swiperStyle(tempType, swiperEl, btns)();
                    }
                });
                $('img[data-original]').lazyload();
                $('title').html(_that.pageInfo.title);
            })
        },

    },
    mounted: function () {
        this.init();
        // this.testData();
    }
});