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 @@ @@ -627,4 +627,30 @@
627 { 627 {
628 areaCode: '', 628 areaCode: '',
629 phoneNum: '' 629 phoneNum: ''
  630 + }
  631 +
  632 +## 分类
  633 +
  634 + {
  635 + searchUrl: '',
  636 + class: [
  637 + {
  638 + name: 'BOY',
  639 + focus: true, //默认选中
  640 + ca: [
  641 + {
  642 + name: '上衣',
  643 + sub: [
  644 + {
  645 + name: '全部分类',
  646 + url: ''
  647 + },
  648 + ...
  649 + ]
  650 + },
  651 + ...
  652 + ]
  653 + },
  654 + ...
  655 + ]
630 } 656 }
  1 +/**
  2 + * 分类
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/14
  5 + */
  6 +
  7 +var $ = require('yoho.zepto');
  8 +
  9 +var $nav = $('.category-nav'),
  10 + $contents = $('.category-container > .content');
  11 +
  12 +var $curContent = $contents.not('.hide');
  13 +
  14 +$('#search-input').focus(function() {
  15 + $(this).blur();
  16 +});
  17 +
  18 +$nav.delegate('li', 'touchstart', function() {
  19 + var $this = $(this),
  20 + index = $this.index();
  21 +
  22 + if ($this.hasClass('focus')) {
  23 + return;
  24 + }
  25 +
  26 + $nav.find('li.focus').removeClass('focus');
  27 + $this.addClass('focus');
  28 +
  29 + $curContent.addClass('hide');
  30 + $curContent = $contents.eq(index).removeClass('hide');
  31 +});
  32 +
  33 +$('.primary-level').delegate('li', 'touchstart', function() {
  34 + var $this = $(this),
  35 + index = $this.index();
  36 +
  37 + var $subLevel = $this.closest('.content').find('.sub-level');
  38 +
  39 + if ($this.hasClass('focus')) {
  40 + return;
  41 + }
  42 +
  43 + $this.closest('.primary-level').children('.focus').removeClass('focus');
  44 + $this.addClass('focus');
  45 +
  46 + $subLevel.not('.hide').addClass('hide');
  47 + $subLevel.eq(index).removeClass('hide');
  48 +});
  1 +.category-page {
  2 + font-size: 30rem / $pxConvertRem;
  3 +
  4 + .search-input {
  5 + position: relative;
  6 + background-color: #f8f8f8;
  7 + padding: 13rem / $pxConvertRem 20rem / $pxConvertRem;
  8 +
  9 + p {
  10 + box-sizing: border-box;
  11 + width: 100%;
  12 + height: 60rem / $pxConvertRem;
  13 + line-height: 60rem / $pxConvertRem;
  14 + border: none;
  15 + padding-left: 53rem / $pxConvertRem;
  16 + border-radius: 60rem / $pxConvertRem;
  17 + font-size: 30rem / $pxConvertRem;
  18 + background: #fff;
  19 + color: #999;
  20 + }
  21 + }
  22 +
  23 + .search-icon {
  24 + position: absolute;
  25 + top: 0;
  26 + bottom: 0;
  27 + left: 43rem / $pxConvertRem;
  28 + line-height: 86rem / $pxConvertRem;
  29 + color: #999;
  30 + }
  31 +
  32 + .category-nav {
  33 + height: 71rem / $pxConvertRem;
  34 + border-bottom: 1px solid #e6e6e6;
  35 +
  36 + li {
  37 + display: block;
  38 + float: left;
  39 + height: 100%;
  40 + line-height: 71rem / $pxConvertRem;
  41 + width: 25%;
  42 + text-align: center;
  43 + border-right: 1px solid #e6e6e6;
  44 + color: #999;
  45 +
  46 + &:last-child {
  47 + border-right: none;
  48 + }
  49 +
  50 + &.focus {
  51 + color: #000;
  52 + }
  53 + }
  54 + }
  55 +
  56 + .content.hide {
  57 + display: none;
  58 + }
  59 +
  60 + .primary-level {
  61 + float: left;
  62 + box-sizing: border-box;
  63 + width: 40%;
  64 + background: #f8f8f8;
  65 +
  66 + > li {
  67 + height: 69rem / $pxConvertRem;
  68 + line-height: 69rem / $pxConvertRem;
  69 + padding-left: 32rem / $pxConvertRem;
  70 +
  71 + &.focus {
  72 + background-color: #fff;
  73 + }
  74 + }
  75 + }
  76 +
  77 + .sub-level-container {
  78 + float: left;
  79 + box-sizing: border-box;
  80 + padding-left: 20rem / $pxConvertRem;
  81 + background: #fff;
  82 + width: 60%;
  83 + }
  84 +
  85 + .sub-level {
  86 + width: 100%;
  87 +
  88 + &.hide {
  89 + display: none;
  90 + }
  91 +
  92 + > li {
  93 + height: 71rem / $pxConvertRem;
  94 + line-height: 71rem / $pxConvertRem;
  95 + border-bottom: 1px solid #e6e6e6;
  96 +
  97 + &:last-child {
  98 + border-bottom: none;
  99 + }
  100 + }
  101 + }
  102 +}
