Authored by xuqi

Merge branch 'develop' of http://git.dev.yoho.cn/web/yohobuy into develop

... ... @@ -11,11 +11,19 @@ var $ = require('jquery'),
var swiper,
$fixTitleBar,
$brandText,
$brandHref,
$brandList = $('.brand-list');
var searchH = $('.newbrand-search').outerHeight(),
headerH = $('.yoho-header').outerHeight(),
brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
minBrandListTop,
searchArray = [],
clearTextHammer,
removeHistory,
searchList,
yohoHistory,
minBrandListTop;
var brandsData,
... ... @@ -109,6 +117,21 @@ function searchResult() {
// 插入 dom,绑定事件
$('.search-result').html(html);
$('.search-result .brand-list p').each(function (index) {
searchList = new Hammer($('.search-result .brand-list p').eq(index)[0]);
searchList.on('tap', function() {
$brandText = $('.search-result .brand-list p').eq(index).find('a').html();
$brandHref = $('.search-result .brand-list p').eq(index).find('a').attr('href');
if (localStorage.getItem('yohoHistory')) {
yohoHistory = localStorage.getItem('yohoHistory');
searchArray.push(yohoHistory);
}
if (searchArray.toString().split($brandText).length < 2) {
searchArray.push('{"searchName":"' + $brandText + '","searchHref":"' + $brandText + '"}');
}
localStorage.setItem('yohoHistory', searchArray);
});
});
}
if ($('.brand-search-page').length) {
... ... @@ -116,6 +139,7 @@ if ($('.brand-search-page').length) {
$keyword = $('#keyword');
$keyword.on('input', function() {
$('.history').css('display', 'none');
if ($keyword.val().length) {
searchResult();
$(this).closest('.search-box').css('width', '11.25rem');
... ... @@ -137,4 +161,20 @@ if ($('.brand-search-page').length) {
$('form.search-box').on('submit', function() {
return false;
});
if (localStorage && localStorage.getItem('yohoHistory')) {
yohoHistory = $.parseJSON('[' + localStorage.getItem('yohoHistory') + ']');
if (yohoHistory) {
$.each(yohoHistory, function(index, content) {
$('<a href="' + content.searchHref + '">' + content.searchName + '</a>').appendTo('.historyList');
});
}
} else {
$('.history').css('display', 'none');
}
removeHistory = new Hammer($('.removeHistory')[0]);
removeHistory.on('tap', function(e) {
$('.historyList').html(' ');
localStorage.clear();
});
}
... ...
... ... @@ -37,7 +37,6 @@ $input.on('input', function() {
$clear.removeClass('hide');
}
});
cHammer = new Hammer($clear[0]);
cHammer.on('tap', function() {
$input.val('').trigger('input');
... ...
... ... @@ -194,5 +194,50 @@
.search-result {
padding-top: 176rem / $pxConvertRem;
}
.history{
width: 100%;
height: auto;
overflow: hidden;
position: absolute;
left: 0;
top: 176rem / $pxConvertRem;
> h6{
width: 100%;
height: 88rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
color: #999;
text-indent: .6rem;
font-size: 36em / $pxConvertRem;
}
.historyList{
width: 100%;
height: auto;
overflow: hidden;
display: block;
> a{
width: auto;
height: 58rem / $pxConvertRem;
overflow: hidden;
line-height: 58rem / $pxConvertRem;
margin: 0 0 20rem / $pxConvertRem .6rem;
padding: 0 20rem / $pxConvertRem;
float: left;
background-color:#f8f8f8;
color: #444;
}
}
> span{
width: auto;
height: 68rem / $pxConvertRem;
overflow: hidden;
display: inline-block;
line-height: 68rem / $pxConvertRem;
border:1px solid #e6e6e6;
padding: 0 28rem / $pxConvertRem;
font-size: 48em / $pxConvertRem;
margin-left: .6rem;
color: #000;
}
}
}
... ...
... ... @@ -27,20 +27,20 @@
.clear-input {
position: absolute;
top: 24rem / $pxConvertRem;
right: 100rem / $pxConvertRem;
right: 145rem / $pxConvertRem;
font-size: 32rem / $pxConvertRem;
color: #b2b2b2;
}
.search {
position: absolute;
top: 16rem / $pxConvertRem;
top: 18rem / $pxConvertRem;
left: 515rem / $pxConvertRem;
border: none;
background: transparent;
color: #000;
font-size: 32rem / $pxConvertRem;
line-height: 64rem / $pxConvertRem;
line-height: 56rem / $pxConvertRem;
}
}
... ...
... ... @@ -10,6 +10,11 @@
</div>
</form>
</div>
<div class="history">
<h6>历史纪录</h6>
<div class="historyList"></div>
<span class='removeHistory'>清空搜索历史</span>
</div>
<div class="search-result">
</div>
</div>
... ...
... ... @@ -6,7 +6,7 @@
<i class="search-icon iconfont">&#xe60f;</i>
<input type="text" placeholder="搜索商品" name="query">
<i class="clear-input iconfont hide">&#xe626;</i>
<span id="search" class="search" type="submit">搜索</span>
<button id="search" class="search" type="submit">搜索</button>
</form>
</div>
<div class="search-items">
... ...