sale 页面部分模板

@@ -9,8 +9,60 @@
 // const mRoot = '../models';
 // const mRoot = '../models';
 
 
 // 商品促销model
 // 商品促销model
-// const detail = require(`${mRoot}/detail`);
+// const sale = require(`${mRoot}/sale`);
+var fakeData;
 
 
 exports.index = (req, res) => {
 exports.index = (req, res) => {
-    res.render('sale/index', {});
+
+    fakeData = {
+        devEnv: true,
+        module: 'product',
+        page: 'sale',
+        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: [{
+
+                }]
+            }
+        }
+
+
+
+    };
+    res.render('sale/index', fakeData);
 };
 };

 <div class="sale-arena-page yoho-page">
 <div class="sale-arena-page yoho-page">
-    <p>coding here</p>
+    <p>coding here arena</p>
 </div>
 </div>

 <div class="sale-page yoho-page">
 <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>

+<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('/', require('./apps/index'));
     app.use('/product', require('./apps/product'));
     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;
     left: 0;
 }
 }
 
 
-@define-mixin ellipsis {
-    overflow: hidden;
-    text-overflow: ellipsis;
+@define-mixin ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
     white-space: nowrap;
     white-space: nowrap;
 }
 }
 
 
@@ -231,3 +231,6 @@ a {
 @import "common/index";
 @import "common/index";
 
 
 /* 模块 */
 /* 模块 */
+
+/* product */
+@import "product/index";

+@import "sale/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;
+            }
+        }
+    }
+
+}