添加商铺列表页

-
 'use strict';
 
 const _ = require('lodash');
-const Search = require('../models/list');
-const BrandData = require('../models/brand-service');
+const Search = require('../models/search');
 const camelCase = global.yoho.camelCase;
 const DateHelper = require('../models/helpers');
 
-function newFilter(key, value, name) {
-    return {
-        key: key,
-        value: value,
-        name: name
-    };
-}
-
-function filterHandle(filter, q) {
-    let priceRange = filter.priceRange;
-    let sizeInfo = filter.size;
-    let genders = DateHelper.genders();
-    let brands = filter.brand;
-    let colors = DateHelper.colorConver(filter.color);
-    let sorts = filter.groupSort;
-    let filters = [];
-
-    genders.forEach(g => {
-        if (g.value === q.gender) {
-            g.checked = true;
-            filters.push(newFilter('gender', q.gender, g.name));
-        }
-    });
-
-    priceRange = Object.keys(priceRange).map((k) => {
-        let prices = k.split(',');
-
-        if (k === q.price) {
-            filters.push(newFilter('price', q.price, `¥${prices[0]}－¥${prices[1]}`));
-        }
-        return {
-            lower: prices[0],
-            higher: prices[1]
-        };
-    }).sort((a, b) => {
-        return a.lower - b.lower;
-    });
-
-    if (!_.isArray(sizeInfo)) {
-        sizeInfo.checked = true;
-        sizeInfo = [sizeInfo];
-    }
-
-    if (q.size) {
-        sizeInfo.forEach(s => {
-            if (s.sizeId === parseInt(q.size, 10)) {
-                filters.push(newFilter('size', q.size, s.sizeName));
-            }
-        });
-    }
-
-    if (q.brand) {
-        let brandNames = brands.filter(b => {
-            return (',' + q.brand + ',').indexOf(',' + b.id + ',') >= 0;
-        }).map(b => {
-            return b.brandName;
-        }).join('、');
-
-        filters.push(newFilter('brand', q.brand, brandNames));
-    }
-
-    if (q.color) {
-        colors.forEach(c => {
-            if (c.id === parseInt(q.color, 10)) {
-                c.cur = true;
-
-                let fi = newFilter('color', q.color, c.title);
-
-                fi.color = c;
-                filters.push(fi);
-            }
-        });
-    }
-
-    return {
-        people: genders,
-        sortData: sorts,
-        brandData: brands,
-        colors: colors,
-        size: sizeInfo,
-        priceRange: priceRange,
-        filters: filters,
-        showFilters: filters.length > 0,
-        letters: DateHelper.brandLetters(),
-        navPath: {
-            nav: DateHelper.getNav('', q.sort, sorts)
-        }
-    };
-}
-
 const list = {
     index: (req, res, next) => {
         let page = req.query.page || 1;
@@ -114,12 +22,6 @@ const list = {
             title: '列表'
         };
 
-        if (brand) {
-            BrandData.getBannerInfoAsync(brand).then(brandInfo => {
-                console.log(brandInfo);
-            });
-        }
-
         Search.queryProduct({
             page: page,
             brand: brand,
@@ -135,7 +37,7 @@ const list = {
                 let data = camelCase(result.data);
 
                 if (data.filter) {
-                    retDate.filter = filterHandle(data.filter, req.query);
+                    retDate.filter = DateHelper.filterHandle(data.filter, req.query);
                 }
 
                 retDate.paginationData = {

+/**
+ * 店铺相关页面
+ *
+ * 首页、列表页
+ *
+ * @author: jiangfeng<jeff.jiang@yoho.cn>
+ */
+
+'use strict';
+
+const _ = require('lodash');
+const camelCase = global.yoho.camelCase;
+const BrandData = require('../models/brand-service');
+const Search = require('../models/search');
+const DateHelper = require('../models/helpers');
+
+function bannerFormat(banner) {
+    return {
+        bgImg: banner.brandBanner,
+        brandIntro: {
+            text: '品牌介绍'
+        },
+        height: 150
+    };
+}
+
+function shopMenu() {
+    let menus = [
+        {name: '店铺首页', href: '/'},
+        {name: '全部商品', href: '/shop', icon: '&#xe60a;'},
+        {name: '人气单品', href: '/list?order=xxx'},
+        {name: '新品上架', href: '/list?order=s_t_desc'}
+    ];
+
+    return menus;
+}
+
+const shop = {
+
+    list(req, res, next) {
+        let data = {
+            module: 'product',
+            page: 'shop-list',
+            title: '店铺列表'
+        };
+
+        let domain = req.query.domain;
+        let q = req.query;
+
+        q.page = q.page || 1;
+        data.shopMenu = shopMenu();
+
+        BrandData.getBrandByDomainAsync(domain).then(result => {
+            data.brandBanner = bannerFormat(result);
+            q.brand = result.id;
+            q.shop_id = q.shopId || '';
+        }).then(() => {
+            return Search.queryProductOfBrand(q).then(result => {
+
+                if (result && result.code === 200 && result.data) {
+                    let ret = camelCase(result.data);
+
+                    if (ret.filter) {
+                        data.filter = DateHelper.filterHandle(ret.filter, req.query);
+                    }
+
+                    data.paginationData = {
+                        page: q.page,
+                        limit: ret.limit || 45,
+                        total: ret.total,
+                        pageTotal: ret.pageTotal,
+                        queryParams: req.query
+                    };
+
+                    res.display('shop-list', _.assign(data, {
+                        products: ret.productList,
+                        order: q.order
+                    }));
+                } else {
+                    return Promise.reject('query product error');
+                }
+            });
+        }).catch(next);
+    }
+};
+
+module.exports = shop;

 'use strict';
 
+const _ = require('lodash');
+
 const helpers = {
-    brandLetters() {
+    brandLetters(numberIndex) {
         let letters = [];
 
-        letters.push({
-            letter: '0-9',
-            selected: false
-        });
+        numberIndex = numberIndex || 0;
 
         for (let i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
             letters.push({
@@ -16,6 +15,18 @@ const helpers = {
             });
         }
 
+        if (numberIndex === -1) {
+            letters.push({
+                letter: '0-9',
+                selected: false
+            });
+        } else if (numberIndex === 0) {
+            letters.unshift({
+                letter: '0-9',
+                selected: false
+            });
+        }
+
         return letters;
     },
 
@@ -35,7 +46,7 @@ const helpers = {
             return {
                 id: c.colorId,
                 title: c.colorName,
-                rgb: c.colorValue || '#' + c.colorCode
+                rgb: c.colorValue ? `url(${c.colorValue})` : '#' + c.colorCode
             };
         });
     },
@@ -74,6 +85,96 @@ const helpers = {
             });
         }
         return nav;
+    },
+
+    newFilter(key, value, name) {
+        return {
+            key: key,
+            value: value,
+            name: name
+        };
+    },
+
+    filterHandle(filter, q) {
+        let priceRange = filter.priceRange;
+        let sizeInfo = filter.size;
+        let genders = this.genders();
+        let brands = filter.brand;
+        let colors = this.colorConver(filter.color);
+        let sorts = filter.groupSort;
+        let filters = [];
+
+        genders.forEach(g => {
+            if (g.value === q.gender) {
+                g.checked = true;
+                filters.push(this.newFilter('gender', q.gender, g.name));
+            }
+        });
+
+        priceRange = Object.keys(priceRange).map((k) => {
+            let prices = k.split(',');
+
+            if (k === q.price) {
+                filters.push(this.newFilter('price', q.price, `¥${prices[0]}－¥${prices[1]}`));
+            }
+            return {
+                lower: prices[0],
+                higher: prices[1]
+            };
+        }).sort((a, b) => {
+            return a.lower - b.lower;
+        });
+
+        if (!_.isArray(sizeInfo)) {
+            sizeInfo.checked = true;
+            sizeInfo = [sizeInfo];
+        }
+
+        if (q.size) {
+            sizeInfo.forEach(s => {
+                if (s.sizeId === parseInt(q.size, 10)) {
+                    filters.push(this.newFilter('size', q.size, s.sizeName));
+                }
+            });
+        }
+
+        if (q.brand) {
+            let brandNames = brands.filter(b => {
+                return (',' + q.brand + ',').indexOf(',' + b.id + ',') >= 0;
+            }).map(b => {
+                return b.brandName;
+            }).join('、');
+
+            filters.push(this.newFilter('brand', q.brand, brandNames));
+        }
+
+        if (q.color) {
+            colors.forEach(c => {
+                if (c.id === parseInt(q.color, 10)) {
+                    c.cur = true;
+
+                    let fi = this.newFilter('color', q.color, c.title);
+
+                    fi.color = c;
+                    filters.push(fi);
+                }
+            });
+        }
+
+        return {
+            people: genders,
+            sortData: sorts,
+            brandData: brands,
+            colors: colors,
+            size: sizeInfo,
+            priceRange: priceRange,
+            filters: filters,
+            showFilters: filters.length > 0,
+            letters: this.brandLetters(),
+            navPath: {
+                nav: this.getNav('', q.sort, sorts)
+            }
+        };
     }
 };
 

-
 'use strict';
 
-const SearchAPI = global.yoho.SearchAPI;
 const api = global.yoho.API;
-const logger = global.yoho.logger;
-const camelCase = global.yoho.camelCase;
 const _ = require('lodash');
 
 function clearEmptyVal(obj) {
@@ -17,26 +13,22 @@ function clearEmptyVal(obj) {
 }
 
 const Search = {
-    querySort(query) {
-        return SearchAPI.get('sortgroup.json', _.assign({
-            sales: 'Y',
-            status: 1,
-            stocknumber: 1
-        }, query)).then(data => {
-            if (data && data.code === 200 && data.data) {
-                return camelCase(data.data.sort);
-            } else {
-                return [];
-            }
-        }).catch(e => {
-            logger.error(e);
-            return Promise.resolve([]);
-        });
-    },
     queryProduct(params) {
 
         let finalParams = {
-            method: 'app.search.sales',
+            method: 'app.search.li',
+            limit: 45,
+            productSize: '384x511',
+            yh_channel: 1
+        };
+
+        Object.assign(finalParams, clearEmptyVal(params));
+
+        return api.get('', finalParams);
+    },
+    queryProductOfBrand(params) {
+        let finalParams = {
+            method: 'app.search.li',
             limit: 45,
             productSize: '384x511',
             yh_channel: 1

@@ -10,10 +10,13 @@ const router = require('express').Router(); // eslint-disable-line
 const cRoot = './controllers';
 const list = require(cRoot + '/list');
 const item = require(cRoot + '/item');
+const shop = require(cRoot + '/shop');
 
 // Your controller here
-router.get('/list', list.index); // 组件demo页
+router.get('/list', list.index); // 列表页面
 
 router.get(/\/item\/([\d]+)_([\d]+).html/, item.index); // 商品详情页
 
+router.get('/shop/list', shop.list);
+
 module.exports = router;

+<div class="blk-page yoho-product-list">
+    <div class="center-content">
+        {{# filter.navPath}}
+            {{> path-nav}}
+        {{/ filter.navPath}}
+    </div>
+    <div class="center-content clearfix">
+        {{> brand-banner-list }}
+        {{> list/shop-menu }}
+    </div>
+    <div class="center-content clearfix">
+        <div class="left">
+            {{!-- 筛选区域 --}}
+            {{#filter}}
+                {{> list/filter}}
+            {{/filter}}
+        </div>
+        <div class="right">
+            {{!-- 已选中条件 --}}
+            {{#filter}}
+                {{> list/filter-area}}
+            {{/filter}}
+            {{!-- 排序 --}}
+            {{> list/order-area}}
+            {{!-- 商品列表 --}}
+            {{> list/goods-box}}
+            {{!-- 分页 --}}
+            {{{ pagination paginationData }}}
+        </div>
+    </div>
+</div>

+{{# brandBanner}}
+    <div class="brand-banner" >
+        <p class="opts">
+            {{# brandIntro}}
+                <a href="{{link}}">
+                    <i class="iconfont">&#xe631;</i>
+                    {{text}}
+                </a>
+            {{/ brandIntro}}
+
+            <span id="brand-fav" class="brand-fav{{#if coled}} coled{{/if}}">
+                {{> icon/collection}}
+            </span>
+        </p>
+    </div>
+{{/brandBanner}}

@@ -30,4 +30,4 @@
             </div>
         </div>
     </div>
-{{/ brandBanner}}
\ No newline at end of file
+{{/ brandBanner}}

@@ -50,7 +50,11 @@
             {{#each brandData}}
                 <div class="input-radio" data-value="{{id}}">
                     {{> icon/radio}}
-                    <label>{{brandNameEn}}</label>
+                    {{#if brandNameEn}}
+                        <label>{{brandNameEn}}</label>
+                    {{^}}
+                        <label>{{brandName}}</label>
+                    {{/if}}
                 </div>
             {{/each}}
         </div>
@@ -111,4 +115,4 @@
             {{/each}}
         </div>
     </div>
-</div>
\ No newline at end of file
+</div>

+<ul class="shop-menu">
+    {{#each shopMenu}}
+        <li>
+            <a href="{{href}}">
+                {{name}}
+                {{#icon}}
+                    <i class="iconfont">&#xe60a;</i>
+                {{/icon}}
+            </a>
+        </li>
+    {{/each}}
+</ul>

@@ -19,7 +19,7 @@ module.exports = {
     },
     cookieDomain: 'yohoblk.com',
     domains: {
-        api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
+        api: 'http://api.yoho.yohoops.org/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
         service: 'http://devservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
         search: 'http://192.168.102.216:8080/yohosearch/'
     },

@@ -2,7 +2,7 @@
 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
 <svg xmlns="http://www.w3.org/2000/svg">
 <metadata>
-Created by FontForge 20120731 at Thu Jul  7 09:08:20 2016
+Created by FontForge 20120731 at Fri Jul  8 14:37:44 2016
  By admin
 </metadata>
 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Jul  7 09:08:20 2016
     bbox="0 -224 1303 896.303"
     underline-thickness="50"
     underline-position="-100"
-    unicode-range="U+0078-E632"
+    unicode-range="U+0078-E63B"
   />
 <missing-glyph horiz-adv-x="374" 
 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -131,7 +131,7 @@ d="M361 194q45 -63 81 -152h143q42 68 75 152l82 -29q-32 -69 -70 -123h202v-71h-724
 d="M897 -212h-770q-44 0 -71 34.5t-21 82.5l89 598q3 31 30 52.5t61 21.5h51q4 111 73 173t171.5 62t171 -62t73.5 -173h54q34 0 61 -21.5t30 -52.5l89 -598q6 -48 -21 -82.5t-71 -34.5zM230 406q0 -25 18 -43t43 -18t42.5 18t17.5 43t-17.5 42.5t-42.5 17.5t-43 -17.5
 t-18 -42.5zM510 767q-87 0 -144.5 -49t-61.5 -141h412q-4 92 -61.5 141t-144.5 49zM736 466q-25 0 -42.5 -17.5t-17.5 -42.5t17.5 -43t42.5 -18t43 18t18 43t-18 42.5t-43 17.5z" />
     <glyph glyph-name="uniE625" unicode="&#xe625;" 
-d="M519 847l-398 -398h120v-398h159v213h212v-213h159v398h146zM519 847z" />
+d="M43 0h938l-469 811zM555 128h-86v85h86v-85zM555 299h-86v170h86v-170z" />
     <glyph glyph-name="uniE626" unicode="&#xe626;" 
 d="M139 233q-24 -59 -27.5 -108t15.5 -60q13 -7 32.5 7.5t38.5 45.5q16 -66 72 -116q-29 -11 -45.5 -28.5t-16.5 -37.5q0 -34 43.5 -57.5t105.5 -23.5q56 0 97.5 19.5t50.5 48.5h18q8 -29 50 -48.5t98 -19.5q62 0 105.5 23.5t43.5 57.5q0 20 -16.5 37.5t-45.5 28.5
 q56 50 71 116q20 -31 39 -45.5t32 -7.5q19 11 16 60t-27 108q-19 46 -42 78t-43 40q1 7 1 12q0 35 -17 64v4q0 16 -7 30q-5 125 -77.5 207t-190 82t-189.5 -82t-77 -207q-7 -14 -7 -30v-4q-17 -29 -17 -64q0 -5 1 -12q-20 -8 -43.5 -40t-41.5 -78z" />
@@ -166,10 +166,31 @@ t-15.5 36.5t-24.5 22t-28.5 11.5t-26.5 3t-19 -0.5l-8 -1q-9 0 -16 -7t-7 -16t7 -16t
 q18 2 30 7q5 0 16.5 1.5t31 -3.5t39 -12.5t40.5 -25t35 -41.5q25 -57 10 -109q-6 -17 -6 -32q0 -14 9 -22t23 -8t21.5 5t10.5 23q17 53 13 96.5t-18.5 75.5t-40.5 55.5t-52 37t-54 20.5z" />
     <glyph glyph-name="uniE62F" unicode="&#xe62f;" 
 d="M756 -133h-488q-21 0 -36.5 13t-15.5 32v780q0 19 15.5 32t36.5 13h488q21 0 36.5 -13t15.5 -32v-780q0 -19 -15.5 -32t-36.5 -13zM512 -88q14 0 24.5 9t10.5 21t-10.5 21t-24.5 9t-24.5 -9t-10.5 -21t10.5 -21t24.5 -9zM756 647h-488v-630h488v630z" />
+    <glyph glyph-name="uniE630" unicode="&#xe630;" 
+d="M513 857q98 0 184.5 -37t151 -102t102 -151.5t37.5 -185.5t-37.5 -185t-102 -151t-151 -102t-184.5 -37q-100 0 -186.5 37t-151 102t-102 151t-37.5 185t37.5 185.5t102 151.5t151 102t186.5 37zM784 316q28 0 47.5 20t19.5 48t-19.5 47t-47.5 19h-202v203q0 28 -20 48
+t-48 20t-47.5 -20t-19.5 -48v-203h-203q-28 0 -47.5 -19t-19.5 -47t19.5 -48t47.5 -20h203v-202q0 -28 19.5 -48t47.5 -20t48 20t20 48v202h202z" />
     <glyph glyph-name="uniE631" unicode="&#xe631;" 
 d="M831 612q-2 12 -11 20t-21 8h-160v32q0 66 -47 113t-113 47t-112.5 -47t-46.5 -113v-32h-160q-12 0 -21.5 -8t-10.5 -20l-64 -576q-1 -15 8.5 -25.5t23.5 -10.5h767q14 0 23.5 10.5t7.5 25.5zM351.5 448q-13.5 0 -23 9.5t-9.5 22.5t9.5 22.5t23 9.5t22.5 -9.5t9 -22.5
 t-9 -22.5t-22.5 -9.5zM575 640h-192v32q0 40 28.5 68t68 28t67.5 -28t28 -68v-32zM607.5 448q-13.5 0 -23 9.5t-9.5 22.5t9.5 22.5t23 9.5t22.5 -9.5t9 -22.5t-9 -22.5t-22.5 -9.5z" />
     <glyph glyph-name="uniE632" unicode="&#xe632;" 
 d="M684 670q-23 96 -68.5 153t-103.5 57t-103.5 -57t-68.5 -153h-178l-69 -798h838l-69 798h-178zM406 670q18 67 47 107t59 40t59 -40t47 -107h-212z" />
+    <glyph glyph-name="uniE633" unicode="&#xe633;" 
+d="M512 764q-94 0 -180 -36.5t-148.5 -99t-99 -148.5t-36.5 -180t36.5 -180t99 -148.5t148.5 -99t180 -36.5t180 36.5t148.5 99t99 148.5t36.5 180t-36.5 180t-99 148.5t-148.5 99t-180 36.5zM724 244h-424q-23 0 -39.5 16.5t-16.5 39.5t16.5 39.5t39.5 16.5h424
+q23 0 39 -16.5t16 -39.5t-16 -39.5t-39 -16.5z" />
+    <glyph glyph-name="uniE634" unicode="&#xe634;" 
+d="M500 775l-348 -298q-16 -14 -16 -35v-386q0 -25 17.5 -42.5t42.5 -17.5h197v257h238v-257h197q25 0 42.5 17.5t17.5 42.5v386q0 21 -16 35l-348 298q-12 10 -24 0z" />
+    <glyph glyph-name="uniE635" unicode="&#xe635;" 
+d="M556 -209l-292 507l3 2l-3 2l292 507h211l-293 -509l293 -509h-211z" />
+    <glyph glyph-name="uniE636" unicode="&#xe636;" 
+d="M468 -209l292 507l-3 2l3 2l-292 507h-211l293 -509l-293 -509h211z" />
+    <glyph glyph-name="uniE637" unicode="&#xe637;" 
+d="M512 -212q-104 0 -199 40.5t-163.5 109t-109 163.5t-40.5 199t40.5 199t109 163.5t163.5 109t199 40.5t199 -40.5t163.5 -109t109 -163.5t40.5 -199t-40.5 -199t-109 -163.5t-163.5 -109t-199 -40.5zM512 684q-159 0 -271.5 -112.5t-112.5 -271.5t112.5 -271.5
+t271.5 -112.5t271.5 112.5t112.5 271.5t-112.5 271.5t-271.5 112.5z" />
+    <glyph glyph-name="uniE638" unicode="&#xe638;" 
+d="M511 833q-91 0 -174 -35.5t-143 -95.5t-95.5 -143t-35.5 -174t35.5 -174t95.5 -143t143 -95t174 -35t174 35t143 95t95.5 143t35.5 174t-35.5 174t-95.5 143t-143 95.5t-174 35.5z" />
+    <glyph glyph-name="uniE63A" unicode="&#xe63a;" 
+d="M963 564l-117 -190h92v-43h-107v-58h107v-42h-107v-85h-55v85h-112v42h112v58h-112v43h95l-115 190h62q81 -142 98 -180h1q6 16 33 63l66 117h59z" />
+    <glyph glyph-name="uniE63B" unicode="&#xe63b;" 
+d="M0 -128h1024v1024zM826 301l-250 -282l-122 122q-9 9 -9 22t9.5 22.5t22.5 9.5t22 -9l77 -77l198 230q10 10 23 10t22 -10q10 -5 13 -16.5t-6 -21.5z" />
   </font>
 </defs></svg>

@@ -54,7 +54,7 @@ var jQuery = require('yoho-jquery');
             $(this).each(function() {
                 var options = $(this).data('options');
 
-                check._uncheck(this, options);
+                check._unCheck(this, options);
             });
         },
         _check: function(ele, options) {
@@ -70,7 +70,7 @@ var jQuery = require('yoho-jquery');
                 }
             }
         },
-        _uncheck: function(ele, options) {
+        _unCheck: function(ele, options) {
             var icon = $(ele).find('.' + options.type);
             var checked = $(icon).hasClass('checked');
 

 
-var $ = require('yoho-jquery');
-var common = require('../common');
-
-var query = common.queryString();
-
-var YohoListPage = {
-    rootDoc: $('.yoho-product-list'),
-    brandsDoc: $('.yoho-product-list .brand-list'),
-    mulitBrand: false,
-    goodsWrapper: $('.goods-area .goods-wrapper'),
-    goodsWrapperState: false,
-    page: query.page || 1,
-    init: function() {
-        require('yoho-jquery-accordion');
-        require('../plugins/check');
-        $('.yoho-ui-accordion', this.rootDoc).each(function() {
-            var opts = {
-                collapsible: true,
-                heightStyle: 'content'
-            };
-
-            if ($(this).hasClass('no-active')) {
-                opts.active = false;
-            }
-            $(this).accordion(opts);
-        });
-
-        $('.yoho-product-list .sex-body .input-radio').check({
-            type: 'radio',
-            onChange: function(ele, checked, value) {
-                YohoListPage.go({
-                    gender: checked ? value : ''
-                });
-            }
-        });
-
-        $('.yoho-product-list .list-body .input-radio').check({
-            type: 'radio',
-            onChange: function(ele, checked, value) {
-                YohoListPage.go({
-                    sort: checked ? value : ''
-                });
-            }
-        });
-
-        $('.yoho-product-list .price-body .input-radio').check({
-            type: 'radio',
-            onChange: function(ele, checked, value) {
-                YohoListPage.go({
-                    price: checked ? value : ''
-                });
-            }
-        });
-
-        $('.yoho-product-list .size-body .input-radio').check({
-            type: 'radio',
-            onChange: function(ele, checked, value) {
-                YohoListPage.go({
-                    size: checked ? value : ''
-                });
-            }
-        });
-
-        $('.yoho-product-list .brand-list .input-radio').check({
-            type: 'radio',
-            onChange: function(ele, checked, value) {
-                if (!YohoListPage.mulitBrand) {
-                    YohoListPage.go({brand: value});
-                } else {
-                    YohoListPage.showBrandMulitBtn();
-                }
-            }
-        });
-
-        $('.yoho-product-list .color-body .input-radio').check({
-            type: 'radio',
-            onChange: function(ele, checked, value) {
-                YohoListPage.go({
-                    color: checked ? value : ''
-                });
-            }
-        });
-
-        YohoListPage.eventBind();
-    },
-    eventBind: function() {
-        $('.yoho-product-list .mulit-choose').click(function() {
-            YohoListPage.openBrandMulitChoose();
-        });
-
-        $('.yoho-product-list .brand-btns .cancel').click(function() {
-            YohoListPage.closeBrandMulitChoose();
-        });
-
-        $('.yoho-product-list .brand-btns .confirm').click(function() {
-            if (!$(this).hasClass('disable')) {
-                YohoListPage.go({
-                    brand: YohoListPage.getSelectBrands().join(',')
-                });
-            }
-        });
-
-        $('.yoho-product-list .brand-body input').on('keyup', function() {
-            YohoListPage.filterBrand($(this).val().toLowerCase());
-        });
-
-        $('.yoho-product-list .brand-letter-items .item').hover(function() {
-            $('.yoho-product-list .brand-letter-items .item').removeClass('select');
-            $(this).addClass('select');
-            YohoListPage.filterBrand($(this).data('value').toLowerCase());
-        });
-
-        $('.goods-area > .goods').mouseenter(function(e) {
-            YohoListPage.showGoodsWrapper(e);
-        });
-
-        $('.goods-wrapper').mouseleave(function(e) {
-            YohoListPage.hideGoodsWrapper(e);
-        });
-
-        $('.filter-area .filter-item').click(function() {
-            var key = $(this).data('key');
-            var data = {};
-
-            data[key] = '';
-            YohoListPage.go(data);
-        });
-
-        $('.filter-area .cancel').click(function() {
-            var data = {};
-
-            $('.filter-area .filter-item').each(function() {
-                var key = $(this).data('key');
-
-                data[key] = '';
-            });
-
-            YohoListPage.go(data);
-        });
-
-        $('.order-area .page').click(function() {
-            if (!$(this).hasClass('disable')) {
-                if ($(this).hasClass('page-pre')) {
-                    YohoListPage.go({
-                        page: YohoListPage.page - 1
-                    });
-                } else {
-                    YohoListPage.go({
-                        page: YohoListPage.page + 1
-                    });
-                }
-            }
-        });
-
-        $('.order-area .order').click(function() {
-            var order = $(this).data('order');
-            var target = $(this).data('target');
-            var orders = order.split(',');
-            var newOrder = '';
-
-            if (query.order === orders[0]) {
-                newOrder = orders[1] || '';
-            } else {
-                newOrder = orders[0];
-            }
-
-            $('.order-area .order').removeClass('selected');
-            $(this).addClass('selected');
-            $('.' + target).find('.iconfont').each(function() {
-                if ($(this).hasClass(newOrder)) {
-                    $(this).addClass('selected');
-                } else {
-                    $(this).removeClass('selected');
-                }
-            });
-
-            YohoListPage.go({
-                order: newOrder
-            });
-        });
-    },
-    openBrandMulitChoose: function() {
-        $('.yoho-product-list .mulit-choose').hide();
-        YohoListPage.mulitBrand = true;
-        YohoListPage.showBrandMulitBtn();
-    },
-    closeBrandMulitChoose: function() {
-        $('.yoho-product-list .mulit-choose').show();
-        $('.yoho-product-list .brand-btns').addClass('hide');
-
-        $('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
-        YohoListPage.mulitBrand = false;
-    },
-    showBrandMulitBtn: function() {
-        $('.brand-btns', this.rootDoc).removeClass('hide');
-        if (YohoListPage.getSelectBrands().length > 0) {
-            $('.brand-btns .confirm', this.rootDoc).removeClass('disable');
-        } else {
-            $('.brand-btns .confirm', this.rootDoc).addClass('disable');
-        }
-    },
-    filterBrand: function(letter) {
-        $('.yoho-product-list .brand-list .input-radio').each(function() {
-            if ($('label', this).text().toLowerCase().indexOf(letter) === 0) {
-                $(this).show();
-            } else {
-                $(this).hide();
-            }
-        });
-    },
-    getSelectBrands: function() {
-        let brands = [];
-
-        $('.input-radio .radio', this.brandsDoc).each(function() {
-            if ($(this).hasClass('checked')) {
-                brands.push($(this).parent().data('value'));
-            }
-        });
-        return brands;
-    },
-    showGoodsWrapper: function(e) {
-        var position = $(e.currentTarget).position();
-        var productId = $(e.currentTarget).data('id');
-
-        if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
-            YohoListPage.goodsWrapperState = false;
-        }
-
-        if (!YohoListPage.goodsWrapperState) {
-            YohoListPage.productId = productId;
-            position.top += 10;
-            $(this.goodsWrapper).css(position);
-            $('.goods', this.goodsWrapper).html($(e.currentTarget).html());
-            $('.goods-img-list', this.goodsWrapper).empty();
-            $(e.currentTarget).find('.goods-list i').each(function() {
-                $('.goods-img-list', this.goodsWrapper).append(
-                    '<img src="' + $(this).text() + '" width="60" height="80" alt="">');
-            });
-            $(this.goodsWrapper).show();
-            YohoListPage.goodsWrapperState = true;
-
-            $('.goods-img-list img', this.goodsWrapper).hover(function() {
-                $('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
-            });
-        }
-    },
-    hideGoodsWrapper: function() {
-        YohoListPage.goodsWrapperState = false;
-        $('.goods-area .goods-wrapper').hide();
-    },
-
-    go: function(q) {
-        var qs = $.extend(common.queryString(), q);
-
-        location.search = $.param(qs);
-    }
-};
-
-YohoListPage.init();
+require('./list/list-search');

+var $ = require('yoho-jquery');
+var common = require('../../common');
+
+var query = common.queryString();
+
+var YohoListPage = {
+    rootDoc: $('.yoho-product-list'),
+    brandsDoc: $('.yoho-product-list .brand-list'),
+    mulitBrand: false,
+    goodsWrapper: $('.goods-area .goods-wrapper'),
+    goodsWrapperState: false,
+    page: query.page || 1,
+    init: function() {
+        require('yoho-jquery-accordion');
+        require('../../plugins/check');
+        $('.yoho-ui-accordion', this.rootDoc).each(function() {
+            var opts = {
+                collapsible: true,
+                heightStyle: 'content'
+            };
+
+            if ($(this).hasClass('no-active')) {
+                opts.active = false;
+            }
+            $(this).accordion(opts);
+        });
+
+        $('.sex-body .input-radio', this.rootDoc).check({
+            type: 'radio',
+            onChange: function(ele, checked, value) {
+                YohoListPage.go({
+                    gender: checked ? value : ''
+                });
+            }
+        });
+
+        $('.list-body .input-radio', this.rootDoc).check({
+            type: 'radio',
+            onChange: function(ele, checked, value) {
+                YohoListPage.go({
+                    sort: checked ? value : ''
+                });
+            }
+        });
+
+        $('.price-body .input-radio', this.rootDoc).check({
+            type: 'radio',
+            onChange: function(ele, checked, value) {
+                YohoListPage.go({
+                    price: checked ? value : ''
+                });
+            }
+        });
+
+        $('.size-body .input-radio', this.rootDoc).check({
+            type: 'radio',
+            onChange: function(ele, checked, value) {
+                YohoListPage.go({
+                    size: checked ? value : ''
+                });
+            }
+        });
+
+        $('.brand-list .input-radio', this.rootDoc).check({
+            type: 'radio',
+            onChange: function(ele, checked, value) {
+                if (!YohoListPage.mulitBrand) {
+                    YohoListPage.go({brand: value});
+                } else {
+                    YohoListPage.showBrandMulitBtn();
+                }
+            }
+        });
+
+        $('.color-body .input-radio', this.rootDoc).check({
+            type: 'radio',
+            onChange: function(ele, checked, value) {
+                YohoListPage.go({
+                    color: checked ? value : ''
+                });
+            }
+        });
+
+        YohoListPage.eventBind();
+    },
+    eventBind: function() {
+        $('.mulit-choose', this.rootDoc).click(function() {
+            YohoListPage.openBrandMulitChoose();
+        });
+
+        $('.brand-btns .cancel', this.rootDoc).click(function() {
+            YohoListPage.closeBrandMulitChoose();
+        });
+
+        $('.brand-btns .confirm', this.rootDoc).click(function() {
+            if (!$(this).hasClass('disable')) {
+                YohoListPage.go({
+                    brand: YohoListPage.getSelectBrands().join(',')
+                });
+            }
+        });
+
+        $('.yoho-product-list .brand-body input').on('keyup', function() {
+            YohoListPage.filterBrand($(this).val().toLowerCase());
+        });
+
+        $('.yoho-product-list .brand-letter-items .item').hover(function() {
+            $('.yoho-product-list .brand-letter-items .item').removeClass('select');
+            $(this).addClass('select');
+            YohoListPage.filterBrand($(this).data('value').toLowerCase());
+        });
+
+        $('.goods-area > .goods').mouseenter(function(e) {
+            YohoListPage.showGoodsWrapper(e);
+        });
+
+        $('.goods-wrapper').mouseleave(function(e) {
+            YohoListPage.hideGoodsWrapper(e);
+        });
+
+        $('.filter-area .filter-item').click(function() {
+            var key = $(this).data('key');
+            var data = {};
+
+            data[key] = '';
+            YohoListPage.go(data);
+        });
+
+        $('.filter-area .cancel').click(function() {
+            var data = {};
+
+            $('.filter-area .filter-item').each(function() {
+                var key = $(this).data('key');
+
+                data[key] = '';
+            });
+
+            YohoListPage.go(data);
+        });
+
+        $('.order-area .page').click(function() {
+            if (!$(this).hasClass('disable')) {
+                if ($(this).hasClass('page-pre')) {
+                    YohoListPage.go({
+                        page: YohoListPage.page - 1
+                    });
+                } else {
+                    YohoListPage.go({
+                        page: YohoListPage.page + 1
+                    });
+                }
+            }
+        });
+
+        $('.order-area .order').click(function() {
+            var order = $(this).data('order');
+            var target = $(this).data('target');
+            var orders = order.split(',');
+            var newOrder = '';
+
+            if (query.order === orders[0]) {
+                newOrder = orders[1] || '';
+            } else {
+                newOrder = orders[0];
+            }
+
+            $('.order-area .order').removeClass('selected');
+            $(this).addClass('selected');
+            $('.' + target).find('.iconfont').each(function() {
+                if ($(this).hasClass(newOrder)) {
+                    $(this).addClass('selected');
+                } else {
+                    $(this).removeClass('selected');
+                }
+            });
+
+            YohoListPage.go({
+                order: newOrder
+            });
+        });
+    },
+    openBrandMulitChoose: function() {
+        $('.yoho-product-list .mulit-choose').hide();
+        YohoListPage.mulitBrand = true;
+        YohoListPage.showBrandMulitBtn();
+    },
+    closeBrandMulitChoose: function() {
+        $('.yoho-product-list .mulit-choose').show();
+        $('.yoho-product-list .brand-btns').addClass('hide');
+
+        $('.yoho-product-list .brand-list .input-radio').check('unCheckAll');
+        YohoListPage.mulitBrand = false;
+    },
+    showBrandMulitBtn: function() {
+        $('.brand-btns', this.rootDoc).removeClass('hide');
+        if (YohoListPage.getSelectBrands().length > 0) {
+            $('.brand-btns .confirm', this.rootDoc).removeClass('disable');
+        } else {
+            $('.brand-btns .confirm', this.rootDoc).addClass('disable');
+        }
+    },
+    filterBrand: function(letter) {
+        $('.yoho-product-list .brand-list .input-radio').each(function() {
+            if (letter === '0-9') {
+                var first = $('label', this).text().toLowerCase().charAt(0);
+
+                if ((first >= 'a' && first <= 'z') || (first >= 'A' && first <= 'Z')) {
+                    $(this).hide();
+                } else {
+                    $(this).show();
+                }
+            } else {
+                if ($('label', this).text().toLowerCase().indexOf(letter) === 0) {
+                    $(this).show();
+                } else {
+                    $(this).hide();
+                }
+            }
+        });
+    },
+    getSelectBrands: function() {
+        let brands = [];
+
+        $('.input-radio .radio', this.brandsDoc).each(function() {
+            if ($(this).hasClass('checked')) {
+                brands.push($(this).parent().data('value'));
+            }
+        });
+        return brands;
+    },
+    showGoodsWrapper: function(e) {
+        var position = $(e.currentTarget).position();
+        var productId = $(e.currentTarget).data('id');
+
+        if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
+            YohoListPage.goodsWrapperState = false;
+        }
+
+        if (!YohoListPage.goodsWrapperState) {
+            YohoListPage.productId = productId;
+            position.top += 10;
+            $(this.goodsWrapper).css(position);
+            $('.goods', this.goodsWrapper).html($(e.currentTarget).html());
+            $('.goods-img-list', this.goodsWrapper).empty();
+            $(e.currentTarget).find('.goods-list i').each(function() {
+                $('.goods-img-list', this.goodsWrapper).append(
+                    '<img src="' + $(this).text() + '" width="60" height="80" alt="">');
+            });
+            $(this.goodsWrapper).show();
+            YohoListPage.goodsWrapperState = true;
+
+            $('.goods-img-list img', this.goodsWrapper).hover(function() {
+                $('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
+            });
+        }
+    },
+    hideGoodsWrapper: function() {
+        YohoListPage.goodsWrapperState = false;
+        $('.goods-area .goods-wrapper').hide();
+    },
+
+    go: function(q) {
+        var qs = $.extend(common.queryString(), q);
+
+        location.search = $.param(qs);
+    }
+};
+
+YohoListPage.init();
+
+module.exports = YohoListPage;

+
+require('./list/list-search');

 @import 'list';
 @import 'item';
+@import 'shop-list';
 
 /* 组件 */
 @import 'brand-banner';

@@ -11,18 +11,19 @@
         }
     }
     .input-radio {
-        padding: 10px 0;
+        padding: 10px 1px;
 
         .round-color {
-            width: 16px;
-            height: 15px;
+            width: 22px;
+            height: 21px;
+            vertical-align: middle;
 
             .iconfont {
-                font-size: 16px;
+                font-size: 22px;
             }
 
             .iconfont.icon-cover {
-                font-size: 16px;
+                font-size: 22px;
             }
         }
     }
@@ -192,13 +193,16 @@
         .filter-item {
             display: inline-block;
             margin: 12px 10px;
-            padding: 10px 5px;
             font-size: 14px;
             border: 1px solid #adacad;
             background-color: #fff;
+            padding: 8px;
 
             span {
                 font-size: 14px;
+                display: inline-block;
+                height: 21px;
+                line-height: 21px;
             }
 
             span.label {
@@ -210,15 +214,17 @@
             }
 
             .round-color {
-                width: 16px;
-                height: 15px;
+                width: 22px;
+                height: 20px;
+                vertical-align: middle;
+                margin-left: 5px;
 
                 .iconfont {
-                    font-size: 16px;
+                    font-size: 22px;
                 }
 
                 .iconfont.icon-cover {
-                    font-size: 16px;
+                    font-size: 22px;
                 }
             }
         }
@@ -389,14 +395,6 @@
         }
     }
 
-    .c-blue {
-        color: blue;
-    }
-
-    .c-red {
-        color: red;
-    }
-
     .blk-pagination {
         text-align: center;
         margin: 20px 0 40px;

+.yoho-product-list {
+
+    .brand-banner {
+        width: 100%;
+        height: 150px;
+        background-size: 100% 100%;
+        background-color: #00A000;
+        position: relative;
+
+        p.opts {
+            display: block;
+            position: absolute;
+            right: 20px;
+            bottom: 30px;
+            font-size: 14px;
+
+            a,
+            .brand-fav {
+                color: #fff;
+                border: 1px solid #fff;
+                padding: 10px;
+                margin-left: 10px;
+
+                .iconfont {
+                    font-size: 14px;
+                }
+            }
+        }
+    }
+
+    .shop-menu {
+
+        border-bottom: 1px solid #eee;
+        margin-bottom: 30px;
+
+        li {
+            display: inline-block;
+            margin: 10px 30px;
+
+            a {
+                font-size: 12px;
+            }
+
+            .iconfont {
+                font-size: 14px;
+            }
+        }
+    }
+}