fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit d304d9ac31b89f1f4cdcadbc928dc1618b5ea17f 1 parent fdecd612

添加列表页面，完成筛选部分样式

Inline Side-by-side
Showing 12 changed files with 498 additions and 1 deletions
  1 +
  2 +'use strict';
  3 +
  4 +const headerModel = require('../../../doraemon/models/header');
  5 +const _ = require('lodash');
  6 +
  7 +const list = {
  8 + index: (req, res) => {
  9 + let channel = req.query.channel || req.cookies._Channel || 'boys';
  10 +
  11 + headerModel.requestHeaderData(channel).then(header => {
  12 +
  13 +
  14 + res.render('list', _.assign(header, {
  15 + navPath: {
  16 + nav: true,
  17 + pathNav: [
  18 + {
  19 + link: true,
  20 + href: '',
  21 + pathTitle: '',
  22 + name: 'MEN首页'
  23 + },
  24 + {
  25 + link: true,
  26 + href: '',
  27 + pathTitle: '',
  28 + name: '咨询'
  29 + },
  30 + {
  31 + link: false,
  32 + href: '',
  33 + pathTitle: '',
  34 + name: '咨询'
  35 + }
  36 + ]
  37 + }
  38 + }));
  39 + });
  40 + }
  41 +};
  42 +
  43 +module.exports = list;
  1 +/**
  2 + * sub app product
  3 + * @author: jiangfeng<jeff.jiang@yoho.cn>
  4 + * @date: 2016/07/02
  5 + */
  6 +
  7 +var express = require('express'),
  8 + path = require('path'),
  9 + hbs = require('express-handlebars');
  10 +
  11 +var app = express();
  12 +
  13 +// set view engin
  14 +var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
  15 +var partials = path.join(__dirname, './views'); // parent view root
  16 +
  17 +app.on('mount', function(parent) {
  18 + delete parent.locals.settings; // 不继承父 App 的设置
  19 + Object.assign(app.locals, parent.locals);
  20 +});
  21 +
  22 +app.set('views', path.join(__dirname, 'views/action'));
  23 +app.engine('.hbs', hbs({
  24 + extname: '.hbs',
  25 + defaultLayout: 'layout',
  26 + layoutsDir: doraemon,
  27 + partialsDir: [`${partials}/partial`, `${doraemon}/partial`],
  28 + helpers: global.yoho.helpers
  29 +}));
  30 +
  31 +// router
  32 +app.use(require('./router'));
  33 +
  34 +module.exports = app;
  1 +/**
  2 + * router of sub app partial
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2016/06/30
  5 + */
  6 +
  7 +'use strict';
  8 +
  9 +const router = require('express').Router(); // eslint-disable-line
  10 +const cRoot = './controllers';
  11 +const list = require(cRoot + '/list');
  12 +
  13 +// Your controller here
  14 +router.get('/list', list.index); // 组件demo页
  15 +
  16 +module.exports = router;
  1 +<div class="yoho-product-list">
  2 + <div class="center-content">
  3 + {{# navPath}}
  4 + {{> path-nav}}
  5 + {{/ navPath}}
  6 + </div>
  7 + <div class="center-content clearfix">
  8 + <div class="left">
  9 + {{> list/filter}}
  10 + </div>
  11 + <div class="right">
  12 +
  13 + </div>
  14 + </div>
  15 +</div>
  1 +<div class="yoho-ui-accordion">
  2 + <h3>适用人群</h3>
  3 + <div class="body">
  4 + <div class="input-radio">
  5 + <span class="iconfont radio checked">&#xe603;</span>
  6 + <label>男士</label>
  7 + </div>
  8 + <div class="input-radio">
  9 + <span class="iconfont radio">&#xe604;</span>
  10 + <label>女士</label>
  11 + </div>
  12 + </div>
  13 +</div>
  14 +
  15 +<div class="blank-div"></div>
  16 +
  17 +<div class="title">全部品类</div>
  18 +<div class="yoho-ui-accordion">
  19 + <h3>上衣</h3>
  20 + <div class="body">
  21 + <div class="input-radio">
  22 + <span class="iconfont radio checked">&#xe603;</span>
  23 + <label>男士</label>
  24 + </div>
  25 + <div class="input-radio">
  26 + <span class="iconfont radio">&#xe604;</span>
  27 + <label>女士</label>
  28 + </div>
  29 + </div>
  30 + <h3>裤装</h3>
  31 + <div class="body">
  32 + <div class="list-body">
  33 + <div class="input-radio">
  34 + <span class="iconfont radio checked">&#xe603;</span>
  35 + <label>男士</label>
  36 + </div>
  37 + <div class="input-radio">
  38 + <span class="iconfont radio">&#xe604;</span>
  39 + <label>女士</label>
  40 + </div>
  41 + <div class="input-radio">
  42 + <span class="iconfont radio">&#xe604;</span>
  43 + <label>女士</label>
  44 + </div>
  45 + <div class="input-radio">
  46 + <span class="iconfont radio">&#xe604;</span>
  47 + <label>女士</label>
  48 + </div>
  49 + <div class="input-radio">
  50 + <span class="iconfont radio">&#xe604;</span>
  51 + <label>女士</label>
  52 + </div>
  53 + <div class="input-radio">
  54 + <span class="iconfont radio">&#xe604;</span>
  55 + <label>女士</label>
  56 + </div>
  57 + <div class="input-radio">
  58 + <span class="iconfont radio">&#xe604;</span>
  59 + <label>女士</label>
  60 + </div>
  61 + <div class="input-radio">
  62 + <span class="iconfont radio">&#xe604;</span>
  63 + <label>女士</label>
  64 + </div>
  65 + <div class="input-radio">
  66 + <span class="iconfont radio">&#xe604;</span>
  67 + <label>女士</label>
  68 + </div>
  69 + </div>
  70 + </div>
  71 +</div>
  72 +
  73 +<div class="blank-div"></div>
  74 +
  75 +<div class="yoho-ui-accordion">
  76 + <h3>品牌</h3>
  77 + <div class="body">
  78 + <div class="brand-body">
  79 + <input type="text" class="brand-search" placeholder="输入您要查找的品牌">
  80 + </div>
  81 + <div class="sub-items">
  82 + <span class="item">全部</span>
  83 + <span class="item">0-9</span>
  84 + <span class="item">A</span>
  85 + <span class="item">B</span>
  86 + <span class="item">C</span>
  87 + <span class="item">D</span>
  88 + <span class="item">E</span>
  89 + <span class="item">F</span>
  90 + <span class="item">G</span>
  91 + <span class="item">H</span>
  92 + <span class="item">I</span>
  93 + <span class="item">J</span>
  94 + <span class="item">K</span>
  95 + <span class="item">L</span>
  96 + <span class="item">M</span>
  97 + <span class="item">N</span>
  98 + <span class="item">O</span>
  99 + <span class="item">P</span>
  100 + <span class="item">A</span>
  101 + <span class="item">A</span>
  102 + <span class="item">A</span>
  103 + <span class="item">A</span>
  104 + <span class="item">A</span>
  105 + <span class="item">A</span>
  106 + <span class="item">A</span>
  107 + </div>
  108 + <div class="brand-list">
  109 + <div class="input-radio">
  110 + <span class="iconfont radio checked">&#xe603;</span>
  111 + <label>男士</label>
  112 + </div>
  113 + <div class="input-radio">
  114 + <span class="iconfont radio">&#xe604;</span>
  115 + <label>女士</label>
  116 + </div>
  117 + <div class="input-radio">
  118 + <span class="iconfont radio">&#xe604;</span>
  119 + <label>女士</label>
  120 + </div>
  121 + <div class="input-radio">
  122 + <span class="iconfont radio">&#xe604;</span>
  123 + <label>女士</label>
  124 + </div>
  125 + <div class="input-radio">
  126 + <span class="iconfont radio">&#xe604;</span>
  127 + <label>女士</label>
  128 + </div>
  129 + <div class="input-radio">
  130 + <span class="iconfont radio">&#xe604;</span>
  131 + <label>女士</label>
  132 + </div>
  133 + <div class="input-radio">
  134 + <span class="iconfont radio">&#xe604;</span>
  135 + <label>女士</label>
  136 + </div>
  137 + <div class="input-radio">
  138 + <span class="iconfont radio">&#xe604;</span>
  139 + <label>女士</label>
  140 + </div>
  141 + <div class="input-radio">
  142 + <span class="iconfont radio">&#xe604;</span>
  143 + <label>女士</label>
  144 + </div>
  145 + </div>
  146 + <div class="brand-btns">
  147 + <span class="btn disable large">确定</span>
  148 + <span class="btn large">取消</span>
  149 + </div>
  150 + </div>
  151 +</div>
  152 +
  153 +<div class="yoho-ui-accordion">
  154 + <h3>价格</h3>
  155 + <div class="body">
  156 + <div class="input-radio">
  157 + <span class="iconfont radio checked">&#xe603;</span>
  158 + <label>¥0-¥1000</label>
  159 + </div>
  160 + <div class="input-radio">
  161 + <span class="iconfont radio">&#xe604;</span>
  162 + <label>¥1001-¥2000</label>
  163 + </div>
  164 + <div class="input-radio">
  165 + <span class="iconfont radio">&#xe604;</span>
  166 + <label>¥2001-¥4000</label>
  167 + </div>
  168 + <div class="price-btns">
  169 + <div class="price-input inline-block">
  170 + <span>¥</span>
  171 + <input type="text">
  172 + </div>
  173 + <span>－</span>
  174 + <div class="price-input inline-block">
  175 + <span>¥</span>
  176 + <input type="text">
  177 + </div>
  178 + <span class="btn large">确定</span>
  179 + </div>
  180 + </div>
  181 +</div>
  182 +
  183 +<div class="yoho-ui-accordion">
  184 + <h3>尺码</h3>
  185 + <div class="body">
  186 + <div class="size-body">
  187 + <div class="input-radio">
  188 + <span class="iconfont radio checked">&#xe603;</span>
  189 + <label>M</label>
  190 + </div>
  191 + <div class="input-radio">
  192 + <span class="iconfont radio">&#xe604;</span>
  193 + <label>L</label>
  194 + </div>
  195 + <div class="input-radio">
  196 + <span class="iconfont radio">&#xe604;</span>
  197 + <label>XL</label>
  198 + </div>
  199 + </div>
  200 + </div>
  201 +</div>
  202 +
  203 +<div class="yoho-ui-accordion">
  204 + <h3>颜色</h3>
  205 + <div class="body">
  206 + <div class="color-body">
  207 + <div class="input-radio">
  208 + <span class="iconfont radio checked">&#xe611;</span>
  209 + <label>黑色</label>
  210 + </div>
  211 + <div class="input-radio">
  212 + <span class="iconfont radio c-blue">&#xe611;</span>
  213 + <label>蓝色</label>
  214 + </div>
  215 + <div class="input-radio">
  216 + <span class="iconfont radio c-red">&#xe604;</span>
  217 + <label>红色</label>
  218 + </div>
  219 + </div>
  220 + </div>
  221 +</div>
@@ -10,4 +10,5 @@ module.exports = app => { @@ -10,4 +10,5 @@ module.exports = app => {
10 app.use('/partial', require('./apps/partial')); // 组件demo 10 app.use('/partial', require('./apps/partial')); // 组件demo
11 11
12 // 业务模块 12 // 业务模块
  13 + app.use('/product', require('./apps/product'));
13 }; 14 };
@@ -92,6 +92,7 @@ @@ -92,6 +92,7 @@
92 "webpack-stream": "^3.1.0", 92 "webpack-stream": "^3.1.0",
93 "yoho-handlebars": "^4.0.5", 93 "yoho-handlebars": "^4.0.5",
94 "yoho-jquery": "^1.12.4", 94 "yoho-jquery": "^1.12.4",
  95 + "yoho-jquery-accordion": "0.0.1",
95 "yoho-jquery-lazyload": "^1.9.7", 96 "yoho-jquery-lazyload": "^1.9.7",
96 "yoho-slider": "0.0.2" 97 "yoho-slider": "0.0.2"
97 } 98 }
  1 +
  2 +var $ = require('yoho-jquery');
  3 +
  4 +require('yoho-jquery-accordion');
  5 +
  6 +$('.yoho-ui-accordion').accordion({
  7 + collapsible: true,
  8 + heightStyle: 'content'
  9 +});
