尺码优化

zhangxiaoru
Commit 3bf859094a587074d7cbc7c087980e766277a4b3 1 parent 673718f2
Showing 5 changed files with 72 additions and 13 deletions
apps/product/models/detail.js
config/common.js
public/hbs/product/detail/infodata.hbs
public/js/cart/chose-panel.js
public/scss/cart/_chose-panel.css
--- a/apps/product/models/detail.js
View file @3bf8590
+++ b/apps/product/models/detail.js
View file @3bf8590
@@ -1560,7 +1560,6 @@ let getNewProductAsyncData = (data) => {
             }
             finalResult.isStudent = data.isStudent;
-
             return finalResult;
         });
     });
@@ -1753,7 +1752,8 @@ let _detailDataPkgAsync = (origin, uid, vipLevel, ua) => {
                         goodsId: value.goods_id,
                         colorId: value.color_id,
                         name: size.size_name,
-                        sizeNum: size.storage_number
+                        sizeNum: size.storage_number,
+                        sizeInfo: size.size_info
                     });
                     sizeName = size.size_name;
@@ -1762,7 +1762,8 @@ let _detailDataPkgAsync = (origin, uid, vipLevel, ua) => {
                     // 判断出没有库存则显示灰色
                     let build = {
                         id: size.size_id,
-                        storage: size.storage_number
+                        storage: size.storage_number,
+                        sizeInfo: size.size_info
                     };
                     allSizeList[sizeName] = (allSizeList[sizeName] === null ||
@@ -1771,6 +1772,7 @@ let _detailDataPkgAsync = (origin, uid, vipLevel, ua) => {
                     colorStorageGroup[value.product_skc][sizeName] = parseInt(size.storage_number, 10);
                 });
+
                 // 颜色分组
                 colorList.push({
                     id: value.color_id,
@@ -1796,11 +1798,13 @@ let _detailDataPkgAsync = (origin, uid, vipLevel, ua) => {
             size: []
         };
         _.forEach(allSizeList, (value, key) => {
+
             // 默认尺码
             sizeGroup[0].size.push({
                 name: key,
                 sizeNum: _.toNumber(value.storage) > 0 ? true : false,
-                id: value.id
+                id: value.id,
+                sizeInfo: value.sizeInfo
             });
             colorGroup[i] = {
@@ -1831,6 +1835,7 @@ let _detailDataPkgAsync = (origin, uid, vipLevel, ua) => {
         // 遍历所有颜色, 构建尺码显示数据
         i = 1;
         _.forEach(colorList, function(value) {
+
             // 各个尺码的颜色， 每行显示一个颜色的对应尺码
             sizeGroup[i] = {
                 size: sizeList[value.skcId],
@@ -1841,6 +1846,7 @@ let _detailDataPkgAsync = (origin, uid, vipLevel, ua) => {
             colorGroup[0].color.push(value);
             ++i;
         });
+
     }
     let soldOut = (origin.storage_sum === 0) || (totalStorageNum === 0); // status
     let notForSale = origin.attribute === 2;
--- a/config/common.js
View file @3bf8590
+++ b/config/common.js
View file @3bf8590
@@ -24,13 +24,18 @@ module.exports = {
         // imCs: 'http://im.yohobuy.com/api',
         // imServer: 'http://im.yohobuy.com/server'
-        api: 'http://api.yoho.cn/',
-        service: 'http://service.yoho.cn/',
-        liveApi: 'http://api.live.yoho.cn/',
-        singleApi: 'http://single.yoho.cn/',
-        imSocket: 'wss://imsocket.yohobuy.com:443',
-        imCs: 'https://imhttp.yohobuy.com/api',
-        imServer: 'https://imhttp.yohobuy.com/server'
+        // api: 'http://api.yoho.cn/',
+        // service: 'http://service.yoho.cn/',
+        // liveApi: 'http://api.live.yoho.cn/',
+        // singleApi: 'http://single.yoho.cn/',
+        // imSocket: 'wss://imsocket.yohobuy.com:443',
+        // imCs: 'https://imhttp.yohobuy.com/api',
+        // imServer: 'https://imhttp.yohobuy.com/server'
+
+        api: 'http://dev-api.yohops.com:9999/',
+        service: 'http://dev-service.yohops.com:9999/',
+        liveApi: 'http://testapi.live.yohops.com:9999/',
+        singleApi: 'http://api-test1.yohops.com:9999/'
     },
     subDomains: {
         host: '.m.yohobuy.com',
--- a/public/hbs/product/detail/infodata.hbs
View file @3bf8590
+++ b/public/hbs/product/detail/infodata.hbs
View file @3bf8590
@@ -22,6 +22,9 @@
                             {{/ isY}}
                         {{/if}}
                     </p>
+                    <p class="not-choose">请选择颜色、尺码</p>
+                    <p class="choosed-info hide"></p>
+                    <p class="size-info hide"></p>
                 </div>
             </div>
             <div class="chose-items">
@@ -40,7 +43,7 @@
                     {{#each sizes}}
                         <ul class="size-row clearfix {{#unless @first}}hide{{/unless}}">
                             {{#each size}}
-                            <li class="block {{#if chosed}} chosed{{/if}} {{#unless sizeNum}} zero-stock {{/unless}}" data-num="{{sizeNum}}" data-id="{{id}}" data-skuid="{{skuId}}">{{name}}</li>
+                            <li class="block {{#if chosed}} chosed{{/if}} {{#unless sizeNum}} zero-stock {{/unless}}" data-num="{{sizeNum}}" data-id="{{id}}" data-skuid="{{skuId}}" data-info="{{sizeInfo}}">{{name}}</li>
                             {{/each}}
                         </ul>
                     {{/each}}
--- a/public/js/cart/chose-panel.js
View file @3bf8590
+++ b/public/js/cart/chose-panel.js
View file @3bf8590
@@ -362,6 +362,30 @@ $yohoPage.on('touchstart', '.chose-panel', function(e) {
     return false;
 });
+function chosedLength() {
+    var $chosedL = $('.block-list>ul>li.chosed'),
+        infoHtml;
+
+    $('.choosed-info').removeClass('hide');
+    if (!$('.not-choose').hasClass('hide')) {
+        $('.not-choose').addClass('hide');
+    }
+
+    if ($chosedL.length === 2) {
+        $chosedL.each(function(val) {
+
+            infoHtml = '已选：' + $chosedL.eq(0).html() + '、' + $chosedL.eq(1).html();
+        })
+    } else if ($chosedL.length === 1) {
+        infoHtml = '已选：' + $chosedL.eq(0).html();
+    } else {
+        $('.choosed-info').addClass('hide');
+        $('.not-choose').removeClass('hide');
+    }
+
+    $('.choosed-info').html(infoHtml);
+}
+
 $yohoPage.on('touchstart', '.color-list .block', function() {
     var $this = $(this),
         index = $this.index(),
@@ -450,6 +474,7 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         return false;
     }
+    chosedLength();
 }).on('touchstart', '.size-list .block', function() {
     var $this = $(this),
@@ -475,6 +500,10 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         // 老的选中颜色去掉勾选,新的选中颜色加上勾选
         changeColorChosed(0);
+        if (!$('.size-info').hasClass('hide')) {
+            $('.size-info').addClass('hide');
+        }
+
         // 当前尺码不是选中状态,选中时
     } else {
         hasChooseSize = true;
@@ -496,6 +525,8 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
         curColorIndex = index + 1;
         $curSizeBlock = $this;
+        $('.size-info').html($(this).data('info')).removeClass('hide');
+
         if (window._yas && window._yas.sendCustomInfo) {
             window._yas.sendCustomInfo({
                 op: 'YB_GDS_SIZE_C',
@@ -513,6 +544,8 @@ $yohoPage.on('touchstart', '.color-list .block', function() {
     $this.toggleClass('chosed');
     $('#good-num').val(1);
+    chosedLength();
+
     // 设置按钮的样式和文字
     updateConformButtonClassAndText();
 });
--- a/public/scss/cart/_chose-panel.css
View file @3bf8590
+++ b/public/scss/cart/_chose-panel.css
View file @3bf8590
@@ -80,7 +80,8 @@
         .sale-price {
             margin-right: 15px;
-            color: #e10;
+            color: #D0021b;
+            font-size: 28px;
             &.no-price {
                 color: #000;
@@ -91,6 +92,17 @@
             color: #b0b0b0;
             text-decoration: line-through;
         }
+        
+        .size-info {
+            font-size: 24px;
+            display: block;
+            margin-top: 5px;
+            color: #444;
+        }
+
+        .hide {
+            display: none;
+        }
     }
     .color-list,