wangshusheng / YOHOBUYPC · Commits

Go to a project

Authored by xuqi
Commit 60550ab1b444eb459e5bb256d437a10079d9c0f7 1 parent 2e9b8889

search page

Inline Side-by-side
Showing 13 changed files with 232 additions and 3 deletions
@@ -683,4 +683,23 @@ @@ -683,4 +683,23 @@
683 }, 683 },
684 ... 684 ...
685 ] 685 ]
  686 + }
  687 +
  688 +
  689 +## 搜索
  690 +
  691 + {
  692 + hot: [
  693 + {
  694 + name: '夹克',
  695 + url: ''
  696 + },
  697 + ...
  698 + ],
  699 + history: [
  700 + {
  701 + name: '..',
  702 + url: ''
  703 + }
  704 + ]
686 } 705 }
No preview for this file type
@@ -2,7 +2,7 @@ @@ -2,7 +2,7 @@
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > 2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
3 <svg xmlns="http://www.w3.org/2000/svg"> 3 <svg xmlns="http://www.w3.org/2000/svg">
4 <metadata> 4 <metadata>
5 -Created by FontForge 20120731 at Wed Sep 30 17:19:41 2015 5 +Created by FontForge 20120731 at Mon Oct 19 17:33:26 2015
6 By Ads 6 By Ads
7 </metadata> 7 </metadata>
8 <defs> 8 <defs>
@@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Sep 30 17:19:41 2015 @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Wed Sep 30 17:19:41 2015
19 bbox="0 -224 3943 812" 19 bbox="0 -224 3943 812"
20 underline-thickness="50" 20 underline-thickness="50"
21 underline-position="-100" 21 underline-position="-100"
22 - unicode-range="U+0078-E619" 22 + unicode-range="U+0078-E61A"
23 /> 23 />
24 <missing-glyph horiz-adv-x="374" 24 <missing-glyph horiz-adv-x="374"
25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> 25 d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
@@ -114,5 +114,8 @@ d="M224 192q-40 0 -68 28t-28 68t28 68t68 28t68 -28t28 -68t-28 -68t-68 -28zM512 1 @@ -114,5 +114,8 @@ d="M224 192q-40 0 -68 28t-28 68t28 68t68 28t68 -28t28 -68t-28 -68t-68 -28zM512 1
114 <glyph glyph-name="uniE619" unicode="&#xe619;" 114 <glyph glyph-name="uniE619" unicode="&#xe619;"
115 d="M126 225q30 0 50.5 21.5t20.5 52.5q0 33 -20.5 54.5t-51 21.5t-51.5 -21.5t-21 -54.5q0 -45 38 -66q17 -8 35 -8zM512 225q15 0 28.5 5.5t23 15.5t15 24t5.5 29q0 9 -2 18t-5.5 16.5t-8 14t-10.5 11.5t-13.5 9t-15.5 5.5t-17 1.5q-30 0 -51 -21.5t-21 -54.5q0 -45 38 -66 115 d="M126 225q30 0 50.5 21.5t20.5 52.5q0 33 -20.5 54.5t-51 21.5t-51.5 -21.5t-21 -54.5q0 -45 38 -66q17 -8 35 -8zM512 225q15 0 28.5 5.5t23 15.5t15 24t5.5 29q0 9 -2 18t-5.5 16.5t-8 14t-10.5 11.5t-13.5 9t-15.5 5.5t-17 1.5q-30 0 -51 -21.5t-21 -54.5q0 -45 38 -66
116 q16 -8 34 -8zM899.5 225q30.5 0 51 21.5t20.5 52.5q0 9 -2 18t-5.5 16.5t-8 14t-11 11.5t-13.5 9t-15 5.5t-17 1.5q-20 0 -36.5 -9.5t-26 -27t-9.5 -39.5q0 -31 21 -52.5t51.5 -21.5z" /> 116 q16 -8 34 -8zM899.5 225q30.5 0 51 21.5t20.5 52.5q0 9 -2 18t-5.5 16.5t-8 14t-11 11.5t-13.5 9t-15 5.5t-17 1.5q-20 0 -36.5 -9.5t-26 -27t-9.5 -39.5q0 -31 21 -52.5t51.5 -21.5z" />
  117 + <glyph glyph-name="uniE61A" unicode="&#xe61a;"
  118 +d="M511 -84q-102 0 -188.5 50t-137 137t-50.5 189t50.5 188.5t137 137t188.5 50.5t189 -50.5t137 -137t50 -188.5t-50 -189t-137 -137t-189 -50zM676 421q7 6 0 12l-6 7q-2 2 -5.5 2t-6.5 -2l-138 -139l-137 137q-6 6 -12 0l-6 -6q-6 -6 0 -12l136 -137l-138 -138
  119 +q-6 -6 0 -12l6 -6q7 -7 13 0l138 138l138 -139q6 -6 13 0l6 6q6 6 0 13l-139 138zM676 421z" />
