fe / YOHOBUYWAP · Commits

Go to a project

Authored by 张丽霞
Commit e31b9276c02438cb71430da857e4b8f89904bee7 2 parents 3ad01523 096e2f2d

Merge branch 'feature/branchOptmztn' of git.dev.yoho.cn:web/yohobuywap into feature/branchOptmztn

Inline Side-by-side
Showing 5 changed files with 175 additions and 83 deletions
... ... @@ -29,6 +29,22 @@ var brandsData,
$keyword,
clearTextHammer;
var security = require('../plugin/security'),
Hammer = require('yoho.hammer');
var $history = $('.history');
var $historySearch = $('.history-search');
var $hotSearch = $('.hot-search');
var $clearHistory = $('#clear-history');
var writeSearch = require('./write-search');
var ranToken = writeSearch.getRanToken();
var chHammer, cHammer;
loading.showLoadingMask();
lazyLoad($('img.lazy'));
... ... @@ -140,7 +156,7 @@ function searchResult() {
brandHtml.push('</h2></div>');
$.each(v, function(i, brand) {
brandHtml.push('<p><a href="' + brand.url + '">' + brand.name);
brandHtml.push('<p><a href="' + brand.url + '" brandname = "'+brand.name+'">' + brand.name);
if (brand.isNew) {
brandHtml.push('<i class="icon-new">NEW</i>');
}
... ... @@ -160,6 +176,8 @@ function searchResult() {
changeBackground();
var $brandList = $('.brand-list');
writeSearch.bindWirteLocal($brandList);
$hotSearch.addClass('hide');
$historySearch.addClass('hide');
}
if ($('.brand-search-page').length) {
... ... @@ -177,6 +195,7 @@ if ($('.brand-search-page').length) {
// $(this).closest('.search-box').css('width', '12.5rem');
$searchAction.find('.clear-text').hide();
}
searchResult();
}).focus();
... ... @@ -234,23 +253,7 @@ if ($brandItem.length > 0 ) {
});
}
//我添加的
var $ = require('jquery'),
security = require('../plugin/security'),
Hammer = require('yoho.hammer');
var $history = $('.history');
var $historySearch = $('.history-search');
var $clearHistory = $('#clear-history');
var $form = $('#search-form');
var writeSearch = require('./write-search');
var ranToken = writeSearch.getRanToken();
var chHammer, cHammer;
//搜索页面
chHammer = new Hammer($clearHistory[0]);
chHammer.on('tap', function() {
... ... @@ -267,26 +270,32 @@ chHammer.on('tap', function() {
(function() {
var html = '',
history,
historys, i;
historys, i,
brand,url,locate;
if (localStorage) {
historys = localStorage.getItem('historys-brand');
if (historys && historys.length > 0) {
historys = historys.split(ranToken);
for (i = historys.length; i > 0; i--) {
for (i = (historys.length >= 10) ? 10 :historys.length; i > 0; i--) {
history = historys[i - 1];
if (history === '') {
continue;
}
locate = history.indexOf("http://");
brand = history.substr(0,locate);
url = history.substr(locate,history.length-locate);
html += '<li><a href="/?query=' + history + '">' + history + '</li>';
html += '<li><a href="' + url + '">' + brand + '</li>';
$historySearch.removeClass('hide');
}
$history.html(html);
$clearHistory.removeClass('hide');
$historySearch.removeClass('hide');
$hotSearch.removeClass('hide');
window.rePosFooter();
}
}
... ...
... ... @@ -18,18 +18,22 @@ function bindWirteLocal($brandList) {
e.preventDefault();
var brandName = $(this).find('a').html();
var query = brandName,
historys;
var a = $(this).find('a');
if (localStorage) {
historys = localStorage.getItem('historys-brands');
var brandName = a.attr("brandname");
var url = a.attr("href");
var query = brandName+url,
historys;
if (localStorage) {
historys = localStorage.getItem('historys-brand');
historys = historys ? historys : '';
if (historys.indexOf(ranToken + query + ranToken) > -1) {
location.href = url;
return;
}
... ... @@ -39,9 +43,10 @@ function bindWirteLocal($brandList) {
historys += query + ranToken;
localStorage.setItem('historys-brands', historys);
localStorage.setItem('historys-brand', historys);
}
//location.herf($(this).find('a').herf.tostring());
location.href = url;
});
}
... ...
... ... @@ -199,44 +199,6 @@
}
}
.search-items {
padding: 40px 20px;
h3 {
font-size: 24px;
margin-bottom: 20px;
}
li {
float: left;
margin-right: 20px;
margin-bottom: 20px;
max-width: 100%;
overflow: hidden;
}
a {
display: block;
height: 68px;
line-height: 68px;
padding: 0 20px;
font-size: 28px;
background: #f8f8f8;
color: #000;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.clear-history {
height: 64px;
line-height: 64px;
border: 1px solid #e6e6e6;
background: #fff;
font-size: 28px;
}
}
.banner-top {
padding-top: 258px;
background-color:#f8f8f8;
... ... @@ -369,4 +331,4 @@
.search-result {
padding-top: 176px;
}
}
}
\ No newline at end of file
... ...
... ... @@ -80,5 +80,116 @@
background: #fff;
font-size: 28px;
}
.clear-icon{
float: right;
background: #fff;
}
span{
margin-right: 5px;
}
}
}
.search-brand-page {
.search-input {
position: relative;
padding: 14px 22px;
background: #f8f8f8;
form {
width: 100%;
}
.search-icon {
position: absolute;
font-size: 24px;
top: 26px;
left: 36px;
color: #b2b2b2;
}
input {
height: 56px;
width: 378px;
border-radius: 28px;
padding: 0 52px;
font-size: 24px;
background: #fff;
border: none;
}
.clear-input {
position: absolute;
top: 20px;
right: 145px;
font-size: 32px;
color: #666;
}
.search {
position: absolute;
top: 18px;
right: 40px;
border: none;
background: transparent;
color: #666;
font-size: 30px;
line-height: 56px;
}
}
.search-items {
padding: 40px 20px;
h3 {
font-size: 24px;
margin-bottom: 20px;
color: #b8b8b8;
}
li {
float: left;
margin-right: 20px;
margin-bottom: 20px;
max-width: 100%;
overflow: hidden;
}
a {
display: block;
height: 68px;
line-height: 68px;
padding: 0 20px;
font-size: 28px;
background: white;
color: #b8b8b8;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border:1px solid #b8b8b8;
border-radius: 0.2rem;
}
.clear-history {
font-size: 28px;
}
.clear-icon{
float: right;
color: #b8b8b8;
}
span{
margin-right: 10px;
font-size: 14px;
}
.history-search{
border-bottom:1px solid #f3f3f3;
}
.hot-search{
margin-top: 20px;
}
}
}
\ No newline at end of file
... ...
... ... @@ -14,22 +14,27 @@
</div>
</div>
<div class="search-items">
<div class="hot-search">
<h3>热门搜索</h3>
<ul class="hot clearfix">
{{# hot}}
<li>
<a href={{url}}>{{name}}</a>
</li>
{{/ hot}}
</ul>
</div>
<div class="history-search">
<h3>历史搜索</h3>
<ul class="history clearfix"></ul>
<div class="search-brand-page">
<div class="search-items">
<div class="history-search hide">
<h3><span class="iconfont">&#xe64a;</span>最近搜索
<button id="clear-history" class="clear-icon iconfont hide">&#xe621;</button>
</h3>
<ul class="history clearfix"></ul>
</div>
<div class="hot-search">
<h3><span class="iconfont">&#xe60f;</span>热门搜索</h3>
<ul class="hot clearfix">
{{# hot}}
<li>
<a href={{url}}>{{name}}</a>
</li>
{{/ hot}}
</ul>
</div>
</div>
<button id="clear-history" class="clear-history hide">清空搜索历史</button>
</div>
<script id="brands-data" type="text/tmpl">
... ...