Merge remote-tracking branch 'origin/develop' into develop

@@ -8,22 +8,31 @@ Name     | Path                                 | Note
 品牌店铺     | /product/shop?domain=sctest1         |
 品牌店铺分享页面 | /product/shop-share?domain=colormad |
 商品详情      | /product/{productId}                 |
+新品抢先看    | /product/new                         |
 资讯列表      | /news                                |
-yoho币      |    /home/mycurrency     |    
+资讯详情     | /news/{newsId}                       |
+个人中心      |    /home     |
+个人信息      |    /mydetails     |
 全部订单      |    /home/orders?type=1     |    
 待付款        |    /home/orders?type=2     |    
 待发货        |    /home/orders?type=3     |    
 待收货        |    /home/orders?type=4     |    
 订单详情      |    /home/order-detail?orderCode=xxx     |    
 退货申请      |    /home/refund?orderId=160181661       |
-新品抢先看    | /product/new                         |
+收藏商品      |    /home/favorite     |
+收藏品牌      |    /home/favorite?tab=brand     | 
+yoho币        |    /home/mycurrency     |    
+帮助中心      |    /home/help     |  
+帮助中心详情  |    /home/help-detail     | 
+意见反馈      |    /home/feedback     | 
+关于我们      |    /home/about     | 
 
 --------------------------------------------------------------------------------
 
+----
 ### order 常亮
-
 Name     | Note
--------- | ------
+---------|--------
 s_t_desc | 默认(最新)
 s_p_asc  | 价格升序
 s_p_desc | 价格降序

@@ -18,9 +18,8 @@ const router = expressRouter();
 
 // Your controller here
 router.get('/', home.index); // 个人中心主页
+
 router.get('/orders', order.orders); // 订单
-router.get('/mycurrency', order.coin); // yoho币
-router.get('/coin-detail', order.getCoinDetail); // yoho币明细
 router.get('/order-detail', order.orderDetail); // 订单详情
 router.get('/get-orders', order.getOrderData); // 获取订单数据
 router.get('/get-order', order.getOrderDetailData); // 获取订单详情数据
@@ -29,6 +28,9 @@ router.post('/cancel-order', order.cancelOrder); // 取消订单
 router.post('/delete-order', order.deleteOrder); // 删除订单
 router.post('/confirm-order', order.confirmOrder); // 确认订单
 
+router.get('/mycurrency', order.coin); // yoho币
+router.get('/coin-detail', order.getCoinDetail); // yoho币明细
+
 router.get('/help', home.help); // 帮助中心列表页
 router.get('/help-detail', home.helpDetail); // 帮助中心详情页
 router.get('/feedback', home.feedback); // 个人中心-意见反馈
@@ -59,7 +61,7 @@ router.post('/save-mydetails', home.saveMydetails); // 保存个人信息
 
 router.get('/about', home.about); // 个人中心 - 关于我们
 
-router.get('/logistic', order.logistic); // 个人中心 - 订单物流详情页面
+router.get('/logistic', order.logistic); // 个人中心 - 退换货物流设置页面
 router.get('/get-order-logistic-date', order.getOrderLogisticdate); // 个人中心 - 订单物流详情数据
 
 module.exports = router;

@@ -30,7 +30,6 @@ const component = {
             client_type: 'h5'
         };
 
-
         model.index(params).then(result => {
             res.json(result);
         }).catch(next);

@@ -10,7 +10,7 @@
 // const helpers = global.yoho.helpers;
 const serviceAPI = global.yoho.ServiceAPI;
 const URI_PACKAGE_ARTICLE = 'guang/service/v2/article/';