@@ -6,3 +6,5 @@ @@ -6,3 +6,5 @@
6 /* 模块 */ 6 /* 模块 */
7 @import "base"; 7 @import "base";
8 @import "components/index"; 8 @import "components/index";
  9 +
  10 +@import "product/index";
  1 +.yoho-product-list {
  2 + .center-content {
  3 + .left {
  4 + width: 250px;
  5 + }
  6 + .right {
  7 + width: 850px;
  8 + }
  9 + }
  10 + .input-radio {
  11 + padding: 10px 0;
  12 + }
  13 + .input-radio span {
  14 + margin-left: 0;
  15 + }
  16 + .input-radio label {
  17 + font-size: 14px;
  18 + font-weight: 700;
  19 + }
  20 + .blank-div {
  21 + height: 70px;
  22 + }
  23 + .title {
  24 + font-size: 14px;
  25 + font-weight: 700;
  26 + height: 40px;
  27 + line-height: 40px;
  28 + border-bottom: 1px solid #eee;
  29 + }
  30 +
  31 + .list-body,
  32 + .size-body,
  33 + .color-body {
  34 + max-height: 260px;
  35 + overflow-y: auto;
  36 + }
  37 + .brand-body {
  38 + margin: 5px 0;
  39 + .brand-search {
  40 + border: 0;
  41 + background-color: #e3e3e3;
  42 + width: 100%;
  43 + height: 40px;
  44 + padding: 0 8px;
  45 + color: #333;
  46 + font-weight: 700;
  47 + }
  48 + }
  49 + .sub-items {
  50 + margin: 15px 0;
  51 + font-size: 12px;
  52 + font-weight: bolder;
  53 + span {
  54 + margin-right: 10px;
  55 + line-height: 30px;
  56 + }
  57 + }
  58 + .brand-list {
  59 + max-height: 260px;
  60 + overflow-y: auto;
  61 + }
  62 + .brand-btns {
  63 + text-align: center;
  64 + margin-top: 10px;
  65 +
  66 + .btn {
  67 + margin: 0 10px;
  68 + }
  69 + }
  70 + .btn {
  71 + display: inline-block;
  72 + }
  73 + .btn.large {
  74 + height: 38px;
  75 + line-height: 38px;
  76 + font-size: 14px;
  77 + }
  78 + .price-btns {
  79 +
  80 + .price-input {
  81 + background-color: #eee;
  82 + width: 72px;
  83 + height: 38px;
  84 + line-height: 38px;
  85 +
  86 + span {
  87 + height: 36px;
  88 + line-height: 36px;
  89 + margin-top: 1px;
  90 + display: inline-block;
  91 + padding: 0 3px;
  92 + }
  93 +
  94 + input {
  95 + border: 0;
  96 + background-color: transparent;
  97 + width: 50px;
  98 + height: 38px;
  99 + line-height: 38px;
  100 + padding: 0;
  101 + font-size: 14px;
  102 + font-family: 'BrownStd', '黑体';
  103 + }
  104 + }
  105 +
  106 + .btn {
  107 + margin-left: 4px;
  108 + }
  109 + }
  110 + .yoho-ui-accordion {
  111 + h3 {
  112 + font-size: 14px;
  113 + font-weight: 700;
  114 + height: 40px;
  115 + line-height: 40px;
  116 + border-bottom: 1px solid #eee;
  117 + display: block;
  118 + cursor: pointer;
  119 + position: relative;
  120 + .ui-accordion-header-icon {
  121 + position: absolute;
  122 + right: 0.5em;
  123 + top: 50%;
  124 + margin-top: -20px;
  125 + }
  126 + .ui-accordion-header-icon:after {
  127 + font-family: "iconfont" !important;
  128 + display: inline-block;
  129 + content: "\e616";
  130 + }
  131 + }
  132 +
  133 + h3.ui-accordion-header-active {
  134 + .ui-accordion-header-icon:after {
  135 + font-family: "iconfont" !important;
  136 + display: inline-block;
  137 + content: "\e617";
  138 + }
  139 + }
  140 + > .body {
  141 + padding: 10px 0;
  142 + border-bottom: 1px solid #eee;
  143 + }
  144 + }
  145 +
  146 + .c-blue {
  147 + color: blue;
  148 + }
  149 +
  150 + .c-red {
  151 + color: red;
  152 + }
  153 +}
@@ -23,7 +23,8 @@ shelljs.ls(path.join(__dirname, '/js/**/*.page.js')).forEach((f) => { @@ -23,7 +23,8 @@ shelljs.ls(path.join(__dirname, '/js/**/*.page.js')).forEach((f) => {
23 'yoho-handlebars', 23 'yoho-handlebars',
24 'yoho-jquery', 24 'yoho-jquery',
25 'yoho-jquery-lazyload', 25 'yoho-jquery-lazyload',
26 - 'yoho-slider' 26 + 'yoho-slider',
  27 + 'yoho-jquery-accordion'
27 ]; 28 ];
28 }); 29 });
29 30