sale

@@ -38,6 +38,7 @@ exports.index = (req, res) => {
         limit: 10,
         limit: 10,
         order: 's_t_desc'
         order: 's_t_desc'
     }).then((result) => {
     }).then((result) => {
+        console.log(result);
         result = {
         result = {
             headerBanner: {
             headerBanner: {
                 list: [
                 list: [
@@ -100,7 +101,7 @@ exports.special = (req, res) => {
     let headerData = headerModel.setNavHeader('折扣专场');
     let headerData = headerModel.setNavHeader('折扣专场');
     let renderData = {
     let renderData = {
         module: 'product',
         module: 'product',
-        page: 'sale',
+        page: 'special',
         pageHeader: headerData,
         pageHeader: headerData,
         pageFooter: true
         pageFooter: true
     };
     };
@@ -131,3 +132,40 @@ exports.specialDetail = (req, res) => {
         saleLogger(err, res);
         saleLogger(err, res);
     });
     });
 };
 };
+
+/**
+ * 断码区
+ */
+exports.breakCode = (req, res) => {
+    let headerData = headerModel.setNavHeader('断码区');
+    let renderData = {
+        module: 'product',
+        page: 'break-code',
+        pageHeader: headerData,
+        pageFooter: true
+    };
+
+    saleModel.getBreakCodeData().then((result) => {
+        result = {
+            src: 'http://img12.static.yhbimg.com/yhb-img01/2016/04/18/05/0239e814b8121913aa67b9ad509bd4e310.jpg?imageView2/2/w/{width}/h/{height}',
+            goods: {
+                url: 'http://m.yohobuy.com/product/pro_320421_412063/SYSTAGYuanLingWeiYiSYSA601HC09.html',
+                thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/12/07/09/01ced0e2ed6a4f2a6d95be70cd0a6c5a56.jpg?imageView/2/w/235/h/314',
+                name: 'NEFF ONE OF US RAGLAN L/S 男款森林风连帽卫衣',
+                salePrice: '759.00',
+                price: '799.00',
+                tags: {
+                    isNew: true,
+                    isAdvance: false,
+                    isDiscount: false,
+                    isYohoood: false,
+                    isLimited: false
+                },
+                isSoonSoldOut: true
+            }
+        }
+        res.render('break-code', Object.assign(renderData, result));
+    }).catch((err) => {
+        saleLogger(err, res);
+    });
+};

@@ -95,3 +95,22 @@ exports.getSpecialDetailData = (params) => {
         }
         }
     });
     });
 };
 };
+
+/**
+ * 获取断码区数据
+ * @param  {[object]} params
+ * @return {[object]}
+ */
+exports.getBreakCodeData = (params) => {
+    return api.get('', sign.apiSign(Object.assign({
+        method: 'app.activity.get',
+        sort: 2,
+        plateform: 2
+    }, params))).then((result) => {
+        if (result && result.code === 200) {
+            return camelCase(result.data);
+        } else {
+            return Promise.reject('error');
+        }
+    });
+};

@@ -21,5 +21,6 @@ router.get('/detail/:id/:gid', detail.index);
 router.get('/sale', sale.index);
 router.get('/sale', sale.index);
 router.get('/special', sale.special);
 router.get('/special', sale.special);
 router.get('/specialDetail', sale.specialDetail);
 router.get('/specialDetail', sale.specialDetail);
+router.get('/breakCode', sale.breakCode);
 
 
 module.exports = router;
 module.exports = router;

