index.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281
  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. },
  19. filters: {
  20. statusType:function(value) {
  21. switch (value) {
  22. case '1':
  23. return '未开始';
  24. break;
  25. case '2':
  26. return '直播中';
  27. break;
  28. case '3':
  29. return '已结束';
  30. break;
  31. }
  32. },
  33. statusTypeClass:function(value) {
  34. switch (value) {
  35. case '1':
  36. return 'icon-wart';
  37. break;
  38. case '2':
  39. return 'icon-live';
  40. break;
  41. case '3':
  42. return 'icon-end';
  43. break;
  44. }
  45. },
  46. NumFormat:function(value) {//处理金额
  47. return Number(value).toFixed(2);
  48. },
  49. },
  50. methods: {
  51. GetBanners: function(){
  52. var _self = this;
  53. PublicApi.GetHomeBanner({},function(response){
  54. if(response.code == 0){
  55. _self.images = response.data;
  56. _self.SwiperBanner();
  57. }else{
  58. CAIMEI.Alert(response.msg, '确定');
  59. }
  60. });
  61. },
  62. SwiperBanner: function(){
  63. setTimeout(function(){
  64. if (isPC) {
  65. $('#swiper-container').slide({
  66. mainCell:".swiper-wrapper-banner",
  67. titCell:".swiper-pagination-banner span",
  68. effect: "leftLoop",
  69. prevCell:".swiper-button-prev",
  70. nextCell:".swiper-button-next",
  71. interTime: 3000,
  72. autoPlay: true,
  73. autoPage: false,
  74. trigger: "mouseover"
  75. });
  76. } else {
  77. var swiper = new Swiper('#swiper-container', {
  78. loop : true,
  79. autoplay: {
  80. delay: 3000,
  81. disableOnInteraction: false
  82. },
  83. navigation: {
  84. nextEl: '.swiper-button-next',
  85. prevEl: '.swiper-button-prev'
  86. },
  87. pagination: {
  88. el: '.swiper-pagination',
  89. clickable :true
  90. }
  91. });
  92. }
  93. },500);
  94. },
  95. GetHomeFloorData: function(){
  96. var _self = this;
  97. PublicApi.GetHomeData({userId:GLOBAL_USER_ID,soure:1},function(response){
  98. if(response.code == 0){
  99. var data = response.data;
  100. _self.pageList = data.homePageFloor;
  101. _self.liveList = data.liveList;
  102. _self.supplierList = data.supplierImage.qualitySupplierList;
  103. _self.supplierImage = data.supplierImage.wwwImage;
  104. _self.supplierWwwLink = data.supplierImage.wwwLink;
  105. _self.listLoading =false;
  106. setTimeout(function() {
  107. // 设置侧边导航数据
  108. _self.SetAsideNav();
  109. _self.SwiperFloor();
  110. },500);
  111. }else{
  112. CAIMEI.Alert(response.msg, '确定');
  113. }
  114. });
  115. },
  116. GetNavigationMenu : function(){//获取顶部导航分类
  117. var _self = this;
  118. PublicApi.GetNavigationMenu({},function(response){
  119. if(response.code == 0){
  120. _self.topMenuList = response.data.topMenuList;
  121. }else{
  122. CAIMEI.Alert(response.msg, '确定');
  123. }
  124. });
  125. },
  126. GetHomeRightData: function(){
  127. var _self = this;
  128. PublicApi.GetHomeRightData({ soure: 1 },function(response){
  129. if(response.code == 0){
  130. var data = response.data;
  131. _self.liveList = data.liveList;
  132. _self.cmImageList = data.cmImageList;
  133. _self.infoList = data.infoList;
  134. }else{
  135. CAIMEI.Alert(response.msg, '确定');
  136. }
  137. });
  138. },
  139. PromotionsFormat:function(promo){//促销活动类型数据处理
  140. if(promo!=null){
  141. if(promo.type == 1 && promo.mode == 1){
  142. return true
  143. }else{
  144. return false
  145. }
  146. }
  147. return false
  148. },
  149. showMorePageFn:function(page){
  150. page.isPageMore = true;
  151. },
  152. getAdvertising: function(){
  153. var _self = this;
  154. $.getJSON("/home/advertising").done(function (r) {
  155. if (r.code === 0 && r.data) {
  156. _self.advertising = r.data;
  157. }
  158. });
  159. },
  160. SetAsideNav: function(){
  161. var _self = this;
  162. var titArr = $('.section_page_title').find('h1');
  163. for (var i=0; i<titArr.length; i++){
  164. _self.asideNav.push({
  165. id: $(titArr[i]).attr("data-id"),
  166. value: $(titArr[i]).text()
  167. })
  168. }
  169. },
  170. SwiperFloor: function(){
  171. setTimeout(function(){ // 图片懒加载
  172. $("img[data-original]").lazyload();
  173. },500);
  174. setTimeout(function(){
  175. if (isPC) {
  176. $('#recommendBox').slide({
  177. mainCell:".recommendBox-wrapper",
  178. titCell:".swiper-pagination-floor span",
  179. effect: "leftLoop",
  180. autoPlay: true,
  181. scroll:5,
  182. vis:5
  183. });
  184. } else {
  185. var swiper = new Swiper('#recommendBox', {
  186. slidesPerView: 2,
  187. slidesPerColumn: 2,
  188. spaceBetween: 0,
  189. slidesPerGroup: 2,
  190. autoplay: {
  191. delay: 3000,
  192. disableOnInteraction: false
  193. },
  194. pagination: {
  195. el: '.swiper-pagination'
  196. }
  197. });
  198. }
  199. },500);
  200. },
  201. showSubNav: function(event){
  202. var el = event.currentTarget;
  203. var parent = $(el).parent();
  204. parent.siblings().removeAttr("style").removeClass("on").find(".navItem").hide();
  205. if (parent.hasClass("on")) {
  206. parent.removeAttr("style").removeClass("on").find(".navItem").slideUp(200);
  207. } else {
  208. var height = parent.height();
  209. parent.addClass("on").find(".navItem").slideDown(200);
  210. if (parent.find(".navItem").length>0) {
  211. setTimeout(function(){
  212. height += parent.find(".navItem").height();
  213. parent.css("height",height);
  214. },200);
  215. }
  216. }
  217. }
  218. },
  219. created: function() {
  220. var userInfo = localStorage.getItem('userInfo');
  221. if(userInfo){
  222. this.userId = JSON.parse(userInfo).userId;
  223. }
  224. this.GetBanners();
  225. this.GetHomeFloorData();
  226. this.GetHomeRightData();
  227. this.GetNavigationMenu();
  228. },
  229. mounted: function() {
  230. // this.getAdvertising();
  231. // 侧边栏滚动判断
  232. var distance = 0;
  233. $(window).scroll(function () {
  234. if($('body').attr("style") && $('body').attr("style").indexOf('fixed')>0){
  235. return false;
  236. }
  237. var scoll = Math.max($('html').scrollTop(), $('body').scrollTop());
  238. if(scoll >450){
  239. $('#sideNav').show();
  240. if(isPC){
  241. $('#advertising').show();
  242. // 鼠标滚动楼层
  243. setTimeout(function () {
  244. distance = scoll;
  245. },0);
  246. $('.section_page_title').each(function (i,e) {
  247. //每个元素距离顶部的距离
  248. var top = $(e).offset().top;
  249. if(scoll > distance){
  250. if(scoll >= (top-300)){
  251. $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
  252. }
  253. }else {
  254. if(scoll >= (top-600)){
  255. $('#sideNav').find('a').eq(i).addClass('on').siblings().removeClass("on");
  256. }
  257. }
  258. });
  259. }
  260. }else {
  261. $('#sideNav').hide();
  262. $('#advertising').hide();
  263. }
  264. });
  265. // 侧边导航
  266. setTimeout(function(){
  267. $('#sideNav').on("click", 'a[data-id]',function () {
  268. var id = $(this).attr('data-id');
  269. var floorScroll = $('.section_page_title [data-id='+id+']').offset().top;
  270. $('html,body').animate({scrollTop: floorScroll},600);
  271. });
  272. },2000);
  273. //关闭广告图
  274. $('#advertising').on('click','.close',function () {
  275. $(this).parents('.item').hide();
  276. })
  277.  
  278. }
  279. });