fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit 7641d2336d8ed13bceff4c7825bbaa4e76ac25b5 1 parent a536da97

列表页排序处理

Inline Side-by-side
Showing 10 changed files with 181 additions and 85 deletions
... ... @@ -52,6 +52,42 @@ function newFilter(key, value, name) {
};
}
function getNav(channel, sort, sorts) {
let nav = [{
link: '#',
pathTitle: '',
name: 'MEN首页'
}];
if (sort) {
sorts.forEach(s => {
if (s.relationParameter.sort === sort) {
nav.push({
link: '#',
pathTitle: '',
name: s.categoryName
});
} else if (s.sub) {
s.sub.forEach(m => {
if (m.relationParameter.sort === sort) {
nav.push({
link: '#',
pathTitle: '',
name: s.categoryName
});
nav.push({
link: '#',
pathTitle: '',
name: m.categoryName
});
}
});
}
});
}
return nav;
}
const list = {
index: (req, res, next) => {
let page = req.query.page || 1;
... ... @@ -61,6 +97,7 @@ const list = {
let price = req.query.price || '';
let size = req.query.size || '';
let color = req.query.color || '';
let order = req.query.order || '';
Search.queryProduct({
page: page,
... ... @@ -69,7 +106,8 @@ const list = {
gender: gender,
size: size,
price: price,
color: color
color: color,
order: order
}).then(result => {
if (result && result.code === 200 && result.data) {
... ... @@ -150,45 +188,35 @@ const list = {
size: sizeInfo,
priceRange: priceRange,
filters: filters,
showFilters: filters.length > 0
showFilters: filters.length > 0,
navPath: {
nav: getNav('', sort, sorts)
}
};
}
let pagination = {
page: page,
limit: data.limit || 45,
total: data.total
};
console.log(pagination);
res.display('list', _.assign(ret, {
letters: brandLetters(),
total: data.total,
pageTotal: data.pageTotal,
pageNo: data.page,
products: data.productList,
navPath: {
nav: true,
pathNav: [
{
link: true,
href: '',
pathTitle: '',
name: 'MEN首页'
},
{
link: true,
href: '',
pathTitle: '',
name: '咨询'
},
{
link: false,
href: '',
pathTitle: '',
name: '咨询'
}
]
},
pagination: pagination,
order: order,
module: 'product',
page: 'list',
title: '列表'
}));
} else {
throw 'query product error';
return Promise.reject('query product error');
}
}).catch(next);
... ...
... ... @@ -13,7 +13,9 @@ var app = express();
// set view engin
var doraemon = path.join(__dirname, '../../doraemon/views'); // parent view root
var partials = path.join(__dirname, './views'); // parent view root
var helpers = global.yoho.helpers;
helpers.pagination = require('../../doraemon/components/pagination/pagination').createPagination;
app.on('mount', function(parent) {
delete parent.locals.settings; // 不继承父 App 的设置
Object.assign(app.locals, parent.locals);
... ... @@ -25,7 +27,7 @@ app.engine('.hbs', hbs({
defaultLayout: 'layout',
layoutsDir: doraemon,
partialsDir: [`${partials}/partial`, `${doraemon}/partial`],
helpers: global.yoho.helpers
helpers: helpers
}));
// router
... ...
... ... @@ -38,7 +38,6 @@ const Search = {
let finalParams = {
method: 'app.search.sales',
limit: 45,
order: 's_t_desc',
productSize: '384x511',
yh_channel: 1
};
... ...
<div class="yoho-product-list">
<div class="blk-page yoho-product-list">
<div class="center-content">
{{# navPath}}
{{> path-nav}}
... ... @@ -6,10 +6,18 @@
</div>
<div class="center-content clearfix">
<div class="left">
{{!-- 筛选区域 --}}
{{> list/filter}}
</div>
<div class="right">
{{!-- 已选中条件 --}}
{{> list/filter-area}}
{{!-- 排序 --}}
{{> list/order-area}}
{{!-- 商品列表 --}}
{{> list/goods-box}}
{{!-- 分页 --}}
{{{ pagination pagination }}}
</div>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -14,57 +14,4 @@
<label class="cancel">清空筛选条件</label>
</div>
{{/if}}
<div class="order-area">
<div class="order selected">综合</div>
<div class="order">上新时间</div>
<div class="order">价格</div>
<div class="dest">
<span class="iconfont up">&#xe617;</span>
<span class="iconfont down selected">&#xe616;</span>
</div>
<div class="right">
<label>
共<span>{{total}}</span>件商品
</label>
<label class="page-info">{{pageNo}}/{{pageTotal}}</label>
<span class="iconfont page disable page-pre">&#xe607;</span>
<span class="iconfont page page-next">&#xe61e;</span>
</div>
</div>
<div class="goods-area">
{{#each products}}
<div class="goods" data-id="{{productId}}">
<div class="goods-img">
<img src="{{image defaultImages 265 344}}" width="265" height="344" alt="">
</div>
<div class="goods-brand">
{{brandName}}
</div>
<div class="goods-name">
{{productName}}
</div>
<div class="goods-price">
<span>¥{{salesPrice}}</span>
{{#if marketPrice}}
<b>¥{{marketPrice}}</b>
{{/if}}
</div>
<div class="goods-list hide">
{{#each goodsList}}
<i>{{image imagesUrl 265 344}}</i>
{{/each}}
</div>
</div>
{{/each}}
<div class="goods-wrapper">
<div class="goods">
</div>
<div class="goods-img-list">
</div>
</div>
</div>
{{{ pagination paginationOpts }}}
\ No newline at end of file
{{/if}}
\ No newline at end of file
... ...
... ... @@ -16,10 +16,10 @@
<div class="yoho-ui-accordion no-active">
{{#each sortData}}
<h3>{{categoryName}}</h3>
<div class="body" data-value="{{categoryId}}">
<div class="body" data-value="{{relationParameter.sort}}">
<div class="list-body">
{{#each sub}}
<div class="input-radio" data-value="{{categoryId}}">
<div class="input-radio" data-value="{{relationParameter.sort}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
... ...
<div class="goods-area">
{{#each products}}
<div class="goods" data-id="{{productId}}">
<div class="goods-img">
<img src="{{image defaultImages 265 344}}" width="265" height="344" alt="">
</div>
<div class="goods-brand">
{{brandName}}
</div>
<div class="goods-name">
{{productName}}
</div>
<div class="goods-price">
<span>¥{{salesPrice}}</span>
{{#if marketPrice}}
<b>¥{{marketPrice}}</b>
{{/if}}
</div>
<div class="goods-list hide">
{{#each goodsList}}
<i>{{image imagesUrl 265 344}}</i>
{{/each}}
</div>
</div>
{{/each}}
<div class="goods-wrapper">
<div class="goods">
</div>
<div class="goods-img-list">
</div>
</div>
</div>
\ No newline at end of file
... ...
<div class="order-area">
<div class="order {{#if order}}{{^}}selected{{/if}}" data-order="">综合</div>
<div class="order {{#isEqual order 's_t_desc'}}selected{{/isEqual}}" data-order="s_t_desc">上新时间</div>
<div class="order order-price {{#isEqual order 's_p_asc'}}selected{{/isEqual}}{{#isEqual order 's_p_desc'}}selected{{/isEqual}}" data-order="s_p_asc,s_p_desc" data-target="price-dest">价格</div>
<div class="dest price-dest">
<span class="iconfont up s_p_asc {{#isEqual order 's_p_asc'}}selected{{/isEqual}}">&#xe617;</span>
<span class="iconfont down s_p_desc {{#isEqual order 's_p_desc'}}selected{{/isEqual}}">&#xe616;</span>
</div>
<div class="right">
<label>
共<span>{{total}}</span>件商品
</label>
<label class="page-info"><span class="cur-page">{{pageNo}}</span>/<span class="total-page">{{pageTotal}}</span></label>
{{#isEqual pageNo 1}}
<span class="iconfont page disable page-pre">&#xe607;</span>
{{^}}
<span class="iconfont page page-pre">&#xe607;</span>
{{/isEqual}}
{{#isEqual pageNo pageTotal}}
<span class="iconfont page disable page-next">&#xe61e;</span>
{{^}}
<span class="iconfont page page-next">&#xe61e;</span>
{{/isEqual}}
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -2,12 +2,15 @@
var $ = require('yoho-jquery');
var common = require('../common');
var query = common.queryString();
var YohoListPage = {
rootDoc: $('.yoho-product-list'),
brandsDoc: $('.yoho-product-list .brand-list'),
mulitBrand: false,
goodsWrapper: $('.goods-area .goods-wrapper'),
goodsWrapperState: false,
page: query.page || 1,
init: function() {
require('yoho-jquery-accordion');
require('../plugins/check');
... ... @@ -135,6 +138,47 @@ var YohoListPage = {
YohoListPage.go(data);
});
$('.order-area .page').click(function() {
if (!$(this).hasClass('disable')) {
if ($(this).hasClass('page-pre')) {
YohoListPage.go({
page: YohoListPage.page - 1
});
} else {
YohoListPage.go({
page: YohoListPage.page + 1
});
}
}
});
$('.order-area .order').click(function() {
var order = $(this).data('order');
var target = $(this).data('target');
var orders = order.split(',');
var newOrder = '';
if (query.order === orders[0]) {
newOrder = orders[1] || '';
} else {
newOrder = orders[0];
}
$('.order-area .order').removeClass('selected');
$(this).addClass('selected');
$('.' + target).find('.iconfont').each(function() {
if ($(this).hasClass(newOrder)) {
$(this).addClass('selected');
} else {
$(this).removeClass('selected');
}
});
YohoListPage.go({
order: newOrder
});
});
},
openBrandMulitChoose: function() {
$('.yoho-product-list .mulit-choose').hide();
... ...
... ... @@ -396,4 +396,14 @@
.c-red {
color: red;
}
.blk-pagination {
text-align: center;
margin: 20px 0 40px 0;
li:first-child,
li:last-child {
border-width: 2px;
}
}
}
... ...