fe / YOHOBUYWAP · Commits

Go to a project

Authored by 张丽霞
Commit a442e145f0101cec69d023c4f613e7848f9a9944 1 parent f9ef1dd7

商品分类模版

Inline Side-by-side
Showing 10 changed files with 344 additions and 5 deletions
... ... @@ -10,4 +10,5 @@ require('./list');
require('./detail/detail');
require('./detail/consultform');
require('./newsale/hot-rank');
require('./product-category');
... ...
/**
* 分类
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/14
*/
var $ = require('jquery');
var $categoryContainer = $('.category-container'),
$contents = $categoryContainer.children('.content'),
$subLevelItem = $categoryContainer.find('.sub-level li'),
$primaryItem = $categoryContainer.find('.primary-level li');
var $curContent = $contents.not('.hide');
//初始化container高度
(function() {
var $header = $('.yoho-header'),
$search = $('#search-input');
var h = $(window).height() - $header.outerHeight() - $search.outerHeight() - $nav.outerHeight();
$categoryContainer.css('min-height', h);
$contents.height(h);
}());
$('.category-container').bind('contextmenu', function(e) {
return false;
});
$categoryContainer.on('touchend', function(e) {
var $this = $(e.target),
$subLevel,
$cur, index;
$cur = $this.closest('.p-level-item');
if ($cur.length > 0) {
index = $cur.index();
$subLevel = $this.closest('.content').find('.sub-level');
if ($this.hasClass('focus')) {
return;
}
$this.closest('.primary-level').children('.focus').removeClass('focus');
$this.addClass('focus');
$subLevel.not('.hide').addClass('hide');
$subLevel.eq(index).removeClass('hide');
}
});
$categoryContainer.find('.primary-level').on('touchstart touchend touchcancel', 'li', function() {
$primaryItem.removeClass('highlight');
$(this).addClass('highlight');
}).on('touchend touchcancel', 'li', function() {
$(this).removeClass('highlight');
});
$categoryContainer.find('.sub-level').on('touchstart', 'li', function() {
$subLevelItem.removeClass('highlight');
$(this).addClass('highlight');
}).on('touchend touchcancel', 'li', function() {
$(this).removeClass('highlight');
});
\ No newline at end of file
... ...
... ... @@ -160,3 +160,4 @@ a {
@import "index/index";
@import "cart/index";
@import "me/index"; //个人中心
@import "shop/index";
... ...
@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank", "_recommend-for-you.scss", "limit","shop-prodfile";
@import "new-arrival", "discount", "list", "detail", "suspend-cart", "hot-rank", "_recommend-for-you.scss", "limit";
... ...
@import "product-category", "shop-prodfile";
\ No newline at end of file
... ...
.product-category {
font-size: 30rem / $pxConvertRem;
.category-nav {
height: 70rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
box-sizing: border-box;
float: left;
height: 100%;
padding: 20rem / $pxConvertRem 0;
width: 25%;
text-align: center;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
&.bytouch{
background:#eee;
}
}
span {
display: block;
width: 100%;
height: 30rem / $pxConvertRem;
line-height: 30rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
border-right: 1px solid #e6e6e6;
}
li:last-child span {
border-right: 0;
}
}
.content {
background: #f8f8f8;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 100%;
position: absolute;
> li {
height: 89rem / $pxConvertRem;
line-height: 89rem / $pxConvertRem;
padding-left: 32rem / $pxConvertRem;
box-sizing: border-box;
border-bottom: 1px solid #e6e6e6;
&.focus {
background-color: #fff;
}
&.highlight {
background-color: #eee;
}
}
}
.sub-level-container {
float: right;
box-sizing: border-box;
background: #f4f4f4;
width: 55%;
height: 100%;
position: relative;
}
.sub-level {
width: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 89rem / $pxConvertRem;
line-height: 89rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
padding-left: 2rem / $pxConvertRem;
//border-left: 50rem / $pxConvertRem;
margin-left: 30rem / $pxConvertRem;
&.highlight {
background: #dbdbdb;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #afafaf;
}
}
}
\ No newline at end of file
... ...
<div>HH</div>
\ No newline at end of file
{{> layout/header}}
<style>
.allproduct {
position: relative;
padding: 15px 0px;
background: #f8f8f8;
border-top: 15px;
border-bottom: 15px;
}
.arrow-icon {
position: absolute;
font-size: 12px;
top: 15px;
right: 20px;
}
.allproductParagaraph {
font-size: 18px;
left: 20px;
}
</style>
<div class="product-category yoho-page">
<div id="allproduct" class="allproduct">
<a href={{allproduct}}>
<p class="allproductParagaraph">全部商品</p>
<i class="arrow-icon iconfont">&#xe614;</i>
</a>
</div>
<div class="category-container clearfix">
<div class="content">
{{# content}}
<ul class="primary-level">
{{# class}}
<li class="p-level-item{{#if @first}} focus{{/if}}">{{name}}</li>
{{/ class}}
</ul>
<div class="sub-level-container">
{{# category}}
<ul class="sub-level">
{{# subcategory}}
<li>
<a href={{url}}>
{{name}}
</a>
</li>
{{/ subcategory}}
</ul>
{{/ category}}
</div>
{{/ content}}
</div>
</div>
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -341,3 +341,9 @@
</script>
{{/if}}
{{!-- 品牌分类 --}}
{{#if productCategoryPage}}
<script>
seajs.use('js/prodcut/product-category');
</script>
{{/if}}
\ No newline at end of file
... ...
... ... @@ -36,12 +36,96 @@ class IndexController extends AbstractAction
*/
public function categoryAction()
{
$result = array();
//$result = array();
// 假数据
$result = $this->getCategoryContent();
$result2 = ShopData::getShopIntro(356);
// $result = $this->getCategoryContent();
//$result2 = IntroData::getShopIntro(356);
$result = array(
'class' => array(
array(
'name' => '上衣',
),
array(
'name' => '裤装',
),
array(
'name' => '鞋靴',
),
array(
'name' => '包类',
)
),
'category' => array(
array(
'subcategory' => array(
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '上衣衣1'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '上衣衣2'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '上衣衣3'
),
)
),
array(
'subcategory' => array(
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '裤装1'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '裤装2'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '裤装3'
),
)
),
array(
'subcategory' => array(
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '鞋靴1'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '鞋靴2'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '鞋靴3'
)
)
),
array(
'subcategory' => array(
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '包类1'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '包类2'
),
array(
'url' => 'http://img02.yohoboys.com/staticimg/2016/04/20/16/029d5f3c8dcb63249ac9bf42e7cf9c190c.jpg',
'name' => '包类3'
)
)
)
)
);
return $this->_view->display('category', array(
'productCategoryPage' => true,
'content' => $result,
));
}
... ...