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(); } });