+<div class="break-code-page discount-page yoho-page">
+    <div class="banner">
+        <img src="{{image src 640 200}}"/>
+    </div>
+
+    <ul id="list-nav" class="list-nav clearfix">
+        <li class="new active">
+            <a href="javascript:void(0);">
+                <span class="span-test">上装</span>
+            </a>
+        </li>
+        <li class="price">
+            <a href="javascript:void(0);">
+                <span class="span-test">夏装</span>
+            </a>
+        </li>
+        <li class="discount">
+            <a href="javascript:void(0);">
+                <span class="span-test">鞋</span>
+            </a>
+        </li>
+        <li class="discount">
+            <a href="javascript:void(0);">
+                <span class="span-test">其他</span>
+            </a>
+        </li>
+        <li class="filter">
+            <a href="javascript:void(0);">
+                <span class="span-test">筛选</span>
+                <span class="iconfont cur">&#xe613;</span>
+            </a>
+        </li>
+    </ul>
+    <div class="swiper-container" id="size-swiper">
+        <ul class="swiper-wrapper">
+            <li class="swiper-slide on">XS码</li>
+            <li class="swiper-slide">S码</li>
+            <li class="swiper-slide">M码</li>
+            <li class="swiper-slide">L码</li>
+            <li class="swiper-slide">XL码</li>
+            <li class="swiper-slide">XXL码</li>
+            <li class="swiper-slide">S码</li>
+            <li class="swiper-slide">M码</li>
+            <li class="swiper-slide">L码</li>
+            <li class="swiper-slide">XL码</li>
+            <li class="swiper-slide">XXL码</li>
+        </ul>
+    </div>
+    
+
+    <div id="goods-container" class="goods-container">
+        <div class="new-goods container clearfix">
+            {{# goods}}
+                {{> common/good}}
+            {{/ goods}}
+        </div>
+        <div class="price-goods container hide clearfix"></div>
+        <div class="discount-goods container hide clearfix"></div>
+
+        {{> common/filter}}
+    </div>
+
+    {{> common/query-param}}
+
+    {{> common/suspend-cart}}
+</div>

@@ -2,5 +2,5 @@
     <div class="banner">
     <div class="banner">
         <img src="{{image src 640 250}}"/>
         <img src="{{image src 640 250}}"/>
         <span class="activity-time"><i class="iconfont time-ico">&#xe603;</i>{{time}}</span>
         <span class="activity-time"><i class="iconfont time-ico">&#xe603;</i>{{time}}</span>
-    </div>    
+    </div>
 </div>
 </div>

+{{# filter}}
+    <div class="filter-mask hide">
+        <div class="filter-body">
+            <ul class="classify">
+                {{#each classify}}
+                    <li class="classify-item{{#if @first}} active{{/if}}" data-bp-id="filter_classify_{{name}}_true">
+                        <p class="shower{{#if default}} default{{/if}}">
+                            <span class="title">{{title}}：</span>
+                            {{name}}
+                        </p>
+                        <ul class="sub-classify" data-type={{dataType}}>
+                            {{# subs}}
+                                <li class="sub-item{{#if chosed}} chosed{{/if}}" data-id={{dataId}} data-bp-id="filter_subclassify_{{name}}_true">
+                                    {{name}}
+                                    <i class="iconfont chosed-icon">&#xe617;</i>
+                                </li>
+                            {{/ subs}}
+                        </ul>
+                    </li>
+                {{/each}}
+            </ul>
+        </div>
+    </div>
+{{/ filter}}

+{{#if .}} {{!-- 剔除值为false的项 --}}
+    <div class="good-info" data-id="{{id}}" data-bp-id="guang_goodList_{{name}}_false">
+        <div class="tag-container clearfix">
+            {{# tags}}
+                {{# isNew}}
+                    <p class="good-tag new-tag">NEW</p>
+                {{/ isNew}}
+                {{# isAdvance}}
+                    <p class="good-tag renew-tag">再到着</p>
+                {{/ isAdvance}}
+                {{# isDiscount}}
+                    <p class="good-tag sale-tag">SALE</p>
+                {{/ isDiscount}}
+                {{# isYohoood}}
+	                <p class="good-tag running-man-tag">跑男同款</p>
+                {{/ isYohoood}}
+                {{# isLimited}}
+                    <p class="good-tag limit-tag">限量商品</p>
+                {{/ isLimited}}
+            {{/ tags}}
+        </div>
+        <div class="good-detail-img">
+            <a class="good-thumb" href="{{url}}">
+                <img class="lazy" data-original="{{thumb}}">
+            </a>
+            {{# isSoonSoldOut}}
+                <p class="few-tag">即将售罄</p>
+            {{/ isSoonSoldOut}}
+        </div>
+        <div class="good-detail-text">
+            <div class="name">
+                <a href="{{url}}">{{name}}</a>
+            </div>
+            <div class="price">
+                <span class="sale-price {{^price}}no-price{{/price}}">¥{{salePrice}}</span>
+                {{#price}}
+                    <span class="market-price">¥{{.}}</span>
+                {{/price}}
+            </div>
+        </div>
+    </div>
+{{/if}}

+{{#if brand}}
+    <input class="query-param" type="hidden" data-attr="brand" value="{{brand}}">
+{{/if}}
+
+{{#if gender}}
+    <input class="query-param" type="hidden" data-attr="gender" value="{{gender}}">
+{{/if}}
+
+{{#if sort}}
+    <input class="query-param" type="hidden" data-attr="sort" value="{{sort}}">
+{{/if}}
+
+{{#if msort}}
+    <input class="query-param" type="hidden" data-attr="msort" value="{{msort}}">
+{{/if}}
+
+{{#if misort}}
+    <input class="query-param" type="hidden" data-attr="misort" value="{{misort}}">
+{{/if}}
+
+{{#if color}}
+    <input class="query-param" type="hidden" data-attr="color" value="{{color}}">
+{{/if}}
+
+{{#if size}}
+    <input class="query-param" type="hidden" data-attr="size" value="{{size}}">
+{{/if}}
+
+{{#if price}}
+    <input class="query-param" type="hidden" data-attr="price" value="{{price}}">
+{{/if}}
+
+{{#if discount}}
+    <input class="query-param" type="hidden" data-attr="discount" value="{{discount}}">
+{{/if}}
+
+{{#if specialsaleId}}
+    <input class="query-param" type="hidden" data-attr="specialsale_id" value="{{specialsaleId}}">
+{{/if}}
+
+{{#if promotion}}
+    <input class="query-param" type="hidden" data-attr="promotion" value="{{promotion}}">
+{{/if}}
+
+{{#if query}}
+    <input class="query-param" type="hidden" data-attr="query" value="{{query}}">
+{{/if}}
+
+{{#if style}}
+    <input class="query-param" type="hidden" data-attr="style" value="{{style}}">
+{{/if}}
+
+{{#if pD}}
+    <input class="query-param" type="hidden" data-attr="p_d" value="{{pD}}">
+{{/if}}
+
+{{#if channel}}
+    <input class="query-param" type="hidden" data-attr="channel" value="{{channel}}">
+{{/if}}
+
+{{#if dayLimit}}
+    <input class="query-param" type="hidden" data-attr="dayLimit" value="{{dayLimit}}">
+{{/if}}
+
+{{#if limit}}
+    <input class="query-param" type="hidden" data-attr="limit" value="{{limit}}">
+{{/if}}

+<div id="suspend-cart" class="suspend-cart">
+    <a href={{cartUrl}}>
+        <span class="iconfont">&#xe62c;</span>
+    </a>
+    <span class="cart-count hide">0</span>
+</div>

+/**
+ * 筛选JS
+ * 暴露三个接口：注册回调、显示filter、隐藏filter
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/19
+ */
+
+var $ = require('yoho-jquery'),
+    Hammer = require('yoho-hammer');
+
+var $filter;
+
+var fCbFn, hCbFn; //筛选和关闭的回调
+
+var missStatus; //是否忽略选中状态
+
+//隐藏筛选界面
+function hideFilter() {
+    $filter.addClass('hide');
+}
+
+//显示筛选界面
+function showFilter() {
+    $filter.removeClass('hide');
+}
+
+// 一级菜单点击时背景高亮
+function highlightMainItem() {
+    var $mainItem = $('.filter-body .classify');
+
+    $mainItem.on('touchstart', '.shower', function() {
+        $mainItem.removeClass('highlight');
+        $(this).addClass('highlight');
+    }).on('touchend touchcancel', '.shower', function() {
+        $(this).removeClass('highlight');
+    });
+}
+
+// 子菜单点击时背景高亮
+function highlightSubItem() {
+    var $subItem = $('.filter-body .sub-item');
+
+    $subItem.on('touchstart', function() {
+        $subItem.removeClass('highlight');
+        $(this).addClass('highlight');
+    }).on('touchend touchcancel', function() {
+        $(this).removeClass('highlight');
+    });
+}
+
+//主筛选项Tap事件句柄
+function classifyTapEvt($this) {
+    if ($this.hasClass('active')) {
+        return;
+    }
+
+    $this.siblings('.active').removeClass('active');
+
+    $this.addClass('active');
+}
+
+//子筛选项选中处理
+function setSubClassify($this) {
+    var $sub = $this.closest('.sub-classify');
+
+    var $shower = $sub.siblings('.shower');
+
+    var html, shower;
+
+    if ($this.hasClass('chosed')) {
+        return $sub;
+    }
+
+    $sub.children('.chosed').removeClass('chosed');
+    $this.addClass('chosed');
+
+    html = $.trim($this.html());
+
+    shower = $.trim($shower.html());
+
+    $shower.html(
+        shower.substring(0, shower.indexOf('</span>') + 7) + //拆分出shower的title
+        html.substring(0, html.indexOf('<i')) //拆分选中筛选值
+    );
+
+    if ($this.index() === 0) {
+        $shower.addClass('default');
+    } else {
+        $shower.removeClass('default');
+    }
+
+    return $sub;
+}
+
+//子筛选项Tap句柄
+function subClassifyTapEvt($this) {
+    var id = $this.data('id');
+
+    var $sub;
+
+    $sub = setSubClassify($this);
+
+    if (fCbFn) {
+        fCbFn({
+            type: $sub.data('type'),
+            id: id
+        });
+    }
+
+    hideFilter();
+}
+
+//初始化筛选
+function initFilter(opt) {
+    var filterHammer;
+
+    //注册回调
+    fCbFn = opt.fCbFn;
+    hCbFn = opt.hCbFn;
+
+    missStatus = opt.missStatus;
+
+    highlightMainItem();
+    highlightSubItem();
+
+    $filter = $('.filter-mask');
+
+    filterHammer = new Hammer($filter[0]);
+    filterHammer.on('tap', function(e) {
+        var $this = $(e.target),
+            $cur;
+
+        e.preventDefault();//防止透点
+
+        if ($this.closest('.filter-body').length > 0) {
+            $cur = $this.closest('.sub-item');
+            if ($cur.length > 0) {
+
+                //tap subclassify
+                $cur = $this.closest('li');
+
+                subClassifyTapEvt($cur);
+            } else {
+
+                //tap classify
+                $cur = $this.closest('.classify-item');
+
+                e.srcEvent.stopPropagation();
+
+                classifyTapEvt($cur);
+            }
+        } else {
+            hideFilter();
+
+            if (hCbFn) {
+                hCbFn();
+            }
+        }
+    });
+
+}
+
+//重置筛选面板
+function resetFilter() {
+    if (typeof $filter === 'undefined') {
+        return;
+    }
+
+    //重置子筛选项
+    $('.sub-classify').each(function() {
+        setSubClassify($(this).children(':first-child'));
+    });
+
+    //重置主筛选项
+    classifyTapEvt($('.classify > :first-child'));
+}
+
+exports.initFilter = initFilter;
+
+exports.showFilter = showFilter;
+
+exports.hideFilter = hideFilter;
+
+exports.resetFilter = resetFilter;

+/**
+ * 断码区
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/5/20
+ */
+
+var $ = require('yoho-jquery'),
+    Swiper = require('yoho-swiper'),
+    ellipsis = require('yoho-mlellipsis'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    tip = require('../plugin/tip'),
+    filter = require('../plugin/filter'),
+    loading = require('../plugin/loading');
+
+var $listNav = $('#list-nav');
+
+new Swiper('.swiper-container', {
+    slidesPerView: 'auto'
+});
+
+$listNav.on('touchstart', 'li', function() {
+    $(this).addClass('bytouch');
+}).on('touchend touchcancel', function() {
+    $listNav.find('li').removeClass('bytouch');
+});

+require('./break-code');

+/**
+ * 提取查询参数
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/11/19
+ */
+
+var $ = require('yoho-jquery'),
+    opt = {};
+
+$('.query-param').each(function() {
+    var $this = $(this);
+
+    opt[$this.data('attr')] = $this.val();
+});
+
+module.exports = opt;

+/**
+ * 折扣专场
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/5/20
+ */
+
+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+lazyLoad($('img.lazy'));

+/**
+ * 悬浮购物车
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/11/1
+ */
+
+var $ = require('yoho-jquery');
+
+var $cart = $('#suspend-cart');
+
+$.ajax({
+    type: 'GET',
+    url: '/cart/index/count',
+    success: function(data) {
+        var count;
+
+        if (data.code === 200) {
+            count = data.data.cart_goods_count;
+            if (count > 99) {
+                count = '99+';
+            }
+            if (count === 0) {
+                $('.cart-count').remove();
+            }
+            $cart.find('.cart-count').html(count).removeClass('hide');
+        }
+    }
+});

@@ -12,6 +12,7 @@
 @import "product/recommend-for-you";
 @import "product/recommend-for-you";
 @import "product/sale";
 @import "product/sale";
 @import "product/special";
 @import "product/special";
+@import "product/break-code";
 @import "product/discount";
 @import "product/discount";
 @import "product/good";
 @import "product/good";
 @import "product/filter";
 @import "product/filter";

+.break-code-page {
+    max-width: 640px;
+    margin: 0 auto;
+
+    .banner {
+        width: 640px;
+
+        img {
+            width: 100%;
+            height: 100%;
+        }
+    }
+
+    #size-swiper {
+        width: 100%;
+        line-height: 50px;
+        color: #999;
+        font-size: 28px;
+        height: 50px;
+        border-bottom: 1px solid #e6e6e6;
+        background: #f0f0f0;
+        padding: 0 22px;
+        box-sizing: border-box;
+
+        ul {
+            width: 100%;
+            height: 50px;
+        }
+
+        li {
+            width: auto;
+            margin: 0 22px;
+            float: left;
+            white-space: nowrap;
+
+            &.on {
+                color: #000;
+            }
+        }
+    }
+
+    #list-nav > li {
+        width: 20%;
+        font-size: 28px;
+
+        &.active a {
+            border-bottom: 4px solid #000;
+        }
+
+        a {
+            width: 106px;
+            margin: 0 auto;
+            display: block;
+        }
+    }
+}

+.filter-mask, .filter-body {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+}
+
+.filter-mask {
+    height: 100%;
+    background: rgba(0,0,0,0.1);
+}
+
+.filter-body {
+    background: #fff;
+    color: #000;
+    cursor: pointer;
+    font-size: 28px;
+    height: 880px;
+
+    .classify {
+        width: 50%;
+        height: 100%;
+        background: #f8f8f8;
+
+        > li {
+            height: 120px;
+            line-height: 120px;
+
+            > * {
+                box-sizing: border-box;
+            }
+
+            &.active {
+                background: #fff;
+            }
+
+            .shower {
+                padding-left: 40px;
+                width: 100%;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                color: #333;
+
+                &.highlight {
+                    background: #eee;
+                }
+            }
+
+            .default {
+                color: #999;
+            }
+
+            .title {
+                float: left;
+                color: #000;
+            }
+
+        }
+    }
+
+    .sub-classify {
+        position: absolute;
+        display: none;
+        width: 50%;
+        height: 880px;
+        left: 50%;
+        top: 0;
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+
+        > li {
+            height: 160px;
+            line-height: 120px;
+            padding-left: 30px;
+            border-bottom: 1px solid #e6e6e6;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+
+            &.highlight {
+                background: #eee;
+            }
+        }
+
+        .chosed-icon {
+            display: none;
+        }
+
+        .chosed .chosed-icon {
+            display: inline;
+        }
+    }
+
+    .active > .sub-classify {
+        display: block;
+    }
+}

+.good-info {
+    float: left;
+    width: 276px;
+    height: 506px;
+    margin: 10px 15px 40px 15px;
+
+    .tag-container {
+        height: 28px;
+        width: 100%;
+        overflow: hidden;
+
+        .good-tag {
+            display: block;
+            float: left;
+            height: 28px;
+            font-size: 18px;
+            text-align: center;
+            line-height: 28px;
+            box-sizing: border-box;
+            margin-right: 4px;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+
+        .new-tag {
+            width: 60px;
+            background-color: #78dc7e;
+            color: #fff;
+        }
+
+        .renew-tag {
+            width: 90px;
+            background-color: #78dc7e;
+            color: #fff;
+        }
+
+        .sale-tag {
+            width: 60px;
+            background-color: #ff575c;
+            color: #fff;
+        }
+
+        .new-festival-tag {
+            width: 90px;
+            background-color: #000;
+            color: #fff;
+        }
+
+        .limit-tag {
+            width: 100px;
+            border: 1px solid #000;
+            color: #000;
+        }
+    }
+}
+
+.good-detail-img {
+    position: relative;
+    height: 368px;
+
+    .good-islike {
+        position: absolute;
+        width: 60px;
+        height: 60px;
+        top: 0px;
+        right: 0px;
+        line-height: 60px;
+        font-size: 30px;
+        text-align: center;
+        color: #b0b0b0;
+        text-decoration: none;
+    }
+
+    .good-like {
+        color: #d72928;
+    }
+
+    img {
+        display: block;
+        width: 100%;
+        height: 368px;
+    }
+
+    .few-tag {
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        height: 28px;
+        background: #ffac5b;
+        font-size: 18px;
+        color: #fff;
+        line-height: 28px;
+        text-align: center;
+    }
+}
+
+.good-detail-text {
+    .name a {
+        display: block;
+        min-height: 60px;
+/*        line-height: 29px;*/
+        /*overflow: hidden;*/
+/*        white-space: nowrap;
+        text-overflow: ellipsis;
+        text-decoration: none;*/
+        font-size: 22px;
+        color: #444;
+        margin: 20px 0;
+    }
+
+    .price {
+        line-height: 22px;
+        font-size: 22px;
+
+        .sale-price {
+            color: #d62927;
+        }
+
+        .sale-price.no-price {
+            color: #000;
+        }
+
+        .market-price {
+            margin: 0 0 0 5px;
+            color: #b0b0b0;
+            text-decoration: line-through;
+        }
+    }
+}