caimei365-www/src/main/resources/static/js/activity/beautyTopic/mixin.js

'use strict';

var showMoreMixin = function () {
	return {
		methods: {
			// 初始化列配置对象
			initCountMap: function initCountMap(config) {
				var map = {};
				var list = document.querySelectorAll('.fold-box');
				if (!list) return;
				list.forEach(function (item) {
					var floorType = item.getAttribute('data-floor-type');
					if (!floorType) return;
					// 模板id
					var templateId = floorType.split('-')[0];
					// 楼层id
					var floorId = floorType.split('-')[1];
					var key = 'template-' + templateId + '-' + floorId;
					map[key] = utils.deepClone(config['template-' + templateId]);
				});
				// 像vue实例中添加一组响应式数据
				this.$set(this.$data, 'countMap', map);
			},
			//获取显示个数
			makeList: function makeList(floorData, floorId) {
				var key = 'template-' + floorData.floorContent.templateType + '-' + floorId;
				var rule = this.isMobile ? 'mobile' : 'pc';
				var count = 999;
				if (this.countMap[key]) {
				    count = this.countMap[key].action ? this.countMap[key].count[rule][1] : this.countMap[key].count[rule][0]
				}

				if (floorData.floorImageList.length > count && this.countMap[key]) {
					this.countMap[key]['hasMore'] = true;
				}
				return floorData.floorImageList.filter(function (v, i) {
					return i < count;
				});
			},
			// 获取列表展开状态
			toggleState: function toggleState(templateId, floorId) {
				var key = 'template-' + templateId + '-' + floorId;
				if (this.countMap[key]) {
					return this.countMap[key].action;
				}
				return false;
			},
			// 是否显示加载更多按钮
			showToggleBtn: function showToggleBtn(floorData, floorId) {
				var key = 'template-' + floorData.floorContent.templateType + '-' + floorId;
				if (this.countMap[key]) {
					return this.countMap[key]['hasMore'];
				}
				return false;
			},
			// 展示更多
			toggleMore: function toggleMore(templateId, floorId) {
				var key = 'template-' + templateId + '-' + floorId;
				this.countMap[key].action = !this.countMap[key].action;
				setTimeout(function () {
					utils.responsive('.aspect', 'scalc');
				});
			}
		}
	};
}();

// 轮播图相关配置
var swiperMixin = function () {
	// vue轮播图混入对象
	return {
		methods: {
			// 上一页
			handlePrevClick: function handlePrevClick(floorId) {
				var id = '#swiper-template-' + floorId;
				var floor = document.querySelector(id);
				var prev = floor.querySelector('.swiper-button-prev');
				prev.click();
			},
			// 下一页
			handleNextClick: function handleNextClick(floorId) {
				var id = '#swiper-template-' + floorId;
				var floor = document.querySelector(id);
				var nexp = floor.querySelector('.swiper-button-next');
				nexp.click();
			}
		}
	};
}();