-const Prmoise = require('bluebird');
+const Promise = require('bluebird');
 const camelCase = global.yoho.camelCase;
 
 /**
@@ -18,7 +18,7 @@ const camelCase = global.yoho.camelCase;
  */
 const model = {
     index(params) {
-        return Prmoise.coroutine(function*() {
+        return Promise.coroutine(function*() {
             const article = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticle', params);
             const content = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getArticleContent', params);
             const brands = yield serviceAPI.get(URI_PACKAGE_ARTICLE + 'getBrand', params);

@@ -126,6 +126,24 @@ const component = {
         api.get('', params).then(result => {
             res.json(result);
         }).catch(next);
+    },
+
+    /**
+     * 搜索产品
+     *
+     * @param req
+     * @param res
+     * @param next
+     */
+    search: (req, res, next) => {
+        let params = {
+            query: req.query.ids,
+            limit: 4
+        };
+
+        model.search(params).then(result => {
+            res.json(result);
+        }).catch(next);
     }
 };
 

@@ -9,6 +9,7 @@
 
 // const helpers = global.yoho.helpers;
 const api = global.yoho.API;
+const camelCase = global.yoho.camelCase;
 
 /**
  * 商品详情
@@ -65,6 +66,24 @@ const model = {
         return api.get('', Object.assign({
             method: 'app.Shopping.count'
         }, params));
+    },
+
+    /**
+     * 搜索
+     *
+     * @param params
+     * @returns {*}
+     */
+    search: (params) => {
+        return api.get('', Object.assign({
+            method: 'app.search.li'
+        }, params)).then((result)=> {
+            if (result.code === 200) {
+                return Promise.resolve(camelCase(result.data).productList);
+            } else {
+                Promise.reject(result);
+            }
+        });
     }
 };
 

@@ -51,4 +51,5 @@ router.get(/\/intro_([\d]+)\.json/, detail.intro);
 router.post(/cart.json/, detail.addToCart);
 router.post(/favorite.json/, detail.favorite);
 router.get(/cart-count.json/, detail.getCartCount);
+router.get(/search_product\.json/, detail.search);
 module.exports = router;

@@ -14,12 +14,11 @@ module.exports = {
     appVersion: '4.6.0', // 调用api的版本
     port: 6004,
     siteUrl: '//m.yohoblk.com',
-    signExtend: {
-        app_type: 1
-    },
     domains: {
-        api: 'http://testapi.yoho.cn:28078/',
-        service: 'http://testservice.yoho.cn:28077/'
+        // api: 'http://192.168.102.202:8080/gateway/',
+        // service: 'http://192.168.102.202:8080/gateway/',
+        api: 'http://devapi.yoho.cn:58078/',
+        service: 'http://devservice.yoho.cn:58077/'
     },
     subDomains: {
         host: '.m.yohoblk.com',

@@ -135,9 +135,9 @@ Vue.filter('formatUnixTime', (value) => {
 
     // let Y = date.getFullYear() + '-';
     let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
-    let D = (date.getDate() + 1 < 10 ? '0' + (date.getDate() + 1) : date.getDate() + 1);
-    let h = date.getHours();
-    let m = date.getMinutes();
+    let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
+    let h = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
+    let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
 
     // let s = date.getSeconds();
 

@@ -8,7 +8,6 @@
     line-height: 1;
     text-align: center;
     white-space: nowrap;
-
     background-color: $blue;
     color: $white;
 }

-@use postcss-clearfix;
+@use postcss-clearfix ;
 
 .clearfix {
     clear: fix;

@@ -7,6 +7,7 @@
 }
 
 .icon {
+
     /* use !important to prevent issues with browser extensions that change fonts */
     font-family: "iconfont" !important;
     speak: none;
@@ -15,6 +16,7 @@
     font-variant: normal;
     text-transform: none;
     line-height: 1;
+
     /* Better Font Rendering =========== */
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;

@@ -32,10 +32,8 @@
             &:nth-child($i) {
                 animation: loading-scale 0.75s $(init)s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
             }
-
             $init: calc(($i + 1) * 0.12);
         }
-
         display: inline-block;
         margin: 4px;
         width: 30px;

@@ -53,6 +53,7 @@
 }
 
 /* stylelint-disable */
+
 /* Generated with Bounce.js. Edit at http://goo.gl/W7f9he */
 @keyframes animation {
     0% {
@@ -95,4 +96,5 @@
         transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
     }
 }
+
 /* stylelint-enable */

 /* stylelint-disable */
+
 /*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
 
 /**
  * 1. Change the default font family in all browsers (opinionated).
  * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
  */
-
 html {
     font-family: sans-serif; /* 1 */
     -ms-text-size-adjust: 100%; /* 2 */
@@ -15,7 +15,6 @@ html {
 /**
  * Remove the margin in all browsers (opinionated).
  */
-
 body {
     margin: 0;
 }
@@ -28,26 +27,26 @@ body {
  * 1. Add the correct display in Edge, IE, and Firefox.
  * 2. Add the correct display in IE.
  */
-
 article,
 aside,
-details, /* 1 */
+details,
 figcaption,
 figure,
 footer,
 header,
-main, /* 2 */
+main,
 menu,
 nav,
 section,
-summary { /* 1 */
+summary {
+
+    /* 1 */
     display: block;
 }
 
 /**
  * Add the correct display in IE 9-.
  */
-
 audio,
 canvas,
 progress,
@@ -58,7 +57,6 @@ video {
 /**
  * Add the correct display in iOS 4-7.
  */
-
 audio:not([controls]) {
     display: none;
     height: 0;
@@ -67,7 +65,6 @@ audio:not([controls]) {
 /**
  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
  */
-
 progress {
     vertical-align: baseline;
 }
@@ -76,8 +73,7 @@ progress {
  * Add the correct display in IE 10-.
  * 1. Add the correct display in IE.
  */
-
-template, /* 1 */
+template,
 [hidden] {
     display: none;
 }
@@ -89,7 +85,6 @@ template, /* 1 */
  * 1. Remove the gray background on active links in IE 10.
  * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
  */
-
 a {
     background-color: transparent; /* 1 */
     -webkit-text-decoration-skip: objects; /* 2 */
@@ -99,7 +94,6 @@ a {
  * Remove the outline on focused links when they are also active or hovered
  * in all browsers (opinionated).
  */
-
 a:active,
 a:hover {
     outline-width: 0;
@@ -112,7 +106,6 @@ a:hover {
  * 1. Remove the bottom border in Firefox 39-.
  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
  */
-
 abbr[title] {
     border-bottom: none; /* 1 */
     text-decoration: underline; /* 2 */
@@ -122,7 +115,6 @@ abbr[title] {
 /**
  * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
  */
-
 b,
 strong {
     font-weight: inherit;
@@ -131,7 +123,6 @@ strong {
 /**
  * Add the correct font weight in Chrome, Edge, and Safari.
  */
-
 b,
 strong {
     font-weight: bolder;
@@ -140,7 +131,6 @@ strong {
 /**
  * Add the correct font style in Android 4.3-.
  */
-
 dfn {
     font-style: italic;
 }
@@ -149,7 +139,6 @@ dfn {
  * Correct the font size and margin on `h1` elements within `section` and
  * `article` contexts in Chrome, Firefox, and Safari.
  */
-
 h1 {
     font-size: 2em;
     margin: 0.67em 0;
@@ -158,7 +147,6 @@ h1 {
 /**
  * Add the correct background and color in IE 9-.
  */
-
 mark {
     background-color: #ff0;
     color: #000;
@@ -167,7 +155,6 @@ mark {
 /**
  * Add the correct font size in all browsers.
  */
-
 small {
     font-size: 80%;
 }
@@ -176,7 +163,6 @@ small {
  * Prevent `sub` and `sup` elements from affecting the line height in
  * all browsers.
  */
-
 sub,
 sup {
     font-size: 75%;
@@ -199,7 +185,6 @@ sup {
 /**
  * Remove the border on images inside links in IE 10-.
  */
-
 img {
     border-style: none;
 }
@@ -207,7 +192,6 @@ img {
 /**
  * Hide the overflow in IE.
  */
-
 svg:not(:root) {
     overflow: hidden;
 }
@@ -219,7 +203,6 @@ svg:not(:root) {
  * 1. Correct the inheritance and scaling of font size in all browsers.
  * 2. Correct the odd `em` font sizing in all browsers.
  */
-
 code,
 kbd,
 pre,
@@ -231,7 +214,6 @@ samp {
 /**
  * Add the correct margin in IE 8.
  */
-
 figure {
     margin: 1em 40px;
 }
@@ -240,7 +222,6 @@ figure {
  * 1. Add the correct box sizing in Firefox.
  * 2. Show the overflow in Edge and IE.
  */
-
 hr {
     box-sizing: content-box; /* 1 */
     height: 0; /* 1 */
@@ -254,7 +235,6 @@ hr {
  * 1. Change font properties to `inherit` in all browsers (opinionated).
  * 2. Remove the margin in Firefox and Safari.
  */
-
 button,
 input,
 select,
@@ -266,7 +246,6 @@ textarea {
 /**
  * Restore the font weight unset by the previous rule.
  */
-
 optgroup {
     font-weight: bold;
 }
@@ -275,9 +254,10 @@ optgroup {
  * Show the overflow in IE.
  * 1. Show the overflow in Edge.
  */
-
 button,
-input { /* 1 */
+input {
+
+    /* 1 */
     overflow: visible;
 }
 
@@ -285,9 +265,10 @@ input { /* 1 */
  * Remove the inheritance of text transform in Edge, Firefox, and IE.
  * 1. Remove the inheritance of text transform in Firefox.
  */
-
 button,
-select { /* 1 */
+select {
+
+    /* 1 */
     text-transform: none;
 }
 
@@ -296,9 +277,8 @@ select { /* 1 */
  *    controls in Android 4.
  * 2. Correct the inability to style clickable types in iOS and Safari.
  */
-
 button,
-html [type="button"], /* 1 */
+html [type="button"],
 [type="reset"],
 [type="submit"] {
     -webkit-appearance: button; /* 2 */
@@ -307,7 +287,6 @@ html [type="button"], /* 1 */
 /**
  * Remove the inner border and padding in Firefox.
  */
-
 button::-moz-focus-inner,
 [type="button"]::-moz-focus-inner,
 [type="reset"]::-moz-focus-inner,
@@ -319,7 +298,6 @@ button::-moz-focus-inner,
 /**
  * Restore the focus styles unset by the previous rule.
  */
-
 button:-moz-focusring,
 [type="button"]:-moz-focusring,
 [type="reset"]:-moz-focusring,
@@ -330,7 +308,6 @@ button:-moz-focusring,
 /**
  * Change the border, margin, and padding in all browsers (opinionated).
  */
-
 fieldset {
     border: 1px solid #c0c0c0;
     margin: 0 2px;
@@ -343,7 +320,6 @@ fieldset {
  * 3. Remove the padding so developers are not caught out when they zero out
  *    `fieldset` elements in all browsers.
  */
-
 legend {
     box-sizing: border-box; /* 1 */
     color: inherit; /* 2 */
@@ -356,7 +332,6 @@ legend {
 /**
  * Remove the default vertical scrollbar in IE.
  */
-
 textarea {
     overflow: auto;
 }
@@ -365,7 +340,6 @@ textarea {
  * 1. Add the correct box sizing in IE 10-.
  * 2. Remove the padding in IE 10-.
  */
-
 [type="checkbox"],
 [type="radio"] {
     box-sizing: border-box; /* 1 */
@@ -375,7 +349,6 @@ textarea {
 /**
  * Correct the cursor style of increment and decrement buttons in Chrome.
  */
-
 [type="number"]::-webkit-inner-spin-button,
 [type="number"]::-webkit-outer-spin-button {
     height: auto;
@@ -385,7 +358,6 @@ textarea {
  * 1. Correct the odd appearance in Chrome and Safari.
  * 2. Correct the outline style in Safari.
  */
-
 [type="search"] {
     -webkit-appearance: textfield; /* 1 */
     outline-offset: -2px; /* 2 */
@@ -394,7 +366,6 @@ textarea {
 /**
  * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
  */
-
 [type="search"]::-webkit-search-cancel-button,
 [type="search"]::-webkit-search-decoration {
     -webkit-appearance: none;
@@ -403,7 +374,6 @@ textarea {
 /**
  * Correct the text style of placeholders in Chrome, Edge, and Safari.
  */
-
 ::-webkit-input-placeholder {
     color: inherit;
     opacity: 0.54;
@@ -413,9 +383,9 @@ textarea {
  * 1. Correct the inability to style clickable types in iOS and Safari.
  * 2. Change font properties to `inherit` in Safari.
  */
-
 ::-webkit-file-upload-button {
     -webkit-appearance: button; /* 1 */
     font: inherit; /* 2 */
 }
+
 /* stylelint-enable */
\ No newline at end of file

@@ -18,7 +18,7 @@
         .item-del {
             margin-top: 10px;
             border-top: 1px solid #e0e0e0;
-            color: #5c99e4
+            color: #5c99e4;
         }
     }
 }

@@ -33,7 +33,6 @@
         right: 0;
         margin-left: auto;
         margin-right: auto;
-
     }
 
     .icon-label {

@@ -22,6 +22,7 @@
             font-size: 28px;
         }
     }
+
     .coin-detail {
         margin-top: 40px;
 
@@ -69,6 +70,7 @@
                     color: #b0b0b0;
                 }
             }
+
             .coin-num {
                 font-size: 34px;
                 line-height: 92px;

@@ -16,7 +16,6 @@
                 height: 130px;
                 line-height: 130px;
             }
-
             height: 90px;
             border-bottom: 1px solid #e0e0e0;
 

@@ -6,17 +6,20 @@
         padding: 0 30px;
         background: #fff;
     }
+
     .status-desc {
         display: flex;
         height: 80px;
         line-height: 80px;
         color: $white;
         background: $black;
+
         p:first-of-type {
             flex: 1;
             font-size: 34px;
         }
     }
+
     .exchange-progress {
         border-bottom: 1px solid #eee;
 
@@ -67,9 +70,11 @@
                 color: #b0b0b0;
             }
         }
+
         .progress-todo {
             padding: 25px 0;
             text-align: center;
+
             p:first-of-type {
                 font-size: 34px;
 
@@ -83,6 +88,7 @@
             }
         }
     }
+
     .exchange-details {
         margin-top: 20px;
         border-top: 1px solid #eee;
@@ -101,8 +107,8 @@
                 color: #b0b0b0;
             }
         }
-
     }
+
     .exchange-product {
         border-top: 1px solid #eee;
         border-bottom: 1px solid #eee;
@@ -116,6 +122,7 @@
                 border-bottom: 0 none;
             }
         }
+
         .img-box {
             position: relative;
             width: 98px;
@@ -133,11 +140,13 @@
                 color: $white;
                 text-align: center;
             }
+
             img {
                 width: 100%;
                 height: 100%;
             }
         }
+
         .goods-detail {
             flex: 1;
             margin: 0 20px;
@@ -146,6 +155,7 @@
             span {
                 margin-right: 40px;
             }
+
             .name {
                 display: -webkit-box;
                 -webkit-line-clamp: 2;
@@ -156,30 +166,36 @@
                 overflow: hidden;
                 font-size: 28px;
             }
+
             .size {
                 color: #b0b0b0;
             }
         }
+
         .goods-price {
             text-align: right;
 
             p:first-of-type {
                 font-size: 28px;
             }
+
             p:last-of-type {
                 font-size: 30px;
                 color: #b0b0b0;
             }
         }
     }
+
     .exchange-reason {
         padding: 20px 0;
         font-size: 28px;
+
         blockquote {
             margin-top: 20px;
             color: #b0b0b0;
         }
     }
+
     .exchange-img {
         display: flex;
         margin-top: 25px;
@@ -196,6 +212,7 @@
             }
         }
     }
+
     .exchange-address {
         position: relative;
         padding: 20px 30px 27px;
@@ -211,14 +228,17 @@
                 margin-right: 40px;
             }
         }
+
         p:last-of-type {
             font-size: 28px;
             color: #b0b0b0;
         }
     }
+
     .exchange-express {
         margin-top: 20px;
     }
+
     .exchange-order,
     .exchange-type {
         display: flex;
@@ -233,8 +253,10 @@
         .primary {
             flex: 1;
         }
+
         .cell-ft {
             color: #b0b0b0;
+
             &:after {
                 content: "\e607";
                 display: inline-block;
@@ -248,6 +270,7 @@
             }
         }
     }
+
     .exchange-options {
         position: fixed;
         left: 0;
@@ -275,16 +298,19 @@
                 color: $white;
                 background: $black;
             }
+
             &.countdown {
                 color: $white;
                 background: $black;
             }
+
             &.normal {
                 width: 188px;
                 padding: 0;
                 border: 1px solid $black;
                 color: $black;
             }
+
             &:focus {
                 outline: none;
             }

@@ -94,11 +94,15 @@
                 border: none;
             }
 
-            input::-webkit-input-placeholder { /* WebKit browsers */
+            input::-webkit-input-placeholder {
+
+                /* WebKit browsers */
                 text-align: center;
             }
 
-            input:-ms-input-placeholder { /* Internet Explorer 10+ */
+            input:-ms-input-placeholder {
+
+                /* Internet Explorer 10+ */
                 text-align: center;
             }
         }

@@ -42,6 +42,7 @@ body {
             font-size: 34px;
             font-weight: 700;
         }
+
         p:last-of-type {
             font-size: 28px;
             color: #b0b0b0;
@@ -63,10 +64,12 @@ body {
                 margin-right: 40px;
             }
         }
+
         p:last-of-type {
             font-size: 28px;
             color: #b0b0b0;
         }
+
         &:after {
             content: "";
             position: absolute;
@@ -78,6 +81,7 @@ body {
             border-bottom: 1px solid #eee;
         }
     }
+
     .order-goods {
         padding-top: 20px;
         border-top: 1px solid #eee;
@@ -92,6 +96,7 @@ body {
                 border-bottom: 0 none;
             }
         }
+
         .img-box {
             position: relative;
             width: 98px;
@@ -109,11 +114,13 @@ body {
                 color: $white;
                 text-align: center;
             }
+
             img {
                 width: 100%;
                 height: 100%;
             }
         }
+
         .goods-detail {
             flex: 1;
             margin: 0 20px;
@@ -122,6 +129,7 @@ body {
             span {
                 margin-right: 40px;
             }
+
             .name {
                 display: -webkit-box;
                 -webkit-line-clamp: 2;
@@ -132,22 +140,26 @@ body {
                 overflow: hidden;
                 font-size: 28px;
             }
+
             .size {
                 color: #b0b0b0;
             }
         }
+
         .goods-price {
             text-align: right;
 
             p:first-of-type {
                 font-size: 28px;
             }
+
             p:last-of-type {
                 font-size: 30px;
                 color: #b0b0b0;
             }
         }
     }
+
     .order-amount {
         padding: 30px 20px;
         margin-bottom: 20px;
@@ -163,11 +175,13 @@ body {
                 text-align: left;
                 color: #b0b0b0;
             }
+
             span {
                 display: inline-block;
                 width: 200px;
                 text-align: left;
             }
+
             &:last-of-type {
                 font-size: 34px;
 
@@ -175,9 +189,9 @@ body {
                     color: $black;
                 }
             }
-
         }
     }
+
     .order-button {
         position: fixed;
         left: 0;
@@ -204,16 +218,19 @@ body {
                 color: $white;
                 background: $black;
             }
+
             &.countdown {
                 color: $white;
                 background: $black;
             }
+
             &.normal {
                 width: 188px;
                 padding: 0;
                 border: 1px solid $black;
                 color: $black;
             }
+
             &:focus {
                 outline: none;
             }

@@ -15,6 +15,7 @@ $white: #fff;
             margin-top: 0;
         }
     }
+
     .order-detail {
         padding: 0 30px;
 
@@ -28,6 +29,7 @@ $white: #fff;
             }
         }
     }
+
     .order-code {
         height: 88px;
         font-size: 34px;
@@ -38,6 +40,7 @@ $white: #fff;
             flex: 1;
         }
     }
+
     .order-goods {
         .goods-info {
             position: relative;
@@ -58,6 +61,7 @@ $white: #fff;
                 opacity: 0;
             }
         }
+
         .img-box {
             position: relative;
             width: 98px;
@@ -81,6 +85,7 @@ $white: #fff;
                 height: 100%;
             }
         }
+
         .goods-detail {
             flex: 1;
             margin: 0 20px;
@@ -101,10 +106,12 @@ $white: #fff;
                 overflow: hidden;
                 font-size: 28px;
             }
+
             .size {
                 color: #b0b0b0;
             }
         }
+
         .goods-price {
             text-align: right;
 
@@ -118,6 +125,7 @@ $white: #fff;
             }
         }
     }
+
     .order-option {
         padding: 30px 0;
         border-top: 1px solid #eee;
@@ -145,16 +153,19 @@ $white: #fff;
                     color: $white;
                     background: $black;
                 }
+
                 &.countdown {
                     color: $white;
                     background: $black;
                 }
+
                 &.normal {
                     width: 188px;
                     padding: 0;
                     border: 1px solid $black;
                     color: $black;
                 }
+
                 &:focus {
                     outline: none;
                 }
@@ -174,6 +185,7 @@ $white: #fff;
                 margin-top: 8px;
                 line-height: 60px;
             }
+
             p:nth-child(2) {
                 font-size: 28px;
                 line-height: 30px;

 <template>
     <div class="feature-selector" :class="{ 'slide-in': isVisible }">
         <div class="header">
-            <div class="image-box">
+            <div id="image-box" class="image-box">
                 <img :src="selection.thumbnail | resize 45 60"/>
             </div>
             <div class="text-box">
@@ -60,6 +60,7 @@
                 width: 90px;
                 height: 120px;
                 display: inline-block;
+                opacity: 1;
             }
 
             .text-box {
@@ -113,6 +114,55 @@
         }
 
     }
+
+    .rotate-animation-target {
+        animation: rotate-animation 2000ms linear both;
+    }
+
+    /* Generated with Bounce.js. Edit at http://bouncejs.com#%7Bs%3A%5B%7BT%3A%22t%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A%7Bx%3A0%2Cy%3A0%7D%2Ct%3A%7Bx%3A10%2Cy%3A290%7D%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22r%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A0%2Ct%3A360%2Cs%3A3%2Cb%3A4%7D%2C%7BT%3A%22c%22%2Ce%3A%22b%22%2Cd%3A2000%2CD%3A0%2Cf%3A%7Bx%3A1%2Cy%3A1%7D%2Ct%3A%7Bx%3A0.01%2Cy%3A0.01%7D%2Cs%3A3%2Cb%3A4%7D%5D%7D */
+
+    @keyframes rotate-animation {
+        0% {
+            -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+            transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+        }
+        4.3% {
+            -webkit-transform: matrix3d(-0.489, -0.044, 0, 0, 0.044, -0.489, 0, 0, 0, 0, 1, 0, 5.143, 149.138, 0, 1);
+            transform: matrix3d(-0.489, -0.044, 0, 0, 0.044, -0.489, 0, 0, 0, 0, 1, 0, 5.143, 149.138, 0, 1);
+        }
+        8.61% {
+            -webkit-transform: matrix3d(0.094, -0.09, 0, 0, 0.09, 0.094, 0, 0, 0, 0, 1, 0, 8.786, 254.79, 0, 1);
+            transform: matrix3d(0.094, -0.09, 0, 0, 0.09, 0.094, 0, 0, 0, 0, 1, 0, 8.786, 254.79, 0, 1);
+        }
+        12.91% {
+            -webkit-transform: matrix3d(-0.04, -0.013, 0, 0, 0.013, -0.04, 0, 0, 0, 0, 1, 0, 10.523, 305.16, 0, 1);
+            transform: matrix3d(-0.04, -0.013, 0, 0, 0.013, -0.04, 0, 0, 0, 0, 1, 0, 10.523, 305.16, 0, 1);
+        }
+        17.22% {
+            -webkit-transform: matrix3d(-0.069, -0.046, 0, 0, 0.046, -0.069, 0, 0, 0, 0, 1, 0, 10.933, 317.067, 0, 1);
+            transform: matrix3d(-0.069, -0.046, 0, 0, 0.046, -0.069, 0, 0, 0, 0, 1, 0, 10.933, 317.067, 0, 1);
+        }
+        28.33% {
+            -webkit-transform: matrix3d(-0.01, -0.001, 0, 0, 0.001, -0.01, 0, 0, 0, 0, 1, 0, 10.206, 295.982, 0, 1);
+            transform: matrix3d(-0.01, -0.001, 0, 0, 0.001, -0.01, 0, 0, 0, 0, 1, 0, 10.206, 295.982, 0, 1);
+        }
+        39.44% {
+            -webkit-transform: matrix3d(0.016, -0.001, 0, 0, 0.001, 0.016, 0, 0, 0, 0, 1, 0, 9.938, 288.193, 0, 1);
+            transform: matrix3d(0.016, -0.001, 0, 0, 0.001, 0.016, 0, 0, 0, 0, 1, 0, 9.938, 288.193, 0, 1);
+        }
+        61.66% {
+            -webkit-transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 10.004, 290.121, 0, 1);
+            transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 10.004, 290.121, 0, 1);
+        }
+        83.98% {
+            -webkit-transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 10, 289.992, 0, 1);
+            transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 10, 289.992, 0, 1);
+        }
+        100% {
+            -webkit-transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 10, 290, 0, 1);
+            transform: matrix3d(0.01, 0, 0, 0, 0, 0.01, 0, 0, 0, 0, 1, 0, 10, 290, 0, 1);
+        }
+    }
 </style>
 <script>
     /**
@@ -283,7 +333,8 @@
 
                         return null;
                     })(self.selection.color.value, self.selection.size.value),
-                    thumbnail: this.thumbnails[opt]
+
+                    thumbnail: this.thumbnails[opt.value]
                 };
 
                 this.sizes = this.colorSizes[opt.value];
@@ -318,7 +369,28 @@
 
                 const param = Object.assign({goodsId: this.entity.id}, this.selection);
 
-                this.onAddToCart(param);
+                this.onAddToCart(param, this);
+            },
+
+            /**
+             * 播放加入购物车动画
+             */
+            playAnimation() {
+                const imageBox = $('#image-box');
+                const pos = imageBox.offset();
+
+                const clone = imageBox.clone();
+
+                clone[0].addEventListener('webkitAnimationEnd', ()=> {
+                    clone.remove();
+                });
+
+                clone.addClass('rotate-animation-target').appendTo('body').css({
+                    top: pos.top,
+                    left: pos.left,
+                    position: 'absolute',
+                    'z-index': 1002
+                });
             }
         }
     };

 <template>
-    <div class="show-box no-padding no-top-border">
+    <top-nav></top-nav>
+    <div class="show-box no-padding first-box">
         <div class="news-box">
             <h1>{{article.articleTitle}}</h1>
             <div class="status-bar">
-                <span class="icon icon-love"></span><span class="label">{{article.publishTime | formatUnixTime 'MM.DD HH:mm'}}</span>
-                <span class="icon icon-love"></span><span class="label">{{article.pageViews}}</span>
+                <span class="icon icon-timeshare"></span><span class="label">{{article.publishTime | formatUnixTime 'MM.DD HH:mm'}}</span>
+                <span class="icon icon-eye"></span><span class="label">{{article.pageViews}}</span>
             </div>
         </div>
 
@@ -18,7 +19,7 @@
     <div class="show-box no-padding" v-if="recommendProducts">
         <h2>相关推荐</h2>
 
-        <product-list :data="recommendProducts.goods"></product-list>
+        <product-list :data="recommendProducts"></product-list>
     </div>
 
     <div class="brand-list show-box" v-if="brands">
@@ -41,7 +42,7 @@
                 </div>
                 <h3><a :href="item.url">{{item.title}}</a></h3>
                 <div class="sub-time">
-                    <span class="icon icon-love"></span><span class="label">{{article.publishTime | formatUnixTime 'MM.DD HH:mm'}}</span>
+                    <span class="icon icon-timeshare"></span><span class="label">{{article.publishTime | formatUnixTime 'MM.DD HH:mm'}}</span>
                 </div>
                 <div class="clearfix"></div>
             </div>
@@ -56,6 +57,10 @@
     }
 
     .show-box {
+        &.first-box {
+            margin-top: 120px;
+        }
+
         background: $bgcolor;
         margin-top: 30px;
         border-bottom: 1px solid #eee;
@@ -118,9 +123,14 @@
             margin-top: 16px;
             margin-left: 30px;
             float: left;
-            max-width: 420px;
+            width: 420px;
             min-height: 90px;
+            max-height: 90px;
             font-size: 32px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
         }
 
         .sub-time {
@@ -178,7 +188,8 @@
     module.exports = {
         components: {
             'content-block': require('./content-block.vue'),
-            'product-list': require('component/product/list.vue')
+            'product-list': require('component/product/list.vue'),
+            'top-nav': require('./top-nav.vue')
         },
         data() {
             return {
@@ -191,12 +202,14 @@
         },
         created() {
             const newsId = $('#app').data('newsId');
+            let loadDeferred = null;
 
             $.get(`/news/news_${newsId}.json`).then(result => {
                 const article = result[0],
                     content = result[1],
                     brands = result[2],
                     other = result[3];
+                let goods, prodMap = {};
 
                 if (article && article.code === 200 && article.data) {
                     this.article = article.data;
@@ -205,9 +218,36 @@
                 if (content && content.code === 200 && content.data) {
                     this.content = content.data;
 
-                    this.recommendProducts = this.content.filter((block)=> {
+                    const products = this.content.filter((block)=> {
                         return block && typeof block.goods === 'object';
                     });
+
+
+                    const list = [];
+
+                    goods = products[0] ? products[0].goods.data : null;
+
+                    // 封装产品数据适应产品列表组件
+                    if (goods) {
+                        goods.forEach((item)=> {
+                            const obj = {
+                                productId: item.id,
+                                goodsList: [
+                                    {
+                                        imagesUrl: item.src
+                                    }
+                                ],
+                                marketPrice: 0,
+                                salesPrice: 0,
+                                productName: ''
+                            };
+
+                            list.push(obj);
+                            prodMap[item.id] = obj;
+                        });
+                    }
+
+                    this.recommendProducts = list;
                 }
 
                 if (brands && brands.code === 200 && brands.data) {
@@ -217,6 +257,33 @@
                 if (other && other.code === 200 && content.data) {
                     this.other = other.data;
                 }
+
+
+                // 延时读取商品价格、名称等信息
+                loadDeferred = () => {
+                    $.get('/product/search_product.json', {
+                        ids: goods.map((item)=> {
+                            return item.id;
+                        }).join(',')
+                    }).then((data)=> {
+                        data.forEach((item)=> {
+                            const g = prodMap[item.productSkn];
+
+                            g.marketPrice = item.marketPrice;
+                            g.salesPrice = item.salesPrice;
+                            g.productName = item.productName;
+                        });
+
+                        this.$set('recommendProducts', this.recommendProducts);
+                    });
+                };
+            });
+
+            $(window).on('scroll', ()=> {
+                if ($(window).scrollTop() > 200 && loadDeferred) {
+                    loadDeferred();
+                    loadDeferred = null;
+                }
             });
         }
     };

+<template>
+    <div class="top-nav">
+        <a class="left-button" href="javascript:alert('TODO');">
+            <span class="icon icon-left"></span>
+        </a>
+
+        <a class="right-button" href="javascript:alert('TODO');">
+            <span class="icon icon-share"></span>
+        </a>
+        <a class="right-button" href="javascript:alert('TODO');">
+            <span class="icon icon-love"></span>
+        </a>
+        <a class="right-button" href="javascript:alert('TODO');" :click="">
+            <span class="icon icon-check"></span>
+            {{likeCount}}
+        </a>
+    </div>
+</template>
+<style>
+    .top-nav {
+        position: fixed;
+        z-index: 10;
+        font-size: 40px;
+        padding: 30px;
+        width: 100%;
+        top: 0;
+        background: #fff;
+
+        .left-button {
+            float: left;
+        }
+
+        .right-button {
+            float: right;
+            margin-left: 30px;
+        }
+    }
+</style>
+<script>
+    require('common/vue-filter');
+
+    module.exports = {
+        components: {
+        },
+        data() {
+            return {
+                likeCount: 9,
+            };
+        },
+        created() {
+        }
+    };
+</script>

 <template>
-    <top-nav :title="entity.productName"></top-nav>
+    <top-nav v-if="isApp" :title="entity.productName"></top-nav>
     <show-box :is-first="true">
         <image-carousel :goods="entity.goodsList"></image-carousel>
         <div class="title-box">
@@ -26,7 +26,7 @@
         </div>
     </show-box>
 
-    <div class="separator"><span>继续拖动，查看商品信息</span>
+    <div class="separator" v-if="isApp"><span>继续拖动，查看商品信息</span>
         <hr/>
     </div>
 
@@ -169,13 +169,13 @@
     </show-box>
 
     <div class="control-box">
-        <button class="button control-button" style="flex: 1">
-            <a href="javascript:void(0);" @click="yoho.goShopingCart()" style="position: relative;">
+        <button class="button control-button">
+            <span @click="yoho.goShopingCart()" style="position: relative;">
                 <i class="icon icon-bag"></i>
                 <span v-if="cartCount > 0" class="badge badge-tr">{{cartCount}}</span>
-            </a>
+            </span>
         </button>
-        <button class="button control-button" style="flex: 1" @click="toggleFavorite()">
+        <button class="button control-button" @click="toggleFavorite()">
             <span v-if="entity.isCollect === 'Y' " class="icon icon-love-solid"></span>
             <span v-else class="icon icon-love"></span>
         </button>
@@ -220,6 +220,7 @@
             font-size: 28px;
             color: #b0b0b0;
         }
+
     }
 
     .separator {
@@ -300,6 +301,7 @@
             min-width: 100px;
             border: none;
             border-top: 1px solid #ccc;
+            flex: 1;
 
             .icon {
                 font-size: 40px;
@@ -397,6 +399,7 @@
         data() {
             return {
                 yoho: yoho,
+                isApp: yoho.isApp,
                 intro: {},
                 entity: {
                     brand: {
@@ -415,7 +418,7 @@
                  *
                  * @param result
                  */
-                onAddToCart: (selection)=> {
+                onAddToCart: (selection, selector)=> {
                     $.post('/product/cart.json', {
                         productSku: selection.size.value,
                         buyNumber: 1
@@ -429,6 +432,8 @@
                         if (result.code === 200) {
                             this.cartCount = result.data.goods_count;
                             this.showFeatureSelector = false;
+
+                            selector.playAnimation();
                         } else {
                             this.showFeatureSelector = false;
                             tip('系统异常,请稍后重试');
@@ -481,6 +486,9 @@
                         if (result.code === 200) {
                             tip('收藏成功');
                             this.entity.isCollect = 'Y';
+                        } else if (result.code === 403) {
+                            // 未登陆
+                            yoho.goLogin();
                         }
                     });
                 }

@@ -4,7 +4,7 @@
             <span class="icon icon-left"></span>
         </a>
 
-        <a class="right" href="javascript:void(0);" @click="share()">
+        <a class="right" href="javascript:void(0);" @click="yoho.goShare()">
             <span class="icon icon-share"></span>
         </a>
     </div>
@@ -24,29 +24,14 @@
         .right {
             float: right;
         }
-
     }
 </style>
 <script>
-    const yoho = require('yoho');
-
     module.exports = {
         data() {
             return {
-                yoho: yoho
+                yoho: require('yoho')
             };
-        },
-        props: {
-            title: 'String'
-        },
-        methods: {
-            share: function() {
-                yoho.goShare({
-                    title: this.title || '',
-                    des: '我在BLK发现了一个不错的商品，快来看看吧！',
-                    url: location.href
-                });
-            }
         }
     };
 </script>