@@ -88,4 +88,4 @@ a { @@ -88,4 +88,4 @@ a {
88 @include border-radius(10px); 88 @include border-radius(10px);
89 } 89 }
90 90
91 -@import "layout/header", "layout/footer", "good", "passport/index", "guang/index", "homepage/index";  
  91 +@import "layout/header", "layout/footer", "good", "passport/index", "guang/index", "homepage/index", "category/index";
  1 +{{> layout/header}}
  2 +<div class="category-page yoho-page">
  3 + {{# category}}
  4 + <div id="search-input" class="search-input">
  5 + <a href={{searchUrl}}>
  6 + <i class="search-icon iconfont">&#xe60f;</i>
  7 + <p>搜索商品</p>
  8 + </a>
  9 + </div>
  10 + <div class="category-nav clearfix">
  11 + {{# class}}
  12 + <li class={{#if focus}}focus{{/if}}>
  13 + {{name}}
  14 + </li>
  15 + {{/ class}}
  16 + </div>
  17 + <div class="category-container clearfix">
  18 + {{# class}}
  19 + <div class="content {{#unless focus}}hide{{/if}}">
  20 + <ul class="primary-level">
  21 + {{# ca}}
  22 + <li class={{#if @first}}focus{{/if}}>{{name}}</li>
  23 + {{/ ca}}
  24 + </ul>
  25 + <div class="sub-level-container">
  26 + {{# ca}}
  27 + <ul class="sub-level {{#unless @first}}hide{{/if}}">
  28 + {{# sub}}
  29 + <li>
  30 + <a href={{url}}>
  31 + {{name}}
  32 + </a>
  33 + </li>
  34 + {{/ sub}}
  35 + </ul>
  36 + {{/ ca}}
  37 + </div>
  38 + </div>
  39 + {{/ class}}
  40 + </div>
  41 + {{/ category}}
  42 +</div>
  43 +{{> layout/footer}}
@@ -89,7 +89,9 @@ @@ -89,7 +89,9 @@
89 </script> 89 </script>
90 {{/if}} 90 {{/if}}
91 91
92 -  
93 - <script>  
94 - seajs.use('js/homePage/girls');  
95 -</script>  
  92 +{{!-- 品类 --}}
  93 +{{#if categoryPage}}
  94 + <script>
  95 + seajs.use('js/category/index');
  96 + </script>
  97 +{{/if}}
1 <?php 1 <?php
2 use Action\AbstractAction; 2 use Action\AbstractAction;
3 -use LibModels\Wap\Category\ClassData; 3 +// use LibModels\Wap\Category\ClassData;
4 4
5 /** 5 /**
6 * 品牌 6 * 品牌
@@ -9,18 +9,89 @@ class ClassController extends AbstractAction @@ -9,18 +9,89 @@ class ClassController extends AbstractAction
9 { 9 {
10 public function indexAction() 10 public function indexAction()
11 { 11 {
12 - $brandsData = ClassData::getClassesData(); 12 + // $brandsData = ClassData::getClassesData();
13 13
14 - $classes = array();  
15 - if($brandsData['code'] == 200)  
16 - {  
17 - $classes = $brandsData['data'];  
18 - } 14 + // $classes = array();
  15 + // if($brandsData['code'] == 200)
  16 + // {
  17 + // $classes = $brandsData['data'];
  18 + // }
19 19
20 - echo '<pre>';  
21 - var_dump($classes);exit; 20 + // echo '<pre>';
  21 + // var_dump($classes);exit;
22 22
23 - $this->_view->assign('title', 'YOHO!有货');  
24 - $this->_view->display('class', compact('classes')); 23 + // $this->_view->assign('title', 'YOHO!有货');
  24 + // $this->_view->display('class', compact('classes'));
  25 + $data = array(
  26 + "searchUrl" => "",
  27 + "class" => array(
  28 + array(
  29 + "name" => "Boy",
  30 + "focus" => true,
  31 + "ca" => array(
  32 + array(
  33 + "name" => "上衣",
  34 + "sub" => array(
  35 + array(
  36 + "name" => "全部上衣",
  37 + "url" => ""
  38 + ),
  39 + array(
  40 + "name" => "卫衣",
  41 + "url" => ""
  42 + )
  43 + )
  44 + ),
  45 + array(
  46 + "name" => "裤装",
  47 + "sub" => array(
  48 + array(
  49 + "name" => "全部裤装",
  50 + "url" => ""
  51 + ),
  52 + array(
  53 + "name" => "牛仔裤",
  54 + "url" => ""
  55 + )
  56 + )
  57 + )
  58 + )
  59 + ),
  60 + array(
  61 + "name" => "Girl",
  62 + "ca" => array(
  63 + array(
  64 + "name" => "裙装",
  65 + "sub" => array(
  66 + array(
  67 + "name" => "全部裙装",
  68 + "url" => ""
  69 + ),
  70 + array(
  71 + "name" => "短裙",
  72 + "url" => ""
  73 + )
  74 + )
  75 + ),
  76 + array(
  77 + "name" => "鞋靴",
  78 + "sub" => array(
  79 + array(
  80 + "name" => "全部鞋靴",
  81 + "url" => ""
  82 + ),
  83 + array(
  84 + "name" => "休闲鞋",
  85 + "url" => ""
  86 + )
  87 + )
  88 + )
  89 + )
  90 + )
  91 + )
  92 + );
  93 +
  94 + $this->_view->assign('title', 'YOHO!有货');
  95 + $this->_view->display('index', array('categoryPage' => true, 'category' => $data));
25 } 96 }
26 } 97 }