fe / yohobuywap-node · Commits

Go to a project

Authored by lijing
Commit 8571734eb9d7ae9f7203d4e5ee8c0c5958d146c5 1 parent 3aedcdc9

品牌

Inline Side-by-side
Showing 6 changed files with 1157 additions and 12 deletions
... ... @@ -11,10 +11,28 @@ const indexModel = require('../models/brand');
let index = (req, res, next) => {
indexModel.index().then(result => {
let headerData = headerModel.setNav({
navTitle: '品牌一览'
});
res.render('brand/index', result);
let responseData = {
pageHeader: headerData,
module: 'channel',
page: 'brand',
title: '品牌一览',
pageFooter: true
};
let param = {
channel: req.query.channel || '1',
gender: req.query.gender || '1,3'
};
indexModel.getBrandByChannel(param.channel).then(result => {
res.render('brand/index', Object.assign(responseData, result));
}).catch(next);
};
... ...
/**
* 品牌页
* @param params
... ... @@ -9,15 +8,56 @@
var api = global.yoho.API;
const index = () => {
return api.get('', {
/* 男生频道取品牌广告及热门品牌数据的位置码 */
let CODE_TOPPOS_BOYS = 'ce6ac059493ec26241a8cbe0bfa1b17a';
/* 女生频道取品牌广告及热门品牌数据的位置码 */
let CODE_TOPPOS_GIRLS = 'dac99cdedc1f948e84c145aca561f7d2';
/* 潮童频道取品牌广告及热门品牌数据的位置码 */
let CODE_TOPPOS_KIDS = '713784f93f52bb1a7b93916b2bb15510';
/* 创意生活频道取品牌广告及热门品牌数据的位置码 */
let CODE_TOPPOS_LIFESTYLE = 'f1aa914fd23cbcda71a87de6f5416c75';
/**
* 获取频道接口
*/
const _package = () => {
return api.get('', {
method: 'app.brand.newBrandList'
}, {code: 200});
};
const getBrandByChannel = (channel) => {
return api.all([
_package()
method: 'app.SpaceOrders.getQrByOrderCode'
]).then(result => {
}).then(result => {
let resu = {
channel: {
channels: [
{
name: 'Boy'
},
{
name: 'Girl'
},
{
name: 'Kid'
},
{
name: 'Lifestyle'
},
]
}
};
let resu = 11;
resu.channel.channels[channel - 1].active = true;
return resu;
... ... @@ -25,5 +65,5 @@ const index = () => {
};
module.exports = {
index
getBrandByChannel
};
... ...
11<div class="brand-page yoho-page">
<div class="brand-page yoho-page">
{{# channel}}
<div class="genderNav">
... ...
/**
* 品牌一览
* @author: liangzhifeng<zhifeng.liang@yoho.cn>
* @date: 2015/10/23
*/
var $ = require('yoho-jquery'),
Hammer = require('yoho-hammer'),
Swiper = require('yoho-swiper'),
loading = require('../plugin/loading'),
lazyLoad = require('yoho-jquery-lazyload');
var ranToken = ' ??++ ';
var ranToken2 = ' ???--- ';
var swiper,
$fixTitleBar,
$brandList = $('.brand-list'),
$icon = $('.search-icon'),
$genderItem = $('.genderNav li'),
$brandItem = $('.brandNav li'),
$newBrandWall = $('.new-brand-wall'),
$recommandBrandWall = $('.recommand-brand-wall'),
$searchAction = $('.search-action'),
$homebuttom = $('.homebuttom'),
$genderNav = $('.genderNav'),
$newSearch = $('.newbrand-search'),
$netHistory = $('.net-history'),
$navBtn = $('.nav-home'),
hotBrandsSwiper;
var searchH = $('.newbrand-search').outerHeight(),
headerH = $('.yoho-header').outerHeight(),
brandSwipe = parseInt(searchH) + parseInt(headerH) - 1,
minBrandListTop;
var brandsData,
$keyword = $('#keyword'),
clearTextHammer;
var $history = $('.local-history');
var $searchPage = $('.search-brand-page');
var $historySearch = $('.history-search');
var $hotSearch = $('.hot-search');
var $clearHistory = $('#clear-history');
var chHammer;
require('../common');
function changeBackground() {
var $brandList = $('.brand-list').find('p');
$brandList.on('touchstart', function() {
$brandList.css('background', '#fff');
$(this).css('background', '#eee');
}).on('touchend touchcancel', function() {
$(this).css('background', '#fff');
});
}
changeBackground();
/**
* 增加单条记录
*/
function addHistory(brandName) {
$.ajax({
type: 'POST',
url: '/brands/addBrandSearch',
data: 'brandName=' + encodeURIComponent(brandName),
success: function(data) {
},
error: function() {
}
});
}
// 比较大小
function sequence(a, b) {
if (a.time > b.time) {
return 1;
} else if (a.time < b.time) {
return -1;
} else {
return 0;
}
}
function searchInput() {
if ($keyword.val().length) {
$icon.css('color', '#444');
// $(this).closest('.search-box').css('width', '11.25rem');
$searchAction.show().find('.clear-text').show();
} else {
$icon.css('color', '#b2b2b2');
// $(this).closest('.search-box').css('width', '12.5rem');
$searchAction.find('.clear-text').hide();
}
searchResult();
}
function isLocalStorageSupported() {
var testKey = 'test',
storage = Window.prototype.localStorage;
try {
storage.setItem(testKey, 'testValue');
storage.removeItem(testKey);
return true;
} catch (error) {
return false;
}
}
// 绑定提交前的存local操作
function bindWriteLocal($brandList, list) {
$brandList.on('click', 'p , li', function(e) {
var brandName, brandId, brandDomain, url;
var a = $(this).find('a');
var myDate = new Date();
var query = a.attr('brandName') + ranToken2 + myDate.getTime(),
historys;
brandName = a.attr('brandName');
brandId = a.attr('brandId');
brandDomain = a.attr('brandDomain');
url = a.attr('href');
e.preventDefault();
if ($netHistory.length > 0) {
addHistory(brandName);
if (list) {
location.href = url;
return;
}
$keyword.val(brandName);
searchInput();
return;
}
if (localStorage) {
if (isLocalStorageSupported()) {
historys = localStorage.getItem('historys-brand');
}
historys = historys ? historys : '';
if (historys.indexOf(ranToken + query + ranToken) > -1) {
$keyword.val(brandName);
searchInput();
return;
}
if (historys === '') {
query = ranToken + query;
}
historys += query + ranToken;
if (isLocalStorageSupported()) {
localStorage.setItem('historys-brand', historys);
}
}
if (list) {
location.href = url;
return;
}
$keyword.val(brandName);
searchInput();
});
}
function searchResult() {
var keyword = ($keyword.val() + '').toLowerCase();
var result = {},
i = 0,
html = '';
if (keyword !== '') {
// 遍历首字母搜索
$.each(brandsData, function(k, v) {
if ($.isArray(v)) {
// 遍历品牌，进行匹配
$.each(v, function(i, brand) {
if (brand.searchName.toLowerCase().indexOf(keyword) > -1) {
result[k] = result[k] || [];
result[k].push(brand);
}
});
}
});
// 根据搜索结果生成 HTML
$.each(result, function(k, v) {
var brandHtml = ['<div class="brand-list bar-', i, '">'];
i++;
brandHtml.push('<div class="title-bar"><h2>');
brandHtml.push(k);
brandHtml.push('</h2></div>');
$.each(v, function(i, brand) {
brandHtml.push('<p><a href="' + brand.url + '" brandName = "' + brand.name +
'" brandId = "' + brand.brandId + '" brandDomain = "' + brand.brandDomain + '">' + brand.name);
if (brand.isNew) {
brandHtml.push('<i class="icon-new">NEW</i>');
}
if (brand.isHot) {
brandHtml.push('<i class="icon-hot">HOT</i>');
}
brandHtml.push('</a></p>');
});
brandHtml.push('</div>');
html += brandHtml.join('');
});
}
// 没填入关键词时显示最热搜索
if (keyword.length > 0) {
$('.search-brand-page').addClass('hide');
} else {
$('.search-brand-page').removeClass('hide');
}
// 插入 dom，绑定事件
$('.search-result').html(html);
changeBackground();
bindWriteLocal($('.brand-list'), true);
}
loading.showLoadingMask();
lazyLoad($('img.lazy'));
$('.yoho-header').css({
'z-index': 2,
position: 'fixed',
top: 0
});
$homebuttom.css('top', '47px');
$homebuttom.css('position', 'fixed');
$navBtn.on('touchstart', function() {
if ($homebuttom.hasClass('hide')) {
$genderNav.css('top', '47px');
$newSearch.css('margin-top', '0px');
$searchPage.css('margin-top', '0px');
$('.banner-top').css('margin-top', '0px');
} else {
$genderNav.css('top', '97px');
$newSearch.css('margin-top', '47px');
$searchPage.css('margin-top', '47px');
$('.banner-top').css('margin-top', '47px');
}
});
(function() {
if ($('.banner-top').length > 0) {
$('.hot-brands').css('padding-top', '0');
}
$('.hide-when-loading').show();
loading.hideLoadingMask();
// banner滑动
swiper = new Swiper('.swiper-container', {
lazyLoading: true,
loop: true,
autoplay: 3000,
pagination: '.swiper-pagination .pagination-inner'
});
// 热门品牌滑动
hotBrandsSwiper = new Swiper('.brands-swiper', {
grabCursor: true,
slidesPerView: 'auto',
wrapperClass: 'brands-list',
slideElement: 'li'
});
})();
$fixTitleBar = $('<div class="title-bar fixed-title-bar"><h2></h2></div>');
$fixTitleBar.css({
position: 'fixed',
top: brandSwipe
}).hide();
minBrandListTop = brandSwipe + $('.hot-brands').outerHeight() + $('.banner-top').outerHeight();
$brandList.last().append($fixTitleBar);
function scrollHandler() {
var scrTop = $(window).scrollTop();
if ($brandList.eq(0).offset().top < minBrandListTop) {
$fixTitleBar.hide();
}
$brandList.each(function() {
var offTop = $(this).offset().top - brandSwipe;
if (scrTop >= offTop) {
$fixTitleBar.css({
display: 'block'
}).find('h2').html($(this).find('.title-bar').text());
}
});
}
if ($('.brand-index-page').length > 0) {
/**
* srcoll to load more
*/
$(window).scroll(function() {
window.requestAnimationFrame(scrollHandler);
});
}
if ($('.history-search').length > 0) {
bindWriteLocal($('.history-search'), false);
}
if ($('.hot-search').length > 0) {
bindWriteLocal($('.hot-search'), false);
}
if ($('.brand-search-page').length > 0) {
brandsData = $.parseJSON($('#brands-data').html());
$keyword.on('input', function() {
searchInput();
});
// 2016.1.13 产品（高扬）要求进入页面默认显示取消按钮
$icon.css('color', '#444');
$keyword.closest('.search-box').css('width', '11.25rem');
$searchAction.show().find('.clear-text').hide();
clearTextHammer = new Hammer($('.clear-text')[0]);
clearTextHammer.on('tap', function(e) {
$('.search-result').html('');
$('#keyword').val('').trigger('input');
e.preventDefault();
e.srcEvent.stopPropagation();
});
$('form.search-box').on('submit', function() {
return false;
});
}
if ($genderItem.length > 0) {
$genderItem.on('touchstart', function() {
var index = $(this).data('id') + 1;
$('.genderNav ul .active').removeClass('active');
$(this).addClass('active');
$('.hide-when-loading').hide();
loading.showLoadingMask();
function reload() {
window.location.search = 'channel=' + index;
}
setTimeout(reload.bind(this), 100);
});
}
if ($brandItem.length > 0) {
$brandItem.on('click', function() {
var index = $(this).data('id');
$('.brandNav ul .active').removeClass('active');
$(this).addClass('active');
if (index === 0) {
$recommandBrandWall.not('.hide').addClass('hide');
$newBrandWall.not('.hide').addClass('hide');
$brandList.removeClass('hide');
} else if (index === 1) {
$newBrandWall.removeClass('hide');
$brandList.not('.hide').addClass('hide');
$recommandBrandWall.not('.hide').addClass('hide');
} else {
$recommandBrandWall.removeClass('hide');
$brandList.not('.hide').addClass('hide');
$newBrandWall.not('.hide').addClass('hide');
}
});
}
/**
* 清除记录
*/
function removeHistory() {
$.ajax({
type: 'GET',
url: '/brands/delBrandHistory',
data: '',
success: function(data) {
},
error: function() {
}
});
}
// 初始化历史搜索的内容
if ($('.brand-search-page').length > 0) {
chHammer = new Hammer($clearHistory[0]);
chHammer.on('tap', function() {
if (isLocalStorageSupported()) {
localStorage.removeItem('historys-brand');
}
$history.html('');
$historySearch.hide();
$clearHistory.hide();
if ($('.net-search').length > 0) {
removeHistory();
}
window.rePosFooter();
});
// 搜索页面
(function() {
var html = '',
history,
historys, i,
localHistory,
brand, data,
time, netArr, dict, dictc, localArr,
combinArr, key, date, temp;
localArr = [];
combinArr = [];
netArr = [];
$netHistory.find('li').each(function() {
brand = $(this).find('a').attr('brandName');
time = $(this).find('a').attr('collectTime');
dict = {
brand: brand,
time: time
}, dictc, dict;
netArr.push(dict);
});
if (localStorage) {
if (isLocalStorageSupported()) {
historys = localStorage.getItem('historys-brand');
}
if (historys && historys.length > 0) {
historys = historys.split(ranToken);
for (i = historys.length; i > 0; i--) {
history = historys[i - 1];
if (history === '') {
continue;
}
localHistory = history.split(ranToken2);
brand = localHistory[0];
time = localHistory[1];
dict = {
brand: brand,
time: time
};
localArr.push(dict);
}
}
}
if (localArr.length === 0 && netArr.length === 0) {
$historySearch.addClass('hide');
return;
}
date = {};
temp = {};
if (localArr.length > 0) {
for (dictc in localArr) {
if (localArr.hasOwnProperty(dictc)) {
temp = localArr[dictc];
if (!date[temp.brand] || date[temp.brand] < temp.time) {
date[temp.brand] = temp.time;
}
}
}
}
if (netArr.length > 0) {
for (dict in netArr) {
if (netArr.hasOwnProperty(dict)) {
temp = netArr[dict];
if (!date[temp.brand] || date[temp.brand] < temp.time) {
date[temp.brand] = temp.time;
}
}
}
}
data = {};
for (key in date) {
if (date.hasOwnProperty(key)) {
data = {
brand: key,
time: date[key]
};
combinArr.push(data);
}
}
combinArr.sort(sequence);
if (combinArr.length > 0) {
for (i = combinArr.length - 1; i >= ((combinArr.length > 10) ? (combinArr.length - 10) : 0); i--) {
brand = combinArr[i].brand;
time = combinArr[i].time;
html += '<li><a brandName = "' + brand +
'">' + brand + '</li>';
$history.removeClass('hide');
$history.html(html);
$clearHistory.removeClass('hide');
$hotSearch.removeClass('hide');
window.rePosFooter();
}
} else {
$history.addClass('hide');
}
}());
}
... ...
.brand-page {
.re-pos-search {
top: 170px !important;
}
.hide-when-loading {
display: none;
}
.genderNav {
display: block;
width: 100%;
height: 80px;
line-height: 80px;
overflow: hidden;
color: #aeaeae;
z-index: 3;
position: fixed;
top: 90px;
border-bottom: 1px solid #e1e1e1;
background-color: #fff;
ul {
width: 100%;
height: 90%;
overflow: hidden;
li {
width: 25%;
height: 100%;
overflow: hidden;
float: left;
text-align: center;
position: relative;
font-size: 28px;
i {
width: 100%;
height: 40%;
overflow: hidden;
display: block;
}
span:not(.split-border) {
width: 100%;
height: auto;
overflow: hidden;
display: block;
}
.split-border {
display: inline-block;
width: 2px;
height: 1rem;
background-color: #e1e1e1;
position: absolute;
top: 30%;
right: 0;
}
}
li:last-child {
.split-border {
display: none;
}
}
li.active {
color: #444;
}
}
}
.brandNav {
display: block;
width: 100%;
height: 80px;
line-height: 80px;
overflow: hidden;
color: #aeaeae;
z-index: 3;
border-top: 30px solid #f4f4f4;
background-color: #fff;
border-bottom: 1px solid #f4f4f4;
ul {
width: 100%;
height: 90%;
overflow: hidden;
li {
width: 33%;
height: 100%;
overflow: hidden;
float: left;
text-align: center;
position: relative;
font-size: 28px;
i {
width: 100%;
height: 40%;
overflow: hidden;
display: block;
}
span:not(.split-border) {
width: 100%;
height: auto;
overflow: hidden;
display: block;
}
.split-border {
display: inline-block;
width: 2px;
height: 1rem;
background-color: #e1e1e1;
position: absolute;
top: 30%;
right: 0;
}
}
li:last-child {
.split-border {
display: none;
}
}
li.active {
color: #444;
}
}
}
.newbrand-search {
width: 93.75%;
height: 60px;
padding: 14px 3.125%;
background-color: #f8f8f8;
left: 0;
top: 90px;
position: fixed;
z-index: 2;
.search-box {
position: relative;
width: 500px;
height: 60px;
background-color: #fff;
border-radius: 30px;
padding: 0 32px 0 52px;
a {
width: 100%;
height: 60px;
border: 0;
display: block;
span {
line-height: 60px;
color: #bdbdbd;
font-size: 1.2em;
padding-left: 18px;
}
}
.search-icon {
position: absolute;
font-size: 24px;
top: 0;
left: 24px;
line-height: 60px;
color: #bdbdbd;
}
.search-input {
border: none;
width: 95%;
height: 60px;
font-size: 1.2em;
padding: 0 10px;
}
.search-action {
display: none;
position: absolute;
top: 0;
right: -74px;
font-size: 32px;
line-height: 60px;
color: #666;
.clear-text {
font-size: 40px;
}
}
.cancel-btn {
display: inline;
font-size: 28px;
vertical-align: middle;
color: #666;
}
.clear-text {
margin-right: 20px;
}
}
}
.banner-top {
padding-top: 258px;
background-color: #f8f8f8;
}
.hot-brands {
padding-top: 178px;
border-top: 30px solid #f4f4f4;
.floor-header {
padding: 0;
}
.brands-swiper {
border-top: 0;
}
}
.hot-brand {
margin: 30px 0 0;
.hot-brand-list {
background: #fff;
li {
float: left;
width: 158px;
height: 158px;
.img-box {
display: table-cell;
vertical-align: middle;
text-align: center;
width: 158px;
height: 158px;
}
img {
max-width: 140px;
max-height: 140px;
}
}
}
}
.brand-list {
width: 100%;
.title-bar {
width: 100%;
background: #eee;
color: #999;
position: relative;
h2 {
padding: 0 20px;
height: 50px;
line-height: 50px;
font-size: 34px;
border-top: 1px solid #e6e6e6;
background-color: #f4f4f4;
}
}
p {
cursor: pointer;
padding: 0 20px;
a {
display: block;
height: 76px;
line-height: 76px;
font-size: 28px;
border-bottom: 1px solid #f3f3f3;
border-top: 1px solid #f9f9f9;
i {
display: inline-block;
margin-top: -4px;
width: 108px;
height: 42px;
text-align: center;
vertical-align: middle;
font-size: 28px;
line-height: 44px;
color: #fff;
border-radius: 50px;
transform: scale(0.8);
}
.icon-hot {
background: #f00;
}
.icon-new {
background: #86c048;
}
}
}
}
.branding-wall {
padding: 0;
width: 98%;
margin-left: 1%;
}
.brand-wall-box {
margin-top: 20px;
width: 32%;
display: inline-block;
}
.brand-name {
margin-top: 10px;
text-align: center;
vertical-align: middle;
font-size: 24px;
line-height: 70px;
height: 70px;
overflow: hidden;
color: #b8b8b8;
}
.right-bar {
width: 60px;
height: 75%;
top: 20%;
overflow: auto;
position: fixed;
right: 2px;
border-radius: 12px;
background: rgba(0, 0, 0, 0.8);
z-index: 2;
display: none;
b {
height: 36px;
line-height: 36px;
text-align: center;
display: block;
color: #999;
font-weight: bold;
}
}
.right-bar::-webkit-scrollbar {
display: none;
}
.con {
padding-top: 10px;
}
.search-result {
padding-top: 165px;
}
}
... ...
... ... @@ -7,7 +7,7 @@
border: none;
border-bottom: 8px solid #fff;
background-color: transparent;
background-image: resolve('channel/yohood.png');
background-image: resolve("channel/yohood.png");
background-position-x: 26%;
background-position-y: 36%;
background-size: 40%;
... ... @@ -17,7 +17,7 @@
#yohood:active {
border-bottom-color: #000;
background-color: rgba(255, 255, 255, 0.4);
background-image: resolve('channel/yohood-tapped.png');
background-image: resolve("channel/yohood-tapped.png");
.right-icon {
color: #000;
... ... @@ -189,4 +189,148 @@
}
}
.category-page {
font-size: 30px;
.search-input {
position: relative;
background-color: #f8f8f8;
padding: 13px 20px;
p {
box-sizing: border-box;
width: 100%;
height: 60px;
line-height: 60px;
border: none;
padding-left: 66px;
border-radius: 60px;
font-size: 26px;
background: #fff;
color: #999;
}
}
.search-icon {
position: absolute;
top: 0;
bottom: 0;
left: 43px;
line-height: 86px;
color: #999;
}
.category-nav {
height: 70px;
border-bottom: 1px solid #e6e6e6;
li {
display: block;
box-sizing: border-box;
float: left;
height: 100%;
padding: 20px 0;
width: 25%;
text-align: center;
color: #999;
&:last-child {
border-right: none;
}
&.focus {
color: #000;
}
&.bytouch {
background: #eee;
}
}
span {
display: block;
width: 100%;
height: 30px;
line-height: 30px;
font-size: 30px;
border-right: 1px solid #e6e6e6;
}
li:last-child span {
border-right: 0;
}
}
.content {
background: #f8f8f8;
&.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;
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;
}
}
}
@import "brand";
@import "home";
... ...