张泽世 / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 9c6ea902afd0b5b55ed28ac909b1a3e6acb1806e 1 parent 8bfcc68a

增加频道页面

Inline Side-by-side
Showing 40 changed files with 774 additions and 6 deletions
... ... @@ -16,6 +16,9 @@ require('express-handlebars');
let app = express();
// 向模板注入变量
app.locals.devEnv = app.get('env') === 'development';
app.set('view engine', '.hbs');
app.use(favicon(path.join(__dirname, '/public/favicon.ico')));
... ...
/**
* 频道页面
* @author: Bi Kai<kai.bi@yoho.cn>
* @date: 2016/05/09
*/
const channelModel = require('../models/channel');
const mod = 'channel';
/**
* 男生首页
*/
exports.boys = (req, res) => {
channelModel.getChannelResource().then(result => {
res.render('channel', Object.assign({
module: mod,
page: 'home'
}, result));
});
};
... ...
/**
* sub app channel
* @author: Bi Kai<kai.bi@yoho.cn>
* @date: 2016/05/09
*/
var express = require('express'),
path = require('path'),
hbs = require('express-handlebars');
var app = express();
// set view engin
var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
Object.assign(app.locals, parent.locals);
});
app.set('views', path.join(__dirname, 'views/action'));
app.engine('.hbs', hbs({
extname: '.hbs',
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: [path.join(__dirname, 'views/partial'), `${doraemon}/partial`],
helpers: 'helpers'
}));
// router
app.use(require('./router'));
module.exports = app;
... ...
/**
* 频道页面 model
* @author: Bi Kai<kai.bi@yoho.cn>
* @date: 2016/05/09
*/
const _ = require('lodash');
const API = require('../../../library/api');
const sign = require('../../../library/sign');
const api = new API();
/**
* 获取频道页面资源位
*/
exports.getChannelResource = (gender) => {
gender = gender || '1,3';
return api.get('operations/api/v5/resource/home', sign.apiSign({
new_device: true, // eslint-disable-line
gender: gender,
content_code: '8512bf0755cc549ac323f852c9fd945d', // eslint-disable-line
page: 1,
limit: 30
})).then(result => {
result = JSON.parse(result);
if (result.code === 200) {
const formatDate = {};
result.data.list = result.data.list || [];
_.forEach(result.data.list, (floor) => {
formatDate[_.camelCase(floor.template_name)] = floor.data; // 接口数据格式化，键使用驼峰写法，丢弃模板数据
});
return formatDate;
} else {
return result;
}
});
};
... ...
/**
* router of sub app channel
* @author: Bi Kai<kai.bi@yoho.cn>
* @date: 2016/05/09
*/
'use strict';
const express = require('express');
const cRoot = './controllers';
const channel = require(cRoot);
const router = express.Router(); // eslint-disable-line
router.get('/boys', channel.boys);
// router.get('/girls', channel.girls);
// router.get('/kids', channel.kids);
// router.get('/lifestyle', channel.lifestyle);
module.exports = router;
... ...
<div class="mobile-container">
<div class="mobile-wrap boys-wrap yoho-page">
{{> channel/content}}
<div class="overlay"></div>
{{> channel/footer-tab}}
</div>
{{> channel/side-nav}}
</div>
... ...
<div class="banner-bottom">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="">
</a>
</div>
\ No newline at end of file
... ...
<div class="banner-top">
<div class="banner-swiper swiper-container">
<ul class="swiper-wrapper">
{{#each list}}
{{#if @first}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{img}}">
</a>
</li>
{{^}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}">
</a>
<div class="swiper-lazy-preloader"></div>
</li>
{{/if}}
{{/each}}
</ul>
</div>
<div class="swiper-pagination">
<div class="pagination-inner">
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="banner-center">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="">
</a>
</div>
\ No newline at end of file
... ...
{{# content}}
{{! 头部banner}}
{{# bannerTop}}
{{> home/banner_top}}
{{/ bannerTop}}
{{! 图标入口}}
{{# iconsEnter}}
{{> home/icons_enter}}
{{/ iconsEnter}}
{{! 中间banner}}
{{# banner}}
{{> home/banner}}
{{/ banner}}
{{! 两个小图}}
{{# smallPic}}
{{> home/thumb_row}}
{{/ smallPic}}
{{! 热门品类}}
{{# hotCategory}}
{{> home/hot_category}}
{{/ hotCategory}}
{{! 热门品牌}}
{{# hotBrands}}
{{> home/hot_brands_list}}
{{/ hotBrands}}
{{! 热门品牌可滑动}}
{{# hotBrandsScroll}}
{{> home/hot_brands_swipe}}
{{/ hotBrandsScroll}}
{{! 潮人搭配}}
{{# trendColloaction}}
{{> home/trendsetter_collocation}}
{{/trendColloaction}}
{{! 潮流话题}}
{{# trendTopics}}
{{> home/trend_topics}}
{{/ trendTopics}}
{{! 潮流时装/经典裤裙/时尚靴履/潮人配饰/潮流上装}}
{{# goodsCategory}}
{{> home/goods_category}}
{{/ goodsCategory}}
{{! 新入住品牌/品味生活/创意生活}}
{{# creativeLife}}
{{> home/creative_life}}
{{/ creativeLife}}
{{! PLUS}}
{{# plusStar}}
{{> home/plus_star}}
{{/ plusStar}}
{{! 新人专享}}
{{# freshOnly}}
{{> home/fresh_only}}
{{/ freshOnly}}
{{/ content}}
{{! 可能喜欢}}
{{> home/maybe_like_lifestyle}}
\ No newline at end of file
... ...
{{! 首页header}}
{{#homeHeader}}
{{> channel/home-header}}
{{/homeHeader}}
{{#content}}
{{! 头部banner}}
{{#bannerTop}}
{{> channel/banner-top}}
{{/bannerTop}}
{{! 图标入口}}
{{#iconsEnter}}
{{> channel/icons-enter}}
{{/iconsEnter}}
{{! 首页公告}}
{{#notice}}
{{> channel/notice}}
{{/notice}}
{{! 中间banner}}
{{#banner}}
{{> channel/banner}}
{{/banner}}
{{! 两个小图}}
{{#smallPic}}
{{> channel/thumb-row}}
{{/smallPic}}
{{! 热门品类}}
{{#hotCategory}}
{{> channel/hot-category}}
{{/hotCategory}}
{{! 热门品牌}}
{{#hotBrands}}
{{> channel/hot-brands-list}}
{{/hotBrands}}
{{! 热门品牌可滑动}}
{{#hotBrandsScroll}}
{{> channel/hot-brands-swipe}}
{{/hotBrandsScroll}}
{{! 潮人搭配}}
{{#trendColloaction}}
{{> channel/trendsetter-collocation}}
{{/trendColloaction}}
{{! 潮流话题}}
{{#trendTopics}}
{{> channel/trend-topics}}
{{/trendTopics}}
{{! 潮流时装/经典裤裙/时尚靴履/潮人配饰/潮流上装}}
{{#goodsCategory}}
{{> channel/goods-category}}
{{/goodsCategory}}
{{! 新入住品牌/品味生活/创意生活}}
{{#creativeLife}}
{{> channel/creative-life}}
{{/creativeLife}}
{{! PLUS}}
{{#plusStar}}
{{> channel/plus-star}}
{{/plusStar}}
{{! 新人专享}}
{{#freshOnly}}
{{> channel/fresh-only}}
{{/freshOnly}}
{{/content}}
{{! 可能喜欢}}
{{> channel/maybe-like}}
{{! 商品列表}}
{{# twoColumnGoods}}
{{> home/two_column_goods}}
{{/ twoColumnGoods}}
{{! 底部banner}}
{{# bannerBottom}}
{{> home/banner_bottom}}
{{/ bannerBottom}}
... ...
{{> home/floor_header_more}}
<div class="creative-life">
{{# banner}}
<a class="banner" href="{{url}}">
<img class="lazy" data-original="{{img}}">
</a>
{{/ banner}}
<ul class="classify-list clearfix">
{{# list}}
<li class="classify">
<a href="{{url}}">
<div class="classify-logo">
<img class="lazy" data-original="{{img}}">
</div>
<p class="classify-name">{{name}}</p>
</a>
</li>
{{/ list}}
</ul>
</div>
\ No newline at end of file
... ...
{{# hasFavBrand}}
<div class="fav-brand-swiper">
<a class="swiper-header" href="{{link}}">
<div class="swiper-logo">
<img src="{{brandImg}}" alt=""/>
</div>
<div class="brand-info">
<span class="brand-name">{{brandName}}</span>
<div class="brand-update">
{{# update}}
<span class="brand-new">上新<b>{{.}}</b></span>
{{/ update}}
{{# discount}}
<span class="brand-discount">折扣<b>{{.}}</b></span>
{{/ discount}}
</div>
</div>
<span class="fav-more"></span>
</a>
{{#if productList}}
<div id="swiper-container-{{id}}" class="swiper-container" data-id="{{id}}">
<ul class="swiper-wrapper swiper-wrapper-{{id}}">
{{# productList}}
<li class="swiper-slide">
<a href="{{link}}">
<img class="swiper-lazy" data-src="{{imgUrl}}" alt=""/>
</a>
<div class="brand-product">
<div class="{{# discount}}price-discount{{/ discount}}">
{{# discount}}<span>{{.}}<span>{{/ discount}}
<b>{{price}}</b>
</div>
</div>
<div class="swiper-lazy-preloader"></div>
</li>
{{/ productList}}
</ul>
</div>
{{/if}}
</div>
{{/ hasFavBrand}}
\ No newline at end of file
... ...
{{# hasFavProduct}}
<li data-id="{{fav_id}}" class="{{#if invalidGoods}}invalidGoods{{/if}}">
<a href="{{link}}">
<div class="fav-img-box">
<img src="{{imgUrl}}" alt=""/>
</div>
<div class="fav-info-list">
<h2>{{title}}</h2>
<div class="fav-price">
{{# discountPrice}}
<span class="new-price">{{.}}</span>
{{/ discountPrice}}
<span class="fav-price {{# discountPrice}}price-underline{{/ discountPrice}}">{{price}}</span>
</div>
{{# savePrice}}
<div class="save-price save-price-number">
比收藏时降价了<span>{{.}}</span>
<span class="del-fav iconfont">&#xe621;</span>
</div>
{{/ savePrice}}
{{^ savePrice}}
<div class="save-price">
{{# sellOut}}
<span class="sell-out">已售罄</span>
{{/ sellOut}}
<span class="del-fav iconfont">&#xe621;</span>
</div>
{{/ savePrice}}
</div>
</a>
</li>
{{/ hasFavProduct}}
\ No newline at end of file
... ...
{{> home/floor_header}}
<ul class="fine-brands clearfix">
{{# brands}}
<li class="brand">
<a href="{{url}}">
<div class="brand-logo">
<img class="lazy" data-original="{{img}}">
</div>
<p class="brand-name">{{name}}</p>
</a>
</li>
{{/ brands}}
</ul>
\ No newline at end of file
... ...
{{# title}}
<div class="floor-header-more">
<h2>{{title}}</h2>
{{#if more_url}}
<a class="more-btn iconfont" href="{{more_url}}">&#xe618;</a>
{{/if}}
</div>
{{/ title}}
\ No newline at end of file
... ...
{{# name}}
<div class="floor-header">
<h2>{{.}}</h2>
</div>
{{/ name}}
... ...
{{#showFooterTab}}
<div class="footer-tab">
<a class="tab-item {{#if grilsHomePage}}current{{/if}}{{#if boysHomePage}}current{{/if}}{{#if kidsHomePage}}current{{/if}}{{#if lifestyleHomePage}}current{{/if}}" href="{{indexUrl}}">
<p class="iconfont tab-icon">&#xe62a;</p>
<p class="tab-name">首页</p>
</a>
<a class="tab-item {{#if categoryPage}}current{{/if}}" href="{{categoryUrl}}">
<p class="iconfont tab-icon">&#xe62d;</p>
<p class="tab-name">分类</p>
</a>
<a class="tab-item {{#if guangHome}}current{{/if}}" href="{{guangUrl}}">
<p class="iconfont tab-icon">&#xe627;</p>
<p class="tab-name">逛</p>
</a>
<a class="tab-item {{#if shoppingCartPage}}current{{/if}}" href="{{shoppingCartUrl}}">
<p class="iconfont tab-icon">&#xe62c;</p>
<p class="tab-name">购物车</p>
</a>
<a class="tab-item {{#if minePage}}current{{/if}}" href="{{mineUrl}}">
<p class="iconfont tab-icon">&#xe62b;</p>
<p class="tab-name">我的</p>
</a>
</div>
{{/showFooterTab}}
... ...
{{> home/floor_header_more}}
<div class="fresh-only">
{{# big_image}}
<div class="fresh-swiper">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}">
</a>
</div>
{{/ big_image}}
<div class="fresh-list-swiper">
<ul class="clearfix swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<div class="img-box">
<a href="{{url}}">
<img class="swiper-lazy" data-src="{{img}}" alt="">
</a>
<div class="swiper-lazy-preloader"></div>
</div>
<div class="fresh-info">
<p class="fresh-name"><a href="{{url}}">{{title}}</a></p>
<p class="price">
<span class="cur-price">¥{{salePrice}}</span>
{{# price}}
<span class="old-price">¥{{.}}</span>
{{/price}}
</p>
<span class="fresh-icon">新人价</span>
</div>
</li>
{{/ list}}
</ul>
</div>
</div>
\ No newline at end of file
... ...
{{> home/floor_header_more}}
<div class="goods-category">
{{# big_image}}
{{#if big_list}}
<div class="category-swiper">
<ul class="swiper-wrapper">
{{# big_list}}
<li class="swiper-slide">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="{{title}}">
</a>
</li>
{{/ big_list}}
</ul>
<div class="swiper-pagination">
<div class="pagination-inner clearfix">
</div>
</div>
</div>
{{^}}
<div class="category-swiper">
<a href="{{url}}">
<img class="lazy" data-original="{{img}}" alt="{{title}}">
</a>
</div>
{{/if}}
{{/ big_image}}
<ul class="category-list clearfix">
{{# list}}
<li>
<a href="{{url}}">
<div class="img-box">
<img class="lazy" data-original="{{img}}" alt="">
</div>
<p class="category-name">{{textCn}}</p>
</a>
</li>
{{/ list}}
</ul>
</div>
\ No newline at end of file
... ...
<div class="header-download">
<img class="download-bg" src="{{img}}" alt="">
<h1 class="yoho-logo"></h1>
<p>年轻人潮流购物中心</p>
<a class="download-btn" href="{{url}}">下载客户端</a>
<span class="close-btn"></span>
</div>
\ No newline at end of file
... ...
<div class="home-header clearfix" {{# bgColor}}style="background-color:{{.}};background-image:none"{{/ bgColor}}>
<span class="nav-btn iconfont">&#xe60b;</span>
<span class="logo"></span>
<span class="search-btn iconfont"><a href="{{searchUrl}}">&#xe60f;</a></span>
</div>
\ No newline at end of file
... ...
<ul class="hot-brands clearfix">
{{> home/floor_header}}
{{# list}}
<li class="brand">
<a href="{{url}}">
<div class="brand-logo">
<img class="lazy" data-original="{{img}}">
</div>
<p class="brand-name">{{name}}</p>
</a>
</li>
{{/ list}}
<li class="more">
<a href="{{more}}"></a>
</li>
</ul>
\ No newline at end of file
... ...
<div class="hot-brands">
{{> home/floor_header}}
<div class="brands-swiper">
<ul class="brands-list swiper-wrapper clearfix">
{{# list}}
<li class="swiper-slide">
<a href="{{url}}">
<img src="{{img}}" alt="">
<span class="brands-title">{{textCn}}</span>
</a>
</li>
{{/ list}}
</ul>
</div>
</div>
... ...
<div class="hot-category">
{{> home/floor_header}}
{{# banner}}
<a class="category-banner" href="{{url}}">
<img class="lazy" data-original="{{img}}">
</a>
{{/ banner}}
<ul class="category-list clearfix">
{{# list}}
<li>
<a href="{{url}}">
<div class="img-box">
<img class="lazy" data-original="{{img}}" alt="">
</div>
</a>
</li>
{{/ list}}
</ul>
</div>
\ No newline at end of file
... ...
<div class="icons-wrapper">
<ul class="icons-list clearfix">
{{#list}}
<li class="icons-item"><a href="{{url}}" class="imagebar"><img src="{{img}}" alt=""></a><a href="{{url}}" class="linkbar">{{title}}</a></li>
{{/list}}
</ul>
</div>
... ...
<div class="maybe-like">
<ul id="maybe-like-nav" class="maybe-like-nav clearfix">
<li class="maybe-like-nav-item focus">新品到着</li>
<li class="maybe-like-nav-item">人气单品</li>
</ul>
<div id="goods-list">
{{# goodsContainer}}
<div class="goods-list {{^show}}hide{{/show}}">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
{{/ goodsContainer}}
</div>
<div id="load-more-info" class="load-more-info">
<div class="loading status hide">
正在加载...
</div>
<span class="no-more status hide">没有更多啦</span>
</div>
</div>
\ No newline at end of file
... ...
<div class="maybe-like">
<p class="title">
<i class="icon"></i>
<span>你可能喜欢</span>
</p>
<div id="goods-list" class="goods-list clearfix"></div>
</div>
<div class="load-more-img hide" id="load-more-img">
<a href="">
<img src="">
</a>
</div>
... ...
{{#if notice.open}}
<div class="notice-wrap clearfix">
<div class="trend">
</div>
<div class="notice" data-time="{{notice.time}}">
{{#notice.list}}
<a class="notice-item item-{{@index}}" href="{{url}}">
<span class="notice-icon"></span>
{{title}}
</a>
{{/notice.list}}
</div>
</div>
{{/if}}
... ...
<div class="plus-star">
{{> home/floor_header}}
<a href="{{url}}">
<img class="lazy" data-original="{{img}}">
</a>
</div>
\ No newline at end of file
... ...
<div class="search-input">
<a href="{{searchUrl}}">
<i class="search-icon iconfont">&#xe60f;</i>
<input type="text" placeholder="搜索商品">
</a>
</div>
\ No newline at end of file
... ...
<div class="side-nav">
{{# sideNav}}
<ul {{#if @first}}class="first"{{/if}}>
{{# this}}
<li class="{{styleClass}}">
{{#if url}}
<a href="{{url}}" style="{{#if color}}color:{{color}};{{/if}}">
{{else}}
<a href="javascript:;" style="{{#if color}}color:{{color}};{{/if}}">
{{/if}}
{{# img}}
<span class="nav-img" style="background-image: url({{.}})"></span>
{{/ img}}
{{^ img}}
<i class="nav-icon"></i>
{{/ img}}
<em>{{textCn}}</em>
<span class="title">{{textEn}}</span>
{{# subNav}}
<span class="enter-subnav iconfont">&#xe614;</span>
{{/ subNav}}
</a>
{{# subNav}}
<ul class="sub-nav">
{{# list}}
<li class="{{# isSelect}}current{{/ isSelect}}" style="background-color:{{bgColor}};">
{{#if url}}
<a href="{{url}}" style="{{#if color}}color:{{color}};{{/if}}">
{{else}}
<a href="javascript:;" style="{{#if color}}color:{{color}};{{/if}}">
{{/if}}
{{# back}}
<i class="nav-back iconfont">&#xe610;</i>
{{/ back}}
<em>{{textCn}}</em>
<span class="title">{{textEn}}</span>
</a>
</li>
{{/ list}}
</ul>
{{/ subNav}}
</li>
{{/ this}}
</ul>
{{/sideNav}}
</div>
... ...
<div id="thumb-row">
{{# list}}
<a href="{{url}}">
<div class="thumb-row-box" style="background-image:url({{img}})"></div>
</a>
{{/ list}}
</div>
... ...
<div class="trend-topic-wrapper">
{{> home/floor_header_more}}
<div class="trend-topic-content">
<div class="trend-topic-swiper">
<ul class="swiper-wrapper">
{{# list}}
<li class="swiper-slide">
<a href="{{url}}">
<div class="img-box">
<img class="lazy" data-original="{{img}}" src="{{img}}" alt="">
</div>
<div class="item-content">
<p class="title">{{title}}</p>
<p class="time">
<span class="iconfont time-icon">&#xe603;</span>
<span>{{publish_time}}</span>
</p>
</div>
</a>
</li>
{{/ list}}
</ul>
</div>
<div class="swiper-pagination">
<div class="pagination-inner clearfix">
</div>
</div>
</div>
</div>
... ...
<div class="trend-coll-wrapper">
{{> home/floor_header_more}}
<div class="trend-coll-content clearfix">
{{# article}}
<div class="lspan">
<a href="{{url}}"><img class="lazy rspanimg" data-original="{{img}}" ></a>
</div>
{{/ article}}
</div>
<div class="trend-coll-tail">
<h3 class="recommend-title">推荐搭配</h3>
<div class="recommend-swiper">
<ul class="recommend-list swiper-wrapper clearfix">
{{# recommend_collocation}}
<li class="recommend-item swiper-slide"><a href="{{url}}"><img class="img" src="{{img}}" alt="" /></a></li>
{{/ recommend_collocation}}
</ul>
</div>
</div>
</div>
... ...
<div class="two-column-goods">
<ul class="column-nav clearfix">
{{# columnNav}}
<li data-url="{{url}}">{{textCn}}</li>
{{/ columnNav}}
</ul>
<div class="goods-list clearfix">
{{# goods}}
{{> good}}
{{/ goods}}
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -5,8 +5,12 @@
*/
module.exports = app => {
// 公共服务
// 四个频道页，频道选择页面 /boys,/girls,/,/kids,/lifestyle 等页面，就直接占用路由了
app.use(require('./apps/channel'));
// 业务模块
app.use('/guang', require('./apps/guang'));
};
... ...
... ... @@ -15,7 +15,7 @@
<link rel="dns-prefetch" href="//img12.static.yhbimg.com">
<link rel="dns-prefetch" href="//img13.static.yhbimg.com">
{{#if devEnv}}
<link rel="stylesheet" href="//localhost:3000/css/index.css">
<link rel="stylesheet" href="//localhost:5000/css/index.css">
{{^}}
<link rel="stylesheet" href="//cdn.yoho.cn/m-yohobuy-node/{{version}}/index.css">
{{/if}}
... ... @@ -23,11 +23,11 @@
<body>
{{> header}}
{{{body}}}
{{> footer}}
{{> footer}}
{{#if devEnv}}
<script src="//localhost:8000/{{module}}.{{page}}.js"></script>
<script src="//localhost:5000/{{module}}.{{page}}.js"></script>
{{^}}
<script src="//cdn.yoho.cn/m-yohobuy-node/{{version}}/{{module}}.{{page}}.js"></script>
{{/if}}
</body>
</html>
\ No newline at end of file
</html>
... ...
... ... @@ -172,11 +172,11 @@ gulp.task('webpack-dev-server', () => {
stats: {
colors: true
}
}).listen(8000, 'localhost', (err) => {
}).listen(5000, 'localhost', (err) => {
if (err) {
throw new gutil.PluginError('webpack-dev-server', err);
}
gutil.log('[webpack-serve]', 'http://localhost:8000/');
gutil.log('[webpack-serve]', 'http://localhost:5000/');
});
});
... ...
console.log(1);
... ...