order detail

@@ -979,6 +979,41 @@
         unreceived: '', //or 未收货，查看物流URL
     }
 
+### 订单详情页
+    
+    {
+        orderDetail: {
+            name: '', //收货人姓名
+            phoneNum: '',
+            address: '',
+
+            orderStatus: '订单成功', //订单取消...等订单状态
+            orderNum: '',
+            orderTime: '',
+
+            orderCancel: true, //是否是取消的订单
+            orderCompleted: true, //是否是已完成订单
+
+            //如果是取消订单，以下物流信息参数不用传
+            logisticsUrl: '',
+            logisticsCompany: '',
+            logisticsNum: '',
+            //end
+
+            goods: [
+                {
+                    ... //订单商品
+                }
+            ],
+            sumPrice: ''
+            salePrice: ''
+            freight: ''
+            coupon: ''
+            yohoCoin: ''
+            price: ''
+        }
+    }
+
 ### YOHO币
 
     {

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Thu Nov 12 16:17:15 2015
+Created by FontForge 20120731 at Mon Nov 16 11:40:15 2015
  By Ads
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Nov 12 16:17:15 2015
     bbox="-0.75 -224 3943 812.871"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E62F"
+    unicode-range="U+0078-E632"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -179,5 +179,22 @@ q0 -66 47 -112.5t113.5 -46.5t113.5 46.5t47 112.5z" />
 d="M474 28v161h-167v50h167v74h-167v49h134l-168 265h87l152 -257v386q-48 0 -96.5 4t-83.5 10.5t-63.5 12.5t-42.5 10l-14 4q-2 -43 -16.5 -74t-34 -44t-38.5 -20t-33 -7h-13q0 -110 10.5 -203.5t20.5 -131.5l10 -38q15 -61 45 -120.5t65.5 -105.5t75.5 -87.5t76 -70.5
 t66.5 -50.5t47.5 -31.5t18 -10v225h-38zM550 28v161h167v50h-167v74h167v49h-134l168 265h-87l-152 -257v386q35 0 70.5 2t64 6t55.5 8.5t46.5 8.5t34 8t22.5 6l7 2q2 -43 16.5 -74t34 -44t38.5 -20t33 -7h13q0 -110 -10.5 -203.5t-20.5 -131.5l-10 -38q-15 -61 -45 -120.5
 t-65.5 -105.5t-75.5 -87.5t-76 -70.5t-66.5 -50.5t-47.5 -31.5t-18 -10v225h38z" />
+    <glyph glyph-name="uniE630" unicode="&#xe630;" 
+d="M629 -71h-268v20q0 31 -21.5 53t-52.5 22t-52.5 -22t-21.5 -53v-20h-174v609h590v-609zM400 -30h188v527h-508v-527h94q7 41 39 68t74 27t74 -27t39 -68zM989 -71h-136v20q0 21 -10 38t-27 27t-37 10q-31 0 -52.5 -22t-21.5 -53v-20h-117v476h210q22 0 57 -34
+q27 -26 58 -67q31 -40 52 -75q14 -25 19 -39t5 -23v-238zM892 -30h56v197q0 9 -18 40t-46 68q-7 9 -14 17.5t-13.5 16.5t-13 15t-12.5 14q-10 9 -18 16t-11 8.5t-5 1.5h-168v-394h37q7 41 39 68t74 27q28 0 52 -12.5t40.5 -34t20.5 -48.5zM989 137h-287v193h191l6 -8
+q35 -43 61 -84q29 -48 29 -71v-30zM743 178h202q-6 15 -21 39q-21 34 -50 72h-131v-111zM779.5 -166q-47.5 0 -81.5 34t-34 81.5t34 81.5t81 34q24 0 45 -9.5t36.5 -25t24.5 -36.5t9 -45q0 -47 -33.5 -81t-81 -34zM779 24q-31 0 -52.5 -22t-21.5 -53q0 -15 6 -28.5t16 -23.5
+t23.5 -16t28.5 -6q12 0 23.5 4t20.5 10.5t16 16t10.5 20.5t3.5 23q0 21 -10 38t-27 27t-37 10zM287 -166q-48 0 -81.5 34t-33.5 81.5t33.5 81.5t81.5 34t81.5 -34t33.5 -81.5t-33.5 -81.5t-81.5 -34zM287 24q-31 0 -52.5 -22t-21.5 -52.5t21.5 -52.5t52.5 -22t52.5 22
+t21.5 52.5t-21.5 52.5t-52.5 22z" />
+    <glyph glyph-name="uniE631" unicode="&#xe631;" 
+d="M24 799zM47 799zM70 799zM94 799zM117 799zM140 799zM163 799zM187 799zM210 799zM233 799zM256 799zM280 799zM303 799zM326 799zM349 799zM373 799zM396 799zM419 799zM442 799zM466 799zM489 799zM512 799zM535 799zM558 799zM582 799zM605 799zM628 799zM651 799z
+M675 799zM698 799zM721 799zM744 799zM768 799zM791 799zM814 799zM837 799zM861 799zM884 799zM907 799zM930 799zM954 799zM977 799zM1000 799zM1 776zM1 753zM1 730zM1 706zM1 683zM1 660zM1 637zM1 613zM1 590zM1 567zM1 544zM1 520zM1 497zM1 474zM1 451zM1 427zM1 404
+zM1 381zM1 358zM1 334zM1 311zM1 288zM1 265zM1 242zM1 218zM1 195zM1 172zM1 149zM1 125zM1 102zM1 79zM1 56zM1 32zM1 9zM1 -14zM1 -37zM1 -61zM1 -84zM1 -107zM1 -130zM1 -154zM1 -177zM1 -200zM512 -223q-7 8 -18.5 22t-45.5 59t-64.5 91t-68 113.5t-64.5 131.5
+t-45.5 139t-18.5 141q0 52 11 96.5t30 75.5t43 56.5t51 41t54 27t51.5 17t43.5 8.5t30 3h11q7 0 18.5 -0.5t45.5 -7t64.5 -17.5t68 -35.5t64.5 -57.5t45.5 -87t18.5 -120t-18 -140.5t-46.5 -140.5t-63 -130t-69.5 -114.5t-63.5 -90t-46.5 -60.5zM740 517q-16 85 -86 140
+q-1 1 -4 3.5t-5 3.5q-5 4 -22 13l-4 2q-2 1 -3.5 2t-3.5 2l-4 2l-4 2q-1 0 -20 7q-2 0 -7.5 2t-9 3.5t-7.5 1.5q-24 5 -48 5v0q-24 0 -47 -5q-15 -3 -29.5 -8t-27.5 -11.5t-25 -14.5h-1q-12 -9 -27 -23q-2 -1 -5 -4l-3 -3q-2 -2 -4.5 -5t-4 -4.5t-4 -5t-3.5 -4.5
+q-12 -16 -13 -17q-2 -3 -4.5 -7.5t-3.5 -5.5q0 -1 -1 -2q-2 -4 -3 -6.5t-3 -6t-3.5 -6.5t-2.5 -6q-1 -2 -2 -7q-1 -3 -2 -4q-7 -21 -9 -32q-4 -22 -4 -44q0 -183 175 -470l57 -88q9 13 25 36.5t56 92t70.5 133.5t55.5 148t25 148q0 11 -1 21.5t-3 21.5zM373 474
+q0 58 40.5 98.5t98.5 40.5t98.5 -40.5t40.5 -98.5t-40.5 -99t-98.5 -41q-28 0 -54 11.5t-44.5 30t-29.5 44.5t-11 54z" />
+    <glyph glyph-name="uniE632" unicode="&#xe632;" 
+d="M313 163h397v69h-397v-69zM313 26h397v68h-397v-68zM611 747h-430q-4 0 -7 -0.5t-6 -2t-6 -3.5t-5 -4t-4 -5t-3 -6t-1.5 -6.5t-0.5 -6.5v-825q0 -5 1.5 -10.5t4.5 -9.5t7 -7.5t9 -5t11 -1.5h661q9 0 17 4.5t12.5 12.5t4.5 17v619zM644 626l131 -119h-131v119zM809 -77
+h-595v755h364v-206q0 -14 9.5 -24t23.5 -10h198v-515zM313 300h397v69h-397v-69z" />
   </font>
 </defs></svg>

-@import "home", "vip-grade", "order", "coupons", "personal-details", "yoho-coin", "recommend-for-you", "fav", "suggest", "address";
\ No newline at end of file
+@import "home", "vip-grade", "order", "order-detail", "coupons", "personal-details", "yoho-coin", "recommend-for-you", "fav", "suggest", "address";
\ No newline at end of file

+.order-detail-page {
+    background: #f0f0f0;
+
+    .block {
+        position: relative;
+        background: #fff;
+        padding: 20rem / $pxConvertRem 30rem / $pxConvertRem;
+
+        .iconfont {
+            position: absolute;
+            left: 30rem / $pxConvertRem;
+            top: 50%;
+            font-size: 40rem / $pxConvertRem;
+            margin-top: -30rem / $pxConvertRem;
+        }
+    }
+
+    .owner-info {
+        border-bottom: 1px solid #e0e0e0;
+        line-height: 1.5;
+    }
+
+    .beside-icon {
+        margin-left: 60rem / $pxConvertRem;
+    }
+
+    .name-phone {
+        font-size: 30rem / $pxConvertRem;
+
+        span {
+            float: right;
+        }
+    }
+
+    .address {
+        font-size: 24rem / $pxConvertRem;
+        margin-top: 10rem / $pxConvertRem;
+    }
+
+    .order-status {
+        margin: 20rem / $pxConvertRem 0;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .sub-content span {
+        display: block;
+        color: #b0b0b0;
+        font-size: 24rem / $pxConvertRem;
+    }
+
+    .sub-content .sub-title {
+        display: block;
+        color: #000;
+        font-size: 26rem / $pxConvertRem;
+    }
+
+    .goods {
+        padding: 0;
+        margin-top: 20rem / $pxConvertRem;
+        border-top: 1px solid #e0e0e0;
+        border-bottom: 1px solid #e0e0e0;
+    }
+
+    .cost {
+        margin-bottom: 100rem / $pxConvertRem; /*排除被固定底部遮挡的影响*/
+
+        li {
+            font-size: 28rem / $pxConvertRem;
+
+            span {
+                float: right;
+            }
+
+            &:last-child span {
+                color: #f00;
+            }
+        }
+    }
+
+    .opt {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        text-align: right;
+        border-top: 1px solid #e0e0e0;
+    }
+
+    .btn {
+        display: inline-block;
+        box-sizing: border-box;
+        width: 140rem / $pxConvertRem;
+        height: 60rem / $pxConvertRem;
+        line-height: 60rem / $pxConvertRem;
+        @include border-radius(5px);
+        font-size: 26rem / $pxConvertRem;
+        text-align: center;
+    }
+
+    .btn-del {
+        border: 1px solid #000;
+    }
+
+    .btn-service {
+        color: #f00;
+        border-color: #f00;
+    }
+}
\ No newline at end of file

@@ -2,35 +2,38 @@
 <div class="order-detail-page yoho-page">
     {{# orderDetail}}
         <section class="owner-info block">
-            <span class="iconfont"></span>
-            <div>
-                <p>
+            <span class="iconfont">&#xe631;</span>
+            <div class="beside-icon">
+                <p class="name-phone">
                     {{name}}
                     <span>{{phoneNum}}</span>
-                    <span>{{address}}</span>
+                </p>
+                <p class="address">
+                    {{address}}
                 </p>
             </div>
         </section>
 
         <section class="order-status block">
             <div class="status sub">
-                <span class="iconfont"></span>
-                <p>
-                    <span>{{orderStatus}}</span>
+                <span class="iconfont">&#xe632;</span>
+                <p class="beside-icon sub-content">
+                    <span class="sub-title">{{orderStatus}}</span>
                     <span>订单编号：{{orderNum}}</span>
                     <span>下单时间：{{orderTime}}</span>
                 </p>
             </div>
             {{#unless orderCancel}}
-                <a class="logistics sub" href="{{">
-                    <span class="iconfont"></span>
-                    <p>
-                        <span>物流信息</span>                        
+                <a class="logistics sub" href="{{logisticsUrl}}">
+                    <span class="iconfont">&#xe630;</span>
+                    <p class="beside-icon sub-content">
+                        <span class="sub-title">物流信息</span>                        
                         <span>物流公司：{{logisticsCompany}}</span>
                         <span>快递单号：{{logisticsNum}}</span>
                     </p>
-                    <span class="iconfont">>&#xe614;</span>
+                    <span class="iconfont">&#xe614;</span>
                 </a>
+            {{/unless}}
         </section>
 
         <section class="goods block">
@@ -66,10 +69,10 @@
             </li>
         </ul>
 
-        <div class="opt">
+        <div class="opt block">
             <span class="btn btn-del">删除订单</span>
 
-            {{#if completed}}
+            {{#if orderCompleted}}
                 <span class="btn btn-service">申请售后</span>
             {{/if}}
         </div>

@@ -377,4 +377,48 @@ class HomeController extends AbstractAction
                 while(false);
                 //$this -> _view -> display('order',$data);
             }
+
+    public function orderDetailAction()
+    {
+        $data = array(
+            'name' => '毛毛莉Lydia',
+            'phoneNum' => '18600001133',
+            'address' => '南京市建邺区嘉陵江东街18号国家广告产业园5栋17楼',
+            'orderStatus' => '订单取消',
+            'orderNum' => '418358063',
+            'orderTime' => '2014-03-10 17:25:10',
+
+            'orderCancel' => true,
+
+            'goods' => array(
+                array(
+                    'id' => 1,
+                    'thumb' => 'http://img11.static.yhbimg.com/goodsimg/2015/11/04/05/01ce2aff32fc3c90584f516167cd526d91.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                    'name' => 'Adidas Originals ZX FLUXM22508',
+                    'color' => '黄',
+                    'size' => '43',
+                    'price' => '699.00',
+                    'count' => '2'
+                ),
+                array(
+                    'id' => 1,
+                    'thumb' => 'http://img10.static.yhbimg.com/goodsimg/2015/11/04/05/0188f1aca49ac478a565ec029b5d2d4a6c.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
+                    'name' => 'B.Duck浴室玩伴mini浮水鸭',
+                    'gift' => true,
+                    'color' => '黄',
+                    'size' => '43',
+                    'price' => '0.00',
+                    'count' => '1'
+                )
+            ),
+
+            'sumPrice' => 799,
+            'salePrice' => 80,
+            'freight' => 5,
+            'coupon' => 0,
+            'yohoCoin' => 5,
+            'price' => 719
+        );
+        $this->_view->display('order-detail', array('orderDetail' => $data));
+    }
 }