Authored by 郭成尧

Merge branch 'feature/sale' of http://git.dev.yoho.cn/web/yohobuy-node into feature/sale

 the commit.
... ... @@ -583,7 +583,152 @@ exports.outletBanner = () => {
],
hotBrands: {
name: '热门品牌',
brandUrl: 'www.baidu.com'
},
brandList: {
logoBrand: [{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
},
{
href: 'www.baidu.com',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50'
}]
},
recommend: {
tplrecommend: {
name: '热门品类',
keyword: [{
name: 'T-SHIRTS',
herf: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75'
},
{
name: 'T-SHIRTS',
herf: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75'
},
{
name: 'T-SHIRTS',
herf: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/75'
}],
category: [{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/380/h/500',
name: '衬衣'
},
{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}, {
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/50/h/50',
name: '衬衣'
}],
brands: [{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/380/h/500',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/380/h/500'
}],
types: [{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
},
{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
},
{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
},
{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
},
{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
},
{
href: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250',
name: '衬衣',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/180/h/250'
}]
}
}
};
};
... ...
... ... @@ -34,6 +34,14 @@
{{!热门品牌}}
{{# hotBrands}}
{{> brand/hot-brand}}
{{> index/floor-header}}
<div class="logo-brand " data-url="{{brandUrl}}">
</div>
{{/hotBrands}}
{{! 热门品类}}
{{# recommend}}
{{> index/outlets-recommend}}
{{/ recommend}}
</div>
\ No newline at end of file
... ...
{{> index/floor-header}}
<div class="preference-brand imgopacity">
<div class="logo-brand " data-url="{{brandUrl}}">
</div>
</div>
\ No newline at end of file
{{# tplrecommend}}
<div class="tpl-recommend clearfix">
{{> index/floor-header}}
<div class="tpl-body clearfix">
<div class="tpl-nav">
<div class="tpl-keywords">
{{#each keyword}}
<a class="keywords{{@index}}" title="{{name}}" href="{{href}}" target= "_blank"><img src="{{img}}"/></a>
{{/each}}
</div>
<div class="tpl-category clearfix">
{{#each category}}
<a href="{{href}}" target= "_blank">{{name}}</a>
{{/each}}
</div>
</div>
<div class="tpl-brands imgopacity clearfix">
{{#each brands}}
<a title="{{name}}" href="{{href}}" target= "_blank"><img src="{{img}}"/></a>
{{/each}}
</div>
<div class="tpl-types imgopacity clearfix">
<ul>
{{#each types}}
<li><a title="{{name}}" href="{{href}}" target= "_blank"><img src="{{img}}"/></a></li>
{{/each}}
</ul>
</div>
</div>
</div>
{{/ tplrecommend}}
\ No newline at end of file
... ...
var Slide = require('./yohoui/YH.slide');
var $ = require('yoho.jquery');
var $contain = $('.slide-accordion');
var $item = $contain.find('li');
var $width = $item.width();
var $spn = parseInt($('.home-page').width()) === 1150 ? (120 + 5) : (102 + 5);
var slide;
function switchfun(to) {
$item.each(function(index) {
$(this).css('zIndex', index);
if (index <= to) {
$(this).stop().animate({
left: index * $spn
}, 400);
} else {
$(this).stop().animate({
left: (to) * $spn + $width + $spn * (index - to - 1)
}, 400);
}
});
}
switchfun(0);
slide = new Slide({
length: 5,
loop: false,
auto: false,
timeout: 2,
index: 0
});
slide.on('change', function(data) {
switchfun(data.to);
});
$item.mouseover(function() {
slide.go($(this).index());
});
slide.init();
... ...
/**
* 弹框公共组件
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/2/24
*/
var $ = require('yoho.jquery'),
Handlebars = require('yoho.handlebars');
var defaultOptions = {
mask: true,
closeIcon: true
};
var tpl =
'<div class="yoho-dialog {{className}} hide">' +
'{{#if closeIcon}}' +
'<span class="close">' +
'<i class="iconfont">&#xe602;</i>' +
'</span>' +
'{{/if}}' +
'<div class="content">' +
'{{{content}}}' +
'</div>' +
'<div class="btns">' +
'{{# btns}}' +
'<span {{#if id}}id="dialog-{{id}}"{{/if}} class="btn{{#each btnClass}} {{.}}{{/each}}">' +
'{{name}}' +
'</span>' +
'{{/ btns}}' +
'</div>' +
'</div>';
var tplFn = Handlebars.compile(tpl);
// 背景蒙版
function createMask() {
if ($('.body-mask').length === 0) {
$('body').append('<div class="body-mask hide"></div>');
}
return $('.body-mask').css({
height: $(document).height(),
width: $(document).width()
});
}
function createDialog(data) {
$('body').append(tplFn(data));
return $('.yoho-dialog');
}
function Dialog(options) {
var opt = $.extend({}, defaultOptions, options);
var that = this,
i;
// 实现继承时,只返回实例,不生成html
if (opt.inherit) {
return this;
}
if (opt.mask) {
that.$mask = createMask();
}
that.$el = createDialog(opt);
// 绑定x关闭事件
that.$el.find('.close').click(function() {
that.close();
});
function bindBtnEvt(index) {
that.$el.find('#dialog-' + opt.btns[index].id).on('click', function() {
opt.btns[index].cb && opt.btns[index].cb();
});
}
// 绑定按钮事件
if (opt.btns) {
for (i = 0; i < opt.btns.length; i++) {
bindBtnEvt(i);
}
}
}
Dialog.prototype.close = function() {
this.$mask && this.$mask.addClass('hide');
this.$el.remove();
};
Dialog.prototype.show = function() {
this.$mask && this.$mask.removeClass('hide');
this.$el.removeClass('hide').css({
'margin-top': -this.$el.height() / 2,
'margin-left': -this.$el.width() / 2
});
};
exports.Dialog = Dialog;
// Alert
function Alert(content) {
var that = this;
var option = {
content: content,
className: 'alert-dialog',
btns: [
{
id: 'alert-sure',
btnClass: ['alert-sure'],
name: '确定',
cb: function() {
that.close();
}
}
]
};
Dialog.call(this, option);
}
Alert.prototype = new Dialog({
inherit: true
});
Alert.prototype.constructor = Alert;
exports.Alert = Alert;
// Confirm
function Confirm(opt) {
var that = this;
var option = {
content: opt.content,
className: 'confirm-dialog',
btns: [
{
id: 'confirm-sure',
btnClass: ['confirm-sure'],
name: '确定',
cb: opt.cb
},
{
id: 'confirm-cancel',
btnClass: ['confirm-cancel'],
name: '取消',
cb: function() {
that.close();
}
}
]
};
Dialog.call(this, option);
}
Confirm.prototype = new Dialog({
inherit: true
});
Confirm.prototype.constructor = Confirm;
exports.Confirm = Confirm;
... ...
... ... @@ -83,7 +83,6 @@ var $ = require('yoho-jquery'),
return;
}
that._createHelper();
brandHtml = '\{{#brandList logoBrand}}' +
'<a href="\{{href}}" target="_blank"><img class="lazy" data-original="\{{img}}" alt=""></a>' +
'\{{/brandList}}';
... ...
var $ = require('yoho.jquery'),
lazyload = require('yoho.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}}">&#xe616;</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();
};
... ...
/**
* 分享
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2016/3/1
*/
var $ = require('yoho.jquery');
function shareBase(options) {
var openUrl = '';
var defOption = {
title: '',
url: window.location.href,
weixinUrl: '',
image: '',
desc: '',
channel: ''
};
var shareChannels = ['weibo', 'tweibo', 'qzone', 'renren', 'qq', 'douban', 'weixin'];
var sharebox;
var shareCon = '<em><i></i></em>';
defOption = $.extend(defOption, options);
if ($.inArray(defOption.channel, shareChannels) === -1) {
alert('不存在的分享平台!');
return false;
}
switch (defOption.channel) {
case 'weibo':
openUrl = 'http://service.weibo.com/share/share.php?url=' + defOption.url + '&title=' +
defOption.title + '&appkey=3739328910&searchPic=true&pic=' + defOption.image;
break;
case 'tweibo':
openUrl = 'http://share.v.t.qq.com/index.php?c=share&a=index&url=' + defOption.url + '&title=' +
defOption.title + '&appkey=c0af9c29e0900813028c2ccb42021792&pic=' + defOption.image;
break;
case 'qzone':
openUrl = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=' + defOption.url + '&title=' +
defOption.title + '&desc=&summary=' + defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
break;
case 'renren':
openUrl = 'http://widget.renren.com/dialog/share?resourceUrl=' + defOption.url + '&srcUrl=' +
defOption.url + '&desc=' + defOption.desc + '&title=' + defOption.title + '&description=' +
defOption.desc + '&pic=' + defOption.image;
break;
case 'qq':
openUrl = 'http://connect.qq.com/widget/shareqq/index.html?url=' + defOption.url + '&desc=' +
defOption.desc + '&title=' + defOption.title.replace('%', '') + '&desc=&summary=' +
defOption.desc + '&site=YOHO!有货&pics=' + defOption.image;
break;
case 'weixin':
openUrl = 'http://s.jiathis.com/qrcode.php?url=' + defOption.weixinUrl + '&desc=' +
defOption.desc + '&title=' + defOption.title + '&description=' +
defOption.desc + '&pic=' + defOption.image;
break;
case 'douban':
openUrl = 'http://www.douban.com/share/service?href=' + defOption.url + '&text=' +
defOption.desc + '&image=' + defOption.image + '&title=' + defOption.title + '&comment=';
break;
}
if (defOption.channel === 'weixin') {
if (!defOption.self) {
return;
}
sharebox = defOption.self.closest('.share-to').find('.weixin-share-box');
if (sharebox.length > 0) {
shareCon += '<div class="con"><h2>分享到微信朋友圈</h2><p class="pic">' +
'<img src="' + openUrl + '" /></p><p class="w">打开微信,点击底部得“发现”,使用<br/>“扫一扫“即可将网页分享到我的朋友圈。</p>' +
'<a href="javascript:void(0)" class="close">x</a></div>';
sharebox.find('div').length > 0 ? sharebox.show() : sharebox.html(shareCon).show();
sharebox.find('.close').click(function() {
$(this).closest('.weixin-share-box').hide();
});
}
} else {
window.open(encodeURI(openUrl));
}
}
function share(channel, self) {
var title = document.title.replace(/(^\s*)|(\s*$)/g, '');
var desc = $('#share-desc').val();
var image = $('#share-img').val();
var weixinUrl = $('#weixin-url').val();
if (channel === 'weibo' || channel === 'tqq') {
shareBase({
channel: channel,
title: title,
image: image
});
} else {
shareBase({
channel: channel,
title: title,
desc: desc,
image: image,
self: self,
weixinUrl: weixinUrl
});
}
}
$('.share-wrapper').on('click', 'i', function() {
var $el = $(this),
type = $el.data('type');
if (type === 'weixin') {
share(type, $el);
} else {
share(type);
}
});
... ...
/**
* (品牌优选)图片幻灯片插件
* @author: wangqing(robin.wang@yoho.cn)
* @date: 205/7/2
*/
var $ = require('yoho-jquery');
(function() {
$.fn.slider2 = function(options) {
function autoplay(index, limit, toright) {
if (toright === true) {
$('.next').trigger('click');
if (index === (limit - 3)) {
autoplayrecycle(--index, limit, false);
} else {
autoplayrecycle(++index, limit, true);
}
} else {
$('.prev').trigger('click');
if (index === 0) {
autoplayrecycle(++index, limit, true);
} else {
autoplayrecycle(--index, limit, false);
}
}
}
function autoplayrecycle(index, limit, toright) {
window.setTimeout(autoplay, $.fn.slider2.defaults.delaytime, index, limit, toright);
}
function changePic(index, width, callback) {
var offersetleft = -(index * width);
$('.img-list')
.animate({
'margin-left': offersetleft + 'px'
}, 'slow', callback);
}
$.fn.slider2.defaults = {
index: 0,
shownum: 3,
autoplay: false,
delaytime: 3000
};
return this.each(function() {
var opts = $.extend({}, $.fn.slider2.defaults, options);
var mr = parseInt($('.img-item').css('margin-right'));
var $banneritems = $('.img-item');
var bannerarr = [];
var _width = $banneritems.outerWidth() + mr,
_size = $banneritems.length,
j = 0;
if (_size <= 3) {
$(this).find('.img-brand-switch').hide();
return;
}
for (j = 0; j < $banneritems.length; j++) {
bannerarr.push($banneritems[j]);
}
_size = bannerarr.length;
$(this).find('.img-list').css({
width: (_width * _size)
});
$(this).find('.next').on('click', function(e) {
var i = 0,
_obj = null;
e.preventDefault();
changePic(3, _width, function() {
for (i = 0; i < 3; i++) {
_obj = bannerarr.shift();
$('.img-item').parent().append(_obj.outerHTML);
bannerarr.push(_obj);
}
$('.img-item').first().remove();
$('.img-item').first().remove();
$('.img-item').first().remove();
$('.img-list').css({
'margin-left': '0'
});
});
});
$(this).find('.prev').on('click', function(e) {
var i = 0,
_obj = null,
offersetleft = '';
e.preventDefault();
for (i = 0; i < 3; i++) {
_obj = bannerarr.pop();
$('.img-item').parent().prepend(_obj.outerHTML);
bannerarr.unshift(_obj);
}
offersetleft = 3 * _width;
$('.img-item').last().remove();
$('.img-item').last().remove();
$('.img-item').last().remove();
$('.img-list').css({
'margin-left': -offersetleft + 'px'
});
changePic(0, _width);
});
if (opts.autoplay === true) {
autoplayrecycle(opts.index, _size, true);
}
});
};
}());
... ...
var assembly;
var classtype = {
'[object Array]': 'array',
'[object Boolean]': 'boolean',
'[object Date]': 'date',
'[object Function]': 'function',
'[object Number]': 'number',
'[object Object]': 'object',
'[object RegExp]': 'regexp',
'[object String]': 'string'
};
var me = {
__Index: 0,
list: [],
get: function(id) {
return id === undefined ? this.list : this.list[id];
},
fn: function() { },
inherit: function(childClass, parentClass) {
var Constructor = me.fn;
Constructor.prototype = parentClass.prototype;
childClass.prototype = new Constructor();
childClass.prototype.constructor = childClass;
childClass.superclass = parentClass.prototype;
if (childClass.prototype.constructor === Object.prototype.constructor) {
childClass.prototype.constructor = parentClass;
}
},
extend: function(obj, newProperties) {
var key;
for (key in newProperties) {
if (newProperties.hasOwnProperty(key)) {
obj[key] = newProperties[key];
}
}
return obj;
},
copy: function(TargetClass, obj, newProperties) {
var value, o, key;
if (typeof obj !== 'object') {
return obj;
}
value = obj.valueOf();
if (obj !== value) {
return new obj.constructor(value);
}
if (obj instanceof obj.constructor && obj.constructor !== Object) {
if (TargetClass) {
o = new TargetClass();
} else {
o = me.clone(obj.constructor.prototype);
}
for (key in obj) {
if (TargetClass || obj.hasOwnProperty(key)) {
o[key] = obj[key];
}
}
} else {
o = {};
for (key in obj) {
if (o.hasOwnProperty(key)) {
o[key] = obj[key];
}
}
}
if (newProperties) {
for (key in newProperties) {
if (o.hasOwnProperty(key)) {
o[key] = newProperties[key];
}
}
}
return o;
},
clone: function(obj) {
me.__cloneFunc.prototype = obj;
return new me.__cloneFunc();
},
__cloneFunc: function() {
},
delegate: function(func, scope) {
var args;
scope = scope || window;
if (arguments.length > 2) {
args = Array.prototype.slice.call(arguments, 2);
return function() {
return func.apply(scope, args);
};
} else {
return function() {
return func.call(scope);
};
}
},
dom: function($select, classCss) {
var wrap = $select;
var name, DOM = {
wrap: wrap
},
els = wrap[0].getElementsByTagName('*'),
elsLen = els.length;
var i;
for (i = 0; i < elsLen; i++) {
name = els[i].className;
if (name.indexOf(classCss) > -1) {
name = name.split(classCss)[1];
}
if (name) {
DOM[name] = wrap.find(els[i]);
}
}
return DOM;
},
// 模板引擎
template: function() {
var result, key, reg, i;
var args = arguments;
if (args.length > 0) {
if (me.isString(args[0])) {
result = args[0];
if (args.length === 2 && me.isObject(args[1])) {
for (key in args[1]) {
if (args[1][key] !== undefined) {
reg = new RegExp('({' + key + '})', 'g');
result = result.replace(reg, args[1][key]);
}
}
} else {
for (i = 1; i < args.length; i++) {
if (args[i] !== undefined) {
reg = new RegExp('({[' + (i - 1) + ']})', 'g');
result = result.replace(reg, args[i]);
}
}
}
}
}
return result;
},
__type: function(obj) {
return obj == null ? String(obj) : classtype[Object.prototype.toString.call(obj)] || 'object';
},
isObject: function(obj) {
return this.isFunction(obj) || !!(obj && 'object' === typeof obj);
},
isFunction: function(obj) {
return this.__type(obj) === 'function';
},
isArray: Array.isArray || function(obj) {
return this.__type(obj) === 'array';
},
isNum: function(obj) {
return !isNaN(parseFloat(obj)) && isFinite(obj);
},
isString: function(obj) {
return this.__type(obj) === 'string';
},
each: function(data, callback, args) {
var i, len;
if (me.isArray(data)) {
for (i = 0, len = data.length; i < len; i++) {
if (callback.call(data[i], i, data[i], args) === false) {
break;
}
}
} else {
for (i in data) {
if (callback.call(data[i], i, data[i], args) === false) {
break;
}
}
}
},
funManager: {
__loadList: {},
__loadFun: function(item, callback, win) {
if (item.methord && me.isFunction(item.methord())) {
win = win || window;
item.methord()(item, function() {
callback();
}, win);
}
},
load: function(fns, statechange, win, __index) {
__index = __index || 0;
if (fns[__index]) {
me.funManager.__loadFun(fns[__index], function() {
me.funManager.load(fns, statechange, win, __index + 1);
}, win);
}
statechange(__index, win);
},
get: function(id) {
return this.__loadList[id];
}
},
log: function(msg) {
var console = window.console || {
log: function() { }
};
console.log(msg);
},
Event: {
mousewheel: function(e) {
var _eoe = e.originalEvent;
var _de = _eoe.detail ? _eoe.detail * -1 : _eoe.wheelDelta / 40;
var _direction = _de < 0 ? -1 : 1;
return {
direction: _direction,
unit: _de
};
},
__: function(_e, el, event, handle) {
var key;
for (key in _e) {
if (window[_e[key].validator]) {
el[_e[key].validator](_e[key].prefix + event, handle, false);
break;
}
}
},
add: function(el, event, handle) {
var _e = [
{
validator: 'addEventListener',
prefix: ''
},
{
validator: 'attachEvent',
prefix: 'on'
}
];
this.__(_e, el, event, handle);
},
remove: function(el, event, handle) {
var _e = [
{
validator: 'removeEventListener',
prefix: ''
},
{
validator: 'detachEvent',
prefix: 'on'
}
];
this.__(_e, el, event, handle);
}
},
getUid: function(_name) {
return me.template('me-{0}{1}-{2}', _name, new Date().getTime(), me.__Index++);
},
Browser: {
isTouch: function() {
var msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture;
return (('ontouchstart' in window) || msGesture || window.DocumentTouch) ? true : false;
},
Prefix: function() {
var i;
var props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective'];
var obj = document.createElement('div');
for (i in props) {
if (obj.style[props[i]] !== undefined) {
return me.template('-{0}-', props[i].replace('Perspective', '').toLowerCase());
}
}
},
parseURL: function(url) {
var a = document.createElement('a');
var ret, seg, len, i, s;
a.href = url;
return {
source: url,
protocol: a.protocol.replace(':', ''),
host: a.hostname,
port: a.port,
query: a.search,
params: (function() {
ret = {},
seg = a.search.replace(/^\?/, '').split('&'),
len = seg.length, i = 0, s;
for (; i < len; i++) {
if (!seg[i]) {
continue;
}
s = seg[i].split('=');
ret[s[0]] = s[1];
}
return ret;
})(),
file: (a.pathname.match(/\/([^\/?#]+)$/i) || [null, ''])[1],
hash: a.hash.replace('#', ''),
path: a.pathname.replace(/^([^\/])/, '/$1'),
relative: (a.href.match(/tps?:\/\/[^\/]+(.+)/) || [null, ''])[1],
segments: a.pathname.replace(/^\//, '').split('/')
};
}
},
Array: {
indexOf: function(array, val) {
var i;
for (i = 0; i < array.length; i++) {
if (this[i] === val) {
return i;
}
}
return -1;
},
remove: function(array, val) {
var index = this.indexOf(array, val);
if (index > -1) {
array.splice(index, 1);
}
return array;
}
}
};
assembly = function(options) {
this.initialized = false;
this.registerEvent = {
before: [],
change: [],
after: []
};
this.options = options;
this.init(options);
};
assembly.output = function() {
me.log(me.list);
};
assembly.prototype.oninit = me.fn;
assembly.prototype.init = function(cfg) {
this.initialized = true;
// function _getClassName(_constructor, _constr) {
// var _constr = _constr || "";
// if (_constructor.superclass) {
// var args = /(\w+)\.superclass/.exec(_constructor.arguments.callee);
// if (args != null) {
// _constr += args[1] + "-";
// // return _getClassName(_constructor.superclass.constructor, _constr);
// }
// }
// return _constr;
// }
this.__Uid = me.getUid('me');
this.oninit(cfg);
me.list[this.__Uid] = this;
};
assembly.prototype.destory = function() {
this.initialized = false;
delete me.list[this.__Uid];
};
assembly.prototype.getUid = function() {
return this.__Uid;
};
assembly.prototype.getOptions = function() {
return this.options;
};
assembly.prototype.config = function() {
if (arguments.length > 0) {
if (typeof (arguments[0]) === 'string') {
if (arguments.length > 1) {
this.options[arguments[0]] = arguments[1];
} else {
return this.options[name];
}
}
} else {
return this.options;
}
};
assembly.prototype.on = function(name, callback) {
var __self = this;
var _e = __self.registerEvent[name];
if (_e) {
_e.push(callback);
}
return _e;
};
assembly.prototype.off = function(name, callback) {
var __self = this;
var _e = __self.registerEvent[name];
var e = [];
me.each(_e, function(name, _callback) {
if (_callback === callback) {
e.push(name);
}
});
me.each(e.reverse(), function(name, _callback) {
_e.splice(_callback, 1);
});
};
me.assembly = assembly;
module.exports = me;
... ...
var me = require('./YH.base');
var slide = function(options) {
this.__lastTime = null;
this.__isStop = false;
options = me.extend(this.defaults, options);
slide.superclass.constructor.call(this, options);
};
me.inherit(slide, me.assembly);
slide.prototype.oninit = function() {
var __self = this,
_o = __self.options;
if (_o.auto) {
__self.play();
}
__self.go(_o.index);
return this;
};
slide.prototype.go = function(_to, _from) {
var __self = this,
_o = __self.options;
var _direction, _loop, _current, _index, _originalto, o, key, _e;
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
__self.__lastTime = null;
}
_from = 'undefined' === typeof _from ? _o.index : _from;
_direction = _to === _from ? 0 : _to > _from ? 1 : -1;
_loop = _o.loop, _index = _o.length - 1, _originalto = _to;
if (_loop) {
if (_to > _index) {
_to = _to - _index - 1;
} else {
if (0 > _to) {
_to = _to + _index + 1;
} else {
_to = _to;
}
}
} else {
if (_to > _index) {
_to = _index;
} else {
if (0 > _to) {
_to = 0;
} else {
_to = _to;
}
}
}
_current = _o.index = _to;
o = {
from: _from,
to: _to,
originalto: _originalto,
direction: _direction
};
for (key in __self.registerEvent) {
if (__self.registerEvent[key].length > 0) {
for (_e in __self.registerEvent[key]) {
if (__self.registerEvent[key].hasOwnProperty(_e)) {
__self.registerEvent[key][_e](o);
}
}
}
}
if (_current !== _index || _to) {
if (!__self.__isStop && _o.auto) {
__self.play();
}
} else {
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
}
}
};
slide.prototype.play = function() {
var __self = this,
_o = __self.options;
__self.__lastTime = setTimeout(function() {
__self.next();
}, 1000 * _o.timeout);
return this;
};
slide.prototype.next = function() {
var __self = this,
_o = __self.options;
var _from = _o.index;
var _to = _from + _o.step;
__self.go(_to, _from);
};
slide.prototype.prev = function() {
var __self = this,
_o = __self.options;
var _from = _o.index;
var _to = _from - _o.step;
__self.go(_to, _from);
};
slide.prototype.pause = function() {
var __self = this;
if (__self.__lastTime) {
clearTimeout(__self.__lastTime);
}
__self.__isStop = true;
};
slide.prototype.resume = function() {
var __self = this;
__self.__isStop = false;
__self.play();
};
slide.prototype.defaults = {
index: 0,
timeout: 5,
step: 1,
per: 1,
auto: false,
loop: false
};
module.exports = slide;
... ...
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload'),
homePage = $('.home-page').data('page');
lazyLoad($('img.lazy'));
// lazyLoad = require('yoho-jquery-lazyload'),
homePage = $('.home-page').data('page'),
brandUrl = $('.logo-brand').data('url');
// lazyLoad($('img.lazy'));
// require('../header');
require('../common/slider');
require('../common/slider2');
require('../common/logo-brand');
... ... @@ -19,15 +22,15 @@ if (homePage === 'boys') {
$('.slide-container').slider();
}
// if (homePage === 'boys') {
// $('.logo-brand').logoBrand({
// url: brandUrl
// });
// $('.img-brand').slider2();
// } else {
// $('.logo-brand').logoBrand({
// showNum: 10,
// url: brandUrl
// });
// $('.img-slider-wrapper').slider2();
// }
if (homePage === 'boys') {
$('.logo-brand').logoBrand({
url: brandUrl
});
$('.img-brand').slider2();
} else {
$('.logo-brand').logoBrand({
showNum: 10,
url: brandUrl
});
$('.img-slider-wrapper').slider2();
}
... ...
.yoho-page {
.floor-header {
position: relative;
margin: 80px 0 40px;
... ... @@ -41,3 +40,115 @@
}
}
}
/*
热门推荐模板样式
*/
.home-page {
.tpl-recommend {
width: 100%;
position: relative;
a {
display: block;
img {
display: block;
width: 100%;
height: 100%;
}
}
.tpl-body {
margin-bottom: 8px;
}
.tpl-nav {
float: left;
overflow: hidden;
.tpl-keywords {
margin-bottom: 8px;
}
.tpl-category {
padding: 10px 0;
background-color: #f8f8f8;
overflow: hidden;
a {
float: left;
width: 50%;
text-align: center;
color: #000;
overflow: hidden;
}
}
}
.tpl-brands {
float: left;
overflow: hidden;
margin-left: 8px;
li {
margin-top: 8px;
}
}
.tpl-types {
float: left;
overflow: hidden;
margin-top: -8px;
width: 579px;
li {
float: left;
margin-left: 8px;
margin-top: 8px;
a {
width: 185px;
height: 248px;
}
}
}
.tpl-products {
overflow: hidden;
margin-left: -10px;
li {
float: left;
margin-left: 10px;
a {
width: 222px;
height: 298px;
}
}
}
.tpl-nav {
width: 185px;
.keywords0,
.keywords1,
.keywords2 {
margin-bottom: 10px;
height: 76px;
}
.keywords2 {
margin-bottom: 0;
}
.tpl-category {
height: 228px;
a {
height: 38px;
line-height: 38px;
font-size: 14px;
}
}
}
.tpl-brands {
width: 378px;
height: 512px;
li a {
height: 248px;
}
}
}
}
... ...