117 </font> 120 </font>
118 </defs></svg> 121 </defs></svg>
No preview for this file type
No preview for this file type
@@ -4,5 +4,6 @@ require('./js/passport/index'); @@ -4,5 +4,6 @@ require('./js/passport/index');
4 require('./js/guang/index'); 4 require('./js/guang/index');
5 require('./js/home/index'); 5 require('./js/home/index');
6 require('./js/product/index'); 6 require('./js/product/index');
  7 +require('./js/index/index');
7 8
8 module.exports = yohobuy; 9 module.exports = yohobuy;
  1 +/**
  2 + * Index打包入口
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/19
  5 + */
  6 +
  7 +require('./search');
  1 +/**
  2 + * 搜索JS
  3 + * @author: xuqi<qi.xu@yoho.cn>
  4 + * @date: 2015/10/19
  5 + */
  6 +
  7 +var $ = require('yoho.zepto');
  8 +
  9 +var $input = $('#search-input > input');
  10 +
  11 +var $clear = $('#search-input > .clear-input');
  12 +
  13 +var $history = $('.history');
  14 +
  15 +$('#clear-history').bind('touchstart', function() {
  16 + $.ajax({
  17 + type: 'POST',
  18 + url: '/search/clearHistory',
  19 + success: function(data) {
  20 + if (data.code === 200) {
  21 + $history.html(''); //clear search history items
  22 + }
  23 + }
  24 + });
  25 +});
  26 +
  27 +$('#search').bind('touchstart', function() {
  28 + var val = $input.val();
  29 +
  30 + $.ajax({
  31 + type: 'POST',
  32 + url: '/search',
  33 + data: {
  34 + val: val
  35 + },
  36 + success: function(data) {
  37 + if (data.code === 200) {
  38 + location.href = data.data;
  39 + }
  40 + }
  41 + });
  42 +});
  43 +
  44 +$input.bind('input', function() {
  45 + if ($input.val() === '') {
  46 + $clear.addClass('hide');
  47 + } else {
  48 + $clear.removeClass('hide');
  49 + }
  50 +});
  51 +
  52 +$clear.bind('touchstart', function() {
  53 + $input.val('').trigger('input');
  54 +});
