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