mixin.js 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. 'use strict';
  2. var showMoreMixin = function () {
  3. return {
  4. methods: {
  5. // 初始化列配置对象
  6. initCountMap: function initCountMap(config) {
  7. var map = {};
  8. var list = document.querySelectorAll('.fold-box');
  9. if (!list) return;
  10. list.forEach(function (item) {
  11. var floorType = item.getAttribute('data-floor-type');
  12. if (!floorType) return;
  13. // 模板id
  14. var templateId = floorType.split('-')[0];
  15. // 楼层id
  16. var floorId = floorType.split('-')[1];
  17. var key = 'template-' + templateId + '-' + floorId;
  18. map[key] = utils.deepClone(config['template-' + templateId]);
  19. });
  20. // 像vue实例中添加一组响应式数据
  21. this.$set(this.$data, 'countMap', map);
  22. },
  23. //获取显示个数
  24. makeList: function makeList(floorData, floorId) {
  25. var key = 'template-' + floorData.floorContent.templateType + '-' + floorId;
  26. var rule = this.isMobile ? 'mobile' : 'pc';
  27. var count = 999;
  28. if (this.countMap[key]) {
  29. count = this.countMap[key].action ? this.countMap[key].count[rule][1] : this.countMap[key].count[rule][0]
  30. }
  31. if (floorData.floorImageList.length > count && this.countMap[key]) {
  32. this.countMap[key]['hasMore'] = true;
  33. }
  34. return floorData.floorImageList.filter(function (v, i) {
  35. return i < count;
  36. });
  37. },
  38. // 获取列表展开状态
  39. toggleState: function toggleState(templateId, floorId) {
  40. var key = 'template-' + templateId + '-' + floorId;
  41. if (this.countMap[key]) {
  42. return this.countMap[key].action;
  43. }
  44. return false;
  45. },
  46. // 是否显示加载更多按钮
  47. showToggleBtn: function showToggleBtn(floorData, floorId) {
  48. var key = 'template-' + floorData.floorContent.templateType + '-' + floorId;
  49. if (this.countMap[key]) {
  50. return this.countMap[key]['hasMore'];
  51. }
  52. return false;
  53. },
  54. // 展示更多
  55. toggleMore: function toggleMore(templateId, floorId) {
  56. var key = 'template-' + templateId + '-' + floorId;
  57. this.countMap[key].action = !this.countMap[key].action;
  58. setTimeout(function () {
  59. utils.responsive('.aspect', 'scalc');
  60. });
  61. }
  62. }
  63. };
  64. }();
  65. // 轮播图相关配置
  66. var swiperMixin = function () {
  67. // vue轮播图混入对象
  68. return {
  69. methods: {
  70. // 上一页
  71. handlePrevClick: function handlePrevClick(floorId) {
  72. var id = '#swiper-template-' + floorId;
  73. var floor = document.querySelector(id);
  74. var prev = floor.querySelector('.swiper-button-prev');
  75. prev.click();
  76. },
  77. // 下一页
  78. handleNextClick: function handleNextClick(floorId) {
  79. var id = '#swiper-template-' + floorId;
  80. var floor = document.querySelector(id);
  81. var nexp = floor.querySelector('.swiper-button-next');
  82. nexp.click();
  83. }
  84. }
  85. };
  86. }();