|
|
var $ = require('yoho-jquery'),
|
|
|
lazyload = require('yoho-jquery-lazyload');
|
|
|
var Handlebars = require('yoho-handlebars');
|
|
|
|
|
|
function InfiniteLoad(options) {
|
|
|
var defaults = {
|
|
|
index: 0,
|
|
|
isload: true, // 是否正在加载
|
|
|
isrun: true, // 判断是否执行
|
|
|
offset: {
|
|
|
height: null,
|
|
|
width: null
|
|
|
}
|
|
|
};
|
|
|
|
|
|
this.registerEvent = {
|
|
|
before: [],
|
|
|
change: [],
|
|
|
after: []
|
|
|
};
|
|
|
|
|
|
this.options = $.extend(true, {}, defaults, options);
|
|
|
|
|
|
return this;
|
|
|
}
|
|
|
|
|
|
InfiniteLoad.prototype.on = function(name, callback) {
|
|
|
var g = this;
|
|
|
var _e = g.registerEvent[name];
|
|
|
|
|
|
if (_e) {
|
|
|
_e.push(callback);
|
|
|
}
|
|
|
return _e;
|
|
|
};
|
|
|
|
|
|
InfiniteLoad.prototype.exect = function(key, params) {
|
|
|
var g = this;
|
|
|
var e;
|
|
|
|
|
|
if (g.registerEvent[key] && g.registerEvent[key].length > 0) {
|
|
|
for (e in g.registerEvent[key]) {
|
|
|
if (g.registerEvent[key].hasOwnProperty(e)) {
|
|
|
g.registerEvent[key][e](params);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
|
|
|
InfiniteLoad.prototype.init = function() {
|
|
|
var g = this;
|
|
|
var p = this.options;
|
|
|
|
|
|
function __loadMore() {
|
|
|
|
|
|
if (p.isrun && p.isload && g.__directionCalculation()) {
|
|
|
p.isload = false;
|
|
|
p.index++;
|
|
|
g.exect('after', p);
|
|
|
}
|
|
|
|
|
|
g.exect('change', p);
|
|
|
}
|
|
|
|
|
|
g.exect('before', p);
|
|
|
|
|
|
$(window).scroll(__loadMore);
|
|
|
};
|
|
|
|
|
|
InfiniteLoad.prototype.emit = function() {
|
|
|
var p = this.options;
|
|
|
|
|
|
p.isload = true;
|
|
|
};
|
|
|
|
|
|
InfiniteLoad.prototype.stop = function() {
|
|
|
var p = this.options;
|
|
|
|
|
|
p.isrun = false;
|
|
|
p.isload = false;
|
|
|
};
|
|
|
|
|
|
InfiniteLoad.prototype.__directionCalculation = function() {
|
|
|
var p = this.options;
|
|
|
|
|
|
if (p.offset.height && p.offset.height() > 0 && $(window).scrollTop() + $(window).height() >= p.offset.height()) {
|
|
|
return true;
|
|
|
}
|
|
|
return false;
|
|
|
};
|
|
|
|
|
|
module.exports = function(data) {
|
|
|
var $container = $('#newarrivals .goods-container');
|
|
|
var $load = $('.loading a');
|
|
|
var load = new InfiniteLoad({
|
|
|
index: 1,
|
|
|
isload: false,
|
|
|
offset: {
|
|
|
height: function() {
|
|
|
return parseFloat($container.offset().top) + parseFloat($container.height()) - 200;
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
var loadAjax;
|
|
|
var url = data.url,
|
|
|
count = data.count,
|
|
|
rows = data.rows;
|
|
|
|
|
|
data.pageIndex = 0;
|
|
|
|
|
|
delete data.url;
|
|
|
delete data.count;
|
|
|
delete data.rows;
|
|
|
|
|
|
loadAjax = function(url, data, count) {
|
|
|
|
|
|
var options = {
|
|
|
type: 'POST',
|
|
|
url: url,
|
|
|
success: function(result) {
|
|
|
var code = result.code;
|
|
|
var myTemplate, len, pos;
|
|
|
|
|
|
if (code === 200) {
|
|
|
len = result.goods.length % count;
|
|
|
pos = result.goods.length - len - 1;
|
|
|
|
|
|
result.goods.splice(pos, len);
|
|
|
|
|
|
myTemplate = Handlebars.compile(load.tpl);
|
|
|
|
|
|
$container.append(myTemplate(result.goods));
|
|
|
data.pageIndex = data.pageIndex + result.goods.length;
|
|
|
|
|
|
// 懒加载插件貌似有点问题,图片先直接展示
|
|
|
lazyload($container.find('img.lazy'));
|
|
|
|
|
|
load.emit();
|
|
|
} else {
|
|
|
|
|
|
load.stop();
|
|
|
$load.html('查看更多');
|
|
|
}
|
|
|
},
|
|
|
error: function() {
|
|
|
|
|
|
load.stop();
|
|
|
$load.html('网络断开连接了~');
|
|
|
}
|
|
|
};
|
|
|
|
|
|
options.data = data;
|
|
|
$.ajax(options);
|
|
|
};
|
|
|
|
|
|
|
|
|
load.on('after', function(p) {
|
|
|
|
|
|
data.pageCount = count * rows[1];
|
|
|
|
|
|
loadAjax(url, data);
|
|
|
});
|
|
|
|
|
|
load.on('before', function(p) {
|
|
|
|
|
|
|
|
|
load.tpl = '{{#each this}}';
|
|
|
load.tpl += '<div class="good-info imgopacity" data-skn="{{skn}}">';
|
|
|
load.tpl += ' <div class="tag-container clearfix">';
|
|
|
load.tpl += ' {{# tags}}';
|
|
|
load.tpl += ' {{# isNew}}';
|
|
|
load.tpl += ' <span class="good-tag new-tag">NEW</span>';
|
|
|
load.tpl += ' {{/ isNew}}';
|
|
|
load.tpl += ' {{# isReNew}}';
|
|
|
load.tpl += ' <span class="good-tag renew-tag">再到着</span>';
|
|
|
load.tpl += ' {{/ isReNew}}';
|
|
|
load.tpl += ' {{# isSale}}';
|
|
|
load.tpl += ' <span class="good-tag sale-tag">SALE</span>';
|
|
|
load.tpl += ' {{/ isSale}}';
|
|
|
load.tpl += ' {{# isNewFestival}}';
|
|
|
load.tpl += ' <span class="good-tag new-festival-tag">新品节</span>';
|
|
|
load.tpl += ' {{/ isNewFestival}}';
|
|
|
load.tpl += ' {{# isLimit}}';
|
|
|
load.tpl += ' <span class="good-tag limit-tag">限量商品</span>';
|
|
|
load.tpl += ' {{/ isLimit}}';
|
|
|
load.tpl += ' {{# isYearEndPromotion}}';
|
|
|
load.tpl += ' <span class="good-tag yep-tag">年终大促</span>';
|
|
|
load.tpl += ' {{/ isYearEndPromotion}}';
|
|
|
load.tpl += ' {{# isYearMidPromotion}}';
|
|
|
load.tpl += ' <span class="good-tag ymp-tag">年中热促</span>';
|
|
|
load.tpl += ' {{/ isYearMidPromotion}}';
|
|
|
load.tpl += ' {{/ tags}}';
|
|
|
load.tpl += ' </div>';
|
|
|
load.tpl += ' <div class="good-detail-img">';
|
|
|
load.tpl += ' <a class="good-thumb" href="{{url}}" target= "_blank">';
|
|
|
load.tpl += ' <img class="lazy" data-original="{{thumb}}">';
|
|
|
load.tpl += ' </a>';
|
|
|
load.tpl += ' {{# isFew}}';
|
|
|
load.tpl += ' <p class="few-tag">即将售罄</p>';
|
|
|
load.tpl += ' {{/ isFew}}';
|
|
|
|
|
|
load.tpl += ' {{#if showColBtn}}';
|
|
|
load.tpl += ' <span class="col-btn iconfont{{#if coled}} coled{{/if}}"></span>';
|
|
|
load.tpl += ' {{/if}}';
|
|
|
load.tpl += ' </div>';
|
|
|
load.tpl += ' <div class="good-detail-text">';
|
|
|
load.tpl += ' <a href="{{url}}" target= "_blank">{{name}}</a>';
|
|
|
load.tpl += ' <p class="price">';
|
|
|
load.tpl += ' <span class="sale-price{{#unless marketPrice}}prime-cost{{/unless}}">';
|
|
|
load.tpl += ' ¥{{salePrice}}';
|
|
|
load.tpl += ' </span>';
|
|
|
load.tpl += ' {{# marketPrice}}';
|
|
|
load.tpl += ' <span class="market-price">¥{{.}}</span>';
|
|
|
load.tpl += ' {{/ marketPrice}}';
|
|
|
load.tpl += ' </p>';
|
|
|
load.tpl += ' </div>';
|
|
|
load.tpl += '</div>';
|
|
|
load.tpl += '{{/each}}';
|
|
|
|
|
|
|
|
|
data.pageCount = count * rows[0];
|
|
|
|
|
|
loadAjax(url, data, data.count);
|
|
|
|
|
|
// load.emit();
|
|
|
});
|
|
|
|
|
|
load.init();
|
|
|
|
|
|
}; |
...
|
...
|
|