php/www/webapp/o2o/js/page/home.js

define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'address'], function ($, template, IScroll, product, user, native, config, address) {

	/*
	 * 先定义一些模块内用到的function
	 */
	function back(event) {
		event.preventDefault();
		native.back();
	}

	/*
	 * 模块结构：5部分。
	 * title:题目。
	 * content:不知道是什么，似乎从没用过。
	 * 以下可以当作生命周期回调，虽然并不清楚是什么时候回调的……
	 * init:根据上一个页面传来的pageData初始化本页数据，生成页面，绑定事件。
	 * beforeopen:接收上一个页面传来的数据、有需要的话重置数据
	 * afteropen:做一些网络请求。
	 * beforeclose：
	 */
	return {
		title: '壹管家上门服务',
		body: '',
		init: function (pageData, dtd) {
			/* this是什么？ */
			var $view = this;
			var $doc = $(document);
			/*提示信息*/
			/* 定义按钮事件。
			 * 为什么不是$(selector).onclick(function)呢？
			 */
			//返回
			$.newTouch('.back-button', function (event) {
				back.call(this, event);
			}, $view);
			$view.on('tapBackButton', function (event) {
				back.call(this, event);
			});
			//客服电话
			$.newTouch('.service-telephone', function (event) {
				event.preventDefault();

				native.call('4000328170');
			}, $view);

			//加载弹框
			setInterval(function () {
				$('.swiper-container').height($('.swiper-container img').height());
				// $('.pagination').css('bottom', '0.15rem');
			}, 200);
			/*自动关闭活动窗口*/
			$.newTouch('.btn-o2o-home', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'myCoupon',
					pushData: {
						needReload: true
					}
				});
			}, $view);
			//充值卡
			$.newTouch('.btn-banner-recharge', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'recharge',
					pushData: {
						needReload: true,
						backHash: ''
					}
				});
			}, $view);
			//优惠券
			$.newTouch('.btn-banner-coupon', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'myCoupon',
					pushData: {
						needReload: true
					}
				});
			}, $view);
			/* 点击产品列表的某一项 */
			$.newTouch('.btn-appliances', function (event) {
				event.preventDefault();
				// var type = 4;
				var type = parseInt($(this).attr('data-product-type'));
				/*
				 * 这个写法是SPA路由框架规定的。
				 * $(selector).trigger(event, params)是jQuery的：触发被选元素上的指定事件
				 */
				$doc.trigger('spa:navigate', {
					hash: 'placeOrder',
					pushData: {
						product: product.allList[type - 1],
						needReset: true
					}
				});
			}, $view);
			/* 点击标签
			 $.newTouch('.btn-product-group', function (event) {
			 event.preventDefault();
			 if ($(this).hasClass('global-msg-active')) return;
			 $(this).addClass('global-msg-active').siblings().removeClass('global-msg-active');
			 var index = $(this).attr('data-group-index');
			 switch (index){
			 case '0':
			 $('#list0').show().siblings().hide();
			 break;
			 case '1':
			 $('#list1').show().siblings().hide();
			 break;
			 case '2':
			 $('#list2').show().siblings().hide();
			 break;
			 case '3':
			 $('#list3').show().siblings().hide();
			 break;
			 }
			 }, $view);  */
			// 家庭保洁
			$.newTouch('.btn-secondary', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'secondary',
					pushData: {
						needReset: true,
						backHash: ''
					}
				});
			}, $view);
			/* 点击产品列表的某一项 */
			$.newTouch('.btn-appliances', function (event) {
				event.preventDefault();
				// var type = 4;
				var type = parseInt($(this).attr('data-product-type'));
				/*
				 * 这个写法是SPA路由框架规定的。
				 * $(selector).trigger(event, params)是jQuery的：触发被选元素上的指定事件
				 */
				$doc.trigger('spa:navigate', {
					hash: 'placeOrder',
					pushData: {
						product: product.allList[type - 1],
						needReset: true
					}
				});
			}, $view);
			/* 点击标签
			 $.newTouch('.btn-product-group', function (event) {
			 event.preventDefault();
			 if ($(this).hasClass('global-msg-active')) return;
			 $(this).addClass('global-msg-active').siblings().removeClass('global-msg-active');
			 var index = $(this).attr('data-group-index');
			 switch (index){
			 case '0':
			 $('#list0').show().siblings().hide();
			 break;
			 case '1':
			 $('#list1').show().siblings().hide();
			 break;
			 case '2':
			 $('#list2').show().siblings().hide();
			 break;
			 case '3':
			 $('#list3').show().siblings().hide();
			 break;
			 }
			 }, $view);  */
			// 双十一活动
			$.newTouch('.btn-home-day', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'activity-day',
					pushData: {
						needReset: true
					}
				});
			}, $view);
			//民宿保洁
			$.newTouch('.btn-homestay', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'homestay',
					pushData: {
						needReset: true
					}
				});
			}, $view);
			// 企业服务
			$.newTouch('.btn-homeenterprise', function (event) {
				event.preventDefault();
				$doc.trigger('spa:navigate', {
					hash: 'homeenterprise',
					pushData: {
						needReset: true
					}
				});
			}, $view);
			// im
			$.newTouch('.btn-action-logo', function (event) {
				event.preventDefault();
				window.location.href = '/index.php?r=o2o/advisory/im';
			}, $view);
			// 个人中心
			$.newTouch('.btn-action-coupon', function (event) {
				event.preventDefault();
				user.checkLogin(function () {
					$doc.trigger('spa:navigate', {
						hash: 'mine',
						pushData: {
							needReset: true
						}
					});
				});
			}, $view);
			/* 招聘
			 $.newTouch('.btn-action-hire', function () {
			 event.preventDefault();
			 $doc.trigger('spa:navigate', {
			 hash: 'hire'
			 });
			 }, $view); */
			/* 不知道什么意思。*/
			dtd.resolve();
			/* 跳转到填写订单页面
			 function goProductPage(type) {
			 如果没登陆会跳转到登录。这个function参数是登陆成功的回调
			 user.checkLogin(function () {
			 预期字段不足 先清除本地数据
			 if (!user['productVisit'][13]) {
			 localStorage.removeItem('user_productVisit');
			 localStorage.removeItem('user_productVisit-time');
			 user['productVisit'][13] = {
			 visited: false
			 }
			 }
			 判断是否是第一次看这个类型。如果不是的话跳转到placeOrder页面
			 if (user['productVisit'][type]['visited']) {

			 } else {
			 如果是的话跳转到product页面
			 $doc.trigger('spa:navigate', {
			 hash: 'product',
			 pushData: {
			 type: type,
			 needReload: true,
			 fromHome: true
			 }
			 });
			 并把这个类别的visit属性设置为true
			 user.productVisit[type].visited = true;
			 user.setCache('productVisit');
			 }
			 // });
			 } */
			/* 跳转到coming页面。
			 function goComing(type) {
			 user.checkLogin(function () {
			 $doc.trigger('spa:navigate', {
			 hash: 'coming',
			 pushData: {
			 productType: type
			 }
			 });
			 });
			 }*/
			/* 不知道这是干什么。离线显示一张图片？
			 if (!user.activities['visited_offservice0126']) {
			 // showActivity();
			 }
			 function showActivity() {
			 var imgUrl = 'http://wozhua-others.qiniudn.com/20160126-offservice.png';
			 var d = new Image();
			 d.src = imgUrl;
			 d.onload = function () {
			 $doc.trigger('spa:openpanel', ['activity', {
			 content: imgUrl
			 }]);
			 }
			 } */
		},
		beforeopen: function (pageData, dtd) {
			localStorage.removeItem('cart_products');
			dtd.resolve();
			native.switchPopGesture(true);
		},
		afteropen: function (pageData, dtd) {
			var $view = this;
			var $doc = $(document);
			/* 如果需要重新加载，就请求服务列表。 */
			if (!pageData.pushData.dontNeedReload) {
				$doc.trigger('spa:openloader');
				/*
				 * tmodjs：
				 * 使用模版语法把数据填到html文件，生成一个js文件。
				 * var tpl = template(html文件路径，数据)
				 */
				var tpl = template('home/index', {
					showNavBar: !config.isWX && !config.isChubao
				});
				/*
				 * jQuery：
				 * 提供一个html元素到js变量的映射，和findViewById一个作用。
				 * $(selector).???(xxx)
				 * 其中selector是选择器，对应html的元素、类、id等
				 * ???是jQuery定义的事件
				 * xxx是参数，具体是什么取决于事件
				 *
				 * 这句的意思是，选取class=".spa-page-body"的元素，把tpl插入其中
				 */
				$('.spa-page-body', $view).html(tpl);
				/* 建立IScroll */
				setTimeout(function () {
					pageData.scroll = new IScroll('#homeScroll');

				}, 1000);
				setTimeout(function () {
					var swiper = new Swiper('.swiper-container', {
						pagination: '.pagination',
						loop: true,
						paginationClickable: true,
						centeredSlides: true,
						autoplay: 5000,
						autoplayDisableOnInteraction: false
					});
				}, 20);
				// 目前的作用只是供后端判断，该用户是否为新用户，所以没有回调。
				product.getListAll(user.id);
				address.getList({
					request_from: 'weixin',
					user_id: user.id
				});
				$doc.trigger('spa:closeloader');
			}
			/* 又是这个。不知道什么玩意…… */
			dtd.resolve();

			//强制设置首页的上一页是空的，后面再调整框架
			pageData.prevPage = $('.spa-page-empty');
		},
		beforeclose: function (pageData, dtd) {
			dtd.resolve();
			native.switchPopGesture(false);
		}
	}
})