fe / YOHOBUYPC · Commits

Go to a project

Authored by lore-w
Commit 67b7729e66394d102a2c16008a6bb72971c11b82 1 parent 88a2fe34

商品列表左侧分类导航/数据结构

Inline Side-by-side
Showing 6 changed files with 378 additions and 6 deletions
... ... @@ -251,6 +251,66 @@
preHref: '', //若当前为第一页，不传此参数
nexHref: '' //若当前为最后一页，不传此参数
},
// 商品导航列表
allSort: {
//全部品类
updateNum: 2, //更新总数
list: [
{
name: 'AA', //一级分类
num: 12 //一级分类更新数目
childList: [
{
name: 'AAA', //二级分类
href: '##', //二级分类跳转链接
num: 12 //二级分类更新数目
}
]
}
]
},
advNav: {
//图片导航
advNavTitle: 'AA', 图片导航标题
list: [
{
href: '',
src: '' // 图片地址
}
]
},
advPic: {
//图片banner
advPicTitle: 'AA', 图片banner标题
list: [
{
href: '',
src: '' // 图片地址
}
]
},
newSales: {
//一周新品上架
updateNum: 123,
list: [
{
name: 'AAA',
href: '',
num: 12,
}
]
},
allDiscount: {
//全部折扣
updateNum: 111,
list: [
{
name: 'VVV',
href: '##',
num: 11
}
]
}
//商品列表
goods: [
//商品信息
... ...
... ... @@ -30,7 +30,75 @@
{{{brandIntro}}}
</div>
{{^}}
<div class="list-left pull-left"></div>
<div class="list-left pull-left">
{{# allDiscount}}
<div class="sort-container">
<ul class="sort-child-list new-sale">
<li><a href="{{href}}">全部折扣</a><span>{{updateNum}}</span></li>
{{#each list}}
<li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
{{/each}}
</ul>
</div>
{{/ allDiscount}}
{{# newSales}}
<div class="sort-container">
<h2>一周新品上架<span>{{updateNum}}</span></h2>
<ul class="sort-child-list new-sale">
{{#each list}}
<li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
{{/each}}
</ul>
</div>
{{/ newSales}}
{{# allSort}}
<div class="sort-container">
<h2>全部品类<span>{{updateNum}}</span></h2>
<ul>
{{#each list}}
<li class="product-list-nav">
<h3>
<span class="icon-triangle"></span>
{{name}}<span>{{num}}</span>
</h3>
<ul class="sort-child-list">
{{#each childList}}
<li>
<a href="{{href}}">{{name}}</a>
<span>{{num}}</span>
</li>
{{/each}}
</ul>
</li>
{{/each}}
</ul>
</div>
{{/ allSort}}
{{# advNav}}
{{# advNavTitle}}
<h2 class="nav-pic-title">{{.}}</h2>
{{/advNavTitle}}
<ul class="pic-nav">
{{#each list}}
<li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
{{/each}}
</ul>
{{/advNav}}
{{#advPic}}
{{# advPicTitle}}
<h2 class="nav-pic-title">{{.}}</h2>
{{/ advPicTitle}}
<ul class="pic-nav">
{{#each list}}
<li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
{{/each}}
</ul>
{{/advPic}}
</div>
<div class="list-right pull-right">
{{# shopEntry}}
<div class="shop-entry clearfix">
... ...
... ... @@ -14,7 +14,7 @@ fonts_dir = "font"
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# sourcemap = true
sourcemap = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
... ...
... ... @@ -11,9 +11,10 @@ var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
$goodSelectColor = $goodsContainer.find('.good-select-color');
$goodSelectColor = $goodsContainer.find('.good-select-color'),
$productListNav = $('.product-list-nav');
var MouseOver = productEvent($goodItem, 5);
var productList = productEvent($goodItem, 5);
/**
* @description 构造商品颜色列表的html结构
... ... @@ -59,7 +60,7 @@ function createColorList(data) {
};
}
MouseOver.addHandler('MouseEnter', function(event) {
productList.addHandler('MouseEnter', function(event) {
var itemMr = 10, //list的右边距
itemMb = 35, //list的下边距
... ... @@ -88,7 +89,7 @@ MouseOver.addHandler('MouseEnter', function(event) {
$goodSelectColor.append($(ulStr));
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
//
//todo
diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
if (diffWidth <= 0) {
wrapperX = wrapperX + diffWidth;
... ... @@ -110,3 +111,12 @@ $goodItemWrapper.mouseleave(function() {
display: 'none'
});
});
// 左侧导航
$productListNav.click(function() {
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
\ No newline at end of file
... ...
.product-list-page {
.list-left {
width: 160px;
.sort-container {
width: 100%;
font-size: 12px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 10px;
h2 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
span {
color: #bbb;
padding-left: 5px;
}
}
.product-list-nav {
h3 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
text-indent: 10px;
cursor: pointer;
span {
color: #bbb;
padding-left: 5px;
&.icon-triangle {
display: inline-block;
padding-left: 0;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 6px solid #000;
border-bottom: 6px solid #fff;
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
@include transition(transform .3s)
}
}
}
&.active {
h3 {
span {
&.icon-triangle {
@include rotate(90deg)
}
}
}
ul.sort-child-list {
display: block;
}
}
}
ul.sort-child-list {
display: none;
&.new-sale {
display: block;
}
li {
color: #bbb;
span {
padding-left: 5px;
}
}
a {
color: #666;
padding-left: 10px;
height: 22px;
line-height: 22px;
}
}
}
.nav-pic-title {
height: 35px;
line-height: 35px;
color: #000;
font-weight: bold;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
}
.pic-nav {
display: block;
li, img {
display: block;
width: 100%;
overflow: hidden;
}
}
}
.list-right {
... ...
... ... @@ -763,6 +763,134 @@ class IndexController extends AbstractAction
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
)
),
'allSort' => array(
'updateNum' => 145,
'list' => array(
array(
'name' => '裙装',
'num' => '10',
'childList' => array(
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
),
array(
'name' => '裙装BBB',
'num' => '10',
'childList' => array(
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
)
)
),
'advNav' => array(
'advNavTitle' => 'AAAA',
'list' => array(
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
),
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
)
)
),
'advPic' => array(
'advPicTitle' => false,
'list' => array(
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
),
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
)
)
),
'newSales' => array(
'updateNum' => 130,
'list' => array(
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
),
'allDiscount' => array(
'updateNum' => 130,
'list' => array(
array(
'name' => '1~3折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '4~6折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '7折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
)
)
);
... ...