fe / yoho-blk · Commits

Go to a project

Authored by 姜枫
Commit 0643c68bbf49d322a8b945acbb0cea51c0b64b49 1 parent 33db0bc1

使用sale的接口作为测试数据

Inline Side-by-side
Showing 8 changed files with 406 additions and 176 deletions
... ... @@ -2,6 +2,8 @@
'use strict';
const _ = require('lodash');
const Search = require('../models/list');
const camelCase = global.yoho.camelCase;
function brandLetters() {
let letters = [];
... ... @@ -34,51 +36,8 @@ function peopleChoose(channel) {
}];
}
function brandData() {
function randomLetter(len) {
let words = [];
for (let i = 0; i < len; i++) {
words.push(String.fromCharCode(_.random(65, 122)));
}
return words.join('');
}
let brands = [];
for (let i = 0; i < 1000; i++) {
brands.push({
name: randomLetter(_.random(3, 15)),
checked: false,
id: i
});
}
return brands;
}
function colorData() {
return [
{
name: '黑色',
color: '#000',
checked: false
},
{
name: '蓝色',
color: 'blue',
checked: false
},
{
name: '红色',
color: 'red',
checked: false
}
];
}
const list = {
index: (req, res) => {
index: (req, res, next) => {
let channel = req.query.channel || req.cookies._Channel;
let sex = req.query.sex;
... ... @@ -88,35 +47,65 @@ const list = {
channel = 'women';
}
res.display('list', {
letters: brandLetters(),
people: peopleChoose(channel),
brandData: brandData(),
colors: colorData(),
navPath: {
nav: true,
pathNav: [
{
link: true,
href: '',
pathTitle: '',
name: 'MEN首页'
},
{
link: true,
href: '',
pathTitle: '',
name: '咨询'
Search.queryProduct({}).then(result => {
if (result && result.code === 200 && result.data) {
let data = camelCase(result.data);
let priceRange = data.filter.priceRange;
priceRange = Object.keys(priceRange).map((k) => {
let prices = k.split(',');
return {
lower: prices[0],
higher: prices[1]
};
}).sort((a, b) => {
return a.lower - b.lower;
});
res.display('list', {
letters: brandLetters(),
people: peopleChoose(channel),
sortData: data.filter.groupSort,
brandData: data.filter.brand,
colors: data.filter.color,
size: data.filter.size,
priceRange: priceRange,
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: '咨询'
}
]
},
{
link: false,
href: '',
pathTitle: '',
name: '咨询'
}
]
module: 'product',
page: 'list',
title: '列表'
});
} else {
throw 'query product error';
}
});
}).catch(next);
}
};
... ...
'use strict';
const SearchAPI = global.yoho.SearchAPI;
const api = global.yoho.API;
const logger = global.yoho.logger;
const camelCase = global.yoho.camelCase;
const _ = require('lodash');
const Search = {
querySort(query) {
return SearchAPI.get('sortgroup.json', _.assign({
sales: 'Y',
status: 1,
stocknumber: 1
}, query)).then(data => {
if (data && data.code === 200 && data.data) {
return camelCase(data.data.sort);
} else {
return [];
}
}).catch(e => {
logger.error(e);
return Promise.resolve([]);
});
},
queryProduct(params) {
let finalParams = {
method: 'app.search.sales',
limit: 45,
order: 's_t_desc',
productSize: '384x511',
yh_channel: 1
};
Object.assign(finalParams, params);
return api.get('', finalParams);
}
};
module.exports = Search;
... ...
... ... @@ -25,6 +25,53 @@
</div>
<div class="order-area">
<span>综合</span>
<span>上新时间</span>
<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">&#xe606;</span>
</div>
</div>
<div class="goods-area">
{{#each products}}
<div class="goods" data-id="{{productId}}">
<div class="goods-img">
<img src="{{defaultImages}}" 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>{{imagesUrl}}</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
... ...
... ... @@ -13,59 +13,20 @@
<div class="blank-div"></div>
<div class="title">全部品类</div>
<div class="yoho-ui-accordion">
<h3>上衣</h3>
<div class="body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>男士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
</div>
<h3>裤装</h3>
<div class="body">
<div class="list-body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>男士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
<div class="yoho-ui-accordion no-active">
{{#each sortData}}
<h3>{{categoryName}}</h3>
<div class="body" data-msort="{{categoryId}}">
<div class="list-body">
{{#each sub}}
<div class="input-radio" data-misort="{{categoryId}}">
{{> icon/radio }}
<label>{{categoryName}}</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>女士</label>
{{/each}}
</div>
</div>
</div>
{{/each}}
</div>
<div class="blank-div"></div>
... ... @@ -77,13 +38,9 @@
<input type="text" class="brand-search" placeholder="输入您要查找的品牌">
</div>
<div class="brand-letter-items">
<span class="item-all">全部</span>
<span class="item item-all" data-value="">全部</span>
{{#each letters}}
{{#if selected}}
<span class="item selected">{{letter}}</span>
{{^}}
<span class="item">{{letter}}</span>
{{/if}}
<span class="item" data-value="{{letter}}">{{letter}}</span>
{{/each}}
<span class="mulit-choose">
多选 ＋
... ... @@ -93,7 +50,7 @@
{{#each brandData}}
<div class="input-radio" data-value="{{id}}">
{{> icon/radio}}
<label>{{name}}</label>
<label>{{brandNameEn}}</label>
</div>
{{/each}}
</div>
... ... @@ -107,18 +64,12 @@
<div class="yoho-ui-accordion">
<h3>价格</h3>
<div class="body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>¥0-¥1000</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>¥1001-¥2000</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>¥2001-¥4000</label>
{{#each priceRange}}
<div class="input-radio" data-value="{{lower}},{{higher}}">
{{> icon/radio }}
<label>¥{{lower}}-¥{{higher}}</label>
</div>
{{/each}}
<div class="price-btns">
<div class="price-input inline-block">
<span>¥</span>
... ... @@ -138,18 +89,12 @@
<h3>尺码</h3>
<div class="body">
<div class="size-body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe603;</span>
<label>M</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>L</label>
</div>
<div class="input-radio">
<span class="iconfont radio">&#xe604;</span>
<label>XL</label>
{{#each size}}
<div class="input-radio" data-value="{{sizeId}}">
{{> icon/radio }}
<label>{{sizeName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
... ... @@ -158,18 +103,12 @@
<h3>颜色</h3>
<div class="body">
<div class="color-body">
<div class="input-radio">
<span class="iconfont radio checked">&#xe610;</span>
<label>黑色</label>
</div>
<div class="input-radio">
<span class="iconfont radio c-blue">&#xe611;</span>
<label>蓝色</label>
</div>
<div class="input-radio">
<span class="iconfont radio c-red">&#xe611;</span>
<label>红色</label>
{{#each colors}}
<div class="input-radio" data-value="{{colorId}}">
{{> icon/radio }}
<label>{{colorName}}</label>
</div>
{{/each}}
</div>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -13,7 +13,10 @@ module.exports = {
app: 'web',
appVersion: '4.6.0', // 调用api接口版本
port: 6003,
siteUrl: 'http://www.yohoblk.com',
siteUrl: '//www.yohoblk.com',
subDomains: {
default: '//www.yohoblk.com'
},
domains: {
api: 'http://devapi.yoho.cn:58078/', // devapi.yoho.cn:58078 testapi.yoho.cn:28078 devapi.yoho.cn:58078
service: 'http://devservice.yoho.cn:28077/', // testservice.yoho.cn:28077 devservice.yoho.cn:58077
... ...
... ... @@ -52,7 +52,7 @@
"uuid": "^2.0.2",
"winston": "^2.2.0",
"winston-daily-rotate-file": "^1.1.4",
"yoho-node-lib": "0.0.11"
"yoho-node-lib": "0.0.17"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
... ...
... ... @@ -5,13 +5,22 @@ var YohoListPage = {
rootDoc: $('.yoho-product-list'),
brandsDoc: $('.yoho-product-list .brand-list'),
mulitBrand: false,
goodsWrapper: $('.goods-area .goods-wrapper'),
goodsWrapperState: false,
init: function() {
require('yoho-jquery-accordion');
require('../common');
require('../plugins/check');
$('.yoho-ui-accordion', this.rootDoc).accordion({
collapsible: true,
heightStyle: 'content'
$('.yoho-ui-accordion', this.rootDoc).each(function() {
var opts = {
collapsible: true,
heightStyle: 'content'
};
if ($(this).hasClass('no-active')) {
opts.active = false;
}
$(this).accordion(opts);
});
$('.yoho-product-list .sex-body .input-radio').check({
... ... @@ -57,10 +66,18 @@ var YohoListPage = {
YohoListPage.filterBrand($(this).val().toLowerCase());
});
$('.yoho-product-list .brand-letter-items .item').on('click', function() {
$('.yoho-product-list .brand-letter-items .item').hover(function() {
$('.yoho-product-list .brand-letter-items .item').removeClass('select');
$(this).addClass('select');
YohoListPage.filterBrand($(this).text().toLowerCase());
YohoListPage.filterBrand($(this).data('value').toLowerCase());
});
$('.goods-area > .goods').mouseenter(function(e) {
YohoListPage.showGoodsWrapper(e);
});
$('.goods-wrapper').mouseleave(function(e) {
YohoListPage.hideGoodsWrapper(e);
});
},
openBrandMulitChoose: function() {
... ... @@ -102,6 +119,37 @@ var YohoListPage = {
});
return brands;
},
showGoodsWrapper: function(e) {
var position = $(e.currentTarget).position();
var productId = $(e.currentTarget).data('id');
if (YohoListPage.goodsWrapperState && YohoListPage.productId !== productId) {
YohoListPage.goodsWrapperState = false;
}
if (!YohoListPage.goodsWrapperState) {
YohoListPage.productId = productId;
position.top += 10;
$(this.goodsWrapper).css(position);
$('.goods', this.goodsWrapper).html($(e.currentTarget).html());
$('.goods-img-list', this.goodsWrapper).empty();
$(e.currentTarget).find('.goods-list i').each(function() {
$('.goods-img-list', this.goodsWrapper).append(
'<img src="' + $(this).text() + '" width="60" height="80" alt="">');
});
$(this.goodsWrapper).show();
YohoListPage.goodsWrapperState = true;
$('.goods-img-list img', this.goodsWrapper).hover(function() {
$('.goods .goods-img img', YohoListPage.goodsWrapper).attr('src', $(this).attr('src'));
});
}
},
hideGoodsWrapper: function() {
YohoListPage.goodsWrapperState = false;
$('.goods-area .goods-wrapper').hide();
},
go: function(q) {
var qs = $.extend(window.queryString(), q);
... ...
.yoho-product-list {
font-size: 14px;
.center-content {
.left {
width: 250px;
... ... @@ -31,8 +34,9 @@
.list-body,
.size-body,
.color-body {
max-height: 260px;
.color-body,
.brand-list {
max-height: 240px;
overflow-y: auto;
}
.brand-body {
... ... @@ -66,10 +70,6 @@
padding: 5px 10px;
}
}
.brand-list {
max-height: 260px;
overflow-y: auto;
}
.brand-btns {
text-align: center;
margin-top: 10px;
... ... @@ -194,6 +194,167 @@
.order-area {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
margin-top: 30px;
color: #878787;
font-weight: 700;
.order {
display: inline-block;
margin: 14px 15px;
height: 24px;
line-height: 24px;
}
.dest {
display: inline-block;
position: relative;
width: 15px;
height: 24px;
line-height: 24px;
margin: 14px 15px;
margin-left: -10px;
margin-bottom: -10px;
.iconfont {
display: block;
font-size: 12px;
height: 12px;
line-height: 12px;
position: absolute;
}
.iconfont.selected {
color: #000;
}
.iconfont.up{
top: -2px;
}
.iconfont.down{
top: 8px;
}
}
.order.selected {
color: #000;
}
.right {
width: auto;
height: 24px;
line-height: 24px;
margin-top: 12px;
label {
color: #000;
font-weight: 700;
display: inline-block;
}
label.page-info{
margin: 0 25px;
}
.page {
color: #000;
font-weight: 700;
border: 2px solid #000;
width: 24px;
height: 24px;
line-height: 24px;
display: inline-block;
font-size: 14px;
text-align: center;
margin-right: 8px;
}
.page.disable {
color: #878787;
border: 2px solid #878787;
}
}
}
.goods-area {
margin: 0 -12px;
position: relative;
.goods {
margin: 10px 0;
padding: 10px;
display: inline-block;
text-align: center;
border: 2px solid #fff;
.goods-brand {
font-weight: 700;
padding: 10px;
}
.goods-img {
position: relative;
overflow: hidden;
width: 265px;
height: 344px;
.label {
background-color: #408CCC;
height: 24px;
width: 100%;
position: absolute;
bottom: 0;
z-index: 1;
line-height: 24px;
color: #fff;
}
}
.goods-name {
padding: 5px;
width: 265px;
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}
.goods-price {
padding: 15px;
font-size: 16px;
font-weight: 700;
b {
font-size: 12px;
color: #878787;
margin-left: 15px;
text-decoration:line-through;
}
}
}
.goods-wrapper {
border: 2px solid #eae9e9;
position: absolute;
background: #fff;
z-index: 10;
top: 10px;
padding-right: 10px;
min-width: 383px;
display: none;
.goods {
margin: 0;
border: 0;
}
.goods-img-list {
float: right;
margin: 2px 10px;
img {
margin: 8px 0;
}
}
}
}
.c-blue {
... ...