fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit c7fbfba81680c99a2c00e3a0a61c89d432241a0c 1 parent b5421d0d

product list show

Inline Side-by-side
Showing 10 changed files with 703 additions and 115 deletions
... ... @@ -16,156 +16,171 @@
{{/if}}
{{#if channel}}
<div class="channel">
<div class="channel section">
<span class="title">频道：</span>
{{# channel}}
<span class="item">
{{name}}
</span>
{{/ channel}}
<div class="attr-content clearfix">
{{#each channel}}
<a class="attr" href="{{href}}">
{{name}}
</a>
{{/each}}
</div>
</div>
{{/if}}
{{#if msort}}
<div class="msort">
{{#if sort}}
<div class="sort section">
<span class="title">分类：</span>
{{# msort}}
<span class="item">
{{name}}
</span>
{{/ msort}}
<div class="attr-content clearfix">
{{#each sort}}
<span class="attr" data-id="{{id}}">
{{name}}
</span>
{{/each}}
</div>
</div>
{{/if}}
{{#if brands}}
<div class="brands">
{{# brand}}
<div class="brand section">
<span class="title">品牌：</span>
<div class="brand-opt">
<p class="brands-index">
<span>全部</span>
<span>0 ~ 9</span>
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
<span>F</span>
<span>G</span>
<span>H</span>
<span>I</span>
<span>J</span>
<span>K</span>
<span>L</span>
<span>M</span>
<span>N</span>
<span>O</span>
<span>P</span>
<span>Q</span>
<span>R</span>
<span>S</span>
<span>T</span>
<span>U</span>
<span>V</span>
<span>W</span>
<span>X</span>
<span>Y</span>
<span>Z</span>
</p>
<div class="brand-search">
<input type="text">
<button>
<span class="iconfont"></span>
</button>
</div>
<span class="more">
<em>收起</em>
<i class="iconfont"></i>
</span>
</div>
<div class="brand-panel">
<ul class="brands-show">
{{#brands}}
<li>
<label for="{{name}}">{{text}}</label>
<input type="checkbox" name="{{name}}">
<div class="attr-content">
<ul class="default clearfix">
{{# default}}
<li class="attr">
<a href="{{href}}" title="{{name}}">{{name}}</a>
</li>
{{/ brands}}
{{/ default}}
</ul>
<button>确定</button>
<button>取消</button>
<div class="brand-opt">
<span id="brand-more" class="brand-more">
<em>更多</em>
<i class="iconfont">&#xe600;</i>
</span>
<span id="brand-multi" class="multi-select">多选 +</span>
</div>
<div class="brand-panel hide">
<div class="panel-head clearfix">
<p class="brands-index">
{{#each brandIndex}}
<span data-index="{{index}}">{{name}}</span>
{{/each}}
</p>
<div id="brand-search" class="brand-search">
<input type="text">
<span class="btn">
<i class="iconfont">&#xe611;</i>
</span>
</div>
</div>
<ul class="panel-body check-container clearfix">
{{# brandsShow}}
<li class="attr" data-href="{{href}}" data-id="{{id}}" data-index="{{index}}">
<span class="iconfont checkbox">&#xe613;</span>
<span title="{{name}}">{{name}}</span>
</li>
{{/ brandsShow}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
</div>
</div>
{{/if}}
{{/ brand}}
{{#if price}}
<div class="price">
<div class="price section">
<span class="title">价格：</span>
{{# price}}
<span>¥{{.}}</span>
{{/ price}}
<div class="attr-content clearfix">
{{# price}}
<a class="attr" href="{{href}}">¥{{name}}</a>
{{/ price}}
<div class="ud-price-range">
¥
<input type="text" class="min-limit">
-
<input type="text" class="max-limit">
<div class="ud-price-range">
¥
<input type="text" class="min limit">
<span class="price-sep">-</span>
<input type="text" class="max limit">
<button>确定</button>
<button class="price-sure hide">确定</button>
</div>
</div>
</div>
{{/if}}
{{#if color}}
<div class="color">
<div class="color section">
<span class="title">颜色：</span>
<ul>
<div class="attr-content clearfix">
{{# color}}
<li>
<div class="color-block {{name}}"></div>
{{text}}
</li>
<a class="attr" href="{{href}}">
<i class="color-block" style="background: {{rgb}}"></i>
{{name}}
</a>
{{/ color}}
</ul>
</div>
</div>
{{/if}}
{{#if size}}
<div class="size section">
<span class="title">尺码：</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
</div>
{{/if}}
{{#if seniorChose}}
<div class="senior">
<div class="senior section">
<span class="title">高级选项：</span>
<ul>
{{#each seniorChose}}
<li>
{{name}}
<span class="iconfont"></span>
</li>
{{/each}}
</ul>
<div>
{{#each seniorChose}}
<ul>
{{#each subSenior}}
<li {{#if >
<label for="{{name}}">{{text}}</label>
<input type="checkbox" name="{{name}}">
</li>
{{/each}}
</ul>
{{/each}}
</div>
<div class="attr-content">
<ul class="clearfix">
{{#each seniorChose}}
<li class="attr">
{{name}}
<span class="iconfont"></span>
</li>
{{/each}}
</ul>
<button>确定</button>
<button>取消</button>
<div class="sub-senior-wrap hide">
{{#each seniorChose}}
<div class="sub check-container" data-attr="{{attr}}">
<span class="multi-select">多选 +</span>
<ul class="clearfix">
{{#each sub}}
<li class="attr">
<span class="iconfont checkbox">&#xe613;</span>
<span data-id="{{id}}" data-href="{{href}}">{{name}}</span>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{/ filters}}
... ...
... ... @@ -14,6 +14,6 @@
{{!-- 搜索 --}}
{{#if searchListPage}}
<script>
seajs.use('js/product/search');
seajs.use('js/product/list');
</script>
{{/if}}
\ No newline at end of file
... ...
No preview for this file type
<?xml version="1.0" standalone="no"?>
<!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 Wed Nov 25 18:16:02 2015
By Ads
</metadata>
<defs>
<font id="iconfont" horiz-adv-x="1024" >
<font-face
font-family="iconfont"
font-weight="500"
font-stretch="normal"
units-per-em="1024"
panose-1="2 0 6 3 0 0 0 0 0 0"
ascent="896"
descent="-128"
x-height="792"
bbox="0 -214 1024 812"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E613"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".notdef" horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
<glyph glyph-name=".null" horiz-adv-x="0"
/>
<glyph glyph-name="nonmarkingreturn" horiz-adv-x="341"
/>
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
<glyph glyph-name="uniE600" unicode="&#xe600;"
d="M286 413l-46 -45l272 -272l272 272l-46 45l-226 -226z" />
<glyph glyph-name="uniE601" unicode="&#xe601;"
d="M387 62l45 -46l272 272l-272 272l-45 -46l226 -226z" />
<glyph glyph-name="uniE602" unicode="&#xe602;"
d="M766 109l-196 192l196 192l-61 60l-196 -193l-196 193l-60 -60l196 -192l-196 -192l60 -59l196 192l196 -192z" />
<glyph glyph-name="uniE603" unicode="&#xe603;"
d="M951 -7h-878l439 614z" />
<glyph glyph-name="uniE604" unicode="&#xe604;"
d="M512 -7l-439 614h878z" />
<glyph glyph-name="uniE605" unicode="&#xe605;"
d="M819 739v-878l-614 439z" />
<glyph glyph-name="uniE606" unicode="&#xe606;"
d="M205 -139v878l614 -439z" />
<glyph glyph-name="uniE607" unicode="&#xe607;"
d="M786 705l-415 -405l415 -404q19 -18 19 -44t-19 -45q-12 -12 -29 -16t-33.5 0t-29.5 16l-461 449q-19 18 -19 44.5t19 44.5l461 449q19 18 46 18t46 -18.5t19 -44.5t-19 -44zM786 705z" />
<glyph glyph-name="uniE608" unicode="&#xe608;"
d="M233 705q-19 18 -19 44t19 44.5t46 18.5t46 -18l461 -449q19 -18 19 -44.5t-19 -44.5l-461 -449q-19 -18 -46 -18t-46 18.5t-19 44.5t19 44l416 404zM233 705z" />
<glyph glyph-name="uniE609" unicode="&#xe609;"
d="M577 -214q-17 0 -30 11q-16 12 -18 31.5t11 35.5l357 443l-350 404q-13 15 -11.5 34.5t16.5 32.5q9 9 22 11.5t25 -2t20 -14.5l376 -433q12 -13 12 -30.5t-11 -30.5l-382 -475q-14 -18 -37 -18z" />
<glyph glyph-name="uniE60A" unicode="&#xe60a;"
d="M447 -214q-23 0 -37 18l-382 475q-8 8 -10 19t0.5 22t10.5 20l376 433q13 15 32.5 16.5t34.5 -11.5t16.5 -32.5t-11.5 -34.5l-350 -404l357 -443q9 -10 10.5 -22.5t-3 -24.5t-14.5 -20q-13 -11 -30 -11z" />
<glyph glyph-name="uniE60B" unicode="&#xe60b;"
d="M284 -69q-9 -9 -12.5 -21t0 -24t12.5 -20q13 -14 32 -14t32 14l397 401q5 6 8.5 12.5t4 13.5t0 14t-4 13.5t-8.5 12.5l-397 401q-13 14 -32 14t-32 -14q-6 -5 -9 -11.5t-4 -13.5t0 -14t4 -14t8 -12l351 -369l-350 -369v0zM284 -69z" />
<glyph glyph-name="uniE60C" unicode="&#xe60c;"
d="M745 669q13 14 13 33t-13 32q-9 9 -21 12.5t-23.5 0t-20.5 -12.5l-396 -401q-14 -14 -14 -33t14 -33l396 -401q14 -14 32.5 -14t32 13.5t13.5 32.5t-13 33l-351 369l351 369v0zM745 669z" />
<glyph glyph-name="uniE60D" unicode="&#xe60d;"
d="M513 654q-13 0 -22 -9t-9 -22v-311h-249q-6 0 -11.5 -2.5t-10 -6.5t-7 -10t-2.5 -12q0 -8 4.5 -15.5t11.5 -11.5t15 -4h280q12 0 21.5 9t9.5 22v342q0 8 -4.5 15.5t-11.5 11.5t-15 4zM513 778q-81 0 -157 -25t-137 -71t-107 -107t-71 -136.5t-25 -156.5q0 -101 39.5 -193
t106 -158.5t158.5 -105.5t193 -39t192.5 39t158 105.5t106 158.5t39.5 193t-39.5 193t-106 158t-158 105.5t-192.5 39.5zM513 -152q-118 0 -218 58t-158.5 158t-58.5 218q0 88 34.5 168.5t92.5 138.5t138.5 92.5t169.5 34.5q59 0 115 -15.5t103.5 -43.5t88 -68t68.5 -88
t43.5 -104t15.5 -115q0 -118 -58 -218t-158 -158t-218 -58z" />
<glyph glyph-name="uniE60E" unicode="&#xe60e;"
d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" />
<glyph glyph-name="uniE60F" unicode="&#xe60f;"
d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" />
<glyph glyph-name="uniE610" unicode="&#xe610;"
d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" />
<glyph glyph-name="uniE612" unicode="&#xe612;"
d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z
M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
<glyph glyph-name="uniE613" unicode="&#xe613;"
d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v730q0 61 -43 104t-104 43zM939 -65q0 -26 -18 -44t-44 -18h-730q-26 0 -44 18t-18 44v730q0 17 8.5 31t22.5 22.5t31 8.5h730q26 0 44 -18t18 -44v-730z" />
</font>
</defs></svg>
... ...
No preview for this file type
No preview for this file type
... ... @@ -2,4 +2,91 @@
* 商品列表页
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/11/23
*/
\ No newline at end of file
*/
var $ = require('jquery');
var checkUnicode = {
unchecked: '&#xe613;',
checked: '&#xe612;'
},
moreUnicode = {
up: '&#xe610;',
down: '&#xe600;'
};
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandMore = $('#brand-more');
var $brandMoreTxt, $brandMoreIcon;
//显示更多品牌面板
function brandShowMore() {
$brandDefault.addClass('hide');
$brandPanel.removeClass('hide');
}
//隐藏更多品牌面板
function brandHideMore() {
$brandPanel.addClass('hide');
$brandDefault.removeClass('hide');
}
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr', function() {
return false;
});
//checkbox
$('.check-container').on('click', '.attr', function() {
var $check = $(this).find('.checkbox');
$check.toggleClass('checked');
if ($check.hasClass('checked')) {
$check.html(checkUnicode.checked);
} else {
$check.html(checkUnicode.unchecked);
}
});
//品牌多选
$('#brand-multi').click(function() {
if ($brandPanel.css('display') === 'none') {
//显示品牌面板
brandShowMore();
}
$brandPanel.addClass('multi'); //显示出checkbox
$(this).addClass('hide');
});
$brandMore.click(function() {
var $this = $(this);
if ($this.hasClass('more')) {
brandHideMore();
$brandMoreTxt.text('更多');
$brandMoreIcon.html(moreUnicode.down);
} else {
brandShowMore();
$brandMoreTxt.text('收起');
$brandMoreIcon.html(moreUnicode.up);
}
$(this).toggleClass('more');
});
//高级选项多选
$('.sub-senior-wrap').on('click', '.multi-select', function() {
});
\ No newline at end of file
... ...
... ... @@ -6,6 +6,25 @@ body {
font-family: arial,"Microsoft YaHei";
}
@font-face {
font-family: "iconfont";
src: font-url('iconfont.eot'); /* IE9*/
src: font-url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
font-url('iconfont.woff') format('woff'), /* chrome、firefox */
font-url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
font-url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
.clearfix:before,
.clearfix:after {
content: "";
... ... @@ -26,6 +45,11 @@ ol, ul {
a {
text-decoration: none;
color: #000;
}
.hide {
display: none;
}
a:focus {
... ...
.products-page {
.filter-box {
border: 1px solid #dfdfdf;
}
.section {
padding: 10px 15px;
font-size: 14px;
border-top: 1px solid #dfdfdf;
&:first-child {
border-top: none;
}
}
.title {
float: left;
width: 90px;
line-height: 30px;
}
.attr-content {
margin-left: 90px;
}
.multi-select {
display: inline-block;
width: 60px;
height: 18px;
line-height: 18px;
border: 1px solid #000;
text-align: center;
cursor: pointer;
}
.attr {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
line-height: 30px;
cursor: pointer;
&:first-child {
margin-left: 0;
}
-moz-user-select: none;
}
.channel {
line-height: 35px;
background: #eaeceb;
.title, .attr {
line-height: 35px;
}
}
.brand {
position: relative;
.attr {
box-sizing: border-box;
width: 20%;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attr-content {
max-width: 900px;
}
.brand-opt {
position: absolute;
right: 20px;
top: 15px;
}
.brand-more {
margin-right: 20px;
cursor: pointer;
}
.brands-index {
float: left;
line-height: 30px;
span {
margin: 0 5px;
&:first-child {
margin-left: 10px;
}
}
}
.brand-search {
float: left;
height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 15px;
input {
float: left;
border: none;
width: 100px;
height: 18px;
padding: 0;
}
.btn {
display: inline-block;
width: 55px;
height: 18px;
background: #b0b0b0;
color: #fff;
text-align: center;
}
}
.panel-body {
padding: 15px 20px;
margin-top: 5px;
background: #f4f7f6;
}
}
.btns {
display: none;
margin-top: 10px;
text-align: center;
}
.multi .btns {
display: block;
}
.multi-select-ok, .multi-select-cancel {
width: 55px;
height: 24px;
border: none;
background: #000;
color: #fff;
font-size: 15px;
margin-right: 15px;
}
.ud-price-range {
margin-top: 2px;
}
.limit {
height: 22px;
width: 42px;
border: 1px solid #ccc;
padding: 0;
}
.price-sep {
margin: 0 5px;
}
.price-sure {
height: 24px;
width: 44px;
border: 1px solid #e0e0e0;
background: #fff;
color: #666;
margin-left: 10px;
}
.color-block {
display: inline-block;
height: 22px;
width: 22px;
border: 1px solid #ccc;
margin-bottom: -6px;
margin-right: 5px;
}
.sub-senior-wrap {
position: relative;
padding: 15px;
.sub {
max-width: 950px;
}
.multi-select {
position: absolute;
top: 15px;
right: 15px;
}
}
.checkbox {
display: none;
}
.multi .checkbox {
display: inline;
}
}
\ No newline at end of file
... ...
... ... @@ -10,6 +10,183 @@ class IndexController extends AbstractAction
*/
public function indexAction()
{
$this->_view->display('list');
$data = array(
'searchListPage' => true,
'filters' => array(
'channel' => array(
array(
'href' => '/?gender=1,3',
'name' => 'BOYS'
),
array(
'href' => '/?gender=2,3',
'name' => 'GIRLS'
),
array(
'href' => '',
'name' => 'KIDS'
),
array(
'href' => '',
'name' => 'LIFESTYLE'
)
),
'sort' => array(
array(
'id' => '1',
'name' => '上衣'
),
array(
'id' => '2',
'name' => '裤子'
),
array(
'id' => '3',
'name' => '连衣裙'
),
array(
'id' => '4',
'name' => '鞋'
)
),
'brand' => array(
'default' => array(
array(
'href' => '',
'name' => 'CLOT'
),
array(
'href' => '',
'name' => 'ABLE JEANS'
),
array(
'href' => '',
'name' => 'Eight Guys'
),
array(
'href' => '',
'name' => 'FAIRWHALE JEANS'
),
array(
'href' => '',
'name' => '鬼洗'
),
array(
'href' => '',
'name' => '金银帝国Imperial Taels'
),
array(
'href' => '',
'name' => 'F.L.Y.D'
),
array(
'href' => '',
'name' => 'Tapenade特芙娜'
),
array(
'href' => '',
'name' => 'Adidas Originals'
)
),
'brandIndex' => array(
array(
'index' => 'all',
'name' => '全部'
),
array(
'index' => '0-9',
'name' => '0 ~ 9'
),
array(
'index' => 'a',
'name' => 'A'
)
),
'brandsShow' => array(
array(
'id' => '1',
'href' => '',
'index' => '0-9',
'name' => '5cm'
),
array(
'id' => '2',
'href' => '',
'index' => 'k',
'name' => 'KTZ'
),
array(
'id' => '3',
'href' => '',
'index' => 't',
'name' => 'Tapenade特芙娜'
),
array(
'id' => '4',
'href' => '',
'index' => 'j',
'name' => '金银帝国Imperial Taels'
),
array(
'id' => '5',
'href' => '',
'index' => 'a',
'name' => 'ABLE JEANS'
)
)
),
'price' => array(
array(
'href' => '',
'name' => '0-239'
),
array(
'href' => '',
'name' => '240-329'
)
),
'color' => array(
array(
'href' => '',
'name' => '黑色',
'rgb' => '#000'
),
array(
'href' => '',
'name' => '红色',
'rgb' => '#f00'
)
),
'size' => array(
array(
'href' => '',
'name' => 'S'
),
array(
'href' => '',
'name' => 'L'
)
),
'seniorChose' => array(
array(
'attr' => 'style',
'name' => '风格',
'sub' => array(
array(
'id' => '',
'href' => '',
'name' => '街头'
),
array(
'id' => '',
'href' => '',
'name' => '简约'
)
)
)
)
)
);
$this->_view->display('list', $data);
}
}
\ No newline at end of file
... ...