fe / yohobuywap-node · Commits

Go to a project

Authored by zhangxiaoru
Commit ba7e723ee011b7ca9b30da4719046a49c3264f27 1 parent 25d79c93

品类

Inline Side-by-side
Showing 8 changed files with 301 additions and 71 deletions
... ... @@ -7,8 +7,6 @@
'use strict';
const mRoot = '../models';
const headerModel = require('../../../doraemon/models/header'); // 头部model
const _ = require('lodash');
const brandModel = require(`${mRoot}/brand-list`);
let channels = {
... ... @@ -20,23 +18,30 @@ let channels = {
const index = (req, res, next) => {
let categoryTab = req.query.tab || '';
let gender = req.query.gender || req.cookies._Channel && channels[req.cookies._Channel] || 1;
let code = '7317a4701a1d3ddc8d93a5df77a63b75';
let isbrand = true;
let brandCode;
let cateCode;
let isCate = categoryTab === 'category' ? true : false;
brandModel.indexData(isbrand, gender, code).then(result => {
if (parseInt(gender, 10) === 1) {
brandCode = '7317a4701a1d3ddc8d93a5df77a63b75';
cateCode = '7f885e9cab53231cff34ea236f3f1120';
} else {
brandCode = '84313c4b293a1c0aea985aa16a42a6b5';
cateCode = 'a6f9dc00219eb7d08520a18864929a30';
}
brandModel.indexData(gender, brandCode, cateCode).then(result => {
res.render('brand/brand', {
module: 'guang',
page: 'brand-list',
// pageHeader: headerModel.setNav({
// navTitle: '潮流优选'
// }),
// title: '潮流优选',
width750: true,
categoryTab: categoryTab === 'category' ? true : false,
channel: result.channel,
brandList: result.brandList
})
categoryTab: isCate,
channel: result.channel ? result.channel : '',
brandList: result.brandList,
list: result.list ? result.list : '',
categoryData: result.categoryData
});
}).catch(next);
};
... ... @@ -44,7 +49,7 @@ const brandList = (req, res, next) => {
let code;
let gender = req.query.gender || req.cookies._Channel && channels[req.cookies._Channel] || 1;
if (parseInt(gender) === 1) {
if (parseInt(gender, 10) === 1) {
code = '7317a4701a1d3ddc8d93a5df77a63b75';
} else {
code = '84313c4b293a1c0aea985aa16a42a6b5';
... ... @@ -58,7 +63,26 @@ const brandList = (req, res, next) => {
}).catch(next);
};
const categoryData = (req, res, next) => {
let code;
let gender = req.query.gender || req.cookies._Channel && channels[req.cookies._Channel] || 1;
if (parseInt(gender) === 1) {
code = '7f885e9cab53231cff34ea236f3f1120';
} else {
code = 'a6f9dc00219eb7d08520a18864929a30';
}
brandModel.categoryData(code, gender).then(result => {
res.render('brand/category', {
layout: false,
categoryData: result.categoryData
});
}).catch(next);
};
module.exports = {
index,
brandList
brandList,
categoryData
};
... ...
... ... @@ -151,48 +151,88 @@ const _getBrandListOriginData = (channel) => {
});
};
const indexData = (isbrand, gender, code) => {
if (isbrand) {
return Promise.all([_getChannelData(gender), _getResourcesData(code), _getBrandListOriginData(gender)]).then(result => {
let brandList = {};
let list = {};
if (result[0]) {
list.channel = result[0];
}
if (result[1]) {
_.forEach(result[1], function(data) {
if (data.focus_type === '1') {
brandList.bannerTop = data;
} else if (data.focus_type === '2') {
brandList.focusData = data.data;
}
});
}
const indexData = (gender, brandCode, cateCode) => {
return Promise.all([_getChannelData(gender), _getResourcesData(brandCode), _getBrandListOriginData(gender), _getResourcesData(cateCode)]).then(result => {
let brandList = {};
let list = {};
let categoryData = {};
if (result[2]) {
brandList.listData = result[2].ListData;
brandList.indexList = result[2].indexList;
}
if (result[0]) {
categoryData.channel = result[0];
list.channel = result[0];
}
list.brandList = brandList;
return list;
});
// return favfavBrand(uid, page, limit).then(result=> {
// if (result.total === 0) {
// result = {nobrandData: 1};
if (result[1]) {
_.forEach(result[1], function(data) {
if (data.focus_type === '1') {
brandList.bannerTop = data;
} else if (data.focus_type === '2') {
brandList.focusData = data.data;
}
});
}
if (result[2]) {
brandList.listData = result[2].ListData;
brandList.indexList = result[2].indexList;
}
if (result[3]) {
_.forEach(result[3], function(data) {
if (data.template_name === 'recommend_content_five') {
categoryData.list = data.data.list;
} else if (data.template_name === 'focus') {
categoryData.focusData = data;
}
});
}
list.brandList = brandList;
list.categoryData = categoryData;
return list;
});
// return Promise.all([_getChannelData(gender), _getResourcesData(code)]).then(result => {
// let categoryData = {};
// let list = {};
// if (result[0]) {
// list.channel = result[0];
// }
// return result;
// if (result[1]) {
// _.forEach(result[1], function(data) {
// if (data.template_name === 'recommend_content_five') {
// categoryData.list = data.data.list;
// } else if (data.template_name === 'focus') {
// categoryData.focusData = data;
// }
// });
// }
// list.categoryData = categoryData;
// return list;
// });
} else {
// return favProduct(uid, page, limit).then(result=> {
// if (result.total === 0) {
// result = {noproductData: 1};
//全部分类
// return api.get('', {
// method: 'app.sort.get'
// }, {
// cache: true
// }).then((result) => {
// if (!result.code || result.code !== 200 || !result.data) {
// return [];
// }
// return result;
// // 统一频道名称
// result.data.boys = result.data.boy;
// result.data.girls = result.data.girl;
// _.unset(result.data, 'boy');
// _.unset(result.data, 'girl');
// return result.data;
// }).then((list) => {
// return _processCateData(list, channel);
// });
}
};
const brandListData = (code, gender) => {
... ... @@ -220,7 +260,29 @@ const brandListData = (code, gender) => {
})
}
const categoryData = (code, gender) => {
return _getResourcesData(code).then(result => {
let categoryData = {};
let list = {};
if (result) {
_.forEach(result, function(data) {
if (data.template_name === 'recommend_content_five') {
categoryData.list = data.data.list;
} else if (data.template_name === 'focus') {
categoryData.focusData = data;
}
});
}
list.categoryData = categoryData;
return list;
});
}
module.exports = {
indexData,
brandListData
brandListData,
categoryData
};
\ No newline at end of file
... ...
... ... @@ -65,5 +65,6 @@ router.get('/info/detailData', index.detailDynamicData);
router.get('/brand', brand.index);
router.get('/brandList', brand.brandList);
router.get('/category', brand.categoryData);
module.exports = router;
... ...
<div class="brand-blk-page yoho-page">
<div class="tab-box">
<ul class="brand-tab">
<li class="{{#unless categoryTab}}active{{/ unless}}">品牌</li>
<li class="{{# categoryTab}}active{{/ categoryTab}}">品类</li>
<li class="brand {{#unless categoryTab}}active{{/ unless}}">品牌</li>
<li class="cate {{# categoryTab}}active{{/ categoryTab}}">品类</li>
</ul>
<div class="channel-tab">
... ... @@ -16,12 +16,12 @@
</div>
</div>
<div class="content">
<div class="brand-content {{#unless categoryTab}}show{{/ unless}}">
<div class="content-index">
<div class="brand-content {{# categoryTab}}hide{{/ categoryTab}}">
{{> brand/brand-list}}
</div>
<div class="category-content {{# categoryTab}}show{{/ categoryTab}}">
<div class="category-content {{#unless categoryTab}}hide{{/ unless}}">
{{> brand/category}}
</div>
</div>
</div>
\ No newline at end of file
... ...
{{> brand/category}}
\ No newline at end of file
... ...
{{# categoryData}}
<div class="resources">
<div class="recommend-content-five">
{{# list}}
<a href="{{url}}">
<img src="{{image src 375 375}}">
</a>
{{/ list}}
</div>
<div class="focus-floor">
{{# focusData}}
{{> resources/banner-top}}
{{/ focusData}}
</div>
</div>
{{/ categoryData}}
... ...
... ... @@ -8,7 +8,7 @@ var $intercept = $('.no-intercept'),
$list = $('.brand-list-box');
function channels(key) {
return {
'men': 1,
'women': 2,
... ... @@ -16,29 +16,38 @@ function channels(key) {
}[key];
};
function loadData(channel) {
function loadData(channel, isBrand) {
var preUrl;
if (isBrand) {
preUrl = '/guang/brandList';
} else {
preUrl = '/guang/category';
}
$.ajax({
method: 'get',
url: '/guang/brandList',
url: preUrl,
data: {
gender: channel
},
success: function(data) {
$('.brand-content').html(data);
success: function(data) {
if (isBrand) {
$('.brand-content').html(data);
} else {
$('.category-content').html(data);
}
}
});
}
$('.channel-tab').find('li').click(function() {
var gender = $(this).find('span').text().replace(/[^A-Za-z]+/g, '').toLowerCase();
var gender = $(this).find('span').text().replace(/[^A-Za-z]+/g, '').toLowerCase(),
isBrand = $('.brand-tab').find('.brand').hasClass('active');
$(this).addClass('focus').siblings().removeClass('focus');
// console.log(channels(gender))
loadData(channels(gender));
loadData(channels(gender), isBrand);
})
// 点击字母，页面滚动到相关区域
... ... @@ -52,6 +61,17 @@ $intercept.click(function() {
return false;
});
$('.brand-tab').find('li').click(function() {
$(this).addClass('active').siblings().removeClass('active');
if ($(this).hasClass('brand')) {
$('.brand-content').removeClass('hide').siblings().addClass('hide');
} else {
$('.category-content').removeClass('hide').siblings().addClass('hide');
}
});
$(function() {
// loadData();
... ... @@ -67,4 +87,4 @@ $(function() {
pagination: '.banner-top .pagination-inner'
});
}
});
\ No newline at end of file
});
... ...
... ... @@ -62,7 +62,7 @@
}
}
.content {
.content-index {
margin-top: 170px;
.search {
... ... @@ -241,4 +241,109 @@
}
}
}
.hide {
display: none;
}
.category-content {
.category-container {
margin-bottom: 100px;
}
.content {
background: #f8f8f8;
overflow: hidden;
position: relative;
&.hide {
display: none;
}
}
.primary-level {
float: left;
box-sizing: border-box;
width: 45%;
> li {
height: 89px;
line-height: 89px;
padding: 0 32px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&.focus {
background-color: #fff;
}
&.highlight {
background-color: #eee;
}
}
}
.sub-level-container {
float: left;
overflow-x: auto;
box-sizing: border-box;
background: #fff;
width: 55%;
height: 100%;
}
.sub-level {
width: 100%;
&.hide {
display: none;
}
> li {
box-sizing: border-box;
height: 89px;
line-height: 89px;
border-bottom: 1px solid #e6e6e6;
padding-left: 20px;
&.highlight {
background: #eee;
}
&:last-child {
border-bottom: none;
}
}
a {
display: block;
height: 100%;
width: 100%;
color: #000;
}
}
}
.resources {
.recommend-content-five {
margin-top: -1px;
width: 100%;
a {
height: 218px;
width: 50%;
outline: none;
color: #000;
text-decoration: none;
float: left;
}
}
.focus-floor {
overflow: hidden;
width: 100%;
}
}
}
... ...