首页数据写在客户端

www/webapp/o2o/css/home.css

@@ -80,7 +80,7 @@
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
-    justify-content: center;
+    justify-content: flex-start;
     align-items: center;
 }
 

www/webapp/o2o/js/model/order.js

@@ -19,7 +19,7 @@ define(['base', '$', 'native', 'product', 'api'], function (base, $, native, pro
     this.productType = '';
     this.productID = '';
     this.productCount = 1;
-    this.price = '';
+    this.price = 0;
     this.couponID = '';
     this.stationID = this.getCache('stationID', null, '');
     this.cacheReview = this.getCache('cacheReview', null, '');

www/webapp/o2o/js/model/product.js

@@ -36,6 +36,109 @@ define(['base', '$', 'api'], function (base, $, api) {
     this.precedence = 40;   // 加急
     this.extraService = [];//额外的服务
     this.offDay = [];//休息日
+
+    /* 我新加的 */
+    this.list = [
+      {
+        id: '57e0dffc9f5160dd048b4568',
+        name: '日常清洁',
+        extra: [
+          {
+            price: 98,
+            type: '一室一卫'
+          },
+          {
+            price: 118,
+            type: '一室两卫'
+          },
+          {
+            price: 138,
+            type: '两室两卫'
+          },
+          {
+            price: 158,
+            type: '三室两卫'
+          },
+          {
+            price: 228,
+            type: '四室三卫'
+          },
+          {
+            price: 298,
+            type: '200-250平'
+          },
+          {
+            price: 398,
+            type: '250-300平'
+          },
+          {
+            price: 498,
+            type: '三层别墅'
+          },
+          {
+            price: 598,
+            type: '四层别墅'
+          },
+          {
+            price: 2000,
+            type: '其他'
+          }
+        ]
+      },
+      {
+        id: '57e0e0189f5160dc048b4568',
+        name: '深度清洁',
+        extra: [
+          {
+            price: 388,
+            type: '厨房清洁'
+          },
+          {
+            price: 288,
+            type: '客厅清洁'
+          },
+          {
+            price: 188,
+            type: '卧室清洁'
+          },
+          {
+            price: 188,
+            type: '卫生间清洁'
+          },
+          {
+            price: 2000,
+            type: '其他'
+          }
+        ]
+      },
+      {
+        id: '57e0e0369f5160b1048b456b',
+        name: '除螨杀菌',
+        extra: [
+          {
+            price: 80,
+            type: '儿童床'
+          },
+          {
+            price: 160,
+            type: '整套布艺沙发'
+          },
+          {
+            price: 100,
+            type: '布艺窗帘'
+          },
+          {
+            price: 2000,
+            type: '其他'
+          }
+        ]
+      },
+      {
+        id: '57eb9a369f5160cc048b4794',
+        name: '钟点工',
+        price: 35
+      }
+    ];
   };
 
   Product.prototype = new base();

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

@@ -1,6 +1,6 @@
 define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'address'], function ($, template, IScroll, product, user, native, config, address) {
 
-    var products;
+    var products = product.list;
 
     /*
      * 先定义一些模块内用到的function
@@ -52,7 +52,17 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
             $.newTouch('.btn-product', function (event) {
                 event.preventDefault();
                 var type = $(this).attr('data-product-type');
-                goProductPage(type);
+                /*
+                 * 这个写法是SPA路由框架规定的。
+                 * $(selector).trigger(event, params)是jQuery的：触发被选元素上的指定事件
+                 */
+                $doc.trigger('spa:navigate', {
+                    hash: 'placeOrder',
+                    pushData: {
+                        product: products[parseInt(type)],
+                        needReset: true
+                    }
+                });
             }, $view);
 
             /* 点击标签 */
@@ -113,28 +123,11 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
             /* 不知道什么意思。*/
             dtd.resolve();
 
-            /* 跳转到填写订单页面。*/
+            /* 跳转到填写订单页面
             function goProductPage(type) {
-                /* 如果没登陆会跳转到登录。这个function参数是登陆成功的回调 */
+                如果没登陆会跳转到登录。这个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');
@@ -158,9 +151,9 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                      并把这个类别的visit属性设置为true
                      user.productVisit[type].visited = true;
                      user.setCache('productVisit');
-                     } */
-                });
-            }
+                     }
+                // });
+            } */
 
             /* 跳转到coming页面。
             function goComing(type) {
@@ -204,20 +197,6 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                 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文件。
@@ -225,10 +204,6 @@ define(['$', 'template', 'IScroll', 'product', 'user', 'native', 'config', 'addr
                      */
                     var tpl = template('home/index', {
                         showNavBar: !config.isWX && !config.isChubao,
-                        productsa: products,
-                        productsb: b,
-                        productsc: c,
-                        productsd: d
                     });
 
                     /*

www/webapp/o2o/js/page/placeOrder.js

@@ -491,8 +491,14 @@ define(['$', 'template', 'order', 'native', 'helper', 'user', 'api', 'config', '
             /* 点击数量-1 */
             $.newTouch('.btn-sub', function (event) {
                 if (order.productCount <= 1) return;
+                if (order.price == 0) {
+                    $doc.trigger('spa:openpanel', ['simpleAlert', {
+                        message: '请选择extra'
+                    }]);
+                    return;
+                }
                 order.productCount--;
-                order.cost = order.productCount * product.price;
+                order.cost = order.productCount * order.price;
                 $('.service-count', $view).find('.num').html(order.productCount);
                 /* 算账 */
                 var $orderCost = $('.order-cost', $view);
@@ -503,8 +509,14 @@ define(['$', 'template', 'order', 'native', 'helper', 'user', 'api', 'config', '
             /* 点击数量+1 */
             $.newTouch('.btn-add', function (event) {
                 if (order.productCount >= 99) return;
+                if (order.price == 0) {
+                    $doc.trigger('spa:openpanel', ['simpleAlert', {
+                        message: '请选择extra'
+                    }]);
+                    return;
+                }
                 order.productCount++;
-                order.cost = order.productCount * product.price;
+                order.cost = order.productCount * order.price;
                 $('.service-count', $view).find('.num').html(order.productCount);
                 /* 算账 */
                 var $orderCost = $('.order-cost', $view);
@@ -708,7 +720,7 @@ define(['$', 'template', 'order', 'native', 'helper', 'user', 'api', 'config', '
                     return false;
                 }
 
-                if (product.extra.length && !order.appendID) {
+                if (product.extra && !order.appendID) {
                     $doc.trigger('spa:openpanel', ['simpleAlert', {
                         message: '请选择extra'
                     }]);
@@ -794,10 +806,6 @@ define(['$', 'template', 'order', 'native', 'helper', 'user', 'api', 'config', '
                 order.productType = product.type;
                 order.productID = product.id;
                 order.productCount = 1;
-                if (!product.extra.length){
-                    order.price = product.price;
-                    order.cost = product.price * order.productCount;
-                }
                 /* 根据product建立渲染页面的数据 */
                 var tmpData = {
                     /* 环境，目前只决定是否显示保洁师 */
@@ -806,8 +814,6 @@ define(['$', 'template', 'order', 'native', 'helper', 'user', 'api', 'config', '
                     showNavBar: !config.isWX && !config.isChubao,
                     /* 标题栏的标题 */
                     title: product.type_str,
-                    /* 是否显示extra选择项 */
-                    showExtra: product.extra.length,
                     /* extra选择项 */
                     extra: product.extra,
                     /* 如果用户有优惠券，则显示优惠券的选择栏 */
@@ -820,11 +826,13 @@ define(['$', 'template', 'order', 'native', 'helper', 'user', 'api', 'config', '
                 $view.find('.spa-page-body').html(tpl);
                 /* 绑定费用数据 */
                 var $orderCost = $('.order-cost', $view);
-                if (product.extra.length){
-                    $orderCost.data('cost', '0');
+                if (product.extra){
+                    order.cost = 0;
                 }else {
-                    $orderCost.data('cost', product.price);
+                    order.price = product.price;
+                    order.cost = product.price * order.productCount;
                 }
+                $orderCost.data('cost', order.cost);
                 $orderCost.data('coupon', '0');
                 payCharge($orderCost);
 

www/webapp/o2o/tpl/home/index.html

@@ -32,30 +32,50 @@
                             <div class="width-percent-25 btn-product-group" data-group-index="3">家庭产品</div>
                         </div>
                         <div>
-                            <div class="products-list" id="list0">
-                                {{ each productsa as product }}
-                                <img src="{{product.desc[0].content}}" width="49%" class="btn-product"
-                                     data-product-type="{{product.type}}"/>
-                                {{ /each }}
-                            </div>
-                            <div class="products-list" id="list1" style="display: none">
-                                {{ each productsb as product }}
-                                <img src="{{product.desc[0].content}}" width="49%" class="btn-product"
-                                     data-product-type="{{product.type}}"/>
-                                {{ /each }}
-                            </div>
-                            <div class="products-list" id="list2" style="display: none">
-                                {{ each productsc as product }}
-                                <img src="{{product.desc[0].content}}" width="49%" class="btn-product"
-                                     data-product-type="{{product.type}}"/>
-                                {{ /each }}
-                            </div>
-                            <div class="products-list" id="list3" style="display: none">
-                                {{ each productsd as product }}
-                                <img src="{{product.desc[0].content}}" width="49%" class="btn-product"
-                                     data-product-type="{{product.type}}"/>
-                                {{ /each }}
-                            </div>
+                            <ul class="products-list" id="list0">
+                                <li class="btn-product" style="border-top: 1px solid rgb(241, 241, 241); border-right: 1px solid rgb(241, 241, 241); border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="1">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png" width="50px" height="50px">
+                                    <div class="extra-service-name">日常清洁</div>
+                                </li>
+                                <li class="btn-product" style="border-top: 1px solid rgb(241, 241, 241); border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="2">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png"  width="50px" height="50px">
+                                    <div class="extra-service-name">深度清洁</div>
+                                </li>
+                                <li class="btn-product" style="border-right: 1px solid rgb(241, 241, 241);border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="3">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png"  width="50px" height="50px">
+                                    <div class="extra-service-name">除螨杀菌</div>
+                                </li>
+                            </ul>
+                            <ul class="products-list" id="list1" style="display: none">
+                                <li class="btn-product" style="border-top: 1px solid rgb(241, 241, 241); border-right: 1px solid rgb(241, 241, 241); border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="4">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png" width="50px" height="50px">
+                                    <div class="extra-service-name">钟点工</div>
+                                </li>
+                                <li class="btn-product" style="border-top: 1px solid rgb(241, 241, 241); border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="5">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png"  width="50px" height="50px">
+                                    <div class="extra-service-name">住家保姆</div>
+                                </li>
+                                <li class="btn-product" style="border-right: 1px solid rgb(241, 241, 241);border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="6">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png"  width="50px" height="50px">
+                                    <div class="extra-service-name">育儿嫂</div>
+                                </li>
+                            </ul>
+                            <ul class="products-list" id="list2" style="display: none">
+                                <li class="btn-product" style="border-top: 1px solid rgb(241, 241, 241); border-right: 1px solid rgb(241, 241, 241); border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="7">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png" width="50px" height="50px">
+                                    <div class="extra-service-name">月子套餐</div>
+                                </li>
+                                <li class="btn-product" style="border-top: 1px solid rgb(241, 241, 241); border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="8">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png"  width="50px" height="50px">
+                                    <div class="extra-service-name">金牌月嫂</div>
+                                </li>
+                                <li class="btn-product" style="border-right: 1px solid rgb(241, 241, 241);border-bottom: 1px solid rgb(241, 241, 241);width: 50%; text-align: center; padding-top: 10px; padding-bottom: 10px" data-product-type="9">
+                                    <img src="http://odulvej8l.bkt.clouddn.com/Home_btn_clean%20%283%29.png"  width="50px" height="50px">
+                                    <div class="extra-service-name">催乳服务</div>
+                                </li>
+                            </ul>
+                            <ul class="products-list" id="list3" style="display: none">
+                            </ul>
                         </div>
                     </div>
                 </div>

www/webapp/o2o/tpl/placeOrder/index.html

@@ -20,7 +20,7 @@
               </li>
             </ul>
             <!-- 选择extra -->
-            {{if showExtra}}
+            {{if extra}}
             <div class="table-view main-service">
               <p class="main-service-title">请选择</p>
               {{each extra as e}}