activityTopic.js 15 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404
  1. var activity = new Vue({
  2. el: '#activity',
  3. data: {
  4. listLoading: true, //加载动画
  5. hotlist: [], //热搜词
  6. recommendPage: 1, //
  7. floorList: [], //楼层列表
  8. pageInfo: null,
  9. userId: 0, //用户id
  10. typeSort: '',
  11. showflag: false, //对话框
  12. params: { //请求参数
  13. pageId: '',
  14. userId: '',
  15. source: 1
  16. },
  17. nav_linkName: '', //导航名
  18. isPc: window.isPC
  19. },
  20. filters: {
  21. NumFormat: function (value) {//处理金额
  22. return Number(value).toFixed(2);
  23. },
  24. marginRight: function (index) {
  25. var strArr = index.toString().split('');
  26. var lastStr = strArr[strArr.length - 1];
  27. return lastStr === '2' || lastStr === '7'
  28. }
  29. },
  30. computed: {},
  31. created: function () {
  32. // this.init();
  33. },
  34. methods: {
  35. //促销活动类型数据处理
  36. PromotionsFormat: function (promo) {
  37. if (promo !== null) {
  38. if (promo.type === 1 && promo.mode === 1) {
  39. return true;
  40. } else {
  41. return false;
  42. }
  43. }
  44. return false;
  45. },
  46. closeup: function () {
  47. this.showflag = false;
  48. document.body.style.overflow = '';
  49. },
  50. showNav: function () {
  51. var _this = this;
  52. _this.showflag = !_this.showflag;
  53. if (_this.showflag) {
  54. document.body.style.overflow = 'hidden';
  55. } else {
  56. document.body.style.overflow = '';
  57. }
  58. },
  59. toserch: function (item) {
  60. window.location.href = '/product/instruelist.html?bigTypeID=' + item.bigTypeID + '&typeSort=' + this.typeSort + '&name=' + this.nav_linkName
  61. },
  62. //查看更多
  63. showMore: function (page) {
  64. page.isPageMore = false
  65. },
  66. //初始化数据
  67. init: function () {
  68. this.nav_linkName = decodeURI(CAIMEI.getUrlParam('name'));
  69. //判断用户是否登录
  70. var userInfo = localStorage.getItem('userInfo');
  71. if (userInfo) {
  72. this.params.userId = JSON.parse(userInfo).userId;
  73. }
  74. //获取页面id
  75. this.params.pageId = getUrlParam('id');
  76. this.getFloorData()
  77. },
  78. //处理商品状态
  79. fromatFloorProductStatus: function (formatData) {
  80. formatData.forEach(function (item) {
  81. item.floorImageList = item.floorImageList.filter(function (val) {
  82. return val.pcStatus === '1'
  83. });
  84. });
  85. },
  86. //获取页面数据
  87. getFloorData: function () {
  88. var _self = this;
  89. ProductApi.getActivityData(_self.params, function (res) {
  90. if (res.code === 0) {
  91. _self.floorList = res.data.floorList;
  92. _self.pageInfo = res.data.page;
  93. setTimeout(function () {
  94. _self.fromatFloorProductStatus(_self.floorList);
  95. if (_self.isPc) {
  96. _self.initFloorListPc(_self.floorList);
  97. } else {
  98. _self.initFloorListMobile(_self.floorList);
  99. }
  100. _self.listLoading = false;
  101. _self.initSwiper();
  102. });
  103. } else {
  104. CAIMEI.Alert(res.msg, '确定');
  105. }
  106. })
  107. },
  108. // PC楼层数据处理
  109. initFloorListPc: function (floorList) {
  110. var _that = this
  111. floorList.forEach(function (list) {
  112. var tempType = list.floorContent.templateType
  113. switch (tempType) {
  114. case '1':
  115. list.floorImageList = _that.swiperDataFormat(
  116. list.floorImageList,
  117. 12
  118. )
  119. break
  120. case '2':
  121. case '6':
  122. list.floorImageList = _that.swiperDataFormat(list.floorImageList, 6)
  123. break
  124. case '3':
  125. case '9':
  126. list.floorImageList = _that.swiperDataFormat(list.floorImageList, 4)
  127. break
  128. case '11':
  129. case '12':
  130. case '13':
  131. case '15':
  132. case '17':
  133. case '19':
  134. case '20':
  135. list.floorImageList.length > 5 && (list.isPageMore = true)
  136. break
  137. case '14':
  138. list.floorImageList.length > 10 && (list.isPageMore = true)
  139. break
  140. case '16':
  141. case '18':
  142. list.floorImageList.length > 7 && (list.isPageMore = true)
  143. break
  144. default:
  145. break
  146. }
  147. })
  148. },
  149. // 移动端楼层数据处理
  150. initFloorListMobile: function (floorList) {
  151. var _that = this
  152. floorList.forEach(function (list) {
  153. var tempType = list.floorContent.templateType
  154. switch (tempType) {
  155. case '1':
  156. list.floorImageList = _that.swiperDataFormat(list.floorImageList, 8)
  157. break
  158. case '2':
  159. list.floorImageList = _that.swiperDataFormat(list.floorImageList, 6)
  160. break
  161. case '9':
  162. list.floorImageList.length > 2 && (list.isPageMore = true)
  163. list.floorImageList = _that.swiperDataFormat(list.floorImageList, 4)
  164. break
  165. case '21':
  166. list.floorImageList = _that.swiperDataFormat(list.floorImageList, 4)
  167. break
  168. case '3':
  169. case '6':
  170. list.floorImageList.length > 4 && (list.isPageMore = true)
  171. break
  172. case '4':
  173. case '8':
  174. list.floorImageList.length > 2 && (list.isPageMore = true)
  175. break
  176. case '10':
  177. list.floorImageList.length > 1 && (list.isPageMore = true)
  178. break
  179. case '11':
  180. case '12':
  181. case '13':
  182. case '15':
  183. list.floorImageList.length > 2 && (list.isPageMore = true)
  184. break
  185. case '14':
  186. case '19':
  187. case '20':
  188. list.floorImageList.length > 4 && (list.isPageMore = true)
  189. break
  190. case '16':
  191. case '17':
  192. case '18':
  193. list.floorImageList.length > 3 && (list.isPageMore = true)
  194. break
  195. default:
  196. break
  197. }
  198. })
  199. },
  200. // 轮播图数据处理
  201. swiperDataFormat: function (list, n) {
  202. var result = []
  203. var page = Math.ceil(list.length / n)
  204. for (var i = 0; i < page; i++) {
  205. result.push(list.splice(0, n))
  206. }
  207. return result
  208. },
  209. // 轮播图样式生产方法
  210. swiperStyle: function (tempType, swiperEl, btns) {
  211. var swiper = null
  212. var slides = $(swiperEl).find('.swiper-slide').length
  213. var option = {
  214. loop: true,
  215. noSwiping: false,
  216. noSwipingClass: 'no-swiping',
  217. }
  218. if (typeof Object.assign != 'function') {
  219. Object.assign = function (target) {
  220. 'use strict';
  221. if (target == null) {
  222. throw new TypeError('Cannot convert undefined or null to object');
  223. }
  224. target = Object(target);
  225. for (var index = 1; index < arguments.length; index++) {
  226. var source = arguments[index];
  227. if (source != null) {
  228. for (var key in source) {
  229. if (Object.prototype.hasOwnProperty.call(source, key)) {
  230. target[key] = source[key];
  231. }
  232. }
  233. }
  234. }
  235. return target;
  236. };
  237. }
  238. if (
  239. tempType === '1' ||
  240. tempType === '2' ||
  241. tempType === '3' ||
  242. tempType === '6' ||
  243. tempType === '9'
  244. ) {
  245. var myOption = {
  246. autoplay: {
  247. delay: 5000,
  248. stopOnLastSlide: false,
  249. disableOnInteraction: false,
  250. },
  251. pagination: {
  252. el: '.swiper-pagination',
  253. bulletClass: 'cm-bullet', //需设置.my-bullet样式
  254. bulletActiveClass: 'cm-bullet-active',
  255. clickable: true,
  256. },
  257. }
  258. Object.assign(option, myOption);
  259. } else if (tempType === '21') {
  260. var myOption1 = {
  261. autoplay: {
  262. delay: 5000,
  263. stopOnLastSlide: false,
  264. disableOnInteraction: false,
  265. },
  266. pagination: {
  267. el: '.swiper-pagination',
  268. bulletClass: 'cm-bullet', //需设置.my-bullet样式
  269. bulletActiveClass: 'cm-bullet-active',
  270. clickable: true,
  271. },
  272. }
  273. if (this.isPc) {
  274. var myOption2 = {
  275. slidesPerView: 5,
  276. slidesPerGroup: 5,
  277. spaceBetween: 16,
  278. }
  279. Object.assign(option, myOption2);
  280. }
  281. Object.assign(option, myOption1);
  282. } else if (tempType === '4' || tempType === '8') {
  283. var myOption1 = {
  284. slidesPerView: 2,
  285. slidesPerGroup: 2,
  286. spaceBetween: 16,
  287. noSwipingClass: 'no-swiping',
  288. navigation: {
  289. nextEl: btns.next,
  290. prevEl: btns.prev,
  291. },
  292. }
  293. if (Math.ceil(slides / 2) === 1) {
  294. option.noSwiping = true
  295. option.loop = false
  296. $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
  297. }
  298. Object.assign(option, myOption1);
  299. } else if (tempType === '5') {
  300. var myOption1 = {
  301. slidesPerView: 3,
  302. slidesPerGroup: 3,
  303. spaceBetween: 16,
  304. navigation: {
  305. nextEl: btns.next,
  306. prevEl: btns.prev,
  307. },
  308. }
  309. if (Math.ceil(slides / 3) === 1) {
  310. option.noSwiping = true
  311. option.loop = false
  312. $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
  313. }
  314. Object.assign(option, myOption1);
  315. } else if (tempType === '7') {
  316. var myOption1 = {
  317. slidesPerView: 4,
  318. slidesPerGroup: 4,
  319. spaceBetween: 16,
  320. navigation: {
  321. nextEl: btns.next,
  322. prevEl: btns.prev,
  323. },
  324. }
  325. if (Math.ceil(slides / 4) === 1) {
  326. option.noSwiping = true
  327. option.loop = false
  328. $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
  329. }
  330. Object.assign(option, myOption1);
  331. } else if (tempType === '10') {
  332. var myOption1 = {
  333. navigation: {
  334. nextEl: btns.next,
  335. prevEl: btns.prev,
  336. },
  337. }
  338. if (slides === 1) {
  339. option.noSwiping = true
  340. option.loop = false
  341. $(swiperEl).parent().find('.cm-swiper-button').css('display', 'none')
  342. }
  343. Object.assign(option, myOption1);
  344. }
  345. return function () {
  346. if (slides > 1) {
  347. swiper = new Swiper(swiperEl, option)
  348. if (swiper.pagination.bullets) {
  349. for (i = 0; i < swiper.pagination.bullets.length; i++) {
  350. swiper.pagination.bullets[i].onmouseover = function () {
  351. this.click()
  352. }
  353. }
  354. }
  355. }
  356. }
  357. },
  358. // 初始化轮播图
  359. initSwiper: function () {
  360. var _that = this;
  361. setTimeout(function () {
  362. var swiperTemps = [
  363. '1',
  364. '2',
  365. '3',
  366. '4',
  367. '5',
  368. '6',
  369. '7',
  370. '8',
  371. '9',
  372. '10',
  373. '21',
  374. ];
  375. $('.swiper-container').each(function (i, el) {
  376. // 通过轮播图id解析出模板id及轮播图el
  377. var tempType = el.id.split('-')[1];
  378. var swiperEl = '#' + el.id;
  379. var btns = {
  380. prev: '',
  381. next: '',
  382. };
  383. // 初始化轮播图按钮控件class
  384. var btnList = $(el).parent().find('.cm-swiper-button');
  385. if (btnList.length === 2) {
  386. btns.prev = '.' + btnList[0].classList[2];
  387. btns.next = '.' + btnList[1].classList[2];
  388. }
  389. if (swiperTemps.indexOf(tempType) !== -1) {
  390. _that.swiperStyle(tempType, swiperEl, btns)();
  391. }
  392. });
  393. $('img[data-original]').lazyload();
  394. })
  395. },
  396. },
  397. mounted: function () {
  398. this.init();
  399. // this.testData();
  400. }
  401. });