... ... @@ -4,6 +4,41 @@
### 商品
{
skn: 1,
thumb: 'path/to/goods/img',
url: '',
name: '',
salePrice: 500, //售价
marketPrice: 1000, //市场价
tags: [
{
isNew: true //NEW
},
{
isSale: true //SALE
},
{
isLimit: false //限量商品
},
{
isNewFestival: true //新品节
},
{
isReNew: true //再到着
},
{
isYearEndPromotion: true //年终大促
},
{
isYearMidPromotion: true // 年中大促
}
],
isFew: true, //即将售罄
showColBtn: true, //是否显示收藏按钮
coled: true //已收藏
}
### 路径导航
{
... ... @@ -195,7 +230,7 @@
## 搜索页
{
products: {
search: {
//路径导航
pathNav: [...],
... ... @@ -381,6 +416,66 @@
preHref: '', //若当前为第一页,不传此参数
nexHref: '' //若当前为最后一页,不传此参数
},
// 商品导航列表
allSort: {
//全部品类
updateNum: 2, //更新总数
list: [
{
name: 'AA', //一级分类
num: 12 //一级分类更新数目
childList: [
{
name: 'AAA', //二级分类
href: '##', //二级分类跳转链接
num: 12 //二级分类更新数目
}
]
}
]
},
advNav: {
//图片导航
advNavTitle: 'AA', 图片导航标题
list: [
{
href: '',
src: '' // 图片地址
}
]
},
advPic: {
//图片banner
advPicTitle: 'AA', 图片banner标题
list: [
{
href: '',
src: '' // 图片地址
}
]
},
newSales: {
//一周新品上架
updateNum: 123,
list: [
{
name: 'AAA',
href: '',
num: 12,
}
]
},
allDiscount: {
//全部折扣
updateNum: 111,
list: [
{
name: 'VVV',
href: '##',
num: 11
}
]
}
//商品列表
goods: [
//商品信息
... ...
{{> layout/header}}
<div class="products-page yoho-page">
{{# products}}
{{> layout/path-nav}}
<div class="filter-box">
{{# filters}}
{{# checkedConditions}}
<div class="checked-conditions section">
<span class="title">已选条件:</span>
<div class="product-list-page yoho-page">
{{# list}}
{{# brandBanner}}
<div class="brand-banner">
<div class="banner-img" style="height: {{bannerHeight}}px;background: url({{banner}})"></div>
<div class="opt-wrap">
<p class="opt center-content">
<a href="{{brandHome}}">
<i class="iconfont">&#xe617;</i>
品牌首页
</a>
<a href="{{brandIntro}}">
<i class="iconfont">&#xe618;</i>
品牌介绍
</a>
<span id="brand-favor" class="brand-favor">
<i class="iconfont{{#if coled}} coled{{/if}}">&#xe616;</i>
</span>
</p>
</div>
</div>
{{/ brandBanner}}
<div class="attr-content clearfix">
{{#each conditions}}
<a class="tag" href="{{href}}">
{{#if name}}
{{name}}
{{^}}
<i class="color-block" style="background: {{color}}"></i>
{{/if}}
<i class="close iconfont">&#xe602;</i>
</a>
{{/each}}
<div class="center-content clearfix">
{{> layout/path-nav}}
<a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>
</div>
{{# brandAbout}}
<div class="brand-about">
{{{brandIntro}}}
</div>
{{^}}
<div class="list-left pull-left">
{{# allDiscount}}
<div class="sort-container">
<ul class="sort-child-list new-sale">
<li><a href="{{href}}">全部折扣</a><span>{{updateNum}}</span></li>
{{#each list}}
<li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
{{/each}}
</ul>
</div>
{{/ checkedConditions}}
{{#if channel}}
<div class="channel section">
<span class="title">频道:</span>
<div class="attr-content clearfix">
{{#each channel}}
<a class="attr" href="{{href}}">
{{name}}
</a>
{{/ allDiscount}}
{{# newSales}}
<div class="sort-container">
<h2>一周新品上架<span>{{updateNum}}</span></h2>
<ul class="sort-child-list new-sale">
{{#each list}}
<li><a href="{{href}}">{{name}}</a><span>{{num}}</span></li>
{{/each}}
</div>
</ul>
</div>
{{/if}}
{{#if sort}}
<div class="sort section">
<span class="title">分类:</span>
{{/ newSales}}
<div class="attr-content">
<ul class="sort-pre clearfix">
{{#each sort}}
<li>
<span class="attr">
{{name}}
</span>
</li>
{{/each}}
</ul>
<div class="sort-sub-wrap">
{{#each sort}}
<ul class="sort-sub clearfix hide">
{{#each sub}}
<li class="attr">
{{# allSort}}
<div class="sort-container">
<h2>全部品类<span>{{updateNum}}</span></h2>
<ul>
{{#each list}}
<li class="product-list-nav">
<h3>
<span class="icon-triangle"></span>
{{name}}<span>{{num}}</span>
</h3>
<ul class="sort-child-list">
{{#each childList}}
<li>
<a href="{{href}}">{{name}}</a>
<span>{{num}}</span>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{# brand}}
<div class="brand section">
<span class="title">品牌:</span>
<div class="attr-content">
<ul class="default clearfix">
{{# default}}
<li class="attr">
<a href="{{href}}" title="{{name}}">{{name}}</a>
</li>
{{/ default}}
</ul>
<div class="brand-opt">
<span id="brand-more" class="brand-more">
<em>更多</em>
<i class="iconfont">&#xe600;</i>
</span>
<span id="brand-multi" class="multi-select">多选 +</span>
</div>
<div class="brand-panel hide">
<div class="panel-head clearfix">
<p class="brands-index">
{{#each brandIndex}}
<span data-index="{{index}}">{{name}}</span>
{{/each}}
</p>
<div class="brand-search">
<input id="brand-search-input" type="text">
<span class="btn">
<i class="iconfont">&#xe611;</i>
</span>
</div>
</div>
<ul class="panel-body check-container clearfix">
{{# brandsShow}}
<li class="attr" data-index="{{index}}" data-key="{{key}}">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span title="{{name}}">{{name}}</span>
</a>
</li>
{{/ brandsShow}}
</ul>
<div class="btns">
<button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
</div>
</div>
{{/ brand}}
{{#if price}}
<div class="price section">
<span class="title">价格:</span>
<div class="attr-content clearfix">
{{# price}}
<a class="attr" href="{{href}}"{{name}}</a>
{{/ price}}
<div class="ud-price-range">
¥
<input type="text" class="min limit">
<span class="price-sep">-</span>
<input type="text" class="max limit">
<button class="price-sure hide">确定</button>
</div>
</div>
</div>
{{/if}}
{{#if color}}
<div class="color section">
<span class="title">颜色:</span>
<div class="attr-content clearfix">
{{# color}}
<a class="attr" href="{{href}}">
<i class="color-block" style="background: {{rgb}}"></i>
{{name}}
</a>
{{/ color}}
</div>
</div>
{{/if}}
{{#if size}}
<div class="size section">
<span class="title">尺码:</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
</div>
{{/if}}
{{#if seniorChose}}
<div class="senior section">
<span class="title">高级选项:</span>
<div class="attr-content">
<ul class="clearfix senior-attr-wrap">
{{#each seniorChose}}
<li class="attr">
{{name}}
<span class="iconfont">&#xe600;</span>
<div class="senior-up-icon"></div>
</li>
{{/each}}
</ul>
<div class="senior-sub-wrap">
{{#each seniorChose}}
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{/ filters}}
</div>
<div class="opt-banner">
{{# opts}}
{{# sortType}}
<a class="sort-type{{#if active}} active{{/if}}" href="{{href}}">
{{name}}
{{#if hasSortOrient}}
{{#if active}}
{{#if desc}}
<span class="active-icon iconfont">&#xe603;</span>
{{^}}
<span class="active-icon iconfont">&#xe604;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe614;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe604;</span>
{{/if}}
</a>
{{/ sortType}}
{{# checks}}
<a class="checks{{#if checked}} checked{{/if}}" href="{{href}}">
{{#if checked}}
<span class="iconfont">&#xe612;</span>
{{^}}
<span class="iconfont">&#xe613;</span>
{{/if}}
{{name}}
</a>
{{/ checks}}
<div class="pager-wrap">
{{#if fivePerLine}}
<div class="line-count active">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<a class="line-count" href="{{sixPerLineHref}}">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
{{^}}
<a class="line-count" href="{{fivePerLineHref}}">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</a>
<div class="line-count active">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
{{/if}}
<div class="page-count">
<span id="count-per-page">
{{countPerPage}}
<i class="iconfont">&#xe604;</i>
</span>
每页
<ul>
{{# pageCounts}}
<li>
<a href="{{href}}">{{count}}</a>
</li>
{{/ pageCounts}}
{{/each}}
</ul>
</div>
<p class="pager">
{{#if preHref}}
<a href="{{preHref}}">
<span class="iconfont">&#xe615;</span>
{{/ allSort}}
{{# advNav}}
{{# advNavTitle}}
<h2 class="nav-pic-title">{{.}}</h2>
{{/advNavTitle}}
<ul class="pic-nav">
{{#each list}}
<li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
{{/each}}
</ul>
{{/advNav}}
{{#advPic}}
{{# advPicTitle}}
<h2 class="nav-pic-title">{{.}}</h2>
{{/ advPicTitle}}
<ul class="pic-nav">
{{#each list}}
<li><a href="{{href}}"><img src="{{src}}" alt=""/></a></li>
{{/each}}
</ul>
{{/advPic}}
</div>
<div class="list-right pull-right">
{{# shopEntry}}
<div class="shop-entry clearfix">
<a class="pull-left" href="{{home}}">
<img class="logo" src="{{logo}}">
</a>
{{^}}
<span class="dis-icon iconfont">&#xe615;</span>
{{/if}}
<span>
<i>{{curPage}}</i>/{{pageCount}}
</span>
<div class="name pull-left">
<a class="shop-name" href="{{home}}">{{shopName}}</a>
<p class="sorts">
{{#each sort}}
<a href="{{href}}">{{name}}</a>
{{#unless @last}}
/
{{/unless}}
{{/each}}
</p>
</div>
{{#if nextHref}}
<a href="{{nextHref}}">
<a class="entry-btn pull-right" href="{{home}}">
进入品牌店铺
<span class="iconfont">&#xe601;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe601;</span>
{{/if}}
</p>
</div>
{{/ shopEntry}}
{{# filters}}
{{> product/filter-box}}
{{/ filters}}
{{# opts}}
{{> product/sort-pager}}
{{/ opts}}
<div class="goods-container clearfix">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
</div>
</div>
{{/opts}}
</div>
<div class="goods-container clearfix{{#if opts.sixPerLine}} six-per-line{{/if}}">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
{{/ brandAbout}}
</div>
{{/ products}}
{{/ list}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="product-search-page yoho-page center-content">
{{# search}}
{{> layout/path-nav}}
{{# filters}}
{{> product/filter-box}}
{{/ filters}}
{{# opts}}
{{> product/sort-pager}}
{{/ opts}}
<div class="goods-container clearfix">
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
</div>
{{/ search}}
</div>
{{> layout/footer}}
\ No newline at end of file
... ...
... ... @@ -10,5 +10,18 @@
{{!-- 搜索 --}}
{{#if searchListPage}}
<script>seajs.use('js/product/list');</script>
<script>
seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
product.init(5);
});
</script>
{{/if}}
{{!-- 列表 --}}
{{#if productListPage}}
<script>
seajs.use(['js/product/list', 'js/product/product'], function (list, product) {
product.init(4);
});
</script>
{{/if}}
\ No newline at end of file
... ...
<div class="filter-box">
{{# checkedConditions}}
<div class="checked-conditions section">
<span class="title">已选条件:</span>
<div class="attr-content clearfix">
{{#each conditions}}
<a class="tag" href="{{href}}">
{{#if name}}
{{name}}
{{^}}
<i class="color-block" style="background: {{color}}"></i>
{{/if}}
<i class="close iconfont">&#xe602;</i>
</a>
{{/each}}
<a class="clear-checked" href="{{clearUrl}}">清空筛选条件</a>
</div>
</div>
{{/ checkedConditions}}
{{#if channel}}
<div class="channel section">
<span class="title">频道:</span>
<div class="attr-content clearfix">
{{#each channel}}
<a class="attr" href="{{href}}">
{{name}}
</a>
{{/each}}
</div>
</div>
{{/if}}
{{#if sort}}
<div class="sort section">
<span class="title">分类:</span>
<div class="attr-content">
<ul class="sort-pre clearfix">
{{#each sort}}
<li>
<span class="attr">
{{name}}
</span>
</li>
{{/each}}
</ul>
<div class="sort-sub-wrap">
{{#each sort}}
<ul class="sort-sub clearfix hide">
{{#each sub}}
<li class="attr">
<a href="{{href}}">{{name}}</a>
</li>
{{/each}}
</ul>
{{/each}}
</div>
</div>
</div>
{{/if}}
{{# brand}}
<div class="brand section">
<span class="title">品牌:</span>
<div class="attr-content">
<ul class="default clearfix">
{{# default}}
<li class="attr">
<a href="{{href}}" title="{{name}}">{{name}}</a>
</li>
{{/ default}}
</ul>
<div class="brand-opt">
<span id="brand-more" class="brand-more">
<em>更多</em>
<i class="iconfont">&#xe600;</i>
</span>
<span id="brand-multi" class="multi-select">多选 +</span>
</div>
<div class="brand-panel hide">
<div class="panel-head clearfix">
<p class="brands-index">
{{#each brandIndex}}
<span data-index="{{index}}">{{name}}</span>
{{/each}}
</p>
<div class="brand-search">
<input id="brand-search-input" type="text">
<span class="btn">
<i class="iconfont">&#xe611;</i>
</span>
</div>
</div>
<ul class="panel-body check-container clearfix">
{{# brandsShow}}
<li class="attr" data-index="{{index}}" data-key="{{key}}">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span title="{{name}}">{{name}}</span>
</a>
</li>
{{/ brandsShow}}
</ul>
<div class="btns">
<button id="brand-multi-ok" class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
</div>
</div>
{{/ brand}}
{{#if price}}
<div class="price section">
<span class="title">价格:</span>
<div class="attr-content clearfix">
{{# price}}
<a class="attr" href="{{href}}">¥{{name}}</a>
{{/ price}}
<div class="ud-price-range">
¥
<input type="text" class="min limit">
<span class="price-sep">-</span>
<input type="text" class="max limit">
<button class="price-sure hide">确定</button>
</div>
</div>
</div>
{{/if}}
{{#if color}}
<div class="color section">
<span class="title">颜色:</span>
<div class="attr-content clearfix">
{{# color}}
<a class="attr" href="{{href}}">
<i class="color-block" style="background: {{rgb}}"></i>
{{name}}
</a>
{{/ color}}
</div>
</div>
{{/if}}
{{#if size}}
<div class="size section">
<span class="title">尺码:</span>
<div class="attr-content clearfix">
{{# size}}
<a class="attr" href="{{href}}">{{name}}</a>
{{/ size}}
</div>
</div>
{{/if}}
{{#if seniorChose}}
<div class="senior section">
<span class="title">高级选项:</span>
<div class="attr-content">
<ul class="clearfix senior-attr-wrap">
{{#each seniorChose}}
<li class="attr">
{{name}}
<span class="iconfont">&#xe600;</span>
<div class="senior-up-icon"></div>
</li>
{{/each}}
</ul>
<div class="senior-sub-wrap">
{{#each seniorChose}}
<div class="senior-sub hide" data-attr="{{attr}}">
{{#if showMulti}}
<span class="multi-select">多选 +</span>
{{/if}}
<ul class="clearfix check-container">
{{#each sub}}
<li class="attr">
<a href="{{href}}">
<span class="iconfont checkbox" data-id="{{id}}">&#xe613;</span>
<span>{{name}}</span>
</a>
</li>
{{/each}}
</ul>
<div class="btns">
<button class="multi-select-ok dis">确定</button>
<button class="multi-select-cancel">取消</button>
</div>
</div>
{{/each}}
</div>
</div>
</div>
{{/if}}
</div>
\ No newline at end of file
... ...
<div class="sort-pager">
{{# sortType}}
<a class="sort-type{{#if active}} active{{/if}}" href="{{href}}">
{{name}}
{{#if hasSortOrient}}
{{#if active}}
{{#if desc}}
<span class="active-icon iconfont">&#xe603;</span>
{{^}}
<span class="active-icon iconfont">&#xe604;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe614;</span>
{{/if}}
{{^}}
<span class="iconfont">&#xe604;</span>
{{/if}}
</a>
{{/ sortType}}
{{# checks}}
<a class="checks{{#if checked}} checked{{/if}}" href="{{href}}">
{{#if checked}}
<span class="iconfont">&#xe612;</span>
{{^}}
<span class="iconfont">&#xe613;</span>
{{/if}}
{{name}}
</a>
{{/ checks}}
<div class="pager-wrap">
<div class="page-count">
<span id="count-per-page">
{{countPerPage}}
<i class="iconfont">&#xe604;</i>
</span>
每页
<ul>
{{# pageCounts}}
<li>
<a href="{{href}}">{{count}}</a>
</li>
{{/ pageCounts}}
</ul>
</div>
<p class="pager">
{{#if preHref}}
<a href="{{preHref}}">
<span class="iconfont">&#xe615;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe615;</span>
{{/if}}
<span>
<i>{{curPage}}</i>/{{pageCount}}
</span>
{{#if nextHref}}
<a href="{{nextHref}}">
<span class="iconfont">&#xe601;</span>
</a>
{{^}}
<span class="dis-icon iconfont">&#xe601;</span>
{{/if}}
</p>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -14,7 +14,7 @@ fonts_dir = "font"
output_style = :expanded
# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true
# sourcemap = true
sourcemap = true
# To disable debugging comments that display the original location of your selectors. Uncomment:
line_comments = false
... ...
... ... @@ -2,7 +2,11 @@
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>
<<<<<<< HEAD
Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015
=======
Created by FontForge 20120731 at Thu Dec 3 17:36:03 2015
>>>>>>> feature/product
By Ads
</metadata>
<defs>
... ... @@ -16,10 +20,14 @@ Created by FontForge 20120731 at Fri Dec 4 15:54:33 2015
ascent="896"
descent="-128"
x-height="792"
bbox="0 -214 1172.1 864"
bbox="0 -214 1172.06 864"
underline-thickness="50"
underline-position="-100"
<<<<<<< HEAD
unicode-range="U+0078-E619"
=======
unicode-range="U+0078-E618"
>>>>>>> feature/product
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -48,40 +56,40 @@ d="M819 739v-878l-614 439z" />
<glyph glyph-name="uniE606" unicode="&#xe606;"
d="M205 -139v878l614 -439z" />
<glyph glyph-name="uniE607" unicode="&#xe607;"
d="M786 705l-415 -405l415 -404q19 -18 19 -44t-19 -45q-12 -12 -29 -16t-33.5 0t-29.5 16l-461 449q-19 18 -19 44.5t19 44.5l461 449q19 18 46 18t46 -18.5t19 -44.5t-19 -44zM786 705z" />
d="M786 705l-415 -405l415 -404q19 -18 19 -44t-19 -44.5t-46 -18.5t-46 18l-461 449q-19 18 -19 44.5t19 44.5l461 449q19 18 46 18t46 -18.5t19 -44.5t-19 -44zM786 705z" />
<glyph glyph-name="uniE608" unicode="&#xe608;"
d="M233 705q-19 18 -19 44t19 44.5t46 18.5t46 -18l461 -449q19 -18 19 -44.5t-19 -44.5l-461 -449q-19 -18 -46 -18t-46 18.5t-19 44.5t19 44l416 404zM233 705z" />
<glyph glyph-name="uniE609" unicode="&#xe609;"
d="M577 -214q-17 0 -30 11q-16 12 -18 31.5t11 35.5l357 443l-350 404q-13 15 -11.5 34.5t16.5 32.5q9 9 22 11.5t25 -2t20 -14.5l376 -433q12 -13 12 -30.5t-11 -30.5l-382 -475q-14 -18 -37 -18z" />
d="M577 -214q-17 0 -30 11q-16 12 -18 31.5t11 35.5l357 443l-350 404q-13 15 -11.5 34.5t16.5 32.5t34.5 11.5t32.5 -16.5l376 -433q12 -13 12 -30.5t-11 -30.5l-382 -475q-14 -18 -37 -18z" />
<glyph glyph-name="uniE60A" unicode="&#xe60a;"
d="M447 -214q-23 0 -37 18l-382 475q-8 8 -10 19t0.5 22t10.5 20l376 433q13 15 32.5 16.5t34.5 -11.5t16.5 -32.5t-11.5 -34.5l-350 -404l357 -443q9 -10 10.5 -22.5t-3 -24.5t-14.5 -20q-13 -11 -30 -11z" />
d="M447 -214q-23 0 -37 18l-382 475q-11 13 -11 30.5t12 30.5l376 433q13 15 32.5 16.5t34.5 -11.5t16.5 -32.5t-11.5 -34.5l-350 -404l357 -443q13 -16 11 -35.5t-18 -31.5q-13 -11 -30 -11z" />
<glyph glyph-name="uniE60B" unicode="&#xe60b;"
d="M284 -69q-9 -9 -12.5 -21t0 -24t12.5 -20q13 -14 32 -14t32 14l397 401q5 6 8.5 12.5t4 13.5t0 14t-4 13.5t-8.5 12.5l-397 401q-13 14 -32 14t-32 -14q-6 -5 -9 -11.5t-4 -13.5t0 -14t4 -14t8 -12l351 -369l-350 -369v0zM284 -69z" />
d="M284 -69q-14 -14 -14 -33t13.5 -32.5t32.5 -13.5t32 14l397 401q13 14 13 33t-13 33l-397 401q-13 14 -32 14t-32.5 -13.5t-13.5 -32.5t13 -33l351 -369l-350 -369v0zM284 -69z" />
<glyph glyph-name="uniE60C" unicode="&#xe60c;"
d="M745 669q13 14 13 33t-13 32q-9 9 -21 12.5t-23.5 0t-20.5 -12.5l-396 -401q-14 -14 -14 -33t14 -33l396 -401q14 -14 32.5 -14t32 13.5t13.5 32.5t-13 33l-351 369l351 369v0zM745 669z" />
d="M745 669q13 14 13 33t-13.5 32.5t-32.5 13.5t-32 -14l-396 -401q-14 -14 -14 -33t14 -33l396 -401q14 -14 32.5 -14t32 13.5t13.5 32.5t-13 33l-351 369l351 369v0zM745 669z" />
<glyph glyph-name="uniE60D" unicode="&#xe60d;"
d="M513 654q-13 0 -22 -9t-9 -22v-311h-249q-6 0 -11.5 -2.5t-10 -6.5t-7 -10t-2.5 -12q0 -8 4.5 -15.5t11.5 -11.5t15 -4h280q12 0 21.5 9t9.5 22v342q0 8 -4.5 15.5t-11.5 11.5t-15 4zM513 778q-81 0 -157 -25t-137 -71t-107 -107t-71 -136.5t-25 -156.5q0 -101 39.5 -193
t106 -158.5t158.5 -105.5t193 -39t192.5 39t158 105.5t106 158.5t39.5 193t-39.5 193t-106 158t-158 105.5t-192.5 39.5zM513 -152q-118 0 -218 58t-158.5 158t-58.5 218q0 88 34.5 168.5t92.5 138.5t138.5 92.5t169.5 34.5q59 0 115 -15.5t103.5 -43.5t88 -68t68.5 -88
t43.5 -104t15.5 -115q0 -118 -58 -218t-158 -158t-218 -58z" />
d="M512.5 654q-12.5 0 -21.5 -9t-9 -22v-311h-249q-12 0 -21.5 -9t-9.5 -22t9.5 -22t21.5 -9h280q12 0 21.5 9t9.5 22v342q0 13 -9.5 22t-22 9zM513 778q-101 0 -193 -39.5t-158.5 -105.5t-106 -158t-39.5 -193t39.5 -193t106 -158.5t158.5 -105.5t193 -39t192.5 39
t158 105.5t106 158.5t39.5 193t-39.5 193t-106 158t-158 105.5t-192.5 39.5zM513 -152q-118 0 -218 58t-158.5 158t-58.5 218t58.5 218t158.5 158t218 58t218 -58t158 -158t58 -218t-58 -218t-158 -158t-218 -58z" />
<glyph glyph-name="uniE60E" unicode="&#xe60e;"
d="M710 300l-473 474l38 38l512 -512l-512 -512l-38 38z" />
<glyph glyph-name="uniE60F" unicode="&#xe60f;"
d="M314 300l473 -474l-38 -38l-512 512l512 512l38 -38z" />
<glyph glyph-name="uniE610" unicode="&#xe610;"
d="M797 135q0 -7 -5 -13l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -14z" />
d="M797 135.5q0 -7.5 -5 -13.5l-29 -28q-6 -6 -13.5 -6t-12.5 6l-225 224l-224 -224q-6 -6 -13.5 -6t-13.5 6l-28 28q-6 6 -6 13.5t6 13.5l266 266q6 6 13.5 6t12.5 -6l267 -266q5 -6 5 -13.5z" />
<glyph glyph-name="uniE611" unicode="&#xe611;"
d="M892 41l-236 236q54 77 54 172q0 81 -39.5 150t-108.5 108.5t-150 39.5q-123 0 -210.5 -87t-87.5 -211t87.5 -211t210.5 -87q95 0 173 55l236 -236q16 -17 38 -18t37 14q10 10 12.5 23.5t-1.5 27t-15 24.5zM213 449q0 82 58.5 140.5t140.5 58.5t140.5 -58.5t58.5 -140.5
t-58.5 -140.5t-140.5 -58.5t-140.5 58.5t-58.5 140.5z" />
d="M892 41l-236 236q54 77 54 172q0 124 -87 211t-210.5 87t-211 -87t-87.5 -211t87.5 -211t210.5 -87q95 0 173 55l236 -236q16 -17 38 -18t37 14t14 37t-18 38zM213 449q0 82 58.5 140.5t140.5 58.5t140.5 -58.5t58.5 -140.5t-58.5 -140.5t-140.5 -58.5t-140.5 58.5
t-58.5 140.5z" />
<glyph glyph-name="uniE612" unicode="&#xe612;"
d="M939 -212h-854q-23 0 -42.5 11.5t-31 31t-11.5 42.5v854q0 35 25 60t60 25h854q23 0 42.5 -11.5t31 -31t11.5 -42.5v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -7 3 -11.5t7.5 -7.5t11.5 -3h810q10 0 16 6t6 16v810z
M457 99q-5 -6 -13 -9t-17 -3q-21 0 -30 12l-171 171q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q10 0 17.5 -3.5t12.5 -9.5l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
d="M939 -212h-854q-35 0 -60 25t-25 60v854q0 35 25 60t60 25h854q35 0 60 -25t25 -60v-854q0 -35 -25 -60t-60 -25zM939 705q0 10 -6 16t-16 6h-810q-10 0 -16 -6t-6 -16v-810q0 -10 6 -16t16 -6h810q10 0 16 6t6 16v810zM457 99q-10 -12 -30.5 -12t-29.5 12l-171 171
q-13 10 -13 30q0 18 12.5 30.5t30.5 12.5q20 0 30 -13l141 -141l311 312q13 12 30 12q18 0 30.5 -12.5t12.5 -29.5q0 -21 -13 -30z" />
<glyph glyph-name="uniE613" unicode="&#xe613;"
d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v730q0 61 -43 104t-104 43zM939 -65q0 -26 -18 -44t-44 -18h-730q-26 0 -44 18t-18 44v730q0 17 8.5 31t22.5 22.5t31 8.5h730q26 0 44 -18t18 -44v-730z" />
d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104 43t43 104v730q0 61 -43 104t-104 43zM939 -65q0 -26 -18 -44t-44 -18h-730q-26 0 -44 18t-18 44v730q0 26 18 44t44 18h730q26 0 44 -18t18 -44v-730z" />
<glyph glyph-name="uniE614" unicode="&#xe614;"
d="M160 996zM865 247q0 -18 -13 -31l-308 -308q-13 -13 -31 -13t-31 13l-309 308q-13 13 -13 31t13.5 31t30.5 13h617q18 0 31 -13t13 -31zM865 511q0 -18 -13 -31t-31 -13h-617q-18 0 -31 13t-13 31t13 31l309 309q13 13 31 13t31 -13l308 -309q13 -13 13 -31z" />
<glyph glyph-name="uniE615" unicode="&#xe615;"
d="M704 569l-41 39l-343 -320l343 -320l41 39l-301 281z" />
<glyph glyph-name="uniE616" unicode="&#xe616;" horiz-adv-x="1173"
<<<<<<< HEAD
d="M586 588q-64 150 -188 203q-114 47 -222 -7q-112 -56 -155 -192q-20 -67 -21 -144q0 -41 9 -78.5t24 -66.5t39 -57.5t47 -48.5t55.5 -43t56.5 -38t58.5 -35.5t53.5 -33.5q63 -42 118 -94.5t86.5 -95t39.5 -69.5q4 19 25.5 50t53.5 66t75 74t88 71q21 15 53.5 35.5t58 36
t57 38t55 43t47 48t39 56.5t25 66.5t8.5 78.5q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" />
<glyph glyph-name="uniE617" unicode="&#xe617;"
... ... @@ -92,5 +100,15 @@ q0 -24 -9.5 -42t-24.5 -31t-33.5 -20t-35.5 -7h-394q-15 0 -33 8.5t-33.5 23t-26.5 3
q-21 0 -35.5 -14.5t-14.5 -35.5t14.5 -35.5t35.5 -14.5h299zM714 374q0 21 -14.5 36t-35.5 15h-299q-21 0 -35.5 -15t-14.5 -36t14.5 -35t35.5 -14h299q21 0 35.5 14t14.5 35zM714 374z" />
<glyph glyph-name="uniE619" unicode="&#xe619;"
d="M512 515q47 0 88 -18t72 -49t49 -72t18 -89q0 -23 -4.5 -45t-13.5 -42q-18 -41 -49 -72t-72 -49q-20 -9 -42 -13.5t-46 -4.5q-47 0 -88 18t-72 49t-49 72t-18 87q0 48 18 89t49 72t72 49t88 18v0zM512 515z" />
=======
d="M586 588q-28 65 -69 113t-86.5 73.5t-96 34t-97.5 -2t-90 -39.5t-75.5 -73t-51.5 -107.5t-20 -138.5q0 -41 9 -78.5t24 -66.5t39 -57.5t47 -48.5t55.5 -43t56.5 -38t58.5 -35.5t53.5 -33.5q93 -61 162 -138.5t82 -120.5q10 39 81.5 118.5t160.5 142.5q24 17 71.5 47
t79 50.5t71.5 54.5t64 67t41 81t16 102q0 75 -19.5 138t-52.5 105.5t-76.5 70.5t-91 37.5t-98 1t-96 -34.5t-85.5 -72.5t-67 -108.5z" />
<glyph glyph-name="uniE617" unicode="&#xe617;"
d="M500 775l-348 -298q-16 -14 -16 -35v-386q0 -25 17.5 -42.5t42.5 -17.5h197v257h238v-257h197q25 0 42.5 17.5t17.5 42.5v386q0 21 -16 35l-348 298q-12 10 -24 0z" />
<glyph glyph-name="uniE618" unicode="&#xe618;" horiz-adv-x="1000"
d="M751 670q21 -20 34 -33t19.5 -22.5t8.5 -16t2 -10.5v-13h-119q-8 0 -14 6t-10 14t-6 16.5t-2 12.5v100h3q6 0 13 -2t15.5 -8t22 -16t33.5 -28zM614 624q0 -16 5 -33.5t15 -32t26 -24t38 -9.5h117v-451q0 -24 -9.5 -42t-24.5 -31t-33.5 -20t-35.5 -7h-394q-15 0 -33 8.5
t-33.5 23t-26 33t-10.5 38.5v543q0 17 7.5 35t21 33.5t30 25.5t35.5 10h305v-100zM664 125q21 0 35.5 14.5t14.5 35.5t-14.5 35.5t-35.5 14.5h-299q-21 0 -35.5 -14.5t-14.5 -35.5t14.5 -35.5t35.5 -14.5h299zM714 374q0 21 -14.5 36t-35.5 15h-299q-21 0 -35.5 -15
t-14.5 -36t14.5 -35t35.5 -14h299q21 0 35.5 14t14.5 35zM714 374z" />
>>>>>>> feature/product
</font>
</defs></svg>
... ...
... ... @@ -4,5 +4,6 @@ require('./js/common');
require('./js/home/home');
require('./js/product/list');
require('./js/product/product');
module.exports = webYohobuy;
... ...
/**
*Description: 商品自定义事件
*Author: chenglong.wang@yoho.cn
*Date: 2015/12/3
*/
var $ = require('yoho.jquery');
function ProductEvent() {
this.handlers = {};
}
ProductEvent.prototype = {
constructor: ProductEvent,
addHandler: function(type, handler) {
if (typeof this.handlers[type] === 'undefined') {
this.handlers[type] = [];
}
this.handlers[type].push(handler);
},
fire: function(event) {
var handlers,
i;
if (!event.target) {
event.target = this;
}
if (this.handlers[event.type] instanceof Array) {
handlers = this.handlers[event.type];
for (i = 0; i < handlers.length; i++) {
handlers[i](event);
}
}
},
removeHandler: function(type, handler) {
var handlers,
i;
if (this.handlers[type] instanceof Array) {
handlers = this.handlers[type];
for (i = 0; i < handlers.length; i++) {
if (handlers[i] === handler) {
break;
}
}
handlers.splice(i, 1);
}
}
};
module.exports = function($o, rowWidth) {
var pMouseHover = new ProductEvent();
var targetWidth = $o.eq(0).width(),
targetHeight = $o.eq(0).height(),
winW = $(window).width();
function handleEvent(event) {
var $target,
targetX = 0,
targetY = 0,
rowW = rowWidth,
activeIndex = 0,
$targetDuplicate = '',
offsetL = 0,
offsetR = 0;
switch (event.type) {
case 'mouseenter':
$target = $(this);
$targetDuplicate = $target.clone();
activeIndex = $target.index() + 1;
targetX = (activeIndex % rowW) === 0 ? rowW : activeIndex % rowW;
targetY = Math.ceil(activeIndex / rowW);
offsetL = $target.offset().left;
offsetR = winW - (offsetL + targetWidth);
pMouseHover.fire({
type: 'MouseEnter',
target: $target,
targetWidth: targetWidth,
targetHeight: targetHeight,
targetX: targetX,
targetY: targetY,
rowWidth: rowW,
activeIndex: activeIndex,
targetDuplicate: $targetDuplicate,
offsetL: offsetL,
offsetR: offsetR
});
break;
case 'mouseleave':
pMouseHover.fire({
type: 'MouseLeave'
});
break;
}
}
$o.bind('mouseenter', handleEvent);
//$o.bind('mouseleave', handleEvent);
return pMouseHover;
};
\ No newline at end of file
... ...
/**
* 商品筛选逻辑
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/12/4
*/
var $ = require('yoho.jquery');
var checkUnicode = {
unchecked: '&#xe613;',
checked: '&#xe612;'
},
moreUnicode = {
up: '&#xe610;',
down: '&#xe600;'
};
//品牌相关变量
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandAttrs = $('.brand .attr'),
$brandMore = $('#brand-more'),
$brandMulti = $('#brand-multi');
var $brandMoreTxt, $brandMoreIcon;
//价格相关变量
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
//分类相关变量
var $sortSub = $('.sort-sub-wrap');
//高级选项相关变量
var $seniorSubWrap = $('.senior-sub-wrap'),
$seniorAttrWrap = $('.senior-attr-wrap');
var seniorHoverTime, hoveredIndex;
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
}
//显示更多品牌面板
function brandShowMore() {
$brandDefault.addClass('hide');
$brandPanel.removeClass('hide');
}
//隐藏更多品牌面板
function brandHideMore() {
$brandPanel.addClass('hide');
$brandDefault.removeClass('hide');
}
//url构造&跳转
function uriLoc(attr, val) {
var href = decodeURIComponent(window.location.search),
query = attr + '=' + val,
newHref;
if (href === '') {
newHref = '?' + query;
} else {
newHref = href + '&' + query;
}
window.location.href = newHref;
}
//隐藏高级选项面板
function hideSeniorPanel(index) {
$seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
$seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
hoveredIndex = -1;
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
return false;
});
//【分类】
$('.sort-pre').on('click', 'li', function() {
var $this = $(this),
index = $this.index();
$this.siblings('.active').removeClass('active');
$this.addClass('active');
$sortSub.children(':not(.hide)').addClass('hide');
$sortSub.children(':eq(' + index + ')').removeClass('hide');
});
//【品牌】
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//【品牌】多选
$brandMulti.click(function() {
if ($brandPanel.css('display') === 'none') {
//显示品牌面板
brandShowMore();
}
$brandPanel.addClass('multi'); //显示出checkbox
$(this).addClass('hide');
});
//【品牌】更多
$brandMore.click(function() {
var $this = $(this);
if ($this.hasClass('more')) {
brandHideMore();
$brandMoreTxt.text('更多');
$brandMoreIcon.html(moreUnicode.down);
} else {
brandShowMore();
$brandMoreTxt.text('收起');
$brandMoreIcon.html(moreUnicode.up);
}
$(this).toggleClass('more');
});
//【品牌】索引
$('.brands-index').on('click', 'span', function() {
var $this = $(this),
index = $this.data('index');
if ($this.index() === 0) {
//全部
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
}
});
//【品牌】搜索
$('#brand-search-input').keyup(function() {
var val = $(this).val().toLowerCase();
if (val === '') {
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
}
});
//【品牌】多选确定
$('#brand-multi-ok').click(function() {
var val = '';
if ($(this).hasClass('dis')) {
return;
}
$brandPanel.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc('brand', val);
});
//【品牌/高级选项】多选取消
$('.multi-select-cancel').click(function() {
var $panel = $(this).closest('.multi');
if ($panel.hasClass('brand-panel')) {
brandHideMore();
$brandMulti.removeClass('hide'); //显示多选按钮
}
$panel.removeClass('multi');
clearChecked($panel.find('.checkbox.checked')); //清除选中状态
});
//【品牌/高级选项】checkbox
$('.check-container').on('click', '.attr', function() {
var $this = $(this),
$check = $this.find('.checkbox'),
$btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
$check.toggleClass('checked');
if ($check.hasClass('checked')) {
$check.html(checkUnicode.checked);
} else {
$check.html(checkUnicode.unchecked);
}
//更新按钮状态
if ($check.hasClass('checked') ||
$this.siblings('.attr').find('.checked').length > 0) {
$btnOk.removeClass('dis');
} else {
$btnOk.addClass('dis');
}
});
//【品牌/高级选项】当多选时阻止链接默认跳转
$('.brand, .senior').on('click', '.attr > a', function(e) {
if ($(this).closest('.multi').length > 0) {
e.preventDefault();
}
});
//【价格】用户定义价格处理
if ($udPrice.length > 0) {
$limit = $udPrice.find('.limit');
$min = $limit.filter('.min');
$max = $limit.filter('.max');
$btn = $udPrice.find('.price-sure');
//【价格】输入
$limit.keyup(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
isMinInt = interReg.test(min),
isMaxInt = interReg.test(max);
if (isMaxInt && (min === '' || isMinInt) ||
isMinInt && (max === '' || isMaxInt)
) {
$btn.removeClass('hide');
} else {
$btn.addClass('hide');
}
});
//【价格】多项查询
$btn.click(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
tmp;
//对于min大于max的情况,交换位置
if (min !== '' && max !== '' && +min > +max) {
tmp = max;
max = min;
min = tmp;
}
uriLoc('price', min + ',' + max);
});
}
//【高级选项】鼠标移入显示子项
$seniorAttrWrap.on('mouseenter', '.attr', function() {
var index = $(this).addClass('hover').index();
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
}).on('mouseleave', '.attr', function() {
var $this = $(this),
index = $this.index();
hoveredIndex = index;
seniorHoverTime = setTimeout(function() {
hideSeniorPanel();
}, 100);
});
//【高级选项】多选
$('.senior-sub').on('click', '.multi-select', function() {
$(this).closest('.senior-sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.senior-sub'),
val = '';
if ($btn.hasClass('dis')) {
return;
}
$sub.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc($sub.data('attr'), val);
}).on('mouseenter', function() {
clearTimeout(seniorHoverTime);
}).on('mouseleave', function() {
hideSeniorPanel();
});
\ No newline at end of file
... ...
... ... @@ -4,420 +4,8 @@
* @date: 2015/11/23
*/
var $ = require('yoho.jquery');
require('./filter');
var checkUnicode = {
unchecked: '&#xe613;',
checked: '&#xe612;'
},
moreUnicode = {
up: '&#xe610;',
down: '&#xe600;'
};
require('./sort-pager');
//品牌相关变量
var $brandDefault = $('.brand .default'),
$brandPanel = $('.brand .brand-panel'),
$brandAttrs = $('.brand .attr'),
$brandMore = $('#brand-more'),
$brandMulti = $('#brand-multi');
var $brandMoreTxt, $brandMoreIcon;
//商品相关变量
var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
$goodSelectColor = $goodsContainer.find('.good-select-color');
//价格相关变量
var $udPrice = $('.ud-price-range'),
interReg = /^\d+$/,
$limit, $min, $max, $btn;
//分类相关变量
var $sortSub = $('.sort-sub-wrap');
//高级选项相关变量
var $seniorSubWrap = $('.senior-sub-wrap'),
$seniorAttrWrap = $('.senior-attr-wrap');
var seniorHoverTime, hoveredIndex;
//清除checkbox选中状态
function clearChecked($checkbox) {
$checkbox.removeClass('checked').html(checkUnicode.unchecked);
}
//显示更多品牌面板
function brandShowMore() {
$brandDefault.addClass('hide');
$brandPanel.removeClass('hide');
}
//隐藏更多品牌面板
function brandHideMore() {
$brandPanel.addClass('hide');
$brandDefault.removeClass('hide');
}
//url构造&跳转
function uriLoc(attr, val) {
var href = decodeURIComponent(window.location.search),
query = attr + '=' + val,
newHref;
if (href === '') {
newHref = '?' + query;
} else {
newHref = href + '&' + query;
}
window.location.href = newHref;
}
//隐藏高级选项面板
function hideSeniorPanel(index) {
$seniorSubWrap.children('.senior-sub:eq(' + hoveredIndex + ')').addClass('hide');
$seniorAttrWrap.children('.attr:eq(' + hoveredIndex + ')').removeClass('hover');
hoveredIndex = -1;
}
//屏蔽筛选项双击文字选中
$('.filter-box').on('selectstart', '.attr, .brands-index span', function() {
return false;
});
//【分类】
$('.sort-pre').on('click', 'li', function() {
var index = $(this).index();
$sortSub.children(':not(.hide)').addClass('hide');
$sortSub.children(':eq(' + index + ')').removeClass('hide');
});
//【品牌】
if ($brandMore.length > 0) {
$brandMoreTxt = $brandMore.children('em');
$brandMoreIcon = $brandMore.children('.iconfont');
}
//【品牌】多选
$brandMulti.click(function() {
if ($brandPanel.css('display') === 'none') {
//显示品牌面板
brandShowMore();
}
$brandPanel.addClass('multi'); //显示出checkbox
$(this).addClass('hide');
});
//【品牌】更多
$brandMore.click(function() {
var $this = $(this);
if ($this.hasClass('more')) {
brandHideMore();
$brandMoreTxt.text('更多');
$brandMoreIcon.html(moreUnicode.down);
} else {
brandShowMore();
$brandMoreTxt.text('收起');
$brandMoreIcon.html(moreUnicode.up);
}
$(this).toggleClass('more');
});
//【品牌】索引
$('.brands-index').on('click', 'span', function() {
var $this = $(this),
index = $this.data('index');
if ($this.index() === 0) {
//全部
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-index=' + index + ']').removeClass('hide');
}
});
//【品牌】搜索
$('#brand-search-input').keyup(function() {
var val = $(this).val().toLowerCase();
if (val === '') {
$brandAttrs.removeClass('hide');
} else {
$brandAttrs.addClass('hide').filter('[data-key*=' + val + ']').removeClass('hide');
}
});
//【品牌】多选确定
$('#brand-multi-ok').click(function() {
var val = '';
if ($(this).hasClass('dis')) {
return;
}
$brandPanel.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc('brand', val);
});
//【品牌/高级选项】多选取消
$('.multi-select-cancel').click(function() {
var $panel = $(this).closest('.multi');
if ($panel.hasClass('brand-panel')) {
brandHideMore();
$brandMulti.removeClass('hide'); //显示多选按钮
}
$panel.removeClass('multi');
clearChecked($panel.find('.checkbox.checked')); //清除选中状态
});
//【品牌/高级选项】checkbox
$('.check-container').on('click', '.attr', function() {
var $this = $(this),
$check = $this.find('.checkbox'),
$btnOk = $this.parent('.check-container').next('.btns').find('.multi-select-ok');
$check.toggleClass('checked');
if ($check.hasClass('checked')) {
$check.html(checkUnicode.checked);
} else {
$check.html(checkUnicode.unchecked);
}
//更新按钮状态
if ($check.hasClass('checked') ||
$this.siblings('.attr').find('.checked').length > 0) {
$btnOk.removeClass('dis');
} else {
$btnOk.addClass('dis');
}
});
//【品牌/高级选项】当多选时阻止链接默认跳转
$('.brand, .senior').on('click', '.attr > a', function(e) {
if ($(this).closest('.multi').length > 0) {
e.preventDefault();
}
});
//【价格】用户定义价格处理
if ($udPrice.length > 0) {
$limit = $udPrice.find('.limit');
$min = $limit.filter('.min');
$max = $limit.filter('.max');
$btn = $udPrice.find('.price-sure');
//【价格】输入
$limit.keyup(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
isMinInt = interReg.test(min),
isMaxInt = interReg.test(max);
if (isMaxInt && (min === '' || isMinInt) ||
isMinInt && (max === '' || isMaxInt)
) {
$btn.removeClass('hide');
} else {
$btn.addClass('hide');
}
});
//【价格】多项查询
$btn.click(function() {
var min = $.trim($min.val()),
max = $.trim($max.val()),
tmp;
//对于min大于max的情况,交换位置
if (min !== '' && max !== '' && +min > +max) {
tmp = max;
max = min;
min = tmp;
}
uriLoc('price', min + ',' + max);
});
}
//【高级选项】鼠标移入显示子项
$seniorAttrWrap.on('mouseenter', '.attr', function() {
var index = $(this).addClass('hover').index();
$seniorSubWrap.children('.senior-sub:eq(' + index + ')').removeClass('hide');
}).on('mouseleave', '.attr', function() {
var $this = $(this),
index = $this.index();
hoveredIndex = index;
seniorHoverTime = setTimeout(function() {
hideSeniorPanel();
}, 100);
});
//【高级选项】多选
$('.senior-sub').on('click', '.multi-select', function() {
$(this).closest('.senior-sub').addClass('multi');
}).on('click', '.multi-select-ok', function() {
var $btn = $(this),
$sub = $btn.closest('.senior-sub'),
val = '';
if ($btn.hasClass('dis')) {
return;
}
$sub.find('.checked').each(function() {
var id = $(this).data('id');
val += (val === '') ? id : (',' + id);
});
uriLoc($sub.data('attr'), val);
}).on('mouseenter', function() {
clearTimeout(seniorHoverTime);
}).on('mouseleave', function() {
hideSeniorPanel();
});
//操作栏
(function() {
var $countPerPage = $('#count-per-page'),
$countChose = $countPerPage.next('ul');
var SLIDETIME = 200;
$(document).click(function(e) {
if ($(e.target).closest('.page-count').length > 0) {
return;
}
$countChose && $countChose.slideUp(SLIDETIME);
});
$countPerPage.click(function() {
if ($countChose.css('display') === 'none') {
$countChose.slideDown(SLIDETIME);
} else {
$countChose.slideUp(SLIDETIME);
}
});
}());
/*
* Description: 商品列表移入效果
* Added by wangchenglong at 2015/12/1
*/
// 构造html
function createColorList(data) {
var colorListStr = '',
len = data.length,
row = 4, //每列ul放4个li
col = Math.ceil(len / row), //需要几**列**ul
i,
j,
index,
ulNum = 0;
for (i = 0; i < col; i++) {
colorListStr += '<ul>';
for (j = 0; j < row; j++) {
index = i * row + j;
if (index === len) {
break;
}
colorListStr +=
'<li>' +
'<a href="' + data[i * row + j].url + '">' +
'<img src="' + data[i * row + j].src + '" />' +
'</a>' +
'</li>';
if (j === row - 1) {
colorListStr += '</ul>';
ulNum++;
}
}
}
if (ulNum < col) {
colorListStr += '</ul>';
}
return colorListStr;
}
//todo
$goodItem.mouseenter(function() {
var $cloneStr,
activeIndex,
X,
left,
Y,
top,
colNum = 5,
itemW = 222,
itemH = 400,
itemMr = 10,
itemMb = 35;
activeIndex = $(this).index() + 1;
X = (activeIndex % colNum) === 0 ? colNum : activeIndex % colNum;
Y = Math.ceil(activeIndex / colNum);
left = (X - 1) * (itemW + itemMr) + 15 - 21;
top = (Y - 1) * (itemH + itemMb) + 25 - 19;
$cloneStr = $(this).clone();
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
$.ajax({
type: 'GET',
url: '/product/index/productColor',
dataType: 'json'
}).then(function(data) {
$goodInfoMain.append($cloneStr);
$goodSelectColor.append($(createColorList(data)));
});
$goodItemWrapper.css({
left: left,
top: top,
display: 'inline-block'
});
});
$goodItemWrapper.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
});
\ No newline at end of file
require('./product');
\ No newline at end of file
... ...
/**
*Description: 商品列表页
*Author: chenglong.wang@yoho.cn
*Date: 2015/12/2
*/
var $ = require('yoho.jquery'),
productEvent = require('../common/product-event');
var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info'),
$goodItemWrapper = $goodsContainer.find('.good-item-wrapper'),
$goodInfoMain = $goodsContainer.find('.good-info-main'),
$goodSelectColor = $goodsContainer.find('.good-select-color'),
$productListNav = $('.product-list-nav'),
productList;
/**
* @description 初始化鼠标移入商品列表弹层效果
* @num 每列存放商品的个数
*/
exports.init = function(num) {
productList = productEvent($goodItem, num);
/**
* @description 构造商品颜色列表的html结构
* @param data 商品颜色的数组,[url: '',src: '']
* @return json {'colorListStr': '', 'ulNum': ''}
* */
function createColorList(data) {
var colorListStr = '',
len = data.length,
row = 4, //每列ul放4个li
col = Math.ceil(len / row), //需要几**列**ul
i,
j,
index,
ulNum = 0;
for (i = 0; i < col; i++) {
colorListStr += '<ul>';
for (j = 0; j < row; j++) {
index = i * row + j;
if (index === len) {
break;
}
colorListStr +=
'<li>' +
'<a href="' + data[i * row + j].url + '">' +
'<img src="' + data[i * row + j].src + '" />' +
'</a>' +
'</li>';
if (j === row - 1) {
colorListStr += '</ul>';
ulNum++;
}
}
}
if (ulNum < col) {
colorListStr += '</ul>';
}
return {
colorListStr: colorListStr,
ulNum: col
};
}
productList.addHandler('MouseEnter', function(event) {
var itemMr = 10, //list的右边距
itemMb = 35, //list的下边距
ulStr = '',
ulNum,
wrapperWidth,
diffWidth,
wrapperX,
wrapperY,
wrapperPl, //鼠标移入时弹层的左内边距
wrapperPt, //鼠标移入时弹层的上内边距
containerPt; //商品列表容器的上内边距
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
$.ajax({
type: 'GET',
url: '/product/index/productColor',
dataType: 'json'
}).then(function(data) {
ulStr = createColorList(data).colorListStr; //ajax请求的颜色列表
ulNum = createColorList(data).ulNum;//ajax请求的颜色的数量
$goodInfoMain.append(event.targetDuplicate);
$goodSelectColor.append($(ulStr));
wrapperPl = $goodItemWrapper.css('paddingLeft');
wrapperPt = $goodItemWrapper.css('paddingTop');
containerPt = $goodsContainer.css('paddingTop');
wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
wrapperY = (event.targetY - 1) *
(event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
//todo
diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
if (diffWidth <= 0) {
wrapperX = wrapperX + diffWidth;
}
$goodItemWrapper.css({
width: wrapperWidth,
left: wrapperX,
top: wrapperY,
display: 'inline-block'
});
});
});
$goodItemWrapper.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
});
// 左侧导航
$productListNav.click(function() {
if ($(this).hasClass('active')) {
$(this).find('.sort-child-list').stop(true, true).slideUp();
} else {
$(this).find('.sort-child-list').stop(true, true).slideDown();
}
$(this).toggleClass('active');
});
};
\ No newline at end of file
... ...
/**
* 筛选页和列表页操作banner中的每页N个商品选择逻辑
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/12/4
*/
var $ = require('yoho.jquery');
var $countPerPage = $('#count-per-page'),
$countChose = $countPerPage.next('ul');
var SLIDETIME = 200;
$(document).click(function(e) {
if ($(e.target).closest('.page-count').length > 0) {
return;
}
$countChose && $countChose.slideUp(SLIDETIME);
});
$countPerPage.click(function() {
if ($countChose.css('display') === 'none') {
$countChose.slideDown(SLIDETIME);
} else {
$countChose.slideUp(SLIDETIME);
}
});
\ No newline at end of file
... ...
... ... @@ -56,6 +56,14 @@ a {
display: none !important;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
a:focus {
outline: none;
}
... ... @@ -71,4 +79,4 @@ a:focus {
width: 990px;
}
}
@import "home/index", "product/index";
\ No newline at end of file
@import "home/index", "product/index";
... ...
.filter-box {
border: 1px solid #dfdfdf;
.section {
padding: 10px 15px;
font-size: 14px;
border-top: 1px solid #dfdfdf;
&:first-child {
border-top: none;
background: #eaeceb;
}
}
.title {
float: left;
width: 90px;
line-height: 30px;
}
.attr-content {
margin-left: 90px;
}
.multi-select {
display: inline-block;
width: 60px;
height: 18px;
line-height: 18px;
border: 1px solid #000;
text-align: center;
cursor: pointer;
}
.attr {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
line-height: 30px;
cursor: pointer;
&:first-child {
margin-left: 0;
}
-moz-user-select: none;
}
.checked-conditions {
line-height: 30px;
.tag {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
background: #000;
color: #fff;
cursor: pointer;
}
.color-block {
height: 14px;
width: 14px;
border: 1px solid #fff;
margin-bottom: -3px;
}
.clear-checked {
color: #999;
float: right;
}
}
.sort-pre .active .attr {
border: 1px solid #000;
}
.sort-sub-wrap {
width: 100%;
.sort-sub {
padding: 15px 0;
}
}
.brand {
position: relative;
.attr {
box-sizing: border-box;
width: 20%;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attr-content {
max-width: 900px;
}
.brand-opt {
position: absolute;
right: 20px;
top: 15px;
}
.brand-more {
margin-right: 20px;
cursor: pointer;
}
.brands-index {
float: left;
line-height: 30px;
span {
margin: 0 5px;
cursor: pointer;
-moz-user-select: none;
&:first-child {
margin-left: 10px;
}
}
}
.brand-search {
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 15px;
input {
float: left;
border: none;
width: 100px;
height: 18px;
padding: 0;
}
.btn {
display: inline-block;
width: 55px;
height: 18px;
background: #b0b0b0;
color: #fff;
text-align: center;
cursor: default;
}
}
.panel-body {
padding: 15px 20px;
margin-top: 5px;
background: #f4f7f6;
min-height: 30px;
border: 1px solid #000;
}
}
.btns {
display: none;
margin-top: 10px;
text-align: center;
}
.multi .btns {
display: block;
}
.multi-select-ok, .multi-select-cancel {
width: 55px;
height: 24px;
border: none;
background: #000;
color: #fff;
font-size: 15px;
margin-right: 15px;
cursor: pointer;
&.dis {
background: #ccc;
}
}
.ud-price-range {
margin-top: 2px;
}
.limit {
height: 22px;
width: 42px;
border: 1px solid #ccc;
padding: 0;
}
.price-sep {
margin: 0 5px;
}
.price-sure {
height: 24px;
width: 44px;
border: 1px solid #e0e0e0;
background: #fff;
color: #666;
margin-left: 10px;
}
.color-block {
display: inline-block;
height: 22px;
width: 22px;
border: 1px solid #ccc;
margin-bottom: -6px;
margin-right: 5px;
}
.senior {
padding-bottom: 6px;
.attr-content {
position: relative;
}
}
.senior-attr-wrap {
position: relative;
}
.senior-attr-wrap > .attr:hover,
.senior-attr-wrap > .attr.hover {
> .iconfont {
visibility: hidden;
}
.senior-up-icon {
visibility: visible;
}
}
.senior-sub {
box-sizing: border-box;
position: absolute;
padding: 15px 0;
left: 0;
right: 0;
top: 39px;
background: #fff;
border: 1px solid #eaeceb;
ul {
max-width: 950px;
}
&.multi .multi-select {
display: none;
}
.multi-select {
position: absolute;
top: 20px;
right: 15px;
}
}
.senior-up-icon {
width: 100%;
height: 9px;
z-index: 1;
margin-left: -11px;
visibility: hidden;
background: image-url('product/senior-up.png') no-repeat;
background-position-x: 50%;
}
.checkbox {
display: none;
}
.multi .checkbox {
display: inline;
}
}
\ No newline at end of file
... ...
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
margin-right: 10px;
float: left;
//图片
.good-detail-img {
width: 100%;
/*height: 300px;*/
position: relative;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.few-tag {
width: 100%;
position: absolute;
left: 0;
height: 16px;
line-height: 16px;
background: #ffac5b;
color: #fff;
font-size: 12px;
text-align: center;
bottom: 0;
}
}
//文本
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
> .price {
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
.tag-container {
font-size: 12px;
height: 22px;
line-height: 22px;
.good-tag {
padding: 0 7px;
display: block;
float: left;
margin-right: 3px;
&:nth-last-of-type(1) {
margin-right: 0;
}
@each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
(renew-tag, #fff, #78dc7e),
(new-festival-tag, #fff, #000000),
(yep-tag, #fff, #ff565b),
(ymp-tag, #fff, #ff565b),
(sale-tag, #fff, #ff565b) {
&.#{$tag} {
color: $tagColor;
background: $tagBackground;
}
}
&.limit-tag {
color: #4e4e4e;
border: 1px solid #4e4e4e;
}
}
}
}
//弹层
.good-item-wrapper {
border: 1px solid #dddddd;
padding-left: 20px;
padding-top: 18px;
padding-right: 20px;
position: absolute;
background: #fff;
display: none;
.good-info-main{
float: left;
.col-btn {
display: block;
&:hover {
color: #f95b4f;
cursor: pointer;
}
}
}
.good-select-color {
float: left;
margin-top: 22px;
ul {
display: block;
float: left;
margin-left: 15px;
}
li {
width: 50px;
margin-bottom: 15px;
a, img {
display: block;
overflow: hidden;
width: 100%;
}
}
}
.good-info {
margin-right: 10px;
}
}
\ No newline at end of file
... ...
.products-page {
.filter-box {
border: 1px solid #dfdfdf;
}
.section {
padding: 10px 15px;
font-size: 14px;
border-top: 1px solid #dfdfdf;
&:first-child {
border-top: none;
background: #eaeceb;
}
}
.title {
float: left;
width: 90px;
line-height: 30px;
}
.attr-content {
margin-left: 90px;
}
.multi-select {
display: inline-block;
width: 60px;
height: 18px;
line-height: 18px;
border: 1px solid #000;
text-align: center;
cursor: pointer;
}
.attr {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
line-height: 30px;
cursor: pointer;
&:first-child {
margin-left: 0;
}
-moz-user-select: none;
}
.checked-conditions {
line-height: 30px;
.tag {
display: block;
float: left;
padding: 0 10px;
margin-right: 30px;
background: #000;
color: #fff;
cursor: pointer;
}
.color-block {
height: 14px;
width: 14px;
border: 1px solid #fff;
margin-bottom: -3px;
}
.clear-checked {
color: #999;
float: right;
}
}
.sort-sub-wrap {
width: 100%;
.sort-sub {
padding: 15px 0;
}
}
.brand {
position: relative;
.attr {
box-sizing: border-box;
width: 20%;
margin: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.attr-content {
max-width: 900px;
}
.brand-opt {
position: absolute;
right: 20px;
top: 15px;
}
.brand-more {
margin-right: 20px;
cursor: pointer;
}
.brands-index {
float: left;
line-height: 30px;
span {
margin: 0 5px;
cursor: pointer;
-moz-user-select: none;
&:first-child {
margin-left: 10px;
}
}
}
.brand-search {
float: left;
height: 18px;
line-height: 18px;
border: 1px solid #b0b0b0;
margin-top: 5px;
margin-left: 15px;
input {
float: left;
border: none;
width: 100px;
height: 18px;
padding: 0;
}
.btn {
display: inline-block;
width: 55px;
height: 18px;
background: #b0b0b0;
color: #fff;
text-align: center;
cursor: default;
}
}
.panel-body {
padding: 15px 20px;
margin-top: 5px;
background: #f4f7f6;
min-height: 30px;
border: 1px solid #000;
}
}
.btns {
display: none;
margin-top: 10px;
text-align: center;
}
.multi .btns {
display: block;
}
.multi-select-ok, .multi-select-cancel {
width: 55px;
height: 24px;
border: none;
background: #000;
color: #fff;
font-size: 15px;
margin-right: 15px;
cursor: pointer;
&.dis {
background: #ccc;
}
}
.ud-price-range {
margin-top: 2px;
}
.limit {
height: 22px;
width: 42px;
border: 1px solid #ccc;
padding: 0;
}
.price-sep {
margin: 0 5px;
}
.price-sure {
height: 24px;
width: 44px;
border: 1px solid #e0e0e0;
background: #fff;
color: #666;
margin-left: 10px;
}
.color-block {
display: inline-block;
height: 22px;
width: 22px;
border: 1px solid #ccc;
margin-bottom: -6px;
margin-right: 5px;
}
.senior {
padding-bottom: 6px;
.attr-content {
position: relative;
}
}
.senior-attr-wrap {
position: relative;
}
.senior-attr-wrap > .attr:hover,
.senior-attr-wrap > .attr.hover {
> .iconfont {
visibility: hidden;
}
.senior-up-icon {
visibility: visible;
}
}
.senior-sub {
box-sizing: border-box;
position: absolute;
padding: 15px 0;
left: 0;
right: 0;
top: 39px;
background: #fff;
border: 1px solid #eaeceb;
ul {
max-width: 950px;
}
&.multi .multi-select {
display: none;
}
.multi-select {
position: absolute;
top: 20px;
right: 15px;
}
}
.senior-up-icon {
width: 100%;
height: 9px;
z-index: 1;
margin-left: -11px;
visibility: hidden;
background: image-url('product/senior-up.png') no-repeat;
background-position-x: 50%;
}
.checkbox {
display: none;
}
.multi .checkbox {
display: inline;
}
/*商品列表
*Added by wangchenglong at 2015/12/1
*/
.goods-container {
height: auto;
padding: 25px 15px 0 15px;
overflow: hidden;
position: relative;
width: 1150px + 10px;
//标签
.tag-container {
font-size: 12px;
height: 22px;
line-height: 22px;
.good-tag {
padding: 0 7px;
display: block;
float: left;
margin-right: 3px;
&:nth-last-of-type(1) {
margin-right: 0;
}
@each $tag, $tagColor, $tagBackground in (new-tag, #fff, #78dc7d),
(renew-tag, #fff, #78dc7e),
(new-festival-tag, #fff, #000000),
(yep-tag, #fff, #ff565b),
(ymp-tag, #fff, #ff565b),
(sale-tag, #fff, #ff565b) {
&.#{$tag} {
color: $tagColor;
background: $tagBackground;
}
}
&.limit-tag {
color: #4e4e4e;
border: 1px solid #4e4e4e;
}
}
}
//商品列表
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
margin-right: 10px;
float: left;
//图片
.good-detail-img {
width: 100%;
height: 300px;
position: relative;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.few-tag {
width: 100%;
position: absolute;
left: 0;
height: 16px;
line-height: 16px;
background: #ffac5b;
color: #fff;
font-size: 12px;
text-align: center;
bottom: 0;
}
}
//文本
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
> .price {
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
}
//弹层
.good-item-wrapper {
border: 1px solid #dddddd;
padding-left: 20px;
padding-top: 18px;
padding-right: 20px;
position: absolute;
background: #fff;
display: none;
.good-info-main{
float: left;
.col-btn {
display: block;
&:hover {
color: #f95b4f;
cursor: pointer;
}
}
}
.good-select-color {
float: left;
margin-top: 22px;
ul {
display: block;
float: left;
margin-left: 15px;
}
li {
width: 50px;
margin-bottom: 15px;
a, img {
display: block;
overflow: hidden;
width: 100%;
}
}
}
.good-info {
margin-right: 10px;
}
}
//每行六个商品
&.six-per-line {
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
//图片
.good-detail-img {
width: 100%;
height: 300px;
position: relative;
.good-thumb, img.lazy {
display: block;
overflow: hidden;
width: 100%;
height: 100%;
}
.few-tag {
width: 100%;
position: absolute;
left: 0;
height: 16px;
line-height: 16px;
background: #ffac5b;
color: #fff;
font-size: 12px;
text-align: center;
bottom: 0;
}
}
//文本
.good-detail-text {
color: #222;
font-size: 12px;
text-align: center;
> a {
margin-top: 16px;
line-height: 1.5;
display: block;
}
> .price {
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
}
}
}
//商品列表END
.opt-banner {
height: 48px;
background: #f5f7f6;
line-height: 48px;
margin: 10px 0;
.sort-type,
.checks {
color: #ccc;
font-size: 14px;
padding: 0 10px;
.iconfont {
font-size: 14px;
}
&.active,
&.checked {
color: #000;
}
}
.pager-wrap {
float: right;
padding: 15px 0;
}
.line-count {
float: left;
padding: 3px 1px 3px 3px;
border: 1px solid #ccc;
margin-right: 10px;
span {
float: left;
width: 5px;
height: 10px;
background: #ccc;
margin-right: 2px;
}
&.active {
border-color: #222;
span {
background: #222;
}
}
}
.page-count {
position: relative;
height: 18px;
float: left;
font-size: 12px;
line-height: 18px;
> span {
float: left;
display: block;
width: 42px;
height: 10px;
line-height: 10px;
padding: 3px;
border: 1px solid #ccc;
color: #222;
cursor: pointer;
margin-right: 10px;
}
.iconfont {
font-size: 14px;
color: #ccc;
float: right;
}
> ul {
position: absolute;
display: none;
width: 42px;
padding: 0 3px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
li {
border-bottom: 1px solid #ccc;
}
a {
display: block;
width: 100%;
}
}
.pager {
float: left;
font-size: 14px;
line-height: 15px;
margin: 0 20px;
.dis-icon {
color: #e6e6e6;
}
i {
color: #f00;
}
}
}
}
\ No newline at end of file
@import "search", "list", "filter-box", "sort-pager", "good";
\ No newline at end of file
... ...
.product-list-page {
.list-left {
width: 160px;
.sort-container {
width: 100%;
font-size: 12px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 10px;
margin-bottom: 10px;
h2 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
span {
color: #bbb;
padding-left: 5px;
}
}
.product-list-nav {
h3 {
height: 28px;
line-height: 28px;
color: #222;
font-weight: bold;
position: relative;
text-indent: 10px;
cursor: pointer;
span {
color: #bbb;
padding-left: 5px;
&.icon-triangle {
display: inline-block;
padding-left: 0;
width: 0;
height: 0;
border-top: 6px solid #fff;
border-left: 6px solid #000;
border-bottom: 6px solid #fff;
position: absolute;
top: 50%;
margin-top: -6px;
left: 0;
@include transition(transform .3s)
}
}
}
&.active {
h3 {
span {
&.icon-triangle {
@include rotate(90deg)
}
}
}
/*ul.sort-child-list {
display: block;
}*/
}
}
ul.sort-child-list {
display: none;
&.new-sale {
display: block;
}
li {
color: #bbb;
span {
padding-left: 5px;
}
}
a {
color: #666;
padding-left: 10px;
height: 22px;
line-height: 22px;
}
}
}
.nav-pic-title {
height: 35px;
line-height: 35px;
color: #000;
font-weight: bold;
border-bottom: 1px solid #ebebeb;
font-size: 12px;
}
.pic-nav {
display: block;
li, img {
display: block;
width: 100%;
overflow: hidden;
}
}
}
.list-right {
width: 970px;
}
.brand-banner {
position: relative;
.opt-wrap {
position: absolute;
width: 100%;
height: 32px;
top: 50%;
margin-top: -16px;
text-align: right;
}
a, span {
display: inline-block;
height: 20px;
margin-right: 5px;
line-height: 20px;
border: 1px solid #fff;
padding: 5px 10px;
color: #fff;
font-size: 12px;
}
.iconfont {
font-size: 12px;
}
.brand-favor {
margin-right: 0;
}
.coled {
color: #f00;
}
}
.shop-entry {
position: relative;
background: #f5f7f6;
border: 1px solid #eaeceb;
padding: 12px 15px;
margin-bottom: 10px;
.logo {
width: 80px;
height: 50px;
}
.name {
margin-left: 10px;
}
.shop-name {
font-size: 16px;
color: #222;
line-height: 26px;
}
.sorts {
color: #999;
font-size: 12px;
line-height: 18px;
a {
color: #999;
}
}
.entry-btn {
position: absolute;
right: 15px;
top: 50%;
width: 110px;
height: 32px;
line-height: 32px;
margin-top: -16px;
background: #222;
text-align: center;
color: #fff;
font-size: 12px;
.iconfont {
font-size: 12px;
}
}
}
.goods-container {
height: auto;
padding: 25px 0 0 0;
position: relative;
width: 970px + 10px;//每列增加右边距
.good-info {
width: 235px;
}
}
}
\ No newline at end of file
... ...
/*
*Description: 商品列表
*Author: chenglong.wang@yoho.cn
*Date: 2015/12/1
*/
.product-search-page {
//todo
.goods-container {
height: auto;
padding: 25px 0 0 0;
position: relative;
width: 1150px + 10px;//每列增加右边距
}
}
\ No newline at end of file
... ...
.sort-pager {
height: 48px;
background: #f5f7f6;
line-height: 48px;
margin: 10px 0;
.sort-type,
.checks {
color: #ccc;
font-size: 14px;
padding: 0 10px;
.iconfont {
font-size: 14px;
}
&.active,
&.checked {
color: #000;
}
}
.pager-wrap {
float: right;
padding: 15px 0;
}
.page-count {
position: relative;
height: 18px;
float: left;
font-size: 12px;
line-height: 18px;
> span {
float: left;
display: block;
width: 42px;
height: 10px;
line-height: 10px;
padding: 3px;
border: 1px solid #ccc;
color: #222;
cursor: pointer;
margin-right: 10px;
}
.iconfont {
font-size: 14px;
color: #ccc;
float: right;
}
> ul {
position: absolute;
display: none;
width: 42px;
padding: 0 3px;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
li {
border-bottom: 1px solid #ccc;
}
a {
display: block;
width: 100%;
}
}
.pager {
float: left;
font-size: 14px;
line-height: 15px;
margin: 0 20px;
.dis-icon {
color: #e6e6e6;
}
i {
color: #f00;
}
}
}
\ No newline at end of file
... ...
... ... @@ -6,14 +6,14 @@ use Plugin\Helpers;
class IndexController extends AbstractAction
{
/**
* 商品列表
* 商品搜索
*/
public function indexAction()
public function searchAction()
{
$data = array(
'searchListPage' => true,
'products' => array(
'search' => array(
'pathNav' => array(
array(
'href' => 'm.yohobuy.com',
... ... @@ -373,6 +373,528 @@ class IndexController extends AbstractAction
)
)
);
$this->_view->display('search', $data);
}
/**
* 商品列表
*/
public function listAction()
{
$data = array(
//'searchListPage' => true,
'productListPage' => true, //初始化js
'list' => array(
'brandBanner' => array(
'bannerHeight' => 150,
'coled' => true,
'banner' => 'http://img11.static.yhbimg.com/brandBanner/2013/01/14/14/011e5ca97c33db0e79ca0a075e7cf0ae1d.jpg'
),
'pathNav' => array(
array(
'href' => 'new.yohobuy.com/girls',
'name' => 'GRILS首页'
),
array(
'href' => '/?sort=1',
'name' => '包类/装备'
)
),
'shopEntry' => array(
'home' => 'adidas.yohobuy.com',
'logo' => 'http://img11.static.yhbimg.com/brandLogo/2013/01/16/09/01f515687de080f94243cb1aa0fedb2fe1.jpg?imageMogr2/thumbnail/80x50/extent/80x50/background/d2hpdGU=/position/center/quality/90',
'shopName' => 'adidas Originals品牌店',
'sort' => array(
array(
'href' => '',
'name' => 'T恤'
),
array(
'href' => '',
'name' => '卫衣'
)
)
),
'filters' => array(
'checkedConditions' => array(
'conditions' => array(
array(
'href' => '',
'name' => '暗黑'
),
array(
'href' => '',
'color' => '#f00'
),
array(
'href' => '',
'name' => 'CLOT'
)
),
'clearUrl' => ''
),
'channel' => array(
array(
'href' => '/?gender=1,3',
'name' => 'BOYS'
),
array(
'href' => '/?gender=2,3',
'name' => 'GIRLS'
),
array(
'href' => '',
'name' => 'KIDS'
),
array(
'href' => '',
'name' => 'LIFESTYLE'
)
),
'sort' => array(
array(
'id' => '1',
'name' => '上衣',
'sub' => array(
array(
'href' => '',
'name' => 'T恤'
),
array(
'href' => '',
'name' => '棉袄'
),
array(
'href' => '',
'name' => '外套'
)
)
),
array(
'id' => '2',
'name' => '裤子'
),
array(
'id' => '3',
'name' => '连衣裙'
),
array(
'id' => '4',
'name' => '鞋'
)
),
'brand' => array(
'default' => array(
array(
'href' => '',
'name' => 'CLOT'
),
array(
'href' => '',
'name' => 'ABLE JEANS'
),
array(
'href' => '',
'name' => 'Eight Guys'
),
array(
'href' => '',
'name' => 'FAIRWHALE JEANS'
),
array(
'href' => '',
'name' => '鬼洗'
),
array(
'href' => '',
'name' => '金银帝国Imperial Taels'
),
array(
'href' => '',
'name' => 'F.L.Y.D'
),
array(
'href' => '',
'name' => 'Tapenade特芙娜'
),
array(
'href' => '',
'name' => 'Adidas Originals'
)
),
'brandIndex' => array(
array(
'index' => 'all',
'name' => '全部'
),
array(
'index' => '0-9',
'name' => '0 ~ 9'
),
array(
'index' => 'a',
'name' => 'A'
)
),
'brandsShow' => array(
array(
'id' => '1',
'href' => '',
'index' => '0-9',
'name' => '5cm',
'key' => '5cm'
),
array(
'id' => '2',
'href' => '',
'index' => 'k',
'name' => 'KTZ',
'key' => 'ktz'
),
array(
'id' => '3',
'href' => '',
'index' => 't',
'name' => 'Tapenade特芙娜',
'key' => 'tapenade特芙娜'
),
array(
'id' => '4',
'href' => '',
'index' => 'j',
'name' => '金银帝国Imperial Taels',
'key' => '金银帝国imperial taels'
),
array(
'id' => '5',
'href' => '',
'index' => 'a',
'name' => 'ABLE JEANS',
'key' => 'able jeans'
)
)
),
'price' => array(
array(
'href' => '',
'name' => '0-239'
),
array(
'href' => '',
'name' => '240-329'
)
),
'color' => array(
array(
'href' => '',
'name' => '黑色',
'rgb' => '#000'
),
array(
'href' => '',
'name' => '红色',
'rgb' => '#f00'
)
),
'size' => array(
array(
'href' => '',
'name' => 'S'
),
array(
'href' => '',
'name' => 'L'
)
),
'seniorChose' => array(
array(
'attr' => 'style',
'name' => '风格',
'showMulti' => true,
'sub' => array(
array(
'id' => '1',
'href' => '',
'name' => '街头'
),
array(
'id' => '2',
'href' => '',
'name' => '简约'
)
)
),
array(
'attr' => 'weather',
'name' => '适用季节',
'sub' => array(
array(
'id' => '1',
'href' => '',
'name' => '春天'
),
array(
'id' => '2',
'href' => '',
'name' => '夏天'
)
)
)
)
),
'opts' => array(
'sortType' => array(
array(
'href' => '',
'name' => '默认'
),
array(
'active' => true,
'href' => '',
'name' => '最新',
'hasSortOrient' => true,
'desc' => true
),
array(
'href' => '',
'name' => '价格',
'hasSortOrient' => true
),
array(
'href' => '',
'name' => '折扣',
'hasSortOrient' => true
)
),
'checks' => array(
array(
'name' => '新品',
'checked' => true,
'href' => ''
),
array(
'name' => '打折',
'href' => ''
),
array(
'name' => '限量',
'checked' => true,
'href' => ''
)
),
'fivePerLine' => true,
'sixPerLineHref' => '',
'countPerPage' => '120',
'pageCounts' => array(
array(
'href' => '',
'count' => 60
),
array(
'href' => '',
'count' => 100
),
array(
'href' => '',
'count' => 120
)
),
'curPage' => 1,
'pageCount' => 30,
'nextHref' => 'hello'
),
'goods' => array(
array(
'tags' => array(
'isNew' => true,
'isYearEndPromotion' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'isFew' => true
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899',
'showColBtn' => true
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
),
array(
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
),
array(
'tags' => array(
'isNew' => true,
'isReNew' => true
),
'url' => 'http://adidas.yohobuy.com/?gender=1,3',
'thumb' => 'http://img12.static.yhbimg.com/goodsimg/2015/11/22/03/02c17af44dc23aa5a62d61cb59a05380bc.jpg?imageMogr2/thumbnail/235x314/extent/235x314/background/d2hpdGU=/position/center/quality/90',
'name' => 'adidas Originals FORUM 中帮拼色休闲板鞋',
'salePrice' => '899'
)
),
'allSort' => array(
'updateNum' => 145,
'list' => array(
array(
'name' => '裙装',
'num' => '10',
'childList' => array(
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
),
array(
'name' => '裙装BBB',
'num' => '10',
'childList' => array(
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '全身裙装',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
)
)
),
'advNav' => array(
'advNavTitle' => 'AAAA',
'list' => array(
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
),
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img12.static.yhbimg.com/brandBanner/2015/02/04/06/0216e9a4c1c1edb0c8fe6b4347cc5a8035.jpg'
)
)
),
'advPic' => array(
'advPicTitle' => false,
'list' => array(
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
),
array(
'href' => 'http://adidas.yohobuy.com/?folder=1366',
'src' => 'http://img02.static.yohobuy.com/cms/2015/11/10/15/02ee7970deb68390b77cbf0685f26fc5bf.jpg'
)
)
),
'newSales' => array(
'updateNum' => 130,
'list' => array(
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '12月03日',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
),
'allDiscount' => array(
'updateNum' => 130,
'list' => array(
array(
'name' => '1~3折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '4~6折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
),
array(
'name' => '7折',
'href' => 'http://adidas.yohobuy.com/?gender=1,3',
'num' => '5'
)
)
)
)
);
$this->_view->display('list', $data);
}
... ...