Merge branch 'feature/sale' into develop

@@ -18,7 +18,6 @@ const saleLogger = (err, res) => {
     res.send('error');
 };
 
-
 /**
  * sale 首页
  */
@@ -32,16 +31,38 @@ exports.index = (req, res) => {
         pageFooter: true
     };
 
-
-    saleModel.getSaleResources().then((result) => {
+    saleModel.getSaleData().then((result) => {
         res.render('sale', Object.assign(renderData, {
-            content: result
+            content: result,
+            floorHeader: {
+                title: {
+                    title: '最新降价'
+                }
+            }
         }));
     }).catch((err) => {
         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) => {
+        res.render('break-code', Object.assign(renderData, result));
+    }).catch((err) => {
+        saleLogger(err, res);
+    });
+};
 
 /**
  * 折扣专场列表
@@ -67,15 +88,17 @@ exports.special = (req, res) => {
  * 折扣专场专题详情
  */
 exports.specialDetail = (req, res) => {
-    let headerData = headerModel.setNavHeader('折扣专场');
+    let headerData = headerModel.setNavHeader();
+    let id = req.query.id;
     let renderData = {
         module: 'product',
-        page: 'sale',
-        pageHeader: headerData,
+        page: 'special-detail',
         pageFooter: true
     };
 
-    saleModel.getSpecialDetailData().then((result) => {
+    saleModel.getSpecialDetailData(id).then((result) => {
+        headerData.navTitle = result.title;
+        renderData.pageHeader = headerData;
         res.render('special-detail', Object.assign(renderData, result));
     }).catch((err) => {
         saleLogger(err, res);
@@ -83,38 +106,46 @@ exports.specialDetail = (req, res) => {
 };
 
 /**
- * 断码区
+ * vip
  */
-exports.breakCode = (req, res) => {
-    let headerData = headerModel.setNavHeader('断码区');
+exports.vip = (req, res) => {
+    let headerData = headerModel.setNavHeader('会员专享');
     let renderData = {
         module: 'product',
-        page: 'break-code',
+        page: 'vip',
         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));
+    saleModel.getVipData().then((result) => {
+        res.render('vip', Object.assign(renderData, {
+            content: result
+        }));
     }).catch((err) => {
         saleLogger(err, res);
     });
 };
+
+exports.filter = (req, res) => {
+    let params = Object.assign({}, req.query);
+
+    saleModel.getFilterData(params).then((result) => {
+        res.render('filter', {
+            layout: false,
+            params: params,
+            filter: result
+        });
+    });
+};
+
+exports.search = (req, res) => {
+    let params = Object.assign({}, req.query);
+
+    saleModel.getSearchData(params).then((result) => {
+        res.render('product', {
+            layout: false,
+            params: params,
+            goods: result
+        });
+    });
+};

@@ -16,40 +16,334 @@ const resourcesProcess = require(`${utils}/resources-process`);
 const _ = require('lodash');
 const api = new API();
 const serviceAPI = new ServiceAPI();
+const aMinute = 60000;
 const anHour = 3600000;
 const aDay = anHour * 24;
 
+const timeFormat = {
+    d: '剩{d}天',
+    h: '剩{h}小时',
+    m: '剩{m}分钟',
+    s: '剩{s}秒',
+    dh: '剩{d}天{h}小时',
+    dhms: '剩{d}天{h}小时{m}分钟{s}秒',
+    hms: '剩{h}小时{m}分钟{s}秒',
+    ms: '剩{m}分钟{s}秒'
+};
+
+const typeCont = {
+    price: ['s_p_desc', 's_p_asc'],
+    discount: ['p_d_desc', 'p_d_asc'],
+    sales: ['s_n_desc', 's_n_asc'],
+    newest: ['s_t_desc', 's_t_asc']
+};
+
+/**
+ * 折扣专场专题列表过期时间处理
+ */
+const processTime = (time) => {
+    let data = {};
+    let type = '';
+
+    if (time < anHour) {
+        data.warnColor = true;
+        data.time = '低于1小时';
+    } else {
+        if (time > aDay) {
+            type = 'dh';
+        } else {
+            type = 'h';
+        }
+
+        data.time = helpers.dateDiffFormat(timeFormat[type], time, 'ms');
+    }
+
+    return data;
+};
+
+/**
+ * 折扣专场专题详情过期时间处理
+ */
+const processTimes = (time) => {
+    let data = {};
+    let type = '';
+
+    if (time > aDay) {
+        type = 'dhms';
+    } else {
+        if (time > anHour) {
+            type = 'hms';
+        } else {
+            if (time > aMinute) {
+                type = 'ms';
+            } else {
+                type = 's';
+            }
+        }
+    }
+
+    data.time = helpers.dateDiffFormat(timeFormat[type], time, 'ms');
+
+    return data;
+};
+
 /**
  * 折扣专场列表数据处理
  */
 const processSpecial = (list) => {
     const formatData = [];
+    let flag = true;
 
     list = list || [];
     list = camelCase(list);
 
-    _.forEach(list, (data) => {
-        data.specialUrl = `/product/specialDetail?id=${data.id}`;
+    if (list.length === 1) {
+        flag = false;
+    }
 
-        if (data.leftTime < anHour) {
-            data.warnColor = true;
-            data.leftTime = '低于1小时';
+    _.forEach(list, (data) => {
+        if (flag === true) {
+            data.specialUrl = `/product/specialDetail?id=${data.id}`;
+            _.merge(data, processTime(data.leftTime));
         } else {
-            if (data.leftTime > aDay) {
-                data.leftTime = helpers.dateDiffFormat('剩{d}天{h}小时', data.leftTime, 'ms');
-            } else {
-                data.leftTime = helpers.dateDiffFormat('剩{h}小时', data.leftTime, 'ms');
-            }
+            _.merge(data, processTimes(data.leftTime));
         }
+
         formatData.push(data);
     });
 
     return formatData;
 };
 
-exports.getSaleResources = () => {
+/**
+ * 折扣专场接口调用
+ */
+const special = (params) => {
+    params = params || {};
+
+    return api.get('', sign.apiSign(Object.assign({
+        method: 'app.activity.get',
+        sort: 2,
+        plateform: 2
+    }, params)));
+};
+
+/**
+ * 根据性别来决定  默认图片获取字段   如果是 2、3
+ *
+ * 则优先从cover2 --》 cover1 -- 》 images_url
+ * 否则优先从cover1 --》 cover2 -- 》 images_url
+ *
+ */
+const procProductImg = (product, gender) => {
+    if (gender === '2,3') {
+        return product.cover2 || product.cover1 || product.imagesUrl || '';
+    }
+
+    return product.cover1 || product.cover2 || product.imagesUrl || '';
+};
+
+
+/**
+ * 商品搜索商品数据处理
+ */
+const processProductList = (list, options) => {
+    const pruductList = [];
+
+    options = Object.assign({
+        showTags: true,
+        showNew: true,
+        showSale: true,
+        width: 290,
+        height: 388,
+        isApp: false,
+        showPoint: true,
+        gender: '2,3'
+    }, options);
+    list = camelCase(list);
+
+    _.forEach(list, (product) => {
+        // 商品信息有问题，则不显示
+        if (!product.productId || !product.goodsList.length) {
+            return;
+        }
+
+        // 市场价和售价一样，则不显示市场价
+        if (product.marketPrice === product.salesPrice) {
+            product.marketPrice = false;
+        }
+
+        // 判别默认的商品是否将默认的图片URL赋值到skn
+        let flag = false;
+
+        // 如果设置了默认图片，就取默认的图片
+        _.forEach(product.goodsList, (goods) => {
+            if (flag) {
+                return;
+            }
+            if (goods.isDefault === 'Y') {
+                product.defaultImages = procProductImg(goods);
+                flag = true;
+            }
+        });
+
+        // 如果还未赋值，则取第一个skc产品的默认图片
+        if (!flag) {
+            product.defaultImages = procProductImg(product.goodsList[0]);
+        }
+
+        // product = Object.assign(product, {
+        //     id: product.productSkn,
+        //     thumb: product.defaultImages
+        // });
+
+        if (options.showPoint) {
+            product.price += '.00';
+            product.salePrice += '.00';
+        }
+
+        product.isSoonSoldOut = product.isSoonSoldOut === 'Y';
+        product.url = helpers.urlFormat(`/product/pro_${product.productId}_${product.goodsList[0].goodsId}/${product.cnAlphabet}.html`); // eslint-disable-line
+
+        // APP访问需要加附加的参数
+        // 备注：如果以后APP的接口太多，可以把这边参数提取出来，变成一个公共的方法来生成，便于以后管理维护
+        if (options.isApp) {
+            product.url += `?openby:yohobuy={"action":"go.productDetail","params":{"product_skn":'${product.productId}'}}`;  // eslint-disable-line
+        }
+
+        if (options.showTags) {
+            product.tags = {};
+
+            product.tags.isNew = options.showNew && product.isNew === 'Y'; // 新品
+            product.tags.isDiscount = options.showSale && product.isDiscount === 'Y'; // 在售
+            product.tags.isLimited = product.isLimited === 'Y'; // 限量
+            product.tags.isYohood = product.isYohood === 'Y'; // YOHOOD
+            product.tags.midYear = product.midYear === 'Y'; // 年中
+            product.tags.yearEnd = product.yearEnd === 'Y'; // 年末
+            product.tags.isAdvance = product.isAdvance === 'Y'; // 再到着
+
+            // 打折与即将售完组合显示打折
+            if (product.isSoonSoldOut && product.tags.isDiscount) {
+                product.tags.isNew = false;
+            } else if (product.tags.isDiscount &&
+                    (product.tags.isNew || product.tags.isLimited || product.tags.isYohood || product.tags.isAdvance)) {
+                // 打折与其它组合则隐藏打折
+                product.tags.isDiscount = false;
+            } else if (product.tags.isYohood && product.tags.isNew) {
+                // YOHOOD和新品组合显示YOHOOD
+                product.tags.isNew = false;
+            }
+        }
+
+        pruductList.push(product);
+    });
+    return pruductList;
+};
+
+/**
+ * 处理筛选数据
+ * @param list
+ * @param  string | options
+ * @return array 处理之后的筛选数据
+ */
+const processFilter = (list, options) => {
+    const filters = {
+        classify: {}
+    };
+
+    options = Object.assign({
+        gender: '1,2,3', // 默认选择的性别，默认1,2,3表示所有
+        exclude: null // 需要排除的字段
+    }, options);
+    list = camelCase(list);
+
+    _.forEach(list, (item, key) => {
+        console.log(key);
+    });
+    return filters;
+};
+
+/**
+ * 断码区分类数据处理
+ */
+const processBreakingSort = (list) => {
+    const formatData = {};
+    const sort = [];
+    const sub = [];
+
+    list = list || [];
+    list = camelCase(list);
+
+    _.forEach(list, (data, index) => {
+        sort.push({
+            sortName: data.sortName,
+            sortId: data.sortId
+        });
+        data.sub.key = index;
+        sub.push(data.sub);
+    });
+
+    formatData.sortData = sort;
+    formatData.sub = sub;
+    return formatData;
+};
+
+/**
+ * 商品搜索接口请求
+ */
+const searchSales = (params) => {
+    params = Object.assign({
+        limit: '20'
+    }, params);
+
+    if (typeCont[params.type]) {
+        params.order = typeCont[params.type][params.order];
+    }
+    return api.get('', sign.apiSign(Object.assign({
+        method: 'app.search.sales'
+    }, params)), true);
+};
+
+/**
+ * 获取筛选数据
+ */
+exports.getFilterData = (params) => {
+    return searchSales(params).then((result) => {
+        if (result && result.code === 200) {
+            return processFilter(result.data.filter || []);
+        } else {
+            logger.error('SALE 商品搜索返回 code 不是 200');
+            return [];
+        }
+    });
+};
+
+/**
+ * 获取商品数据
+ */
+exports.getSearchData = (params) => {
+    return searchSales(params).then((result) => {
+        if (result && result.code === 200) {
+            return processProductList(result.data.product_list || []);
+        } else {
+            logger.error('SALE 商品搜索返回 code 不是 200');
+            return {};
+        }
+    });
+};
+
+/**
+ * 获取资源位数据
+ */
+const getResources = (page) => {
+    const contentCode = {
+        sale: '7c2b77093421efa8ae9302c91460db73',
+        breakCode: '7c2b77093421efa8ae9302c91460db73',
+        vip: '7c2b77093421efa8ae9302c91460db73'
+    };
+
     return serviceAPI.get('operations/api/v5/resource/get', sign.apiSign({
-        content_code: '7c2b77093421efa8ae9302c91460db73'
+        content_code: contentCode[page]
     })).then((result) => {
         if (result && result.code === 200) {
             return resourcesProcess(result.data);
@@ -61,15 +355,51 @@ exports.getSaleResources = () => {
 };
 
 /**
- * 获取首页数据
+ * 获取断码区分类数据
+ */
+const getBreakingSort = (yhChannel) => {
+    return api.get('', sign.apiSign({
+        method: 'app.sale.getBreakingSort',
+        yh_channel: yhChannel || '1'
+    })).then((result) => {
+        if (result && result.code === 200) {
+            return processBreakingSort(result.data);
+        } else {
+            logger.error('断码区分类接口返回 code 不是 200');
+            return {};
+        }
+    });
+};
+
+/**
+ * 获取sale首页数据
+ */
+exports.getSaleData = () => {
+    return getResources('sale');
+};
+
+/**
+ * 获取会员享数据
  * @param  {[object]} params
  * @return {[object]}
  */
-exports.getSaleData = (params) => {
+exports.getVipData = () => {
+    return getResources('vip');
+};
 
-    return api.get('', sign.apiSign(Object.assign({
-        method: 'app.search.sales'
-    }, params)));
+/**
+ * 获取断码区数据
+ * @param  {[object]} params
+ * @return {[object]}
+ */
+exports.getBreakCodeData = (params) => {
+    params = params || {};
+    return Promise.all([getResources('breakCode'), getBreakingSort(params.yhChannel)]).then((result) => {
+        return {
+            content: result[0],
+            nav: result[1]
+        };
+    });
 };
 
 /**
@@ -80,16 +410,13 @@ exports.getSaleData = (params) => {
 exports.getSpecialData = (params) => {
     const specialData = {};
 
-    return api.get('', sign.apiSign(Object.assign({
-        method: 'app.activity.get',
-        sort: 2,
-        plateform: 2
-    }, params))).then((result) => {
+    return special(params).then((result) => {
         if (result && result.code === 200) {
             specialData.data = processSpecial(result.data);
             return specialData;
         } else {
-            return Promise.reject('error');
+            logger.error('折扣专场专题列表返回 code 不是 200');
+            return {};
         }
     });
 };
@@ -100,35 +427,26 @@ exports.getSpecialData = (params) => {
  * @param  {[object]} params
  * @return {[object]}
  */
-exports.getSpecialDetailData = (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');
-        }
-    });
-};
+exports.getSpecialDetailData = (id) => {
+    let res = {};
+    let param = {
+        id: id
+    };
 
-/**
- * 获取断码区数据
- * @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) => {
+    return special(param).then((result) => {
         if (result && result.code === 200) {
-            return camelCase(result.data);
+            res = processSpecial(result.data);
+            return {
+                title: res[0].title,
+                activity: {
+                    coverUrl: res[0].coverUrl,
+                    time: res[0].time,
+                    leftTime: res[0].leftTime
+                }
+            };
         } else {
-            return Promise.reject('error');
+            logger.error('折扣专场专题详情返回 code 不是 200');
+            return {};
         }
     });
 };

@@ -16,8 +16,9 @@ const detail = require(`${cRoot}/detail`);
 const sale = require(`${cRoot}/sale`);
 
 // routers
-router.get(/\/pro_([\d]+)_([\d]+)\/(.*)/, detail.index);  // /pro_136349_455445/
-// HEARTSOFARMianMaShuJiaoXiuXianKuPS1684.html
+
+// /pro_136349_455445/HEARTSOFARMianMaShuJiaoXiuXianKuPS1684.html
+router.get(/\/pro_([\d]+)_([\d]+)\/(.*)/, detail.index);
 router.get('/detail/intro/:productskn', detail.intro);
 router.get('/detail/preference/:productskn/:yhchannel/:brandId', detail.preference);
 
@@ -25,5 +26,11 @@ router.get('/sale', sale.index);
 router.get('/special', sale.special);
 router.get('/specialDetail', sale.specialDetail);
 router.get('/breakCode', sale.breakCode);
+router.get('/vip', sale.vip);
+
+router.get('/sale/search', sale.search);
+router.get('/sale/filter', sale.filter);
+
+// router.get('/outlet', sale.outlet);
 
 module.exports = router;

 <div class="break-code-page discount-page yoho-page">
-    <div class="banner">
-        <img src="{{image src 640 200}}"/>
-    </div>
+    {{#content}}
+        {{! 头部banner}}
+        {{#if focus}}
+            {{> resources/banner-top}}
+        {{/if}}
+    {{/content}}
 
-    <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>
+    {{# nav}}
+        <ul id="list-nav" class="list-nav clearfix">
+            {{# sortData}}
+                <li {{#if @first}} class="active" {{/if}} data-id="{{sortId}}">
+                    <a href="javascript:void(0);">
+                        <span class="span-test">{{sortName}}</span>
+                    </a>
+                </li>
+            {{/ sortData}}
+            <li class="filter">
+                <a href="javascript:void(0);">
+                    <span class="span-test">筛选</span>
+                    <span class="iconfont cur">&#xe613;</span>
+                </a>
+            </li>
         </ul>
-    </div>
-    
+
+        {{# sub}}
+        <div class="size-area">
+            <div class="swiper-size" id="size-swiper-{{key}}" {{#if @first}}style="display:block"{{/if}}>
+                <ul class="swiper-wrapper">                    
+                    {{# this}}
+                    <li class="swiper-slide" data-id="{{sizeId}}">{{sizeName}}</li>
+                    {{/ this}}
+                </ul>
+            </div>
+        </div>
+        {{/ sub}}
+    {{/ nav}}
 
     <div id="goods-container" class="goods-container">
-        <div class="new-goods container clearfix">
+        <div class="coat-goods container clearfix">
             {{# goods}}
-                {{> common/good}}
+                {{> common/goods}}
             {{/ goods}}
         </div>
-        <div class="price-goods container hide clearfix"></div>
-        <div class="discount-goods container hide clearfix"></div>
+        <div class="trouser-goods container hide clearfix"></div>
+        <div class="shoes-goods container hide clearfix"></div>
+        <div class="other-goods container hide clearfix"></div>
 
         {{> common/filter}}
     </div>
@@ -63,4 +52,4 @@
     {{> common/query-param}}
 
     {{> common/suspend-cart}}
-</div>
\ No newline at end of file
+</div>

+{{> common/filter}}

+{{# goods}}
+    {{> common/goods}}
+{{/ goods}}

@@ -9,8 +9,9 @@
             {{> resources/thumb-row}}
         {{/if}}
     {{/content}}
-
-    {{> common/floor-header}}
+    {{#floorHeader}}
+        {{> common/floor-header}}
+    {{/floorHeader}}
     <ul id="list-nav" class="list-nav clearfix">
         <li class="new active">
             <a href="javascript:void(0);">

-<div class="sale-channel-page yoho-page">
-    <div class="banner">
-        <img src="{{image src 640 250}}"/>
-        <span class="activity-time"><i class="iconfont time-ico">&#xe603;</i>{{time}}</span>
-    </div>
+<div class="sale-channel-page discount-page yoho-page">
+    {{> product/sale-common}}
 </div>
\ No newline at end of file

@@ -6,7 +6,7 @@
                 <img class="lazy" data-original="{{image coverUrl 640 250}}" />
                 <p class="special-cont">
                     <span class="special-title">{{title}}</span>
-                    <span class="special-time {{#if warnColor}}red-color{{/if}}">{{leftTime}}</span>
+                    <span class="special-time {{#if warnColor}}red-color{{/if}}">{{time}}</span>
                 </p>
             </a>
         </li>

+<div class="sale-vip-page discount-page yoho-page">
+    {{> product/sale-common}}
+</div>
\ No newline at end of file

+<div class="banner">
+    {{#content}}
+        {{! 头部banner}}
+        {{#if focus}}
+            {{> resources/banner-top}}
+        {{/if}}
+    {{/content}}
+    {{# activity}}
+        <img src="{{image coverUrl 640 250}}"/>
+        <p class="activity-time" data-time-ms="{{leftTime}}"><i class="iconfont time-ico">&#xe603;</i><span>{{time}}</span></p>
+    {{/ activity}}
+</div>
+<ul id="list-nav" class="list-nav clearfix">
+    <li class="new active">
+        <a href="javascript:void(0);">
+            <span class="span-test">最新</span>
+            <span class="iconfont cur">&#xe616;</span>
+        </a>
+    </li>
+    <li class="price">
+        <a href="javascript:void(0);">
+            <span class="span-test">价格</span>
+            <span class="icon">
+                <i class="iconfont up cur">&#xe615;</i>
+                <i class="iconfont down">&#xe616;</i>
+            </span>
+        </a>
+    </li>
+    <li class="discount">
+        <a href="javascript:void(0);">
+            <span class="span-test">折扣</span>
+            <span class="icon">
+                <i class="iconfont up cur">&#xe615;</i>
+                <i class="iconfont down">&#xe616;</i>
+            </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 id="goods-container" class="goods-container">
+    <div class="new-goods container clearfix">
+        {{# goods}}
+            {{> common/goods}}
+        {{/ 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}}
\ No newline at end of file

@@ -27,13 +27,15 @@
         <link rel="apple-touch-startup-image" sizes="320x460" href="http://static.yohobuy.com/m/v1/img/startup/startup.png" media="screen and (max-device-width: 320)">
     </head>
     <body {{#if isPassportPage}}class=passport-body{{/if}}>
-        {{#if systemUpdate}}
-            {{> updata}}
-        {{/if}}
+        <div class="main-wrap">
+            {{#if systemUpdate}}
+                {{> updata}}
+            {{/if}}
 
-        {{> header}}
-        {{{body}}}
-        {{> footer}}
+            {{> header}}
+            {{{body}}}
+            {{> footer}}
+        </div>
 
         {{#if devEnv}}
             <script src="//localhost:5001/{{module}}.{{page}}.js"></script>

 {{#if .}} {{!-- 剔除值为false的项 --}}
-    <div class="good-info" data-id="{{id}}" data-bp-id="guang_goodList_{{name}}_false">
+    <div class="good-info" data-id="{{productSkn}}" data-bp-id="guang_goodList_{{productName}}_false">
         <div class="tag-container clearfix">
             {{# tags}}
                 {{# isNew}}
@@ -20,8 +20,8 @@
             {{/ tags}}
         </div>
         <div class="good-detail-img">
-            <a class="good-thumb" href="{{url}}">
-                <img class="lazy" data-original="{{thumb}}">
+            <a class="good-thumb" href="{{url}}" data-img={{defaultImages}}>
+                <img class="lazy" data-original="{{image defaultImages 235 314}}">
             </a>
             {{# isSoonSoldOut}}
                 <p class="few-tag">即将售罄</p>
@@ -29,14 +29,22 @@
         </div>
         <div class="good-detail-text">
             <div class="name">
-                <a href="{{url}}">{{name}}</a>
+                <a href="{{url}}">{{productName}}</a>
             </div>
             <div class="price">
-                <span class="sale-price {{^price}}no-price{{/price}}">¥{{salePrice}}</span>
-                {{#price}}
+                {{#if saleViplogin}}
+                    <i class="vip-grade-{{vipGrade}}"></i>
+                {{/if}}
+                <span class="sale-price {{^marketPrice}}no-price{{/marketPrice}}">¥{{salesPrice}}</span>
+                {{#marketPrice}}
                     <span class="market-price">¥{{.}}</span>
-                {{/price}}
+                {{/marketPrice}}
             </div>
+            {{#if saleVip}}
+                <div class="vip-info">
+                    <i class="vip-icon"></i>更优惠
+                </div>
+            {{/if}}
         </div>
     </div>
 {{/if}}
\ No newline at end of file

@@ -92,6 +92,7 @@
     "yoho-handlebars": "^4.0.5",
     "yoho-jquery": "^1.9.1",
     "yoho-jquery-lazyload": "^1.9.7",
+    "yoho-mlellipsis": "0.0.2",
     "yoho-swiper": "^3.3.1"
   }
 }

@@ -12,12 +12,437 @@ var $ = require('yoho-jquery'),
     filter = require('../plugin/filter'),
     loading = require('../plugin/loading');
 
-var $listNav = $('#list-nav');
+var $goodsContainer = $('#goods-container'),
+    $goodsChildren = $goodsContainer.children(),
+    $coatGc = $($goodsChildren.get(0)),
+    $trouserGc = $($goodsChildren.get(1)),
+    $shoesgc = $($goodsChildren.get(2)),
+    $othergc = $($goodsChildren.get(3));
 
-new Swiper('.swiper-container', {
-    slidesPerView: 'auto'
+var winH = $(window).height(),
+    noResult = '<p class="no-result">未找到相关搜索结果</p>';
+
+// 默认筛选条件
+var defaultOpt = require('./query-param');
+
+var $listNav = $('#list-nav'),
+    $swiperSize = $('.swiper-size'),
+
+    // 导航数据信息
+    navInfo = {
+        coat: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false,
+            saleType: 1
+        },
+        trouser: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false,
+            saleType: 1
+        },
+        shoes: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false,
+            saleType: 1
+        },
+        other: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false,
+            saleType: 1
+        }
+    },
+    $pre = $listNav.find('.active'), // 纪录进入筛选前的active项，初始为选中项
+    searching;
+
+var swipers = [],
+    goodsType = ['coat', 'trouser', 'shoes', 'other'];
+
+require('./suspend-cart'); // 悬浮购物车
+require('../common');
+
+ellipsis.init();
+
+lazyLoad($('img.lazy'));
+
+$.each($swiperSize, function(key) {
+    swipers[key] = new Swiper('#size-swiper-' + key, {
+        slidesPerView: 'auto'
+    });
+});
+
+$.each($listNav.find('li'), function(key, item) {
+    $(item).addClass(goodsType[key]);
+});
+
+/**
+ * 筛选注册的回调，筛选子项点击后逻辑
+ * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
+ * @param opt {type, id}
+ */
+function search(opt) {
+    var setting = {},
+        ext = [],
+        att,
+        nav, navType,
+        page,
+        i;
+
+    if (searching) {
+        return;
+    }
+
+    if (opt) {
+
+        // 筛选项变更则重置reload为true
+        for (att in navInfo) {
+            if (navInfo.hasOwnProperty(att)) {
+                navInfo[att].reload = true;
+            }
+        }
+        for (i = 0; i < opt.length; i++) {
+            switch (opt[i].type) {
+                case 'gender':
+                    ext = {
+                        gender: opt[i].id
+                    };
+                    break;
+                case 'brand':
+                    ext = {
+                        brand: opt[i].id
+                    };
+                    break;
+                case 'sort':
+                    ext = {
+                        sort: opt[i].id
+                    };
+                    break;
+                case 'color':
+                    ext = {
+                        color: opt[i].id
+                    };
+                    break;
+                case 'size':
+                    ext = {
+                        size: opt[i].id
+                    };
+                    break;
+                case 'price':
+                    ext = {
+                        price: opt[i].id
+                    };
+                    break;
+                case 'discount':
+                    ext = {
+                        discount: opt[i].id
+                    };
+                    break;
+                default:
+                    break;
+            }
+        }
+
+        $.extend(defaultOpt, ext); // 扩展筛选项
+
+        console.log(defaultOpt);
+    }
+
+
+    // 导航类别
+    if ($pre.hasClass('coat')) {
+        navType = 'coat';
+    } else if ($pre.hasClass('trouser')) {
+        navType = 'trouser';
+    } else if ($pre.hasClass('shoes')) {
+        navType = 'shoes';
+    } else {
+        navType = 'other';
+    }
+
+    nav = navInfo[navType];
+    page = nav.page + 1;
+    if (nav.reload) {
+        page = 1;
+    } else if (nav.end) {
+
+        // 不需要重新加载并且数据请求结束
+        return;
+    }
+
+    $.extend(setting, defaultOpt, {
+        type: navType,
+        order: nav.order,
+        page: page
+    });
+
+    searching = true;
+    loading.showLoadingMask();
+
+    $.ajax({
+        type: 'GET',
+        url: '/product/sale/search',
+        data: setting,
+        success: function(data) {
+            var $container,
+                num;
+
+            switch (navType) {
+                case 'coat':
+                    $container = $coatGc;
+                    break;
+                case 'trouser':
+                    $container = $trouserGc;
+                    break;
+                case 'shoes':
+                    $container = $shoesgc;
+                    break;
+                default:
+                    $container = $othergc;
+                    break;
+            }
+
+            if (data === ' ') {
+                nav.end = true;
+
+                if (nav.reload) {
+                    $container.html(noResult);
+                }
+            } else {
+                if (nav.reload) {
+                    $container.html(data);
+                    lazyLoad($container.find('.lazy'));
+                } else {
+                    num = $container.find('.good-info').length;
+                    $container.append(data);
+
+                    // lazy good-infos who append in
+                    lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
+                }
+            }
+
+            nav.reload = false;
+            nav.page = page;
+
+            searching = false;
+            loading.hideLoadingMask();
+
+            window.rePosFooter();
+
+            $('.good-detail-text .name').each(function() {
+                var $this = $(this),
+                    $title = $this.find('a');
+
+                $title[0].mlellipsis(2);
+            });
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+            searching = false;
+            loading.hideLoadingMask();
+        }
+    });
+
+}
+
+$.ajax({
+    type: 'GET',
+    url: '/product/sale/filter',
+    data: defaultOpt,
+    success: function(data) {
+        $goodsContainer.append(data);
+
+        // 初始化filter&注册filter回调
+        filter.initFilter({
+            fCbFn: search,
+            hCbFn: function() {
+
+                // 切换active状态到$pre上
+                $pre.addClass('active');
+                $pre.siblings('.filter').removeClass('active');
+            },
+            missStatus: true
+        });
+    }
+});
+lazyLoad($('.lazy'));
+
+$listNav.bind('contextmenu', function() {
+    return false;
+});
+
+$listNav.on('touchend touchcancel', function(e) {
+    var $this = $(e.target).closest('li'),
+        nav, sortId, navType, $active;
+
+    e.preventDefault();
+
+    if (typeof $this === 'undefined' || $this.length === 0) {
+        return;
+    }
+
+    if ($this.hasClass('filter')) {
+
+        // 筛选面板切换状态
+        if ($this.hasClass('active')) {
+            filter.hideFilter();
+
+            // 点击筛选钱的active项回复active
+            $pre.addClass('active');
+            $this.removeClass('active');
+        } else {
+            $pre = $this.siblings('.active');
+
+            $pre.removeClass('active');
+            $this.addClass('active');
+            $swiperSize.hide();
+
+            filter.showFilter();
+        }
+    } else {
+        if ($this.hasClass('coat')) {
+            navType = 'coat';
+        } else if ($this.hasClass('trouser')) {
+            navType = 'trouser';
+        } else if ($this.hasClass('shoes')) {
+            navType = 'shoes';
+        } else {
+            navType = 'other';
+        }
+
+        nav = navInfo[navType];
+
+        if ($this.hasClass('active')) {
+            nav.reload = true;
+            return;
+        } else {
+            $active = $this.siblings('.active');
+
+            $pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
+
+            if ($active.hasClass('filter')) {
+
+                // 若之前active项为筛选，则隐藏筛选面板
+                filter.hideFilter();
+            } else {
+
+                // 切换container显示
+                $goodsContainer.children('.container:not(.hide)').addClass('hide');
+
+                switch (navType) {
+                    case 'coat':
+                        $coatGc.removeClass('hide');
+                        break;
+
+                    case 'trouser':
+                        $trouserGc.removeClass('hide');
+                        break;
+
+                    case 'shoes':
+                        $shoesgc.removeClass('hide');
+                        break;
+                    default:
+                        $othergc.removeClass('hide');
+                        break;
+                }
+            }
+
+            $active.removeClass('active');
+            $this.addClass('active');
+            sortId = $this.data('id');
+            $swiperSize.hide();
+            $('#size-swiper-' + $this.index()).show();
+            swipers[$this.index()].onResize();
+        }
+
+        if (nav.reload) {
+            search([{
+                type: 'sort',
+                id: sortId
+            }]);
+        }
+    }
+    e.stopPropagation();
 });
 
+$swiperSize.on('touchend touchcancel', function(e) {
+    var $this = $(e.target).closest('li'),
+        index = $this.parents('.swiper-size').index(),
+        $parentType = $listNav.find('li').eq(index),
+        nav, sortId, sizeId, navType, $active;
+
+    e.preventDefault();
+
+    if (typeof $this === 'undefined' || $this.length === 0) {
+        return;
+    }
+
+    if ($parentType.hasClass('coat')) {
+        navType = 'coat';
+    } else if ($parentType.hasClass('trouser')) {
+        navType = 'trouser';
+    } else if ($parentType.hasClass('shoes')) {
+        navType = 'shoes';
+    } else {
+        navType = 'other';
+    }
+
+    nav = navInfo[navType];
+
+    if ($this.hasClass('active')) {
+        nav.reload = true;
+        return;
+    } else {
+        $active = $this.siblings('.active');
+
+        $pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
+
+        $active.removeClass('active');
+        $this.addClass('active');
+        sortId = $parentType.data('id');
+        sizeId = $this.data('id');
+    }
+
+    if (nav.reload) {
+        search([{
+            type: 'sort',
+            id: sortId
+        }, {
+            type: 'size',
+            id: sizeId
+        }]);
+    }
+    e.stopPropagation();
+});
+
+function scrollHandler() {
+
+    // 当scroll到1/4$goodsContainer高度后继续请求下一页数据
+    if ($(window).scrollTop() + winH >
+        $(document).height() - 0.25 * $goodsContainer.height() - 50) {
+        if (typeof($pre) !== 'undefined') {
+            search();
+        }
+    }
+}
+
+// srcoll to load more
+$(window).scroll(function() {
+    window.requestAnimationFrame(scrollHandler);
+});
+
+// 初始请求最新第一页数据
+search([{
+    type: 'sort',
+    id: $('.coat').data('id')
+}]);
+
 $listNav.on('touchstart', 'li', function() {
     $(this).addClass('bytouch');
 }).on('touchend touchcancel', function() {

@@ -5,56 +5,9 @@
  */
 
 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');
+    Swiper = require('yoho-swiper');
 
-var $goodsContainer = $('#goods-container'),
-    $goodsChildren = $goodsContainer.children(),
-    $ngc = $($goodsChildren.get(0)),
-    $pgc = $($goodsChildren.get(1)),
-    $dgc = $($goodsChildren.get(2));
-
-var winH = $(window).height(),
-    noResult = '<p class="no-result">未找到相关搜索结果</p>';
-
-// 默认筛选条件
-var defaultOpt = require('./query-param');
-
-var $listNav = $('#list-nav'),
-
-    // 导航数据信息
-    navInfo = {
-        newest: {
-            order: 1,
-            reload: true,
-            page: 0,
-            end: false
-        },
-        price: {
-            order: 1,
-            reload: true,
-            page: 0,
-            end: false
-        },
-        discount: {
-            order: 1,
-            reload: true,
-            page: 0,
-            end: false
-        }
-    },
-    $pre = $listNav.find('.active'), // 纪录进入筛选前的active项，初始为选中项
-    searching;
-
-require('./suspend-cart'); // 悬浮购物车
-
-ellipsis.init();
-
-lazyLoad($('img.lazy'));
+require('./search');
 
 if ($('.swiper-container .swiper-slide').length > 1) {
     new Swiper('.swiper-container', {
@@ -67,325 +20,3 @@ if ($('.swiper-container .swiper-slide').length > 1) {
         pagination: '.banner-top .pagination-inner'
     });
 }
-
-/**
- * 筛选注册的回调，筛选子项点击后逻辑
- * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
- * @param opt {type, id}
- */
-function search(opt) {
-    var setting = {},
-        ext,
-        att,
-        nav, navType,
-        page;
-
-    if (searching) {
-        return;
-    }
-
-    if (opt) {
-
-        // 筛选项变更则重置reload为true
-        for (att in navInfo) {
-            if (navInfo.hasOwnProperty(att)) {
-                navInfo[att].reload = true;
-            }
-        }
-
-        // 处理active状态
-        $listNav.children('.active').removeClass('active');
-        $pre.addClass('active');
-
-        switch (opt.type) {
-            case 'gender':
-                ext = {
-                    gender: opt.id
-                };
-                break;
-            case 'brand':
-                ext = {
-                    brand: opt.id
-                };
-                break;
-            case 'sort':
-                ext = {
-                    sort: opt.id
-                };
-                break;
-            case 'color':
-                ext = {
-                    color: opt.id
-                };
-                break;
-            case 'size':
-                ext = {
-                    size: opt.id
-                };
-                break;
-            case 'price':
-                ext = {
-                    price: opt.id
-                };
-                break;
-            case 'discount':
-                ext = {
-                    discount: opt.id
-                };
-                break;
-            default:
-                break;
-        }
-
-        $.extend(defaultOpt, ext); // 扩展筛选项
-    }
-
-
-    // 导航类别
-    if ($pre.hasClass('new')) {
-        navType = 'newest';
-    } else if ($pre.hasClass('price')) {
-        navType = 'price';
-    } else if ($pre.hasClass('discount')) {
-        navType = 'discount';
-    }
-
-    nav = navInfo[navType];
-
-    page = nav.page + 1;
-    if (nav.reload) {
-        page = 1;
-    } else if (nav.end) {
-
-        // 不需要重新加载并且数据请求结束
-        return;
-    }
-
-    $.extend(setting, defaultOpt, {
-        type: navType,
-        order: nav.order,
-        page: page
-    });
-
-    searching = true;
-    loading.showLoadingMask();
-
-    $.ajax({
-        type: 'GET',
-        url: '/product/newsale/selectNewSale',
-        data: setting,
-        success: function(data) {
-            var $container,
-                num;
-
-            switch (navType) {
-                case 'newest':
-                    $container = $ngc;
-                    break;
-                case 'price':
-                    $container = $pgc;
-                    break;
-                case 'discount':
-                    $container = $dgc;
-                    break;
-                default:
-                    break;
-            }
-
-            if (data === ' ') {
-                nav.end = true;
-
-                if (nav.reload) {
-                    $container.html(noResult);
-                }
-            } else {
-                if (nav.reload) {
-                    $container.html(data);
-                    lazyLoad($container.find('.lazy'));
-                } else {
-                    num = $container.find('.good-info').length;
-                    $container.append(data);
-
-                    // lazy good-infos who append in
-                    lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
-                }
-            }
-
-            nav.reload = false;
-            nav.page = page;
-
-            searching = false;
-            loading.hideLoadingMask();
-
-            window.rePosFooter();
-
-            $('.good-detail-text .name').each(function() {
-                var $this = $(this),
-                    $title = $this.find('a');
-
-                $title[0].mlellipsis(2);
-            });
-        },
-        error: function() {
-            tip.show('网络断开连接了~');
-            searching = false;
-            loading.hideLoadingMask();
-        }
-    });
-
-}
-
-$.ajax({
-    type: 'GET',
-    url: '/product/newsale/filter',
-    data: defaultOpt,
-    success: function(data) {
-        $goodsContainer.append(data);
-
-        // 初始化filter&注册filter回调
-        filter.initFilter({
-            fCbFn: search,
-            hCbFn: function() {
-
-                // 切换active状态到$pre上
-                $pre.addClass('active');
-                $pre.siblings('.filter').removeClass('active');
-            },
-            missStatus: true
-        });
-    }
-});
-lazyLoad($('.lazy'));
-
-// 导航栏点击逻辑说明：
-// 1.点击非active项时切换active状态
-// 2.价格和折扣active状态时继续点击切换排序
-// 3.筛选无active时点击展开筛选面板
-// 4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
-// 5.当前active为筛选并且点击其他项时，隐藏筛选面板
-$listNav.bind('contextmenu', function() {
-    return false;
-});
-
-$listNav.on('touchend touchcancel', function(e) {
-    var $this = $(e.target).closest('li'),
-        nav,
-        navType,
-        $active;
-
-    e.preventDefault();
-
-    if (typeof $this === 'undefined' || $this.length === 0) {
-        return;
-    }
-
-    if ($this.hasClass('filter')) {
-
-        // 筛选面板切换状态
-        if ($this.hasClass('active')) {
-            filter.hideFilter();
-
-            // 点击筛选钱的active项回复active
-            $pre.addClass('active');
-            $this.removeClass('active');
-        } else {
-            $pre = $this.siblings('.active');
-
-            $pre.removeClass('active');
-            $this.addClass('active');
-
-            filter.showFilter();
-        }
-    } else {
-
-        if ($this.hasClass('new')) {
-            navType = 'newest';
-        } else if ($this.hasClass('price')) {
-            navType = 'price';
-        } else if ($this.hasClass('discount')) {
-            navType = 'discount';
-        }
-
-        nav = navInfo[navType];
-
-        if ($this.hasClass('active')) {
-
-            // 最新无排序切换
-            if ($this.hasClass('new')) {
-                return;
-            }
-
-            if ($this.hasClass('price') || $this.hasClass('discount')) {
-
-                // 价格/折扣切换排序状态
-                $this.find('.icon > .iconfont').toggleClass('cur');
-                $pre = $this; // 更新pre为当前项
-                nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
-                nav.order = nav.order === 0 ? 1 : 0; // 切换排序
-            }
-        } else {
-            $active = $this.siblings('.active');
-
-            $pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
-
-            if ($active.hasClass('filter')) {
-
-                // 若之前active项为筛选，则隐藏筛选面板
-                filter.hideFilter();
-            } else {
-
-                // 切换container显示
-                $goodsContainer.children('.container:not(.hide)').addClass('hide');
-
-                switch (navType) {
-                    case 'newest':
-                        $ngc.removeClass('hide');
-                        break;
-
-                    case 'price':
-                        $pgc.removeClass('hide');
-                        break;
-
-                    case 'discount':
-                        $dgc.removeClass('hide');
-                        break;
-                    default:
-                        break;
-                }
-            }
-
-            $active.removeClass('active');
-            $this.addClass('active');
-        }
-
-        if (nav.reload) {
-            search();
-        }
-    }
-    e.stopPropagation();
-});
-
-function scrollHandler() {
-
-    // 当scroll到1/4$goodsContainer高度后继续请求下一页数据
-    if ($(window).scrollTop() + winH >
-        $(document).height() - 0.25 * $goodsContainer.height() - 50) {
-        if (typeof($pre) !== 'undefined') {
-            search();
-        }
-    }
-}
-
-// srcoll to load more
-$(window).scroll(function() {
-    window.requestAnimationFrame(scrollHandler);
-});
-
-// 初始请求最新第一页数据
-search();
-
-$listNav.on('touchstart', 'li', function() {
-    $(this).addClass('bytouch');
-}).on('touchend touchcancel', function() {
-    $listNav.find('li').removeClass('bytouch');
-});

+/**
+ * 商品列表搜索
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/5/23
+ */
+var $ = require('yoho-jquery'),
+    ellipsis = require('yoho-mlellipsis'),
+    lazyLoad = require('yoho-jquery-lazyload'),
+    tip = require('../plugin/tip'),
+    filter = require('../plugin/filter'),
+    loading = require('../plugin/loading');
+
+var $goodsContainer = $('#goods-container'),
+    $goodsChildren = $goodsContainer.children(),
+    $ngc = $($goodsChildren.get(0)),
+    $pgc = $($goodsChildren.get(1)),
+    $dgc = $($goodsChildren.get(2));
+
+var winH = $(window).height(),
+    noResult = '<p class="no-result">未找到相关搜索结果</p>';
+
+// 默认筛选条件
+var defaultOpt = require('./query-param');
+
+var $listNav = $('#list-nav'),
+
+    // 导航数据信息
+    navInfo = {
+        newest: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false
+        },
+        price: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false
+        },
+        discount: {
+            order: 1,
+            reload: true,
+            page: 0,
+            end: false
+        }
+    },
+    $pre = $listNav.find('.active'), // 纪录进入筛选前的active项，初始为选中项
+    searching;
+
+require('./suspend-cart'); // 悬浮购物车
+require('../common');
+
+ellipsis.init();
+
+lazyLoad($('img.lazy'));
+
+/**
+ * 筛选注册的回调，筛选子项点击后逻辑
+ * 需要执行search的场景：1.点选筛选项；2.relaod为true时切换导航；3.下拉加载
+ * @param opt {type, id}
+ */
+function search(opt) {
+    var setting = {},
+        ext,
+        att,
+        nav, navType,
+        page;
+
+    if (searching) {
+        return;
+    }
+
+    if (opt) {
+
+        // 筛选项变更则重置reload为true
+        for (att in navInfo) {
+            if (navInfo.hasOwnProperty(att)) {
+                navInfo[att].reload = true;
+            }
+        }
+
+        // 处理active状态
+        $listNav.children('.active').removeClass('active');
+        $pre.addClass('active');
+
+        switch (opt.type) {
+            case 'gender':
+                ext = {
+                    gender: opt.id
+                };
+                break;
+            case 'brand':
+                ext = {
+                    brand: opt.id
+                };
+                break;
+            case 'sort':
+                ext = {
+                    sort: opt.id
+                };
+                break;
+            case 'color':
+                ext = {
+                    color: opt.id
+                };
+                break;
+            case 'size':
+                ext = {
+                    size: opt.id
+                };
+                break;
+            case 'price':
+                ext = {
+                    price: opt.id
+                };
+                break;
+            case 'discount':
+                ext = {
+                    discount: opt.id
+                };
+                break;
+            default:
+                break;
+        }
+
+        $.extend(defaultOpt, ext); // 扩展筛选项
+    }
+
+
+    // 导航类别
+    if ($pre.hasClass('new')) {
+        navType = 'newest';
+    } else if ($pre.hasClass('price')) {
+        navType = 'price';
+    } else if ($pre.hasClass('discount')) {
+        navType = 'discount';
+    }
+
+    nav = navInfo[navType];
+    page = nav.page + 1;
+    if (nav.reload) {
+        page = 1;
+    } else if (nav.end) {
+
+        // 不需要重新加载并且数据请求结束
+        return;
+    }
+
+    if ($('.sale-vip-page').length > 0) {
+        defaultOpt.saleType = 2;
+    } else if ($('.sale-channel-page').length > 0) {
+        defaultOpt.saleType = 3;
+    }
+
+    $.extend(setting, defaultOpt, {
+        type: navType,
+        order: nav.order,
+        page: page
+    });
+
+    searching = true;
+    loading.showLoadingMask();
+
+    $.ajax({
+        type: 'GET',
+        url: '/product/sale/search',
+        data: setting,
+        success: function(data) {
+            var $container,
+                num;
+
+            switch (navType) {
+                case 'newest':
+                    $container = $ngc;
+                    break;
+                case 'price':
+                    $container = $pgc;
+                    break;
+                case 'discount':
+                    $container = $dgc;
+                    break;
+                default:
+                    break;
+            }
+
+            if (data === ' ') {
+                nav.end = true;
+
+                if (nav.reload) {
+                    $container.html(noResult);
+                }
+            } else {
+                if (nav.reload) {
+                    $container.html(data);
+                    lazyLoad($container.find('.lazy'));
+                } else {
+                    num = $container.find('.good-info').length;
+                    $container.append(data);
+
+                    // lazy good-infos who append in
+                    lazyLoad($container.find('.good-info:gt(' + (num - 1) + ') .lazy'));
+                }
+            }
+
+            nav.reload = false;
+            nav.page = page;
+
+            searching = false;
+            loading.hideLoadingMask();
+
+            window.rePosFooter();
+
+            $('.good-detail-text .name').each(function() {
+                var $this = $(this),
+                    $title = $this.find('a');
+
+                $title[0].mlellipsis(2);
+            });
+        },
+        error: function() {
+            tip.show('网络断开连接了~');
+            searching = false;
+            loading.hideLoadingMask();
+        }
+    });
+
+}
+
+$.ajax({
+    type: 'GET',
+    url: '/product/sale/filter',
+    data: defaultOpt,
+    success: function(data) {
+        $goodsContainer.append(data);
+
+        // 初始化filter&注册filter回调
+        filter.initFilter({
+            fCbFn: search,
+            hCbFn: function() {
+
+                // 切换active状态到$pre上
+                $pre.addClass('active');
+                $pre.siblings('.filter').removeClass('active');
+            },
+            missStatus: true
+        });
+    }
+});
+lazyLoad($('.lazy'));
+
+// 导航栏点击逻辑说明：
+// 1.点击非active项时切换active状态
+// 2.价格和折扣active状态时继续点击切换排序
+// 3.筛选无active时点击展开筛选面板
+// 4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态
+// 5.当前active为筛选并且点击其他项时，隐藏筛选面板
+$listNav.bind('contextmenu', function() {
+    return false;
+});
+
+$listNav.on('touchend touchcancel', function(e) {
+    var $this = $(e.target).closest('li'),
+        nav,
+        navType,
+        $active;
+
+    e.preventDefault();
+
+    if (typeof $this === 'undefined' || $this.length === 0) {
+        return;
+    }
+
+    if ($this.hasClass('filter')) {
+
+        // 筛选面板切换状态
+        if ($this.hasClass('active')) {
+            filter.hideFilter();
+
+            // 点击筛选钱的active项回复active
+            $pre.addClass('active');
+            $this.removeClass('active');
+        } else {
+            $pre = $this.siblings('.active');
+
+            $pre.removeClass('active');
+            $this.addClass('active');
+
+            filter.showFilter();
+        }
+    } else {
+
+        if ($this.hasClass('new')) {
+            navType = 'newest';
+        } else if ($this.hasClass('price')) {
+            navType = 'price';
+        } else if ($this.hasClass('discount')) {
+            navType = 'discount';
+        }
+
+        nav = navInfo[navType];
+
+        if ($this.hasClass('active')) {
+
+            // 最新无排序切换
+            if ($this.hasClass('new')) {
+                return;
+            }
+
+            if ($this.hasClass('price') || $this.hasClass('discount')) {
+
+                // 价格/折扣切换排序状态
+                $this.find('.icon > .iconfont').toggleClass('cur');
+                $pre = $this; // 更新pre为当前项
+                nav.reload = true; // 重置reload,HTML会被替换为逆序的HTML
+                nav.order = nav.order === 0 ? 1 : 0; // 切换排序
+            }
+        } else {
+            $active = $this.siblings('.active');
+
+            $pre = $this; // $pre为除筛选导航的其他导航项，若当前active的为筛选，则把$pre置为当前点击项
+
+            if ($active.hasClass('filter')) {
+
+                // 若之前active项为筛选，则隐藏筛选面板
+                filter.hideFilter();
+            } else {
+
+                // 切换container显示
+                $goodsContainer.children('.container:not(.hide)').addClass('hide');
+
+                switch (navType) {
+                    case 'newest':
+                        $ngc.removeClass('hide');
+                        break;
+
+                    case 'price':
+                        $pgc.removeClass('hide');
+                        break;
+
+                    case 'discount':
+                        $dgc.removeClass('hide');
+                        break;
+                    default:
+                        break;
+                }
+            }
+
+            $active.removeClass('active');
+            $this.addClass('active');
+        }
+
+        if (nav.reload) {
+            search();
+        }
+    }
+    e.stopPropagation();
+});
+
+function scrollHandler() {
+
+    // 当scroll到1/4$goodsContainer高度后继续请求下一页数据
+    if ($(window).scrollTop() + winH >
+        $(document).height() - 0.25 * $goodsContainer.height() - 50) {
+        if (typeof($pre) !== 'undefined') {
+            search();
+        }
+    }
+}
+
+// srcoll to load more
+$(window).scroll(function() {
+    window.requestAnimationFrame(scrollHandler);
+});
+
+// 初始请求最新第一页数据
+search();
+
+$listNav.on('touchstart', 'li', function() {
+    $(this).addClass('bytouch');
+}).on('touchend touchcancel', function() {
+    $listNav.find('li').removeClass('bytouch');
+});

+/**
+ * 折扣专场详情
+ * @author: wsl<shuiling.wang@yoho.cn>
+ * @date: 2016/5/20
+ */
+var $ = require('yoho-jquery'),
+    lazyLoad = require('yoho-jquery-lazyload');
+
+var $activityTime = $('.activity-time'),
+    endTime = $activityTime.data('time-ms');
+
+require('./search');
+
+lazyLoad($('img.lazy'));
+
+
+// 倒计时
+function getRTime() {
+    var anHour = 3600000,
+        aMinute = 60000,
+        aSecond = 1000,
+        showTime = '',
+        d = 0,
+        h = 0,
+        m = 0,
+        s = 0;
+
+    endTime = endTime - 1000;
+
+    if (endTime > 1000) {
+        d = Math.floor(endTime / anHour / 24);
+        h = Math.floor(endTime / anHour % 24);
+        m = Math.floor(endTime / aMinute % 60);
+        s = Math.floor(endTime / aSecond % 60);
+    }
+
+    showTime += d > 0 ? d + '天' : '';
+    showTime += h > 0 ? h + '小时' : '';
+    showTime += m > 0 ? m + '分钟' : '';
+    showTime += s > 0 ? s + '秒' : '';
+
+    if (showTime.length !== '') {
+        showTime = '剩' + showTime;
+    }
+
+    $activityTime.find('span').html(showTime);
+
+    $activityTime.attr('data-time-ms', endTime);
+}
+
+setInterval(getRTime, 1000);

@@ -3,7 +3,6 @@
  * @author: wsl<shuiling.wang@yoho.cn>
  * @date: 2016/5/20
  */
-
 var $ = require('yoho-jquery'),
     lazyLoad = require('yoho-jquery-lazyload');
 

+require('./search');

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

@@ -53,6 +53,13 @@ a {
     overflow: hidden;
 }
 
+.main-wrap {
+    margin-left: auto;
+    margin-right: auto;
+    width: 100%;
+    max-width: 640px;
+}
+
 @font-face {
     font-family: "iconfont";
     src: resolve('iconfont.eot'); /* IE9 */

 .yoho-footer {
-    margin-left: auto;
-    margin-right: auto;
     width: 100%;
-    max-width: 640px;
     font-size: 24px;
     background-color: #fff;
     position: relative;

@@ -20,8 +20,6 @@
     height: 90px;
     line-height: 90px;
     z-index: 1;
-    max-width: 640px;
-    margin: 0 auto;
 
     &.boys {
         background-image: linear-gradient(#323232, #414141);

 .break-code-page {
     max-width: 640px;
     margin: 0 auto;
+    overflow: hidden;
 
     .banner {
         width: 640px;
@@ -11,7 +12,10 @@
         }
     }
 
-    #size-swiper {
+    #size-swiper-0,
+    #size-swiper-1,
+    #size-swiper-2,
+    #size-swiper-3 {
         width: 100%;
         line-height: 50px;
         color: #999;
@@ -21,6 +25,7 @@
         background: #f0f0f0;
         padding: 0 22px;
         box-sizing: border-box;
+        display: none;
 
         ul {
             width: 100%;
@@ -29,11 +34,11 @@
 
         li {
             width: auto;
-            margin: 0 22px;
+            padding: 0 22px;
             float: left;
             white-space: nowrap;
 
-            &.on {
+            &.active {
                 color: #000;
             }
         }
@@ -53,4 +58,4 @@
             display: block;
         }
     }
-}
\ No newline at end of file
+}

@@ -2,7 +2,7 @@
     float: left;
     width: 276px;
     height: 506px;
-    margin: 10px 15px 40px 15px;
+    margin: 10px 15px 40px;
 
     .tag-container {
         height: 28px;
@@ -64,8 +64,8 @@
         position: absolute;
         width: 60px;
         height: 60px;
-        top: 0px;
-        right: 0px;
+        top: 0;
+        right: 0;
         line-height: 60px;
         font-size: 30px;
         text-align: center;
@@ -100,11 +100,6 @@
     .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;
@@ -128,4 +123,44 @@
             text-decoration: line-through;
         }
     }
+
+    .vip-grade {
+        width: 52px;
+        height: 32px;
+        display: inline-block;
+        margin-right: 8px;
+        vertical-align: text-bottom;
+    }
+
+    .vip-grade-golden {
+        background: resolve('product/golden.png') no-repeat;
+        background-size: contain;
+    }
+
+    .vip-grade-platinum {
+        background: resolve('product/platinum.png') no-repeat;
+        background-size: contain;
+    }
+
+    .vip-grade-silver {
+        background: resolve('product/silver.png') no-repeat;
+        background-size: contain;
+    }
+
+    .vip-info {
+        margin-top: 19px;
+        line-height: 32px;
+        font-size: 18px;
+        color: #444;
+
+        .vip-icon {
+            width: 88px;
+            height: 32px;
+            background: resolve('product/vip-icon.png') no-repeat;
+            background-size: contain;
+            display: inline-block;
+            vertical-align: bottom;
+            margin-right: 8px;
+        }
+    }
 }

 .sale-page {
-    margin-left: auto;
-    margin-right: auto;
-    width: 100%;
-    max-width: 640px;
     overflow: hidden;
 
     .banner-top .swiper-container {

+.sale-channel-page {
+    .banner {
+        position: relative;
+        height: auto;
+        overflow: hidden;
+
+        .activity-time {
+            width: 100%;
+            height: 50px;
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            z-index: 2;
+            background: rgba(0, 0, 0, 0.5);
+            text-align: right;
+            color: #fff;
+            font-size: 22px;
+            line-height: 50px;
+            padding-right: 28px;
+            box-sizing: border-box;
+
+            .time-ico {
+                margin-right: 15px;
+                font-size: 26px;
+                vertical-align: text-bottom;
+            }
+
+            span {
+                vertical-align: super;
+            }
+        }
+    }
+}