Authored by hf

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

... ... @@ -63,6 +63,11 @@
//header
{
pageHeader: {
//页面主题标识
boys: true,
girls: true,
kids: true,
lifeStyle: true,
//对应页面有就传,没有就不传
navBack: true,
navTitle: '',
... ...
/**
* Loading mask
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/29
*/
var $ = require('yoho.zepto');
var $page = $('.yoho-page');
var $loading;
/**
* 初始化loading mask
* @param $container loading容器, position:relative
*/
function initLoadingMask() {
var html = '<div class="loading-mask hide"><div class="loading"></div></div>';
$page.append(html);
$loading = $page.children('.loading-mask');
}
//显示loading
function showLoadingMask() {
$loading.removeClass('hide');
}
//隐藏loading
function hideLoadingMask() {
$loading.addClass('hide');
}
exports.initLoadingMask = initLoadingMask;
exports.showLoadingMask = showLoadingMask;
exports.hideLoadingMask = hideLoadingMask;
\ No newline at end of file
... ...
... ... @@ -14,6 +14,7 @@ var $brandHeader = $('#brand-header'),
var filter = require('../plugin/filter');
var tip = require('../plugin/tip');
var loading = require('../plugin/loading');
var $goodsContainer = $('#goods-container'),
$ngc = $goodsContainer.children('.new-goods'),
... ... @@ -72,6 +73,10 @@ function search(opt) {
nav, navType,
page;
if (searching) {
return;
}
if (opt) {
//筛选项变更则重置reload为true
... ... @@ -126,10 +131,6 @@ function search(opt) {
$.extend(defaultOpt, ext); //扩展筛选项
}
if (searching) {
return;
}
//导航类别
if ($pre.hasClass('new')) {
navType = 'newest';
... ... @@ -157,6 +158,7 @@ function search(opt) {
});
searching = true;
loading.showLoadingMask();
$.ajax({
type: 'GET',
... ... @@ -198,6 +200,7 @@ function search(opt) {
nav.page = page;
searching = false;
loading.hideLoadingMask();
}
});
... ... @@ -206,6 +209,7 @@ function search(opt) {
lazyLoad($('.lazy'));
filter.registerCbFn(search);
loading.initLoadingMask();
//导航栏点击逻辑说明:
//1.点击非active项时切换active状态
... ...
.loading-mask {
position: absolute;
background: rgba(0,0,0,.3);
top: 0;
bottom: 0;
right: 0;
left: 0;
.loading {
position: absolute;
width: 100rem / $pxConvertRem;
height: 40rem / $pxConvertRem;
background: image-url('loading.gif') no-repeat;
background-size: 100% 100%;
top: 50%;
left: 50%;
margin-left: -50rem / $pxConvertRem;
margin-top: -20rem / $pxConvertRem;
}
}
\ No newline at end of file
... ...
... ... @@ -93,4 +93,4 @@ a {
}
@import "layout/header", "layout/footer", "good", "filter", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";
@import "layout/header", "layout/footer", "good", "filter", "loading", "passport/index", "guang/index", "home/index", "category/index", "product/index", "index/index", "shopping-cart/index";
... ...
... ... @@ -26,6 +26,19 @@
line-height: 44px;
color: white;
}
.yoho-icon {
float: left;
margin-right: 10px;
font-size: 22px;
line-height: 44px;
width: 44px;
height: 44px;
text-align: center;
color: #fff;
background-color: #000;
border-radius: 10px;
}
}
}
... ...
... ... @@ -7,6 +7,22 @@
height: 88rem / $pxConvertRem;
line-height: 88rem / $pxConvertRem;
&.boys {
@include background-image(linear-gradient(#323232, #414141));
}
&.girls {
background: #ff88ae;
}
&.kids {
background: #7ad9f9;
}
&.life-style {
background: #4f4138;
}
.nav-back {
position: absolute;
left: 34rem / $pxConvertRem;
... ...
... ... @@ -10,7 +10,13 @@
</ul>
<div id="goods-list">
{{> product/goods_container}}
{{# goodsContainer}}
<div class="goods-list {{^show}}hide{{/show}}">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
{{/ goodsContainer}}
</div>
<div id="load-more-info" class="load-more-info">
... ... @@ -20,5 +26,3 @@
<span class="no-more status hide">没有更多啦</span>
</div>
</div>
\ No newline at end of file
\ No newline at end of file
... ...
{{#showDownloadApp}}
<div class="float-layer hide" id="float-layer-app">
<div class="float-layer-left">
<img src="http://static.yohobuy.com/m/v1/img/yohobuy_new.png" alt="">
<span class="yoho-icon iconfont">&#xe60d;</span>
<p>新用户首单减10元</p>
</div>
<a href="javascript:void(0);" id="float-layer-close" >
... ...
{{#pageHeader}}
<header class="yoho-header">
<header class="yoho-header{{#if boys}} boys{{/if}}{{#if girls}} girls{{/if}}{{#if kids}} kids{{/if}}{{#if lifeStyle}} life-style{{/if}}">
{{#if navBack}}
<a href="javascript:history.go(-1);" class="nav-back"></a>
{{/if}}
... ...
{{# goodsContainer}}
<div class="goods-list {{^show}}hide{{/show}}">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
{{/ goodsContainer}}
\ No newline at end of file