@@ -39,3 +39,5 @@ @@ -39,3 +39,5 @@
39 39
40 } 40 }
41 41
  42 +@import "search";
  43 +
  1 +.search-page {
  2 + .search-input {
  3 + position: relative;
  4 + padding: 7px 46px 7px 15px;
  5 + background: #f8f8f8;
  6 +
  7 + .search-icon {
  8 + position: absolute;
  9 + font-size: 12px;
  10 + top: 16px;
  11 + left: 24px;
  12 + }
  13 +
  14 + input {
  15 + height: 30px;
  16 + width: 100%;
  17 + border-radius: 15px;
  18 + text-indent: 26px;
  19 + background: #fff;
  20 + border: none;
  21 + }
  22 +
  23 + .clear-input {
  24 + position: absolute;
  25 + top: 12px;
  26 + right: 50px;
  27 + }
  28 +
  29 + .search {
  30 + position: absolute;
  31 + top: 12px;
  32 + right: 0;
  33 + border: none;
  34 + background: transparent;
  35 + font-size: 16px;
  36 + }
  37 + }
  38 +
  39 + .search-items {
  40 + padding: 20px 10px;
  41 +
  42 + h3 {
  43 + font-size: 12px;
  44 + margin-bottom: 10px;
  45 + }
  46 +
  47 + li {
  48 + float: left;
  49 + height: 34px;
  50 + line-height: 34px;
  51 + font-size: 14px;
  52 + height: 34px;
  53 + line-height: 34px;
  54 + margin-right: 10px;
  55 + margin-bottom: 10px;
  56 + padding: 0 10px;
  57 + background: #f8f8f8;
  58 + color: #000;
  59 + }
  60 +
  61 + .clear-history {
  62 + height: 32px;
  63 + line-height: 32px;
  64 + border: 1px solid #e6e6e6;
  65 + background: #fff;
  66 + font-size: 14px;
  67 + }
  68 + }
  69 +}
  1 +{{> layout/header}}
  2 +<div class="search-page yoho-page">
  3 + {{# search}}
  4 + <div id="search-input" class="search-input">
  5 + <i class="search-icon iconfont">&#xe60f;</i>
  6 + <input type="text" placeholder="搜索商品">
  7 + <i class="clear-input iconfont hide">&#xe61a;</i>
  8 + <button id="search" class="search">搜索</button>
  9 + </div>
  10 + <div class="search-items">
  11 + <div class="hot-search">
  12 + <h3>热门搜索</h3>
  13 + <ul class="hot clearfix">
  14 + {{# hot}}
  15 + <li>
  16 + <a href={{url}}>{{name}}</a>
  17 + </li>
  18 + {{/ hot}}
  19 + </ul>
  20 + </div>
  21 + <div class="history-search">
  22 + <h3>历史搜索</h3>
  23 + <ul class="history clearfix">
  24 + {{# history}}
  25 + <li>
  26 + <a href={{url}}>{{name}}</a>
  27 + </li>
  28 + {{/ history}}
  29 + </ul>
  30 + </div>
  31 + <button id="clear-history" class="clear-history">清空搜索历史</button>
  32 + </div>
  33 + {{/ search}}
  34 +</div>
  35 +{{> layout/footer}}
@@ -122,4 +122,11 @@ @@ -122,4 +122,11 @@
122 <script> 122 <script>
123 seajs.use('js/category/index'); 123 seajs.use('js/category/index');
124 </script> 124 </script>
  125 +{{/if}}
  126 +
  127 +{{!-- 搜索 --}}
  128 +{{#if searchPage}}
  129 + <script>
  130 + seajs.use('js/index/search');
  131 + </script>
125 {{/if}} 132 {{/if}}
@@ -7,6 +7,38 @@ class SearchController extends AbstractAction @@ -7,6 +7,38 @@ class SearchController extends AbstractAction
7 { 7 {
8 public function indexAction() 8 public function indexAction()
9 { 9 {
10 - echo 'search'; 10 + $data = array(
  11 + array(
  12 + 'hot' => array(
  13 + array(
  14 + 'name' => '夹克',
  15 + 'url' => 'm.yohobuy.com'
  16 + ),
  17 + array(
  18 + 'name' => '休闲运动鞋',
  19 + 'url' => 'm.yohobuy.com'
  20 + ),
  21 + array(
  22 + 'name' => 'Into the Rainbow',
  23 + 'url' => 'm.yohobuy.com'
  24 + )
  25 + ),
  26 + 'history' => array(
  27 + array(
  28 + 'name' => 'what',
  29 + 'url' => 'm.yohobuy.com'
  30 + ),
  31 + array(
  32 + 'name' => 'the',
  33 + 'url' => 'm.yohobuy.com'
  34 + ),
  35 + array(
  36 + 'name' => 'fuck',
  37 + 'url' => 'm.yohobuy.com'
  38 + )
  39 + )
  40 + )
  41 + );
  42 + $this->_view->display('index', array('search' => $data, 'searchPage' => true, 'pageFooter' => true));
11 } 43 }
12 } 44 }