fe / yohobuywap-node · Commits

Go to a project

Authored by ccbikai
Commit 9685f7cb842a60924a267d7e5b035f8c208001c5 1 parent c0af33bd

H5 分类页面修改

Inline Side-by-side
Showing 4 changed files with 127 additions and 18 deletions
... ... @@ -3,23 +3,22 @@
*/
'use strict';
const cateModel = require('../models/cate');
const headerModel = require('../../../doraemon/models/header');
const helpers = global.yoho.helpers;
let index = (req, res, next) => {
let channel = req.yoho.channel;
// 根据频道设置默认的焦点
// if (!empty($classes)) {
// $classes[$channel - 1]['focus'] = true;
// }
cateModel.getCateData().then((result) => {
console.log(result);
cateModel.getCateData(req.yoho.channel).then((result) => {
res.render('cate', {
module: 'channel',
page: 'cate',
title: '商品分类',
pageHeader: headerModel.setNav({
navTitle: '商品分类'
}),
pageFooter: true,
category: {
cate: {},
nav: result.nav,
list: result.list,
searchUrl: helpers.urlFormat('/search', null, 'search')
}
});
... ...
... ... @@ -4,14 +4,78 @@
* @date: 2016/07/06
*/
'use strict';
const _ = require('lodash');
const api = global.yoho.API;
const helpers = global.yoho.helpers;
const camelCase = global.yoho.camelCase;
const genderMap = {
boys: '1,3',
girls: '2,3',
kids: '1,2,3',
lifestyle: '1,2,3'
};
let _processCateData = (list, channel) => {
let nav = ['boys', 'girls', 'kids', 'lifestyle'];
nav = _.map(nav, function(item) {
return {
name: _.capitalize(item),
channel: item,
focus: item === channel
};
});
list = camelCase(list);
_.map(list, function(item, key) {
item.focus = key === channel;
let getCateData = () => {
_.map(item, function(firstItem) {
// 如果有二级菜单，二级菜单跳转，否则一级菜单跳转
if (firstItem.sub && firstItem.sub.length) {
_.map(firstItem.sub, function(secondItem) {
secondItem.url = helpers.urlFormat('/', {
sort: secondItem.categoryId,
sort_name: secondItem.categoryName,
gender: genderMap[channel] || ''
}, 'list');
});
} else {
firstItem.url = helpers.urlFormat('/', {
sort: firstItem.categoryId,
sort_name: firstItem.categoryName,
gender: genderMap[channel] || ''
}, 'list');
}
});
});
return {
nav,
list
};
};
let getCateData = (channel) => {
return api.get('', {
method: 'app.sort.get'
}, {
cache: true
}).then((result) => {
if (!result.code || result.code !== 200 || !result.data) {
return [];
}
// 统一频道名称
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);
});
};
... ...
test
<div class="category-page yoho-page">
{{# category}}
<div id="search-input" class="search-input">
<a href={{searchUrl}}>
<i class="search-icon iconfont">&#xe60f;</i>
<p>搜索商品</p>
</a>
</div>
<ul class="category-nav clearfix">
{{# nav}}
<li class="{{#if focus}}focus{{/if}}" data-channel="{{channel}}">
<span>{{name}}</span>
</li>
{{/ nav}}
</ul>
<div class="category-container clearfix">
{{#each list}}
<div class="content {{@key}} {{#unless focus}}hide{{/unless}}">
<ul class="primary-level">
{{# this}}
<li class="p-level-item{{#if @first}} focus{{/if}}">
{{#if url}}
<a href={{url}}> {{categoryName}}</a>
{{^}}
{{categoryName}}
{{/if}}
</li>
{{/ this}}
</ul>
<div class="sub-level-container">
{{# this}}
<ul class="sub-level {{#unless @first}}hide{{/unless}}">
{{# sub}}
<li>
<a href={{url}}>
{{categoryName}}
</a>
</li>
{{/ sub}}
</ul>
{{/ this}}
</div>
</div>
{{/each}}
</div>
{{/ category}}
</div>
... ...
... ... @@ -12,7 +12,7 @@ var $nav = $('.category-nav'),
$subLevelItem = $categoryContainer.find('.sub-level li'),
$primaryItem = $categoryContainer.find('.primary-level li');
var $curContent = $contents.not('.hide');
require('../common');
(function() {
var $header = $('.yoho-header'),
... ... @@ -28,16 +28,16 @@ var $curContent = $contents.not('.hide');
$('#search-input').focus(function() {
$(this).blur();
});
$nav.bind('contextmenu', function() {
$nav.on('contextmenu', function() {
return false;
});
$('.category-container').bind('contextmenu', function() {
$('.category-container').on('contextmenu', function() {
return false;
});
$nav.on('touchend touchcancel', function(e) {
var $this = $(e.target).closest('li'),
index = $this.index();
selector = '.' + $this.data('channel');
if ($this.hasClass('focus')) {
return;
... ... @@ -46,8 +46,8 @@ $nav.on('touchend touchcancel', function(e) {
$nav.find('li.focus').removeClass('focus');
$this.addClass('focus');
$curContent.addClass('hide');
$curContent = $contents.eq(index).removeClass('hide');
$contents.addClass('hide');
$contents.filter(selector).removeClass('hide');
});
$categoryContainer.on('touchend', function(e) {
... ...