pkg page

@@ -8,6 +8,8 @@
 
 const orderModel = require('../models/order');
 
+const _ = require('lodash');
+
 const helper = global.yoho.helpers;
 
 const index = (req, res, next) => {
@@ -32,6 +34,13 @@ const index = (req, res, next) => {
         // 返回购物车链接
         result.data.goCartLink = helper.urlFormat('/shopping/cart');
 
+        // 拆单是否显示左右切换
+        _.forEach(result.data.shopping_cart_data.package_list, i => {
+            if (i.goods_list.length > 4) {
+                i.showToggle = true;
+            }
+        });
+
         // 是否打印价格radio
         result.data.printPriceRadio = [
             {

@@ -56,13 +56,19 @@
                                     {{#each ../package_list}}
                                         <div class="package-item">
                                             <p class="package-title bold">包裹{{math @index '+' 1}}:{{#if @first}}总仓发货{{^}}异地调拨{{/if}}</p>
-                                            <ul class="package-goods clearfix">
-                                                {{#each goods_list}}
-                                                    <li class="left">
-                                                        <img class="lazy package-goods-img" data-original="{{image goods_images 100 134}}">
-                                                    </li>
-                                                {{/each}}
-                                            </ul>
+                                            {{#if showToggle}}
+                                                <span class="iconfont toggle-icon left-icon">&#xe607;</span>
+                                                <span class="iconfont toggle-icon right-icon">&#xe61e;</span>
+                                            {{/if}}
+                                            <div class="package-goods-wrap">
+                                                <ul class="package-goods clearfix">
+                                                    {{#each goods_list}}
+                                                        <li class="left">
+                                                            <img class="lazy package-goods-img" data-original="{{image goods_images 100 134}}">
+                                                        </li>
+                                                    {{/each}}
+                                                </ul>
+                                            </div>
                                             <p class="package-shipping">运费：¥{{shopping_cost}}元（原价{{shopping_orig_cost}}元，优惠{{shopping_cut_cost}}元）</p>
                                         </div>
                                     {{/each}}

@@ -36,6 +36,8 @@ var $invoice = $('#invoice-content');
 
 var balanceTpl = Hbs.compile($('#balance-tpl').html());
 
+var pkgCache = {};
+
 var $pkgList;
 
 require('yoho-jquery-dotdotdot');
@@ -52,6 +54,27 @@ $('.brand-and-name .name').dotdotdot({
     wrap: 'letter'
 });
 
+function pkgPageControl($el, flag) {
+    var id = $el.index(),
+        $ul = $el.find('.package-goods'),
+        theCache = pkgCache[id],
+        curPage = theCache.cur ? theCache.cur : 1,
+        page = Math.ceil(theCache.total / 5);
+
+    curPage += flag;
+
+    // 第一页或最后一页
+    if (curPage < 1 || curPage > page) {
+        return;
+    }
+
+    $ul.animate({
+        marginLeft: -(curPage - 1) * $ul.parent('.package-goods-wrap').width()
+    }, 200);
+
+    theCache.cur = curPage;
+}
+
 // JIT拆单
 if ($('.multi-package-row').length > 0) {
     $pkgList = $('.package-list');
@@ -71,6 +94,26 @@ if ($('.multi-package-row').length > 0) {
 
         $pkgList.addClass('hide');
     });
+
+    // 设置左右切换
+    $('.package-goods').each(function() {
+        $(this).width($(this).children('li').length * 120);
+    });
+
+    // 初始化cache
+    $('.package-item').each(function() {
+        pkgCache[$(this).index()] = {
+            total: $(this).find('li').length
+        };
+    });
+
+    $('.package-list').on('click', '.toggle-icon', function() {
+        var $this = $(this);
+
+        var flag = $this.hasClass('left-icon') ? -1 : 1;
+
+        pkgPageControl($this.closest('.package-item'), flag);
+    });
 }
 
 // 有货币、备注切换显示

@@ -336,6 +336,30 @@
             }
         }
 
+        .package-item {
+            position: relative;
+
+            .toggle-icon {
+                position: absolute;
+                font-size: 34px;
+                top: 106px;
+                cursor: pointer;
+            }
+
+            .left-icon {
+                left: -24px;
+            }
+
+            .right-icon {
+                right: -24px;
+            }
+        }
+
+        .package-goods-wrap {
+            height: 134px;
+            overflow: hidden;
+        }
+
         .package-list {
             position: absolute;
             background: #fff;