index.js 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363
  1. var homeData = new Vue({
  2. el: '#container',
  3. data: {
  4. userId:0,
  5. images: [],
  6. listLoading:true,
  7. advertising: [],
  8. asideNav: [],
  9. productIdArr:[],
  10. liveList:[],//右侧直播模块
  11. cmImageList:[],//右侧活动模块
  12. infoList:[],//右侧文章模块
  13. pageList:[],//左侧楼层
  14. supplierImage:'',//供应商banner
  15. supplierWwwLink:'',//供应商banner 链接
  16. supplierList:[],//供应商列表
  17. // topMenuList:[],
  18. showflag:false,
  19. },
  20. filters: {
  21. statusType:function(value) {
  22. switch (value) {
  23. case 1:
  24. return '未开始';
  25. break;
  26. case 2:
  27. return '直播中';
  28. break;
  29. case 3:
  30. return '看回放';
  31. break;
  32. }
  33. },
  34. statusTypeClass:function(value) {
  35. switch (value) {
  36. case 1:
  37. return 'icon-wart';
  38. break;
  39. case 2:
  40. return 'icon-live';
  41. break;
  42. case 3:
  43. return 'icon-end';
  44. break;
  45. }
  46. },
  47. NumFormat:function(value) {//处理金额
  48. return Number(value).toFixed(2);
  49. },
  50. },
  51. methods: {
  52. zhuanti:function(){
  53. this.showflag=false;
  54. window.location.href='/activity/activityTopic.html?id=306&name=美博会';
  55. localStorage.setItem('lockTime',Date.now());
  56. window.localStorage.setItem('isActivityStatus',true);
  57. },
  58. closepopup:function(){
  59. this.showflag=false;
  60. $('.Popup').slideUp(100);
  61. localStorage.setItem('lockTime',Date.now());
  62. localStorage.setItem('isActivityStatus',true);
  63. },
  64. // GetBanners: function(){
  65. // var _self = this;
  66. // PublicApi.GetHomeBanner({},function(response){
  67. // if(response.code == 0){
  68. // _self.images = response.data;
  69. // _self.listLoading =false;
  70. // _self.SwiperBanner();
  71. // }else{
  72. // CAIMEI.Alert(response.msg, '确定');
  73. // }
  74. // });
  75. // },
  76. SwiperBanner: function(){
  77. setTimeout(function(){
  78. if (isPC) {
  79. $('#swiper-container').slide({
  80. mainCell:".swiper-wrapper-banner",
  81. titCell:".swiper-pagination-banner span",
  82. effect: "leftLoop",
  83. prevCell:".swiper-button-prev",
  84. nextCell:".swiper-button-next",
  85. interTime: 3000,
  86. autoPlay: true,
  87. autoPage: false,
  88. trigger: "mouseover"
  89. });
  90. } else {
  91. var swiper = new Swiper('#swiper-container', {
  92. loop : true,
  93. autoplay: {
  94. delay: 3000,
  95. disableOnInteraction: false
  96. },
  97. navigation: {
  98. nextEl: '.swiper-button-next',
  99. prevEl: '.swiper-button-prev'
  100. },
  101. pagination: {
  102. el: '.swiper-pagination',
  103. clickable :true
  104. }
  105. });
  106. }
  107. },300);
  108. },
  109. // GetNavigationMenu :function(){//获取顶部导航分类
  110. // var _self = this;
  111. // PublicApi.GetNavigationMenu({source:1},function(response){
  112. // if(response.code == 0){
  113. // _self.topMenuList = response.data.topMenuList;
  114. // }else{
  115. // CAIMEI.Alert(response.msg, '确定');
  116. // }
  117. // });
  118. // },
  119. GetHomeFloorData: function(){
  120. var _self = this;
  121. // 预设静态数据
  122. var staticJson = $("#floorJson").val();
  123. if (staticJson) {
  124. var staticData = JSON.parse(staticJson);
  125. _self.setFloorData(staticData);
  126. }
  127. // 如果没有静态数据(重新请求) 或 用户登录(重新请求获取价格)
  128. if (!staticJson || GLOBAL_USER_ID>0){
  129. PublicApi.GetHomeData({userId:GLOBAL_USER_ID,source:1},function(response){
  130. if(response.code == 0){
  131. var data = response.data;
  132. _self.setFloorData(data);
  133. }else{
  134. CAIMEI.Alert(response.msg, '确定');
  135. }
  136. });
  137. }
  138. },
  139. setFloorData: function(data){
  140. var _self = this;
  141. _self.listLoading = false;
  142. _self.pageList = data.homePageFloor;
  143. _self.liveList = data.liveList;
  144. _self.supplierList = data.supplierImage.qualitySupplierList;
  145. _self.supplierImage = data.supplierImage.wwwImage;
  146. _self.supplierWwwLink = data.supplierImage.wwwLink;
  147. _self.pageList.forEach(function(page){
  148. if(page.floorContent){
  149. if(isPC){
  150. if(page.floorContent.templateType == '1' || page.floorContent.templateType == '3'){
  151. if (page.floorImageList.length>7){
  152. page.isPageMore = true;
  153. }
  154. }else if(page.floorContent.templateType == '2' || page.floorContent.templateType == '4' || page.floorContent.templateType == '7'){
  155. if (page.floorImageList.length>5){
  156. page.isPageMore = true;
  157. }
  158. }else if(page.floorContent.templateType == '5'){
  159. if (page.floorImageList.length>10){
  160. page.isPageMore = true;
  161. }
  162. }
  163. }else{
  164. if(page.floorContent.templateType == '1' || page.floorContent.templateType == '3'){
  165. if (page.floorImageList.length>3){
  166. page.isPageMore = true;
  167. }
  168. }else if(page.floorContent.templateType == '2' || page.floorContent.templateType == '4'){
  169. if (page.floorImageList.length>2){
  170. page.isPageMore = true;
  171. }
  172. }else if(page.floorContent.templateType == '5'){
  173. if (page.floorImageList.length>4){
  174. page.isPageMore = true;
  175. }
  176. }
  177. }
  178. }
  179. });
  180. _self.GetHomeRightData();
  181. setTimeout(function() {
  182. // 设置侧边导航数据
  183. _self.SetAsideNav();
  184. _self.SwiperFloor();
  185. },500);
  186. console.log(_self.pageList)
  187. },
  188. GetHomeRightData: function(){
  189. var _self = this;
  190. PublicApi.GetHomeRightData({ source: 1 },function(response){
  191. if(response.code == 0){
  192. var data = response.data;
  193. _self.liveList = data.liveList;
  194. _self.cmImageList = data.cmImageList;
  195. _self.infoList = data.infoList;
  196. }else{
  197. CAIMEI.Alert(response.msg, '确定');
  198. }
  199. });
  200. },
  201. PromotionsFormat:function(promo){//促销活动类型数据处理
  202. if(promo!=null){
  203. if(promo.type == 1 && promo.mode == 1){
  204. return true
  205. }else{
  206. return false
  207. }
  208. }
  209. return false
  210. },
  211. showMorePageFn:function(page){
  212. page.isPageMore = !page.isPageMore;
  213. },
  214. getAdvertising: function(){
  215. var _self = this;
  216. $.getJSON("/home/advertising").done(function (r) {
  217. if (r.code === 0 && r.data) {
  218. _self.advertising = r.data;
  219. }
  220. });
  221. },
  222. SetAsideNav: function(){
  223. var _self = this;
  224. var titArr = $('.section_page_title').find('h1');
  225. _self.asideNav = [];
  226. for (var i=0; i<titArr.length; i++){
  227. _self.asideNav.push({
  228. id: $(titArr[i]).attr("data-id"),
  229. value: $(titArr[i]).text()
  230. })
  231. }
  232. },
  233. SwiperFloor: function(){
  234. setTimeout(function(){ // 图片懒加载
  235. $("img[data-original]").lazyload();
  236. },500);
  237. setTimeout(function(){
  238. if (isPC) {
  239. $('#recommendBox').slide({
  240. mainCell:".recommendBox-wrapper",
  241. titCell:".swiper-pagination-floor span",
  242. effect: "leftLoop",
  243. autoPlay: false,
  244. scroll:5,
  245. vis:5
  246. });
  247. } else {
  248. var swiper = new Swiper('#recommendBox', {
  249. slidesPerView: 2,
  250. slidesPerColumn: 2,
  251. spaceBetween:0,
  252. slidesPerGroup: 2,
  253. autoplay: {
  254. delay: 3000,
  255. disableOnInteraction: false
  256. },
  257. pagination: {
  258. el: '.swiper-pagination'
  259. }
  260. });
  261. }
  262. },500);
  263. },
  264. showSubNav: function(event){
  265. var el = event.currentTarget;
  266. var parent = $(el).parent();
  267. parent.siblings().removeAttr("style").removeClass("on").find(".navItem").hide();
  268. if (parent.hasClass("on")) {
  269. parent.removeAttr("style").removeClass("on").find(".navItem").slideUp(200);
  270. } else {
  271. var height = parent.height();
  272. parent.addClass("on").find(".navItem").slideDown(200);
  273. if (parent.find(".navItem").length>0) {
  274. setTimeout(function(){
  275. height += parent.find(".navItem").height();
  276. parent.css("height",height);
  277. },200);
  278. }
  279. }
  280. },
  281. diffTime:function(time){
  282. var date = Date.now();
  283. console.log('缓存时间戳',time);
  284. console.log('当前时间戳',date);
  285. console.log('计算时间戳',(date-time));
  286. return (date -time) < 2*60*1000 ? false : true
  287. }
  288. },
  289. created: function() {
  290. var userInfo = localStorage.getItem('userInfo');
  291. if(userInfo){
  292. this.userId = JSON.parse(userInfo).userId;
  293. }
  294. this.SwiperBanner();
  295. // this.GetNavigationMenu();
  296. this.GetHomeFloorData();
  297. },
  298. mounted: function() {
  299. var _this = this;
  300. // this.getAdvertising();
  301. // 侧边栏滚动判断
  302. var distance = 0;
  303. $(window).scroll(function () {
  304. if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
  305. return false;
  306. }
  307. var scoll = Math.max($('html').scrollTop(), $('body').scrollTop());
  308. if(scoll >300){
  309. $('#sideNav').show();
  310. if(isPC){
  311. $('#advertising').show();
  312. // 鼠标滚动楼层
  313. setTimeout(function () {
  314. distance = scoll;
  315. },0);
  316. $('.section_page_title').each(function (i,e) {
  317. //每个元素距离顶部的距离
  318. var top = $(e).offset().top;
  319. if(scoll > distance){
  320. if(scoll >= (top-300)){
  321. $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
  322. }
  323. }else {
  324. if(scoll >= (top-600)){
  325. $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
  326. }
  327. }
  328. });
  329. }
  330. }else {
  331. $('#sideNav').hide();
  332. $('#advertising').hide();
  333. }
  334. });
  335. // 侧边导航
  336. setTimeout(function(){
  337. $('#sideNav').on("click", 'a[data-id]',function () {
  338. var id = $(this).attr('data-id');
  339. var floorScroll = $('.section_page_title [data-id='+id+']').offset().top-200;
  340. $('html,body').animate({scrollTop: floorScroll},600);
  341. });
  342. },2000);
  343. //关闭广告图
  344. $('#advertising').on('click','.close',function () {
  345. $(this).parents('.item').hide();
  346. });
  347. var isActivityStatus = localStorage.getItem('isActivityStatus');
  348. //新加优惠券弹窗
  349. if(isActivityStatus){
  350. var lockTime = localStorage.getItem('lockTime');
  351. var eTime = this.diffTime(lockTime);
  352. _this.showflag = eTime;
  353. }else{
  354. setTimeout(function () {
  355. _this.showflag = true;
  356. },1000);
  357. }
  358. }
  359. });