chenchao / YOHOBUYPC · Commits

Go to a project

Authored by wangqing
Commit 0388d9cba99bce05f7a4fc7500b09625c0d4e18c 2 parents bcfcec13 2d25dce0

Merge branch 'feature/web' of http://git.dev.yoho.cn/web/yohobuy into feature/web

Inline Side-by-side
Showing 13 changed files with 331 additions and 62 deletions
... ... @@ -4,6 +4,22 @@
### 商品
### 路径导航
{
pathNav: [
//链接类型
{
href: '',
name: ''
},
//文字类型
{
name: ''
}
]
}
## 男首
{
... ... @@ -50,6 +66,9 @@
{
products: {
//路径导航
pathNav: [...],
//筛选相关
filters: {
checkedConditions: {
... ... @@ -170,6 +189,7 @@
]
}
},
//操作Banner相关
opts: {
sortType: [
... ... @@ -232,5 +252,9 @@
nexHref: '' //若当前为最后一页，不传此参数
},
//商品列表
goods: [
//商品信息
...
]
}
}
\ No newline at end of file
... ...
{{> layout/header}}
<div class="products-page yoho-page">
{{# products}}
{{> layout/path-nav}}
<div class="filter-box">
{{# filters}}
{{# checkedConditions}}
... ... @@ -332,6 +333,10 @@
{{#each goods}}
{{> product/good}}
{{/each}}
<div class="good-item-wrapper">
<div class="good-info-main"></div>
<div class="good-select-color"></div>
</div>
</div>
{{/ products}}
</div>
... ...
<p class="path-nav">
{{#each pathNav}}
{{#if href}}
<a href="{{href}}">
{{name}}
{{#unless @last}}
<span class="iconfont">&#xe601;</span>
{{/unless}}
</a>
{{^}}
<span>
{{name}}
{{#unless @last}}
<i class="iconfont">&#xe601;</i>
{{/unless}}
</span>
{{/if}}
{{/each}}
</p>
\ No newline at end of file
... ...
<div class="good-info {{#if goodListLast}}good-list-{{goodListLast}}{{/if}}" data-skn="{{skn}}">
<div class="good-info" data-skn="{{skn}}">
<div class="tag-container clearfix">
{{# tags}}
{{# isNew}}
... ... @@ -33,7 +33,7 @@
{{/ isFew}}
{{#if showColBtn}}
<span class="col-btn iconfont{{#if coled}} coled{{/if}}"></span>
<span class="col-btn iconfont{{#if coled}} coled{{/if}}">&#xe616;</span>
{{/if}}
</div>
<div class="good-detail-text">
... ...
... ... @@ -2,7 +2,7 @@
<!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>
Created by FontForge 20120731 at Tue Dec 1 11:00:27 2015
Created by FontForge 20120731 at Wed Dec 2 17:34:20 2015
By Ads
</metadata>
<defs>
... ... @@ -16,10 +16,10 @@ Created by FontForge 20120731 at Tue Dec 1 11:00:27 2015
ascent="896"
descent="-128"
x-height="792"
bbox="0 -214 1024 864"
bbox="0 -214 1172.1 864"
underline-thickness="50"
underline-position="-100"
unicode-range="U+0078-E615"
unicode-range="U+0078-E616"
/>
<missing-glyph horiz-adv-x="374"
d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" />
... ... @@ -81,5 +81,8 @@ d="M877 812h-730q-61 0 -104 -43t-43 -104v-730q0 -61 43 -104t104 -43h730q61 0 104
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"
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" />
</font>
</defs></svg>
... ...
... ... @@ -26,7 +26,10 @@ var $brandMoreTxt, $brandMoreIcon;
//商品相关变量
var $goodsContainer = $('.goods-container'),
$goodItem = $goodsContainer.find('.good-info');
$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'),
... ... @@ -328,10 +331,46 @@ $('.senior-sub').on('click', '.multi-select', function() {
* 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.hover(function() {
$goodItem.mouseenter(function() {
var $cloneStr,
$goodItemWrapper,
activeIndex,
X,
left,
... ... @@ -343,29 +382,42 @@ $goodItem.hover(function() {
itemMr = 10,
itemMb = 35;
$('.good-item-wrapper').remove();
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) - 19;
top = (Y - 1) * (itemH + itemMb) + 25 - 19;
$cloneStr = $(this).clone();
$goodItemWrapper =
'<div class="good-item-wrapper" style="left:' + left + 'px;top:' + top + 'px;position:absolute;">' +
'<div class="good-select-color">' +
'</div>' +
'</div>';
$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'
});
$goodsContainer.append($goodItemWrapper);
$('.good-item-wrapper').prepend($cloneStr);
}, function() {
});
//todo
$goodItemWrapper.mouseleave(function() {
$goodInfoMain.html('');
$goodSelectColor.html('');
$goodItemWrapper.css({
display: 'none'
});
});
\ No newline at end of file
... ...
.path-nav {
font-size: 12px;
padding: 15px 0;
height: 18px;
line-height: 18px;
border-bottom: 1px solid #eaeceb;
margin-bottom: 15px;
a {
color: #666;
}
.iconfont {
font-size: 12px;
}
}
\ No newline at end of file
... ...
... ... @@ -3,7 +3,8 @@
@import "compass",
"compass/reset",
"header",
"footer";
"footer",
"path-nav";
body {
font-family: arial,"Microsoft YaHei";
... ...
... ... @@ -287,29 +287,16 @@
}
/*商品列表
*added by wangchenglong at 2015.12.1
*Added by wangchenglong at 2015/12/1
*/
.goods-container {
height: auto;
padding: 0 15px;
margin-top: 25px;
padding: 25px 15px 0 15px;
overflow: hidden;
position: relative;
width: 1150px + 10px;
/*测试*/
width: 1150px;
.good-info {
height: 400px; //todo
margin-bottom: 35px;
width: 222px;
margin-right: 10px;
float: left;
&.good-list-five {
margin-right: 0;
}
/*标签*/
//标签
.tag-container {
font-size: 12px;
height: 22px;
... ... @@ -325,13 +312,16 @@
margin-right: 0;
}
&.new-tag {
background: #78dc7d;
color: #fff;
@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;
}
&.yep-tag, .sale-tag {
background: #ff565b;
color: #fff;
}
&.limit-tag {
color: #4e4e4e;
... ... @@ -340,10 +330,19 @@
}
}
/*图片*/
//商品列表
.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;
... ... @@ -351,9 +350,21 @@
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;
... ... @@ -369,17 +380,129 @@
margin-top: 10px;
}
}
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
}
/*弹层*/
//弹层
.good-item-wrapper {
border: 1px solid red;
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;
}
}
/*商品列表end*/
.col-btn {
position: absolute;
top: 15px;
right: 15px;
color: #ccc;
font-size: 12px;
display: none;
}
}
}
}
//商品列表END
.opt-banner {
height: 48px;
background: #f5f7f6;
... ...
... ... @@ -14,6 +14,15 @@ class IndexController extends AbstractAction
'searchListPage' => true,
'products' => array(
'pathNav' => array(
array(
'href' => 'm.yohobuy.com',
'name' => '首页'
),
array(
'name' => '搜索“安德玛”共18个结果'
)
),
'filters' => array(
'checkedConditions' => array(
'conditions' => array(
... ... @@ -313,7 +322,7 @@ class IndexController extends AbstractAction
'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',
'goodListLast' => false
'isFew' => true
),
1 => array(
'tags' => array(
... ... @@ -324,7 +333,7 @@ class IndexController extends AbstractAction
'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',
'goodListLast' => false
'showColBtn' => true
),
2 => array(
'tags' => array(
... ... @@ -334,15 +343,13 @@ class IndexController extends AbstractAction
'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',
'goodListLast' => false
'salePrice' => '899'
),
3 => 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',
'goodListLast' => false
'salePrice' => '899'
),
4 => array(
'tags' => array(
... ... @@ -352,8 +359,7 @@ class IndexController extends AbstractAction
'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',
'goodListLast' => 'five'
'salePrice' => '899'
),
5 => array(
'tags' => array(
... ... @@ -363,11 +369,29 @@ class IndexController extends AbstractAction
'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',
'goodListLast' => false
'salePrice' => '899'
)
)
);
$this->_view->display('list', $data);
}
/*
* 获取商品颜色
*/
public function productColorAction()
{
$data = array(
array(
'url' => 'http://item.yohobuy.com/product/pro_187471_252595/NIKEAIRMAX90ESSENTIAL537384126.html',
'src' => 'http://img12.static.yhbimg.com/goodsimg/2015/09/24/09/028738fa8afcf5031733bcdfa83e397f0f.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
),
array(
'url' => 'http://item.yohobuy.com/product/pro_187471_252595/NIKEAIRMAX90ESSENTIAL537384126.html',
'src' => 'http://img12.static.yhbimg.com/goodsimg/2015/09/24/09/028738fa8afcf5031733bcdfa83e397f0f.jpg?imageMogr2/thumbnail/75x100/extent/75x100/background/d2hpdGU=/position/center/quality/90'
),
);
$this->echoJson($data);
}
}
\ No newline at end of file
... ...