From c466af00ead4d6bf54ef8d122a6f7da35e49cdc1 Mon Sep 17 00:00:00 2001
From: 阿达 <abel.wang@yoho.cn>
Date: Tue, 31 May 2016 10:46:09 +0800
Subject: [PATCH] -提交部分banner代码
---
apps/product/models/simulation.js | 4 ++--
apps/product/views/action/sale/discount.hbs | 4 +++-
apps/product/views/action/sale/other.hbs | 8 ++++++--
apps/product/views/partial/sale/sale-banner.hbs | 16 +++++++---------
doraemon/views/partial/common/slide-banner.hbs | 4 ++--
doraemon/views/partial/product/filter-box.hbs | 2 +-
doraemon/views/partial/product/good.hbs | 9 +++++++--
public/js/product/product.js | 180 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------
public/js/product/sale.page.js | 2 +-
9 files changed, 162 insertions(+), 67 deletions(-)
diff --git a/apps/product/models/simulation.js b/apps/product/models/simulation.js
index 830a419..dd4cce7 100644
--- a/apps/product/models/simulation.js
+++ b/apps/product/models/simulation.js
@@ -297,10 +297,10 @@ exports.other = () => {
bannerHeight: 450,
list: [
{
- img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/{mode}/w/{width}/h/{height'
+ img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/{mode}/w/{width}/h/{height}'
},
{
- img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/20/10/01360161e0099b26083b163c5158f93409.jpg?imageView2/{mode}/w/{width}/h/{height'
+ img: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/20/10/01360161e0099b26083b163c5158f93409.jpg?imageView2/{mode}/w/{width}/h/{height}'
}
]
diff --git a/apps/product/views/action/sale/discount.hbs b/apps/product/views/action/sale/discount.hbs
index 87274ad..351187d 100644
--- a/apps/product/views/action/sale/discount.hbs
+++ b/apps/product/views/action/sale/discount.hbs
@@ -2,7 +2,9 @@
{{# result}}
<div class="sale-discount-page yoho-page center-content .new-sale-page">
- {{> sale/sale-banner}}
+ {{#topBanner}}
+ {{> sale/sale-banner}}
+ {{/topBanner}}
<div class="center-content clearfix">
{{#saleTitle}}
diff --git a/apps/product/views/action/sale/other.hbs b/apps/product/views/action/sale/other.hbs
index 566cd21..4dc8b51 100644
--- a/apps/product/views/action/sale/other.hbs
+++ b/apps/product/views/action/sale/other.hbs
@@ -2,7 +2,11 @@
<div class="new-sale-page product-page yoho-page">
{{# saleList}}
- {{> sale/sale-banner}}
+ {{#topBanner}}
+ {{> sale/sale-banner}}
+ {{/topBanner}}
+
+
<div class="center-content clearfix">
{{# saleTitle}}
@@ -24,4 +28,4 @@
</div>
</div>
{{/ saleList}}
-</div>
\ No newline at end of file
+</div>
diff --git a/apps/product/views/partial/sale/sale-banner.hbs b/apps/product/views/partial/sale/sale-banner.hbs
index 37951fc..2a62cdb 100644
--- a/apps/product/views/partial/sale/sale-banner.hbs
+++ b/apps/product/views/partial/sale/sale-banner.hbs
@@ -1,9 +1,7 @@
-{{# saleBanner}}
- <div class="sale-list-banner" style="height: {{bannerHeight}}px;">
- <ul>
- {{# list}}
- <li class="banner-img" style="background:url({{image img 1150 450}}) no-repeat top center;"></li>
- {{/ list}}
- </ul>
- </div>
-{{/ saleBanner}}
+<div class="sale-list-banner" style="height: 360px;">
+ <ul>
+ {{# list}}
+ <li class="banner-img" style="background:url({{image img 1920 360}}) no-repeat top center;"></li>
+ {{/ list}}
+ </ul>
+</div>
diff --git a/doraemon/views/partial/common/slide-banner.hbs b/doraemon/views/partial/common/slide-banner.hbs
index 1199bba..a6dd004 100644
--- a/doraemon/views/partial/common/slide-banner.hbs
+++ b/doraemon/views/partial/common/slide-banner.hbs
@@ -5,9 +5,9 @@
<li style="{{#if bgColor}}background:{{bgColor}}{{/if}}">
<a href="{{href}}" target= "_blank">
{{#if @first}}
- <img src="{{image img 1150 450}}">
+ <img src="{{image img 1150 450}}" style="height: 450px;width: 1150px">
{{^}}
- <img class="lazy" data-original="{{image img 1150 450}}" alt="">
+ <img class="lazy" data-original="{{image img 1150 450}}" style="height: 450px;width: 1150px" alt="">
{{/if}}
</a>
{{# tips}}
diff --git a/doraemon/views/partial/product/filter-box.hbs b/doraemon/views/partial/product/filter-box.hbs
index 3d1b2c2..2af8bec 100644
--- a/doraemon/views/partial/product/filter-box.hbs
+++ b/doraemon/views/partial/product/filter-box.hbs
@@ -172,7 +172,7 @@
<div class="attr-content clearfix">
{{# price}}
- <a class="attr{{#if checked}} checked{{/if}}" href="{{href}}">¥{{name}}</a>
+ <a class="attr{{#if checked}} checked{{/if}}" href="{{href}}">{{name}}</a>
{{/ price}}
<div class="ud-price-range">
diff --git a/doraemon/views/partial/product/good.hbs b/doraemon/views/partial/product/good.hbs
index 8abb37d..b04826b 100644
--- a/doraemon/views/partial/product/good.hbs
+++ b/doraemon/views/partial/product/good.hbs
@@ -45,11 +45,16 @@
{{/brand}}
<p class="price">
{{# marketPrice}}
- <span class="market-price">¥{{.}}</span>
+ <span class="market-price">{{.}}</span>
{{/ marketPrice}}
<span class="sale-price{{#unless marketPrice}}prime-cost{{/unless}}">
- ¥{{salePrice}}
+ ¥{{salesPrice}}
</span>
</p>
+ <div class="goodsList hide">
+ {{#goodsList}}
+ <div class="list" imgUrl = "{{imagesUrl}}" url = "{{goodsId}}" cover = "{{cover1}}"></div>
+ {{/goodsList}}
+ </div>
</div>
</div>
diff --git a/public/js/product/product.js b/public/js/product/product.js
index 9a75564..5e3a3cb 100644
--- a/public/js/product/product.js
+++ b/public/js/product/product.js
@@ -83,10 +83,90 @@ exports.init = function(num) {
});
}
+ //原来的
+ //productList.addHandler('MouseEnter', function(event) {
+ // var itemMr = 10, // list的右边距
+ // itemMb = 35, // list的下边距
+ // ulStr = '',
+ // ulNum,
+ // wrapperWidth,
+ // diffWidth,
+ // wrapperX,
+ // wrapperY,
+ // wrapperPl, // 鼠标移入时弹层的左内边距
+ // wrapperPt, // 鼠标移入时弹层的上内边距
+ // containerPt, // 商品列表容器的上内边距
+ // _from = event.target.attr('data-from') || '';
+ //
+ // $.ajax({
+ // type: 'POST',
+ // url: '/product/list/getProductPic',
+ // dataType: 'jsonp',
+ // jsonp: 'callback',
+ // data: {
+ // skn: event.target.attr('data-skn'),
+ // skc: event.target.attr('data-skc')
+ // }
+ // }).then(function(res) {
+ // var data = res.data,
+ // colorList = createColorList(data.pics, _from);
+ //
+ // removeHtmlFn();
+ //
+ // ulStr = colorList.colorListStr; // ajax请求的颜色列表
+ // ulNum = colorList.ulNum;// ajax请求的颜色的数量
+ //
+ // $goodInfoMain.append(event.targetDuplicate);
+ // $goodSelectColor.append($(ulStr));
+ //
+ // // 点击收藏商品不需要了
+ // // if (data.isFavorite) {
+ // // $goodInfoMain.find('.col-btn').addClass('coled');
+ // // } else {
+ // // $goodInfoMain.find('.col-btn').removeClass('coled');
+ // // }
+ //
+ // wrapperPl = $goodItemWrapper.css('paddingLeft');
+ // wrapperPt = $goodItemWrapper.css('paddingTop');
+ // containerPt = $goodsContainer.css('paddingTop');
+ //
+ // wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
+ //
+ // // wrapperWidth = $goodItemWrapper.width();
+ //
+ // wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
+ // wrapperY = (event.targetY - 1) *
+ // (event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
+ //
+ // // todo
+ // // event.offsetR表示当前列表距离浏览器右侧边缘的距离
+ // diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
+ //
+ // if (diffWidth <= 0) {
+ // wrapperX = wrapperX + diffWidth - 25;
+ // }
+ // $goodItemWrapper.css({
+ // width: wrapperWidth,
+ // left: wrapperX,
+ // top: wrapperY,
+ // display: 'inline-block'
+ // });
+ //
+ // // 鼠标悬浮获取到商品信息后显示第一张图片
+ // if (data.pics[0] && data.pics[0].src) {
+ // $goodInfoMain.find('.good-thumb img').attr('src', data.pics[0].src);
+ // }
+ // });
+ //});
+
productList.addHandler('MouseEnter', function(event) {
var itemMr = 10, // list的右边距
itemMb = 35, // list的下边距
ulStr = '',
+ imageList,
+ pic, pics,
+ listCount,
+ i,item,
ulNum,
wrapperWidth,
diffWidth,
@@ -97,65 +177,68 @@ exports.init = function(num) {
containerPt, // 商品列表容器的上内边距
_from = event.target.attr('data-from') || '';
- $.ajax({
- type: 'POST',
- url: '/product/list/getProductPic',
- dataType: 'jsonp',
- jsonp: 'callback',
- data: {
- skn: event.target.attr('data-skn'),
- skc: event.target.attr('data-skc')
- }
- }).then(function(res) {
- var data = res.data,
- colorList = createColorList(data.pics, _from);
- removeHtmlFn();
+ listCount = event.target.find('.goodsList').length;
+
+ pics = [];
+ for (i = 0 ; i < listCount ; i++) {
+ item = event.target.find('.goodsList').find('.list').eq(i);
+ pic = {
+ url: item.attr('url'),
+ src: item.attr('imgUrl'),
+ coverImg: item.attr('cover')
+ };
+ //pic = {
+ // url: 'dasda',
+ // src: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/2/w/100/h/100',
+ // coverImg: 'http://img10.static.yhbimg.com/yhb-img01/2016/05/16/11/0176c310938764910f7fe5f22c450d3f00.jpg?imageView2/2/w/100/h/100'
+ //};
+ pics.push(pic);
+ }
+
+ imageList = {
+ pics : pics
+ }
- ulStr = colorList.colorListStr; // ajax请求的颜色列表
- ulNum = colorList.ulNum;// ajax请求的颜色的数量
+ var data = imageList,
+ colorList = createColorList(imageList.pics, _from);
- $goodInfoMain.append(event.targetDuplicate);
- $goodSelectColor.append($(ulStr));
+ removeHtmlFn();
- // 点击收藏商品不需要了
- // if (data.isFavorite) {
- // $goodInfoMain.find('.col-btn').addClass('coled');
- // } else {
- // $goodInfoMain.find('.col-btn').removeClass('coled');
- // }
+ ulStr = colorList.colorListStr; // ajax请求的颜色列表
+ ulNum = colorList.ulNum;// ajax请求的颜色的数量
- wrapperPl = $goodItemWrapper.css('paddingLeft');
- wrapperPt = $goodItemWrapper.css('paddingTop');
- containerPt = $goodsContainer.css('paddingTop');
+ $goodInfoMain.append(event.targetDuplicate);
+ $goodSelectColor.append($(ulStr));
- wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
+ wrapperPl = $goodItemWrapper.css('paddingLeft');
+ wrapperPt = $goodItemWrapper.css('paddingTop');
+ containerPt = $goodsContainer.css('paddingTop');
- // wrapperWidth = $goodItemWrapper.width();
+ wrapperWidth = 10 + (15 + 50) * ulNum + event.targetWidth;
- wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
- wrapperY = (event.targetY - 1) *
+ wrapperX = (event.targetX - 1) * (event.targetWidth + itemMr) - (parseInt(wrapperPl) + 1);
+ wrapperY = (event.targetY - 1) *
(event.targetHeight + itemMb) + parseInt(containerPt) - (parseInt(wrapperPt) + 1);
- // todo
- // event.offsetR表示当前列表距离浏览器右侧边缘的距离
- diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
+ // todo
+ // event.offsetR表示当前列表距离浏览器右侧边缘的距离
+ diffWidth = event.offsetR - ((15 + 50) * ulNum + 25);
- if (diffWidth <= 0) {
- wrapperX = wrapperX + diffWidth - 25;
- }
- $goodItemWrapper.css({
- width: wrapperWidth,
- left: wrapperX,
- top: wrapperY,
- display: 'inline-block'
- });
-
- // 鼠标悬浮获取到商品信息后显示第一张图片
- if (data.pics[0] && data.pics[0].src) {
- $goodInfoMain.find('.good-thumb img').attr('src', data.pics[0].src);
- }
+ if (diffWidth <= 0) {
+ wrapperX = wrapperX + diffWidth - 25;
+ }
+ $goodItemWrapper.css({
+ width: wrapperWidth,
+ left: wrapperX,
+ top: wrapperY,
+ display: 'inline-block'
});
+
+ // 鼠标悬浮获取到商品信息后显示第一张图片
+ if (imageList.pics[0] && imageList.pics[0].src) {
+ $goodInfoMain.find('.good-thumb img').attr('src', imageList.pics[0].src);
+ }
});
productList.addHandler('MouseLeave', function() {
@@ -169,6 +252,9 @@ exports.init = function(num) {
};
+
+
+
// 鼠标放在颜色列表上效果
$(document).on('hover', '.good-select-color li', function() {
var coverImg = $(this).find('img').attr('data-cover'),
diff --git a/public/js/product/sale.page.js b/public/js/product/sale.page.js
index 69467a6..f11287b 100644
--- a/public/js/product/sale.page.js
+++ b/public/js/product/sale.page.js
@@ -9,7 +9,7 @@ require('../common/slider');
require('../common/filter');
require('../common/sort-pager');
-product.init();
+product.init(4);
lazyLoad($('img.lazy'));
$('.slide-container').slider();
--
libgit2 0.24.0