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

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

    var products;

    /*
     * 先定义一些模块内用到的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);

            /* 点击产品列表的某一项 */
            $.newTouch('.btn-product', function (event) {
                event.preventDefault();
                var type = $(this).attr('data-product-type');
                goProductPage(type);
            }, $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-action-my-order', function (event) {
                event.preventDefault();
                user.checkLogin(function () {
                    $doc.trigger('spa:navigate', {
                        hash: 'myOrder/1',
                        pushData: {
                            needReload: true
                        }
                    });
                });
            }, $view);

            // 优惠券
            $.newTouch('.btn-action-coupon', function (event) {
                event.preventDefault();
                user.checkLogin(function () {
                    $doc.trigger('spa:navigate', {
                        hash: 'myCoupon'
                    });
                });
            }, $view);

            // 招聘
            $.newTouch('.btn-action-hire', function () {
                event.preventDefault();
                $doc.trigger('spa:navigate', {
                    hash: 'hire'
                });
            }, $view);

            /* 定义按钮事件结束。*/

            /* 不知道什么意思。*/
            dtd.resolve();

            /* 跳转到填写订单页面。*/
            function goProductPage(type) {
                /* 如果没登陆会跳转到登录。这个function参数是登陆成功的回调 */
                user.checkLogin(function () {
                    /* 从products中找出type相同的product传递给placeOrder页面 */
                    var x;
                    for (x in products) {
                        if (type == products[x].type)
                        /*
                         * 这个写法是SPA路由框架规定的。
                         * $(selector).trigger(event, params)是jQuery的：触发被选元素上的指定事件
                         */
                        $doc.trigger('spa:navigate', {
                            hash: 'placeOrder',
                            pushData: {
                                product: products[x],
                                needReset: true
                            }
                        });
                    }

                    /* 预期字段不足 先清除本地数据
                     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');
                product.getListAll(user.id, function (res) {
                    $doc.trigger('spa:closeloader');

                    products = res.data.products;
                    if (!products || !products.length) return;

                    // 把products的desc字段转为对象
                    var x;
                    for (x in products) {
                        products[x].desc = JSON.parse(products[x].desc);
                    }

                    var a = products.slice(0, 2);
                    var b = products.slice(2, 4);
                    var c = products.slice(4, 6);
                    var d = products.slice(6, 8);

                    /*
                     * tmodjs：
                     * 使用模版语法把数据填到html文件，生成一个js文件。
                     * var tpl = template(html文件路径，数据)
                     */
                    var tpl = template('home/index', {
                        showNavBar: !config.isWX && !config.isChubao,
                        productsa: products,
                        productsb: b,
                        productsc: c,
                        productsd: d
                    });

                    /*
                     * 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');
                    }, 200);
                });
            }

            /* 判断用户是否有优惠卷，如果有就请求优惠卷列表。 */
            if (!user.isCheck.couponCheck) {
                user.getCouponList(user.id, function (res) {
                    if (res.success) {
                        user.isCheck['couponCheck'] = true;
                        user.setCache('isCheck');
                    }
                });
            }

            /* 又是这个。不知道什么玩意…… */
            dtd.resolve();

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