fe / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 59f3d2759dd4511ce3eed63c3bd80e603d5c6f63 1 parent 35195ab6

品类

Inline Side-by-side
Showing 7 changed files with 308 additions and 16 deletions
... ... @@ -627,4 +627,30 @@
{
areaCode: '',
phoneNum: ''
}
## 分类
{
searchUrl: '',
class: [
{
name: 'BOY',
focus: true, //默认选中
ca: [
{
name: '上衣',
sub: [
{
name: '全部分类',
url: ''
},
...
]
},
...
]
},
...
]
}
\ No newline at end of file
... ...
/**
* 分类
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/14
*/
var $ = require('yoho.zepto');
var $nav = $('.category-nav'),
$contents = $('.category-container > .content');
var $curContent = $contents.not('.hide');
$('#search-input').focus(function() {
$(this).blur();
});
$nav.delegate('li', 'touchstart', function() {
var $this = $(this),
index = $this.index();
if ($this.hasClass('focus')) {
return;
}
$nav.find('li.focus').removeClass('focus');
$this.addClass('focus');
$curContent.addClass('hide');
$curContent = $contents.eq(index).removeClass('hide');
});
$('.primary-level').delegate('li', 'touchstart', function() {
var $this = $(this),
index = $this.index();
var $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');
});
\ No newline at end of file
... ...
.category-page {
font-size: 30rem / $pxConvertRem;
.search-input {
position: relative;
background-color: #f8f8f8;
padding: 13rem / $pxConvertRem 20rem / $pxConvertRem;
p {
box-sizing: border-box;
width: 100%;
height: 60rem / $pxConvertRem;
line-height: 60rem / $pxConvertRem;
border: none;
padding-left: 53rem / $pxConvertRem;
border-radius: 60rem / $pxConvertRem;
font-size: 30rem / $pxConvertRem;
background: #fff;
color: #999;
}
}
.search-icon {
position: absolute;
top: 0;
bottom: 0;
left: 43rem / $pxConvertRem;
line-height: 86rem / $pxConvertRem;
color: #999;
}
.category-nav {
height: 71rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
float: left;
height: 100%;
line-height: 71rem / $pxConvertRem;
width: 25%;
text-align: center;
border-right: 1px solid #e6e6e6;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
}
}
.content.hide {
display: none;
}
.primary-level {
float: left;
box-sizing: border-box;
width: 40%;
background: #f8f8f8;
> li {
height: 69rem / $pxConvertRem;
line-height: 69rem / $pxConvertRem;
padding-left: 32rem / $pxConvertRem;
&.focus {
background-color: #fff;
}
}
}
.sub-level-container {
float: left;
box-sizing: border-box;
padding-left: 20rem / $pxConvertRem;
background: #fff;
width: 60%;
}
.sub-level {
width: 100%;
&.hide {
display: none;
}
> li {
height: 71rem / $pxConvertRem;
line-height: 71rem / $pxConvertRem;
border-bottom: 1px solid #e6e6e6;
&:last-child {
border-bottom: none;
}
}
}
}
\ No newline at end of file
... ...
... ... @@ -88,4 +88,4 @@ a {
@include border-radius(10px);
}
@import "layout/header", "layout/footer", "good", "passport/index", "guang/index", "homepage/index";
\ No newline at end of file
@import "layout/header", "layout/footer", "good", "passport/index", "guang/index", "homepage/index", "category/index";
\ No newline at end of file
... ...
{{> layout/header}}
<div class="category-page yoho-page">
{{# category}}
<div id="search-input" class="search-input">
<a href={{searchUrl}}>
<i class="search-icon iconfont">&#xe60f;</i>
<p>搜索商品</p>
</a>
</div>
<div class="category-nav clearfix">
{{# class}}
<li class={{#if focus}}focus{{/if}}>
{{name}}
</li>
{{/ class}}
</div>
<div class="category-container clearfix">
{{# class}}
<div class="content {{#unless focus}}hide{{/if}}">
<ul class="primary-level">
{{# ca}}
<li class={{#if @first}}focus{{/if}}>{{name}}</li>
{{/ ca}}
</ul>
<div class="sub-level-container">
{{# ca}}
<ul class="sub-level {{#unless @first}}hide{{/if}}">
{{# sub}}
<li>
<a href={{url}}>
{{name}}
</a>
</li>
{{/ sub}}
</ul>
{{/ ca}}
</div>
</div>
{{/ class}}
</div>
{{/ category}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -89,7 +89,9 @@
</script>
{{/if}}
<script>
seajs.use('js/homePage/girls');
</script>
\ No newline at end of file
{{!-- 品类 --}}
{{#if categoryPage}}
<script>
seajs.use('js/category/index');
</script>
{{/if}}
\ No newline at end of file
... ...
<?php
use Action\AbstractAction;
use LibModels\Wap\Category\ClassData;
// use LibModels\Wap\Category\ClassData;
/**
* 品牌
... ... @@ -9,18 +9,89 @@ class ClassController extends AbstractAction
{
public function indexAction()
{
$brandsData = ClassData::getClassesData();
// $brandsData = ClassData::getClassesData();
$classes = array();
if($brandsData['code'] == 200)
{
$classes = $brandsData['data'];
}
// $classes = array();
// if($brandsData['code'] == 200)
// {
// $classes = $brandsData['data'];
// }
echo '<pre>';
var_dump($classes);exit;
// echo '<pre>';
// var_dump($classes);exit;
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('class', compact('classes'));
// $this->_view->assign('title', 'YOHO!有货');
// $this->_view->display('class', compact('classes'));
$data = array(
"searchUrl" => "",
"class" => array(
array(
"name" => "Boy",
"focus" => true,
"ca" => array(
array(
"name" => "上衣",
"sub" => array(
array(
"name" => "全部上衣",
"url" => ""
),
array(
"name" => "卫衣",
"url" => ""
)
)
),
array(
"name" => "裤装",
"sub" => array(
array(
"name" => "全部裤装",
"url" => ""
),
array(
"name" => "牛仔裤",
"url" => ""
)
)
)
)
),
array(
"name" => "Girl",
"ca" => array(
array(
"name" => "裙装",
"sub" => array(
array(
"name" => "全部裙装",
"url" => ""
),
array(
"name" => "短裙",
"url" => ""
)
)
),
array(
"name" => "鞋靴",
"sub" => array(
array(
"name" => "全部鞋靴",
"url" => ""
),
array(
"name" => "休闲鞋",
"url" => ""
)
)
)
)
)
)
);
$this->_view->assign('title', 'YOHO!有货');
$this->_view->display('index', array('categoryPage' => true, 'category' => $data));
}
}
\ No newline at end of file
... ...