index.js 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350
  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='/product/beautytopic.html';
  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. PublicApi.GetHomeData({userId:GLOBAL_USER_ID,source:1},function(response){
  122. if(response.code == 0){
  123. var data = response.data;
  124. // var floorList = [];
  125. _self.pageList = data.homePageFloor;
  126. _self.liveList = data.liveList;
  127. _self.supplierList = data.supplierImage.qualitySupplierList;
  128. _self.supplierImage = data.supplierImage.wwwImage;
  129. _self.supplierWwwLink = data.supplierImage.wwwLink;
  130. _self.pageList.forEach(function(page){
  131. if(page.floorContent){
  132. if(isPC){
  133. if(page.floorContent.templateType == '1' || page.floorContent.templateType == '3'){
  134. if (page.floorImageList.length>7){
  135. page.isPageMore = true;
  136. }
  137. }else if(page.floorContent.templateType == '2' || page.floorContent.templateType == '4' || page.floorContent.templateType == '7'){
  138. if (page.floorImageList.length>5){
  139. page.isPageMore = true;
  140. }
  141. }else if(page.floorContent.templateType == '5'){
  142. if (page.floorImageList.length>10){
  143. page.isPageMore = true;
  144. }
  145. }
  146. }else{
  147. if(page.floorContent.templateType == '1' || page.floorContent.templateType == '3'){
  148. if (page.floorImageList.length>3){
  149. page.isPageMore = true;
  150. }
  151. }else if(page.floorContent.templateType == '2' || page.floorContent.templateType == '4'){
  152. if (page.floorImageList.length>2){
  153. page.isPageMore = true;
  154. }
  155. }else if(page.floorContent.templateType == '5'){
  156. if (page.floorImageList.length>4){
  157. page.isPageMore = true;
  158. }
  159. }
  160. }
  161. }
  162. });
  163. console.log(_self.pageList)
  164. _self.GetHomeRightData();
  165. setTimeout(function() {
  166. // 设置侧边导航数据
  167. _self.SetAsideNav();
  168. _self.SwiperFloor();
  169. },500);
  170. }else{
  171. CAIMEI.Alert(response.msg, '确定');
  172. }
  173. });
  174. },
  175. GetHomeRightData: function(){
  176. var _self = this;
  177. PublicApi.GetHomeRightData({ source: 1 },function(response){
  178. if(response.code == 0){
  179. var data = response.data;
  180. _self.liveList = data.liveList;
  181. _self.cmImageList = data.cmImageList;
  182. _self.infoList = data.infoList;
  183. }else{
  184. CAIMEI.Alert(response.msg, '确定');
  185. }
  186. });
  187. },
  188. PromotionsFormat:function(promo){//促销活动类型数据处理
  189. if(promo!=null){
  190. if(promo.type == 1 && promo.mode == 1){
  191. return true
  192. }else{
  193. return false
  194. }
  195. }
  196. return false
  197. },
  198. showMorePageFn:function(page){
  199. page.isPageMore = !page.isPageMore;
  200. },
  201. getAdvertising: function(){
  202. var _self = this;
  203. $.getJSON("/home/advertising").done(function (r) {
  204. if (r.code === 0 && r.data) {
  205. _self.advertising = r.data;
  206. }
  207. });
  208. },
  209. SetAsideNav: function(){
  210. var _self = this;
  211. var titArr = $('.section_page_title').find('h1');
  212. for (var i=0; i<titArr.length; i++){
  213. _self.asideNav.push({
  214. id: $(titArr[i]).attr("data-id"),
  215. value: $(titArr[i]).text()
  216. })
  217. }
  218. },
  219. SwiperFloor: function(){
  220. setTimeout(function(){ // 图片懒加载
  221. $("img[data-original]").lazyload();
  222. },500);
  223. setTimeout(function(){
  224. if (isPC) {
  225. $('#recommendBox').slide({
  226. mainCell:".recommendBox-wrapper",
  227. titCell:".swiper-pagination-floor span",
  228. effect: "leftLoop",
  229. autoPlay: false,
  230. scroll:5,
  231. vis:5
  232. });
  233. } else {
  234. var swiper = new Swiper('#recommendBox', {
  235. slidesPerView: 2,
  236. slidesPerColumn: 2,
  237. spaceBetween:0,
  238. slidesPerGroup: 2,
  239. autoplay: {
  240. delay: 3000,
  241. disableOnInteraction: false
  242. },
  243. pagination: {
  244. el: '.swiper-pagination'
  245. }
  246. });
  247. }
  248. },500);
  249. },
  250. showSubNav: function(event){
  251. var el = event.currentTarget;
  252. var parent = $(el).parent();
  253. parent.siblings().removeAttr("style").removeClass("on").find(".navItem").hide();
  254. if (parent.hasClass("on")) {
  255. parent.removeAttr("style").removeClass("on").find(".navItem").slideUp(200);
  256. } else {
  257. var height = parent.height();
  258. parent.addClass("on").find(".navItem").slideDown(200);
  259. if (parent.find(".navItem").length>0) {
  260. setTimeout(function(){
  261. height += parent.find(".navItem").height();
  262. parent.css("height",height);
  263. },200);
  264. }
  265. }
  266. },
  267. diffTime:function(time){
  268. var date = Date.now();
  269. console.log('缓存时间戳',time);
  270. console.log('当前时间戳',date);
  271. console.log('计算时间戳',(date-time));
  272. return (date -time) < 2*60*1000 ? false : true
  273. }
  274. },
  275. created: function() {
  276. var userInfo = localStorage.getItem('userInfo');
  277. if(userInfo){
  278. this.userId = JSON.parse(userInfo).userId;
  279. }
  280. this.GetBanners();
  281. this.GetNavigationMenu();
  282. this.GetHomeFloorData();
  283. },
  284. mounted: function() {
  285. var _this = this;
  286. // this.getAdvertising();
  287. // 侧边栏滚动判断
  288. var distance = 0;
  289. $(window).scroll(function () {
  290. if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
  291. return false;
  292. }
  293. var scoll = Math.max($('html').scrollTop(), $('body').scrollTop());
  294. if(scoll >300){
  295. $('#sideNav').show();
  296. if(isPC){
  297. $('#advertising').show();
  298. // 鼠标滚动楼层
  299. setTimeout(function () {
  300. distance = scoll;
  301. },0);
  302. $('.section_page_title').each(function (i,e) {
  303. //每个元素距离顶部的距离
  304. var top = $(e).offset().top;
  305. if(scoll > distance){
  306. if(scoll >= (top-300)){
  307. $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
  308. }
  309. }else {
  310. if(scoll >= (top-600)){
  311. $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
  312. }
  313. }
  314. });
  315. }
  316. }else {
  317. $('#sideNav').hide();
  318. $('#advertising').hide();
  319. }
  320. });
  321. // 侧边导航
  322. setTimeout(function(){
  323. $('#sideNav').on("click", 'a[data-id]',function () {
  324. var id = $(this).attr('data-id');
  325. var floorScroll = $('.section_page_title [data-id='+id+']').offset().top-200;
  326. $('html,body').animate({scrollTop: floorScroll},600);
  327. });
  328. },2000);
  329. //关闭广告图
  330. // $('#advertising').on('click','.close',function () {
  331. // $(this).parents('.item').hide();
  332. // });
  333. // var isActivityStatus = localStorage.getItem('isActivityStatus');
  334. // //新加优惠券弹窗
  335. // if(isActivityStatus){
  336. // var lockTime = localStorage.getItem('lockTime');
  337. // var eTime = this.diffTime(lockTime);
  338. // _this.showflag = eTime;
  339. // }else{
  340. // setTimeout(function () {
  341. // _this.showflag = true;
  342. // },1000);
  343. // }
  344. }
  345. });