fe / yohobuy-node · Commits

Go to a project

Authored by 郭成尧
Commit ec3fc4c7fb397a7117df16d36b128d273598ef13 2 parents f8bd40dd eacc5b77

基本开发框架搭建

Inline Side-by-side
Showing 16 changed files with 434 additions and 12 deletions
... ... @@ -6,13 +6,12 @@
'use strict';
const headerModel = require('../../../doraemon/models/header');
const mRoot = '../models';
// sale 页 model
const sale = require(`${mRoot}/sale`);
const headerModel = require('../../../doraemon/models/header');
exports.index = (req, res) => {
headerModel.requestHeaderData()
... ... @@ -24,13 +23,15 @@ exports.index = (req, res) => {
response.footerTop = true;
response.devEnv = true;
return sale.getSaleDate().then(result => {
res.render('sale/index', Object.assign(response, sale.outputDevData()));
/*return sale.getSaleDate().then(result => {
response.result = result;
response.resultShow = JSON.stringify(result, null, 4);
res.render('sale/index', response);
});
});*/
})
.catch(() => {
res.render('error', { devEnv: true, pageErr: true });
... ...
... ... @@ -2,7 +2,7 @@
* @Author: Targaryen
* @Date: 2016-05-19 10:20:08
* @Last Modified by: Targaryen
* @Last Modified time: 2016-05-19 11:07:24
* @Last Modified time: 2016-05-19 11:34:38
*/
'use strict';
... ... @@ -23,6 +23,54 @@ const handleSaleData = (origin) => {
return dest;
};
/**
* 输出开发用假数据
* @return {[type]} [description]
*/
exports.outputDevData = () => {
return {
slide: {
list: [{
bannerHeight: 200,
href: 'http://www.yoho.cn',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/830/h/327'
}, {
bannerHeight: 200,
href: 'http://www.yoho.cn',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/830/h/327'
}, {
bannerHeight: 200,
href: 'http://www.yoho.cn',
img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/830/h/327'
}]
},
recommandImg: [{
jumpUrl: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/250/h/80',
sourceUrl: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/250/h/80'
}, {
jumpUrl: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/250/h/80',
sourceUrl: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/250/h/80'
}, {
jumpUrl: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/250/h/80',
sourceUrl: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/250/h/80'
}],
specialSale: {
brandSale: {
big: [{
}]
}
}
};
};
/**
* 获取首页数据
* @return {[type]} [description]
*/
exports.getSaleDate = () => {
return api.get('', sign.apiSign({
method: 'app.activity.get',
... ...
<div class="sale-arena-page yoho-page">
<p>coding here</p>
<p>coding here arena</p>
</div>
... ...
<div class="sale-page yoho-page">
<p>coding here</p>
{{! 头部banner}}
{{log this}}
{{# slide}}
{{> common/slide-banner}}
{{/ slide}}
{{! banner底部图片}}
{{#each recommandImg}}
<img href="{{jumpUrl}}" src="{{sourceUrl}}">
</img>
{{/each}}
{{! 折扣专场}}
{{# specialSale}}
{{> sale/brand-sale}}
{{/ specialSale}}
{{! 类别楼层遍历}}
{{# category}}
{{> sale/sale-box}}
{{/ category}}
<p>coding here index</p>
</div>
... ...
<div class="activity-entry clearfix">
{{#activityEnter}}
<a class="entry-item pull-left {{#if @first}}first{{/if}} {{#if @last}}last{{/if}}" href="{{link}}">
<span class="icon pull-left {{icon}}"></span>
<div class="entry-text">
<span class="title">{{title}}</span>
<p class="desc">{{desc}}</p>
</div>
</a>
{{/activityEnter}}
</div>
... ...
<div class="brand-sale">
<div class="floor-title">
折扣专场 SALE
</div>
{{#brandSale}}
<div class="sale-group-big clearfix">
{{#big}}
<a class="item pull-left" href="{{link}}">
<div class="pic">
<img src="{{img}}">
<div class="time">{{time}}</div>
</div>
<div class="detail">
<img class="brand pull-left" src="{{brand}}">
<div class="text">
<div class="discount">
<span class="num">{{discount}}</span> Off
</div>
<div class="title">
{{title}}
</div>
</div>
</div>
</a>
{{/big}}
</div>
<div class="sale-group clearfix">
{{#normal}}
<a class="item pull-left" href="{{link}}">
<img class="pic" src="{{img}}">
<div class="detail">
<div class="title">{{title}}</div>
<div class="time">{{time}}</div>
</div>
</a>
{{/normal}}
</div>
{{/brandSale}}
</div>
... ...
<div class="sale-list-banner" style="height: {{bannerHeight}}px;">
<ul style="height: {{bannerHeight}}px;">
{{# list}}
<li class="banner-img" style="background:url({{img}}) no-repeat top center;"></li>
{{/ list}}
</ul>
</div>
... ...
<div class="home-page">
{{#sale-category}}
<div class="floor-header clearfix">
<h2 class="floor-title">{{title}}</h2>
</div>
<ul class="sale-nav">
{{#navItem}}
<li class="{{#vip}}green{{/vip}} {{#incompleteSize}}yellow{{/incompleteSize}} {{#newDiscount}}red{{/newDiscount}} {{#if @first}}active first{{/if}} {{#if @last}}last{{/if}}" data-url='{{url}}'>aa</li>
{{/navItem}}
</ul>
<div class="commodity-list">
<ul class="clearfix">
{{#each saleImage}}
<li class="commodity-item">
<a href="{{href}}" target= "_blank"><div class="commodity-img">
<img class="lazy" data-original="{{img}}"/></div>
<div class="commodity-content {{#if @last}}hide{{/if}}">
<p class="commodity-name">{{name}}</p>
<p class="commodity-price">
<span class="origin">¥{{originPrice}}</span>
<span>¥{{price}}</span>
{{#vip}}<span class="vip-tag">VIP</span><strong>更优惠</strong>{{/vip}}
</p>
</div>
</a>
</li>
{{/each}}
</ul>
</div>
{{/sale-category}}
</div>
... ...
... ... @@ -9,12 +9,12 @@ module.exports = app => {
// 公共服务
// 专题活动等活动页面
app.use(require('./apps/activity'));
// app.use(require('./apps/activity'));
// 业务模块
// app.use('/', require('./apps/index'));
app.use('/product', require('./apps/product'));
// 频道页
app.use('/', require('./apps/channel'));
// app.use('/', require('./apps/channel'));
};
... ...
##公共头部模拟数据
```javascript
var sale = {
saleBanner:[
{
bannerHeight: 200,
link:'http://www.yoho.cn',
img:'http://img10.static.yhbimg.com/yhb-img01/2016/05/13/19/0144078a008a5dc2be52a6ec65c74c1f2c.jpg?imageView2/1/w/830/h/327',
},
],
}
```
... ...
<div id="slider" class="slide-container {{#if pagination}}slide-thumb-container{{/if}}">
<div class="slide-wrapper">
<ul>
{{# list}}
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{href}}" target= "_blank">
{{#if @first}}
<img src="{{img}}">
{{^}}
<img class="lazy" data-original="{{img}}" alt="">
{{/if}}
</a>
{{# tips}}
<div class="slide-tips">
<div class="g-mark"></div>
<p>{{.}}</p>
</div>
{{/ tips}}
</li>
{{/ list}}
</ul>
</div>
{{#if pagination}}
<div class="thumb-pagination">
<ul class="clearfix">
{{# pagination}}
<li>
<a href="{{href}}" target="_blank"></a>
<img src="{{img}}" alt="">
</li>
{{/ pagination}}
</ul>
</div>
{{/if}}
</div>
<div class="slide-container-placeholder {{#if pagination}}slide-thumb-container-placeholder{{/if}}"></div>
... ...
/**
* 首页banner轮播
* @author: liuyue(yue.liu@yoho.cn)
* @date: 2015/12/04
*/
var $ = require('yoho-jquery'),
lazyLoad = require('yoho-jquery-lazyload');
(function() {
var Slider = function(element, options) {
this.$element = $(element);
this.options = $.extend({}, $.fn.slider.defaults, options);
this.bigItem = this.$element.find('.slide-wrapper').find('li');
this.smallItem = null;
this.len = this.bigItem.size();
this.index = 0;
this.timer = null;
this.init();
};
Slider.prototype = {
init: function() {
if (!this.$element) {
return;
}
if (this.len <= 1) {
lazyLoad(this.$element.find('img.lazy'));
return;
}
if (this.options.pagination) {
this.smallItem = $(this.options.pagination).find('li');
} else {
this._createPage();
}
if (this.options.orient) {
this._createOrient();
}
this._slideShow();
this._bindEvent();
this._autoplay();
},
_createOrient: function() {
var orientHtml = '<div class="slide-switch">' +
'<a class="prev" href="javascript:;"><span class="iconfont">&#xe60c;</span></a>' +
'<a class="next" href="javascript:;"><span class="iconfont">&#xe60b;</span></a>' +
'</div>';
if (this.$element.find('.slide-switch').length > 0) {
return;
}
this.$element.append(orientHtml);
},
_createPage: function() {
var pageHtml = '<div class="slide-pagination"><div class="slide-pagination-inner">' +
'<div class="slide-shade"></div><div class="slide-pagination-last">',
i = 0;
if (this.len <= 1) {
return;
}
for (i = 0; i < this.len; i++) {
pageHtml += '<span></span>';
}
pageHtml += '</div></div></div>';
this.$element.append($(pageHtml));
this.smallItem = this.$element.find('.slide-pagination-inner span');
},
_bindEvent: function() {
var that = this;
this.$element.find('.slide-switch').on('click', '.next', function() {
that._nextSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
}).on('click', '.prev', function() {
that._prevSlide();
clearInterval(that.timer);
that.timer = setInterval(function() {
that._nextSlide();
}, that.options.time);
});
this.smallItem.on('mouseenter', function() {
that.index = $(this).index();
clearInterval(that.timer);
that._slideShow();
}).on('mouseleave', function() {
that._autoplay();
});
this.$element.on('mouseenter', function() {
$(this).find('.slide-switch').addClass('show');
}).on('mouseleave', function() {
$(this).find('.slide-switch').removeClass('show');
});
},
_nextSlide: function() {
if (this.index === this.len - 1) {
this.index = 0;
} else {
this.index++;
}
this._slideShow();
},
_prevSlide: function() {
if (this.index === 0) {
this.index = this.len - 1;
} else {
this.index--;
}
this._slideShow();
},
_slideShow: function() {
var $img = this.bigItem.eq(this.index).find('img.lazy');
// 未加载图片的及时显示
if ($img.attr('src') !== $img.data('original')) {
lazyLoad($img, {
event: 'sporty'
});
$img.trigger('sporty');
}
this.smallItem.eq(this.index).addClass('focus').siblings().removeClass('focus');
this.bigItem.eq(this.index).show().stop().animate({
opacity: 1
}, function() {
// 修正IE下切换时文字会重叠的问题
$(this).find('.slide-tips > p').removeClass('hide');
}).siblings().stop().animate({
opacity: 0
}, function() {
$(this).hide().find('.slide-tips > p').addClass('hide');
});
},
_autoplay: function() {
var that = this;
clearInterval(this.timer);
this.timer = setInterval(function() {
that._nextSlide();
}, this.options.time);
}
};
$.fn.slider = function(option) {
return this.each(function() {
var $this = $(this),
data = $this.data('Slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('Slider', (data = new Slider(this, options)));
}
if (typeof option === 'string') {
data[option]();
}
});
};
$.fn.slider.Constructor = Slider;
$.fn.slider.defaults = {
time: 5000,
orient: true, // 左右切换箭头的显示
pagination: null
};
}());
... ...
require('../header');
require('../index/slider');
$('#slider').slider();
... ...
... ... @@ -218,9 +218,9 @@ a {
left: 0;
}
@define-mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
@define-mixin ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
... ... @@ -231,3 +231,6 @@ a {
@import "common/index";
/* 模块 */
/* product */
@import "product/index";
... ...
.sale-page {
.sale-list-banner {
width: 100%;
position: relative;
ul {
overflow: hidden;
width: 100%;
position: relative;
z-index: 1;
li {
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}
}
}
}
... ...