Merge branch 'develop' of git.dev.yoho.cn:web/yohobuy into develop
Showing
12 changed files
with
441 additions
and
468 deletions
assets/emailback.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | -<meta charset="utf-8"> | ||
5 | -<title>找回密码-通过邮箱 | YOHO!有货</title> | ||
6 | -<meta name="keywords" content="Yoho! 有货官网,潮流志,潮流男装,潮牌,美国潮牌,日本潮牌,香港潮牌,潮牌店,新品首发,欧美潮流,全球购,代购,时尚,流行,特卖,B2C,正品,购物网站,网上购物,货到付款"> | ||
7 | -<meta name="description" content="YOHO! 有货,年轻人潮流购物中心,中国最大的潮流商品购物网站。100%品牌正品保证,支持货到付款。作为YOHO!旗下的购物平台,汇集了全球潮流时尚商品和中国最流行的商品,也是国内最大的原创文化商品平台,也是香港,台湾地区流行商品的集中地。同时包含日本、韩国等众多国外潮流品牌,带给您全新潮流购物体验。"> | ||
8 | -<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
9 | -<meta http-equiv="cleartype" content="on"> | ||
10 | -<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||
11 | -<meta content="telephone=no" name="format-detection" /> | ||
12 | -<meta content="email=no" name="format-detection" /> | ||
13 | -<script type="text/javascript"> | ||
14 | - (function(doc, win) { | ||
15 | - var docEl = doc.documentElement; | ||
16 | - (function() { | ||
17 | - var clientWidth = docEl.clientWidth; | ||
18 | - if (!clientWidth) { | ||
19 | - return; | ||
20 | - } | ||
21 | - docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; | ||
22 | - }()); | ||
23 | - })(document, window); | ||
24 | -</script> | ||
25 | -<link rel="stylesheet" href="http://cdn.yoho.cn/myohobuy/0.0.2/index.css"> | ||
26 | -</head> | ||
27 | -<body class=passport-body> | ||
28 | - <div class="back-email-page passport-page yoho-page"> | ||
29 | - <div class="header"> | ||
30 | - <a class="go-back" href=/signin.html></a> | ||
31 | - <p class="title">找回密码</p> | ||
32 | - </div> <div class="content"> | ||
33 | - <div class="input-container row has-clear"> | ||
34 | - <input id="email" class="input email" type="text" placeholder="请输入邮箱" autocomplete="off"> | ||
35 | - </div> | ||
36 | - <span id="btn-sure" class="btn btn-sure disable row">确定</span> | ||
37 | - </div> | ||
38 | -</div> | ||
39 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/lib.js"></script> | ||
40 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/index.js"></script> | ||
41 | -<script> | ||
42 | - seajs.use('js/common'); | ||
43 | -</script> | ||
44 | -<script> | ||
45 | - seajs.use('js/passport/back/email'); | ||
46 | -</script> | ||
47 | -</body> | ||
48 | -</html> |
assets/login.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | -<meta charset="utf-8"> | ||
5 | -<title>国际账号登录 | YOHO!有货</title> | ||
6 | -<meta name="keywords" content="Yoho! 有货官网,潮流志,潮流男装,潮牌,美国潮牌,日本潮牌,香港潮牌,潮牌店,新品首发,欧美潮流,全球购,代购,时尚,流行,特卖,B2C,正品,购物网站,网上购物,货到付款"> | ||
7 | -<meta name="description" content="YOHO! 有货,年轻人潮流购物中心,中国最大的潮流商品购物网站。100%品牌正品保证,支持货到付款。作为YOHO!旗下的购物平台,汇集了全球潮流时尚商品和中国最流行的商品,也是国内最大的原创文化商品平台,也是香港,台湾地区流行商品的集中地。同时包含日本、韩国等众多国外潮流品牌,带给您全新潮流购物体验。"> | ||
8 | -<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
9 | -<meta http-equiv="cleartype" content="on"> | ||
10 | -<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||
11 | -<meta content="telephone=no" name="format-detection" /> | ||
12 | -<meta content="email=no" name="format-detection" /> | ||
13 | -<script type="text/javascript"> | ||
14 | - (function(doc, win) { | ||
15 | - var docEl = doc.documentElement; | ||
16 | - (function() { | ||
17 | - var clientWidth = docEl.clientWidth; | ||
18 | - if (!clientWidth) { | ||
19 | - return; | ||
20 | - } | ||
21 | - docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; | ||
22 | - }()); | ||
23 | - })(document, window); | ||
24 | -</script> | ||
25 | -<link rel="stylesheet" href="http://cdn.yoho.cn/myohobuy/0.0.2/index.css"> | ||
26 | -</head> | ||
27 | -<body class=passport-body> | ||
28 | - <div class="login-international-page passport-page yoho-page"> | ||
29 | - <div class="header"> | ||
30 | - <a class="go-back" href=/></a> | ||
31 | - <p class="title">登录</p> | ||
32 | - </div> <div class="content"> | ||
33 | - <div class="select-container row"> | ||
34 | - <span class="select-title">国家和地区</span> | ||
35 | - <select id="country-select" class="country-select select in-android-uc"> | ||
36 | - <option value=+61 >澳大利亚</option> | ||
37 | - <option value=+82 >韩国</option> | ||
38 | - <option value=+1 >加拿大</option> | ||
39 | - <option value=+60 >马来西亚</option> | ||
40 | - <option value=+1 >美国</option> | ||
41 | - <option value=+81 >日本</option> | ||
42 | - <option value=+65 >新加坡</option> | ||
43 | - <option value=+44 >英国</option> | ||
44 | - <option value=+86 selected>中国</option> | ||
45 | - <option value=+853 >中国澳门</option> | ||
46 | - <option value=+886 >中国台湾</option> | ||
47 | - <option value=+852 >中国香港</option> | ||
48 | - </select> | ||
49 | - <div class="arrow-right"></div> | ||
50 | - </div> <div class="input-container phone-container row has-clear"> | ||
51 | - <span id="area-code" class="area-code">+86</span> | ||
52 | - <input id="phone-num" class="input phone-num" type="text" placeholder="手机号" value=> | ||
53 | - </div> | ||
54 | - <div class="input-container row has-eye"> | ||
55 | - <input id="pwd" class="pwd input" type="password" placeholder="密码"> | ||
56 | - </div> | ||
57 | - <span id="btn-login" class="btn btn-login disble row">登录</span> | ||
58 | - </div> | ||
59 | -</div> | ||
60 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/lib.js"></script> | ||
61 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/index.js"></script> | ||
62 | -<script> | ||
63 | - seajs.use('js/common'); | ||
64 | -</script> | ||
65 | - <script> | ||
66 | - seajs.use('js/passport/login/international'); | ||
67 | - </script> | ||
68 | -</body> | ||
69 | -</html> |
assets/phoneback.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | -<meta charset="utf-8"> | ||
5 | -<title>找回密码-通过手机号 | YOHO!有货</title> | ||
6 | -<meta name="keywords" content="Yoho! 有货官网,潮流志,潮流男装,潮牌,美国潮牌,日本潮牌,香港潮牌,潮牌店,新品首发,欧美潮流,全球购,代购,时尚,流行,特卖,B2C,正品,购物网站,网上购物,货到付款"> | ||
7 | -<meta name="description" content="YOHO! 有货,年轻人潮流购物中心,中国最大的潮流商品购物网站。100%品牌正品保证,支持货到付款。作为YOHO!旗下的购物平台,汇集了全球潮流时尚商品和中国最流行的商品,也是国内最大的原创文化商品平台,也是香港,台湾地区流行商品的集中地。同时包含日本、韩国等众多国外潮流品牌,带给您全新潮流购物体验。"> | ||
8 | -<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
9 | -<meta http-equiv="cleartype" content="on"> | ||
10 | -<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||
11 | -<meta content="telephone=no" name="format-detection" /> | ||
12 | -<meta content="email=no" name="format-detection" /> | ||
13 | -<script type="text/javascript"> | ||
14 | - (function(doc, win) { | ||
15 | - var docEl = doc.documentElement; | ||
16 | - (function() { | ||
17 | - var clientWidth = docEl.clientWidth; | ||
18 | - if (!clientWidth) { | ||
19 | - return; | ||
20 | - } | ||
21 | - docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; | ||
22 | - }()); | ||
23 | - })(document, window); | ||
24 | -</script> | ||
25 | -<link rel="stylesheet" href="http://cdn.yoho.cn/myohobuy/0.0.2/index.css"> | ||
26 | -</head> | ||
27 | -<body class=passport-body> | ||
28 | - <div class="back-mobile-page passport-page yoho-page"> | ||
29 | - <div class="header"> | ||
30 | - <a class="go-back" href=/signin.html></a> | ||
31 | - <p class="title">找回密码</p> | ||
32 | - </div> <div class="content"> | ||
33 | - <div class="select-container row"> | ||
34 | - <span class="select-title">国家和地区</span> | ||
35 | - <select id="country-select" class="country-select select in-android-uc"> | ||
36 | - <option value=+61 >澳大利亚</option> | ||
37 | - <option value=+82 >韩国</option> | ||
38 | - <option value=+1 >加拿大</option> | ||
39 | - <option value=+60 >马来西亚</option> | ||
40 | - <option value=+1 >美国</option> | ||
41 | - <option value=+81 >日本</option> | ||
42 | - <option value=+65 >新加坡</option> | ||
43 | - <option value=+44 >英国</option> | ||
44 | - <option value=+86 selected>中国</option> | ||
45 | - <option value=+853 >中国澳门</option> | ||
46 | - <option value=+886 >中国台湾</option> | ||
47 | - <option value=+852 >中国香港</option> | ||
48 | - </select> | ||
49 | - <div class="arrow-right"></div> | ||
50 | - </div> <div class="input-container phone-container row has-clear"> | ||
51 | - <span id="area-code" class="area-code"></span> | ||
52 | - <input id="phone-num" class="input phone-num" type="text" placeholder="手机号"> | ||
53 | - </div> | ||
54 | - <span id="btn-next" class="btn btn-next disable row">下一步</span> | ||
55 | - </div> | ||
56 | -</div> | ||
57 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/lib.js"></script> | ||
58 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/index.js"></script> | ||
59 | -<script> | ||
60 | - seajs.use('js/common'); | ||
61 | -</script> | ||
62 | -<script> | ||
63 | - seajs.use('js/passport/back/mobile'); | ||
64 | -</script> | ||
65 | -</body> | ||
66 | -</html> |
assets/reg.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | -<meta charset="utf-8"> | ||
5 | -<title>注册 | YOHO!有货</title> | ||
6 | -<meta name="keywords" content="Yoho! 有货官网,潮流志,潮流男装,潮牌,美国潮牌,日本潮牌,香港潮牌,潮牌店,新品首发,欧美潮流,全球购,代购,时尚,流行,特卖,B2C,正品,购物网站,网上购物,货到付款"> | ||
7 | -<meta name="description" content="YOHO! 有货,年轻人潮流购物中心,中国最大的潮流商品购物网站。100%品牌正品保证,支持货到付款。作为YOHO!旗下的购物平台,汇集了全球潮流时尚商品和中国最流行的商品,也是国内最大的原创文化商品平台,也是香港,台湾地区流行商品的集中地。同时包含日本、韩国等众多国外潮流品牌,带给您全新潮流购物体验。"> | ||
8 | -<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
9 | -<meta http-equiv="cleartype" content="on"> | ||
10 | -<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||
11 | -<meta content="telephone=no" name="format-detection" /> | ||
12 | -<meta content="email=no" name="format-detection" /> | ||
13 | -<script type="text/javascript"> | ||
14 | - (function(doc, win) { | ||
15 | - var docEl = doc.documentElement; | ||
16 | - (function() { | ||
17 | - var clientWidth = docEl.clientWidth; | ||
18 | - if (!clientWidth) { | ||
19 | - return; | ||
20 | - } | ||
21 | - docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; | ||
22 | - }()); | ||
23 | - })(document, window); | ||
24 | -</script> | ||
25 | -<link rel="stylesheet" href="http://cdn.yoho.cn/myohobuy/0.0.2/index.css"> | ||
26 | -</head> | ||
27 | -<body class=passport-body> | ||
28 | - <div class="reg-page passport-page yoho-page"> | ||
29 | - <div class="header"> | ||
30 | - <a class="go-back" href=/></a> | ||
31 | - <p class="title">注册</p> | ||
32 | - </div> <div class="content"> | ||
33 | - <div class="select-container row"> | ||
34 | - <span class="select-title">国家和地区</span> | ||
35 | - <select id="country-select" class="country-select select in-android-uc"> | ||
36 | - <option value=+61 >澳大利亚</option> | ||
37 | - <option value=+82 >韩国</option> | ||
38 | - <option value=+1 >加拿大</option> | ||
39 | - <option value=+60 >马来西亚</option> | ||
40 | - <option value=+1 >美国</option> | ||
41 | - <option value=+81 >日本</option> | ||
42 | - <option value=+65 >新加坡</option> | ||
43 | - <option value=+44 >英国</option> | ||
44 | - <option value=+86 selected>中国</option> | ||
45 | - <option value=+853 >中国澳门</option> | ||
46 | - <option value=+886 >中国台湾</option> | ||
47 | - <option value=+852 >中国香港</option> | ||
48 | - </select> | ||
49 | - <div class="arrow-right"></div> | ||
50 | - </div> <div class="input-container phone-container row has-clear"> | ||
51 | - <span id="area-code" class="area-code">+86</span> | ||
52 | - <input id="phone-num" class="input phone-num" type="text" placeholder="手机号"> | ||
53 | - </div> | ||
54 | - <span id="btn-next" class="btn btn-next disable row">下一步</span> | ||
55 | - <p class="register-tip">YOHO!Family账号可登录YOHO!有货、YOHO!Boys、YOHO!Girls及SHOW</p> | ||
56 | - </div> | ||
57 | -</div> | ||
58 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/lib.js"></script> | ||
59 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/index.js"></script> | ||
60 | -<script> | ||
61 | - seajs.use('js/common'); | ||
62 | -</script> | ||
63 | -<script> | ||
64 | - seajs.use('js/passport/register/register'); | ||
65 | -</script> | ||
66 | -</body> | ||
67 | -</html> |
assets/signin.html
deleted
100644 → 0
1 | -<!DOCTYPE html> | ||
2 | -<html> | ||
3 | -<head> | ||
4 | -<meta charset="utf-8"> | ||
5 | -<title>登录 | YOHO!有货</title> | ||
6 | -<meta name="keywords" content="Yoho! 有货官网,潮流志,潮流男装,潮牌,美国潮牌,日本潮牌,香港潮牌,潮牌店,新品首发,欧美潮流,全球购,代购,时尚,流行,特卖,B2C,正品,购物网站,网上购物,货到付款"> | ||
7 | -<meta name="description" content="YOHO! 有货,年轻人潮流购物中心,中国最大的潮流商品购物网站。100%品牌正品保证,支持货到付款。作为YOHO!旗下的购物平台,汇集了全球潮流时尚商品和中国最流行的商品,也是国内最大的原创文化商品平台,也是香港,台湾地区流行商品的集中地。同时包含日本、韩国等众多国外潮流品牌,带给您全新潮流购物体验。"> | ||
8 | -<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> | ||
9 | -<meta http-equiv="cleartype" content="on"> | ||
10 | -<meta name="apple-mobile-web-app-status-bar-style" content="black" /> | ||
11 | -<meta content="telephone=no" name="format-detection" /> | ||
12 | -<meta content="email=no" name="format-detection" /> | ||
13 | -<script type="text/javascript"> | ||
14 | - (function(doc, win) { | ||
15 | - var docEl = doc.documentElement; | ||
16 | - (function() { | ||
17 | - var clientWidth = docEl.clientWidth; | ||
18 | - if (!clientWidth) { | ||
19 | - return; | ||
20 | - } | ||
21 | - docEl.style.fontSize = 20 * (clientWidth / 320) + 'px'; | ||
22 | - }()); | ||
23 | - })(document, window); | ||
24 | -</script> | ||
25 | -<link rel="stylesheet" href="http://cdn.yoho.cn/myohobuy/0.0.2/index.css"> | ||
26 | -</head> | ||
27 | -<body class=passport-body> | ||
28 | - <div class="login-page passport-page yoho-page"> | ||
29 | - <div class="header"> | ||
30 | - <a class="go-back" href=/></a> | ||
31 | - <div class="img-header"></div> | ||
32 | - </div> <div class="content"> | ||
33 | - <div class="acc-container input-container row has-clear"> | ||
34 | - <div class="yoho-logo"></div> | ||
35 | - <input id="account" class="input account" type="text" placeholder="手机号/邮箱" autocomplete="off" value=> | ||
36 | - </div> | ||
37 | - <div class="input-container row has-eye"> | ||
38 | - <input id="pwd" class="pwd input" type="password" placeholder="密码"> | ||
39 | - </div> | ||
40 | - <span id="btn-login" class="btn btn-login disable">登录</span> | ||
41 | - <p class="op-container"> | ||
42 | - <a class="go-register" href=/reg.html>免费注册</a> | ||
43 | - <span id="forget-pwd" class="forget-pwd">忘记密码</span> | ||
44 | - </p> | ||
45 | - <div class="third-party-login"> | ||
46 | - <span>其他登录方式</span> | ||
47 | - <div class="tp-link"> | ||
48 | - <a class="alipay" href=/passport/login/alipay></a> | ||
49 | - <a class="weibo" href=/passport/login/sina></a> | ||
50 | - <a class="qq" href=/passport/login/qq></a> | ||
51 | - </div> | ||
52 | - </div> | ||
53 | - <a class="international" href=/login.html>International Customer</a> | ||
54 | - <div class="login-tip"> | ||
55 | - <div class="info-icon"></div> | ||
56 | - Yoho!Family账号可登录YOHO!有货 | ||
57 | - </div> | ||
58 | - <div id="retrive-pwd-mask" class="mask"></div> | ||
59 | - <ul id="retrive-pwd-ways" class="retrive-pwd-ways"> | ||
60 | - <li> | ||
61 | - <a href=/passport/back/mobile>通过手机找回密码</a> | ||
62 | - </li> | ||
63 | - <li> | ||
64 | - <a href=/passport/back/email>通过邮箱找回密码</a> | ||
65 | - </li> | ||
66 | - <li id="cancel-retrive"> | ||
67 | - 取消 | ||
68 | - </li> | ||
69 | - </ul> | ||
70 | - </div> | ||
71 | -</div> | ||
72 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/lib.js"></script> | ||
73 | -<script src="http://cdn.yoho.cn/myohobuy/0.0.2/index.js"></script> | ||
74 | -<script> | ||
75 | - seajs.use('js/common'); | ||
76 | -</script> | ||
77 | -<script> | ||
78 | - seajs.use('js/passport/login/login'); | ||
79 | -</script> | ||
80 | -</body> | ||
81 | -</html> |
@@ -98,7 +98,7 @@ gulp.task('compass-production', ['assets'], function() { | @@ -98,7 +98,7 @@ gulp.task('compass-production', ['assets'], function() { | ||
98 | compass({ | 98 | compass({ |
99 | css: distDir.css, | 99 | css: distDir.css, |
100 | sass: 'sass', | 100 | sass: 'sass', |
101 | - image: distDir.image, | 101 | + image: distDir.img, |
102 | font: distDir.font, | 102 | font: distDir.font, |
103 | http_path: '/', | 103 | http_path: '/', |
104 | style: 'compressed' | 104 | style: 'compressed' |
1 | +/** | ||
2 | + * 折扣专区 | ||
3 | + * @author: liangzhifeng<zhifeng.liang@yoho.cn> | ||
4 | + * @date: 2015/10/23 | ||
5 | + */ | ||
6 | + | ||
1 | var $ = require('yoho.zepto'), | 7 | var $ = require('yoho.zepto'), |
2 | - Swiper = require('yoho.iswiper'), | ||
3 | lazyLoad = require('yoho.zeptolazyload'); | 8 | lazyLoad = require('yoho.zeptolazyload'); |
4 | 9 | ||
5 | -var $curNav, | ||
6 | - $navList = $('#discount-nav'), | ||
7 | - $newArrivalList = $('#discount-goods-list'), | ||
8 | - $goods = $newArrivalList.children('.goods-list'), | ||
9 | - $goodList = $('.goods-list'); | ||
10 | - | ||
11 | -var swiper; | ||
12 | -var index = 0, | ||
13 | - winH = $(window).height(), | ||
14 | - loadMoreH = $('#load-more').height(), | ||
15 | - loading = false, | ||
16 | - page = 0, | ||
17 | - pd = ""; | ||
18 | - | ||
19 | -swiper = new Swiper('.swiper-container', { | ||
20 | - lazyLoading: true, | ||
21 | - pagination: '.swiper-pagination' | ||
22 | -}); | 10 | +var filter = require('../../plugin/filter'); |
23 | 11 | ||
24 | -lazyLoad($('img.lazy')); | ||
25 | -$curNav = $navList.children('.focus'); | 12 | +var $goodsContainer = $('#goods-container'), |
13 | + $ngc = $($goodsContainer.children().get(0)), | ||
14 | + $pgc = $($goodsContainer.children().get(1)), | ||
15 | + $dgc = $($goodsContainer.children().get(2)); | ||
16 | + $all = $($goodsContainer.children().get(3)); | ||
26 | 17 | ||
27 | -$('#discount-nav').delegate('li', 'touchstart', function() { | ||
28 | - var $this = $(this), | ||
29 | - $content; | 18 | +var winH = $(window).height(); |
19 | + | ||
20 | +//默认筛选条件 | ||
21 | +var defaultOpt = { | ||
22 | + gender: $('#gender').val(), | ||
23 | + brand: $('#brand').val(), | ||
24 | + msort: $('#msort').val(), | ||
25 | + color: $('#color').val(), | ||
26 | + size: $('#size').val(), | ||
27 | + price: $('#price').val(), | ||
28 | + discount: $('#discount').val(), | ||
29 | + limit: $('#limit').val(), | ||
30 | + dayLimit: $('#dayLimit').val(), | ||
31 | + channel: $('#channel').val(), | ||
32 | + p_d: $('#p_d').val() | ||
33 | +}; | ||
34 | + | ||
35 | +var $listNav = $('#list-nav'), | ||
36 | + | ||
37 | + //导航数据信息 | ||
38 | + navInfo = { | ||
39 | + today: { | ||
40 | + reload: true, | ||
41 | + page: 0, | ||
42 | + end: false | ||
43 | + }, | ||
44 | + week: { | ||
45 | + reload: true, | ||
46 | + page: 0, | ||
47 | + end: false | ||
48 | + }, | ||
49 | + sale: { | ||
50 | + reload: true, | ||
51 | + page: 0, | ||
52 | + end: false | ||
53 | + }, | ||
54 | + all: { | ||
55 | + reload: true, | ||
56 | + page: 0, | ||
57 | + end: false | ||
58 | + } | ||
59 | + }, | ||
60 | + $pre, //纪录进入筛选前的active项 | ||
61 | + searching; | ||
62 | + | ||
63 | +$pgc.addClass('hide'); | ||
64 | +$dgc.addClass('hide'); | ||
65 | +$all.addClass('hide'); | ||
66 | + | ||
67 | +/** | ||
68 | + * 筛选注册的回调,筛选子项点击后逻辑 | ||
69 | + * 需要执行search的场景:1.点选筛选项;2.relaod为true时切换导航;3.下拉加载 | ||
70 | + * @param opt {type, id} | ||
71 | + */ | ||
72 | +function search(opt) { | ||
73 | + var setting = {}, | ||
74 | + ext, | ||
75 | + att, | ||
76 | + nav, navType, | ||
77 | + dayLimit, | ||
78 | + page; | ||
79 | + | ||
80 | + if (opt) { | ||
81 | + | ||
82 | + //筛选项变更则重置reload为true | ||
83 | + for (att in navInfo) { | ||
84 | + if (navInfo.hasOwnProperty(att)) { | ||
85 | + navInfo[att].reload = true; | ||
86 | + } | ||
87 | + } | ||
88 | + | ||
89 | + //处理active状态 | ||
90 | + $listNav.children('.active').removeClass('active'); | ||
91 | + $pre.addClass('active'); | ||
30 | 92 | ||
31 | - if ($this.hasClass('focus')) { | 93 | + switch (opt.type) { |
94 | + case 'gender': | ||
95 | + ext = { | ||
96 | + gender: opt.id | ||
97 | + }; | ||
98 | + break; | ||
99 | + case 'brand': | ||
100 | + ext = { | ||
101 | + brand: opt.id | ||
102 | + }; | ||
103 | + break; | ||
104 | + case 'msort': | ||
105 | + ext = { | ||
106 | + msort: opt.id | ||
107 | + }; | ||
108 | + break; | ||
109 | + case 'color': | ||
110 | + ext = { | ||
111 | + color: opt.id | ||
112 | + }; | ||
113 | + break; | ||
114 | + case 'size': | ||
115 | + ext = { | ||
116 | + size: opt.id | ||
117 | + }; | ||
118 | + break; | ||
119 | + case 'price': | ||
120 | + ext = { | ||
121 | + price: opt.id | ||
122 | + }; | ||
123 | + break; | ||
124 | + case 'discount': | ||
125 | + ext = { | ||
126 | + discount: opt.id | ||
127 | + }; | ||
128 | + break; | ||
129 | + case 'limit': | ||
130 | + ext = { | ||
131 | + limit: opt.id | ||
132 | + }; | ||
133 | + break; | ||
134 | + case 'channel': | ||
135 | + ext = { | ||
136 | + channel: opt.id | ||
137 | + }; | ||
138 | + break; | ||
139 | + case 'p_d': | ||
140 | + ext = { | ||
141 | + p_d: opt.id | ||
142 | + }; | ||
143 | + break; | ||
144 | + } | ||
145 | + | ||
146 | + $.extend(defaultOpt, ext); //扩展筛选项 | ||
147 | + } | ||
148 | + | ||
149 | + if (searching) { | ||
32 | return; | 150 | return; |
33 | } | 151 | } |
34 | 152 | ||
35 | - index = $this.index(); | ||
36 | - pd = getSalePdByChoose(index); | 153 | + //导航类别 |
154 | + if ($pre === undefined || $pre.hasClass('today')) { | ||
155 | + navType = 'today'; | ||
156 | + dayLimit = 1; | ||
157 | + } else if ($pre.hasClass('week')) { | ||
158 | + navType = 'week'; | ||
159 | + dayLimit = 2; | ||
160 | + } else if ($pre.hasClass('sale')) { | ||
161 | + navType = 'sale'; | ||
162 | + dayLimit = 3; | ||
163 | + }else if ($pre.hasClass('all')) { | ||
164 | + navType = 'all'; | ||
165 | + dayLimit = 4; | ||
166 | + } | ||
37 | 167 | ||
38 | - $this.addClass('focus'); | ||
39 | - $curNav.removeClass('focus'); | 168 | + nav = navInfo[navType]; |
40 | 169 | ||
41 | - $goods.not('.hide').addClass('hide'); | ||
42 | - $content = $goods.eq(index); | ||
43 | - $content.removeClass('hide'); | 170 | + page = nav.page + 1; |
171 | + if (nav.reload) { | ||
172 | + page = 1; | ||
173 | + } else if (nav.end) { | ||
44 | 174 | ||
45 | - $curNav = $this; | 175 | + //不需要重新加载并且数据请求结束 |
176 | + return; | ||
177 | + } | ||
46 | 178 | ||
47 | - $(document).trigger('scroll'); //Trigger lazyLoad | ||
48 | -}); | 179 | + $.extend(setting, defaultOpt, { |
180 | + dayLimit: dayLimit, | ||
181 | + page: page | ||
182 | + }); | ||
49 | 183 | ||
50 | -//srcoll to load more | ||
51 | -$(window).scroll(function () { | ||
52 | - if ($(window).scrollTop() + winH >= $(document).height() - loadMoreH) { | ||
53 | - if (loading) { | ||
54 | - return; | ||
55 | - } | ||
56 | - loading = true; | ||
57 | - | ||
58 | - // num = $goodList.children('.good-info').length; | ||
59 | - $.ajax({ | ||
60 | - type: 'GET', | ||
61 | - url: '/product/newsale/selectNewSale', | ||
62 | - data: { | ||
63 | - p_d: pd, | ||
64 | - page: page + 1 | ||
65 | - }, | ||
66 | - success: function(data) { | ||
67 | - if (data === ' ') { | ||
68 | - | ||
69 | - //opt.end = true; | ||
70 | - loading = false; | ||
71 | - return; | 184 | + searching = true; |
185 | + | ||
186 | + $.ajax({ | ||
187 | + type: 'GET', | ||
188 | + url: '/product/newsale/selectNewSale', | ||
189 | + data: setting, | ||
190 | + success: function(data) { | ||
191 | + var noResult = '<p class="no-result">未找到相关搜索结果</p>', | ||
192 | + $container; | ||
193 | + | ||
194 | + switch (navType) { | ||
195 | + case 'today': | ||
196 | + $container = $ngc; | ||
197 | + break; | ||
198 | + case 'week': | ||
199 | + $container = $pgc; | ||
200 | + break; | ||
201 | + case 'sale': | ||
202 | + $container = $dgc; | ||
203 | + break; | ||
204 | + case 'all': | ||
205 | + $container = $all; | ||
206 | + break; | ||
207 | + } | ||
208 | + | ||
209 | + if (data === ' ') { | ||
210 | + nav.end = true; | ||
211 | + | ||
212 | + if (nav.reload) { | ||
213 | + $container.html(noResult); | ||
72 | } | 214 | } |
215 | + } else { | ||
216 | + if (nav.reload) { | ||
217 | + $container.html(data); | ||
218 | + } else { | ||
219 | + $container.append(data); | ||
220 | + } | ||
221 | + | ||
222 | + lazyLoad($container.find('.lazy')); | ||
223 | + } | ||
224 | + | ||
225 | + nav.reload = false; | ||
226 | + nav.page = page; | ||
73 | 227 | ||
74 | - $goodList.append(data); | 228 | + searching = false; |
229 | + } | ||
230 | + }); | ||
231 | + | ||
232 | +} | ||
233 | + | ||
234 | +lazyLoad($('.lazy')); | ||
235 | + | ||
236 | +filter.registerCbFn(search); | ||
237 | + | ||
238 | +//导航栏点击逻辑说明: | ||
239 | +//1.点击非active项时切换active状态 | ||
240 | +//2.价格和折扣active状态时继续点击切换排序 | ||
241 | +//3.筛选无active时点击展开筛选面板 | ||
242 | +//4.筛选有active时点击隐藏筛选面板并恢复点击筛选前active项的active状态 | ||
243 | +//5.当前active为筛选并且点击其他项时,隐藏筛选面板 | ||
244 | +$listNav.delegate('li', 'touchstart', function() { | ||
245 | + var $this = $(this), | ||
246 | + nav, | ||
247 | + navType, | ||
248 | + $active; | ||
249 | + | ||
250 | + if ($this.hasClass('filter')) { | ||
251 | + | ||
252 | + //筛选面板切换状态 | ||
253 | + if ($this.hasClass('active')) { | ||
254 | + filter.hideFilter(); | ||
255 | + | ||
256 | + //点击筛选钱的active项回复active | ||
257 | + $pre.addClass('active'); | ||
258 | + $this.removeClass('active'); | ||
259 | + } else { | ||
260 | + $pre = $this.siblings('.active'); | ||
75 | 261 | ||
76 | - //lazyLoad | ||
77 | - //lazyLoad($goodList.children('.good-info:gt(' + (num - 1) + ')').find('img.lazy')); | ||
78 | - lazyLoad($('.good-info').find('img.lazy')); | 262 | + $pre.removeClass('active'); |
263 | + $this.addClass('active'); | ||
79 | 264 | ||
80 | - loading = false; | ||
81 | - page++; | ||
82 | - }, | ||
83 | - error: function() { | ||
84 | - tip.show('网络断开连接了~'); | ||
85 | - loading = false; | 265 | + filter.showFilter(); |
266 | + } | ||
267 | + } else { | ||
268 | + | ||
269 | + if ($this.hasClass('new')) { | ||
270 | + navType = 'newest'; | ||
271 | + } else if ($this.hasClass('price')) { | ||
272 | + navType = 'price'; | ||
273 | + } else if ($this.hasClass('discount')) { | ||
274 | + navType = 'discount'; | ||
275 | + } | ||
276 | + | ||
277 | + nav = navInfo[navType]; | ||
278 | + | ||
279 | + if ($this.hasClass('active')) { | ||
280 | + | ||
281 | + //最新无排序切换 | ||
282 | + if ($this.hasClass('new')) { | ||
283 | + return; | ||
284 | + } | ||
285 | + | ||
286 | + if ($this.hasClass('price') || $this.hasClass('discount')) { | ||
287 | + | ||
288 | + // 价格/折扣切换排序状态 | ||
289 | + $this.find('.icon > .iconfont').toggleClass('cur'); | ||
290 | + $pre = $this; //更新pre为当前项 | ||
291 | + nav.reload = true; //重置reload,HTML会被替换为逆序的HTML | ||
292 | + nav.order = nav.order === 0 ? 1 : 0; //切换排序 | ||
293 | + } | ||
294 | + } else { | ||
295 | + $active = $this.siblings('.active'); | ||
296 | + | ||
297 | + $pre = $this; //$pre为除筛选导航的其他导航项,若当前active的为筛选,则把$pre置为当前点击项 | ||
298 | + | ||
299 | + if ($active.hasClass('filter')) { | ||
300 | + | ||
301 | + //若之前active项为筛选,则隐藏筛选面板 | ||
302 | + filter.hideFilter(); | ||
303 | + } else { | ||
304 | + | ||
305 | + //切换container显示 | ||
306 | + $goodsContainer.children('.container:not(.hide)').addClass('hide'); | ||
307 | + | ||
308 | + switch (navType) { | ||
309 | + case 'newest': | ||
310 | + $ngc.removeClass('hide'); | ||
311 | + break; | ||
312 | + | ||
313 | + case 'price': | ||
314 | + $pgc.removeClass('hide'); | ||
315 | + break; | ||
316 | + | ||
317 | + case 'discount': | ||
318 | + $dgc.removeClass('hide'); | ||
319 | + break; | ||
320 | + | ||
321 | + case 'all': | ||
322 | + $dgc.removeClass('hide'); | ||
323 | + break; | ||
324 | + } | ||
86 | } | 325 | } |
87 | - }); | ||
88 | - } | ||
89 | 326 | ||
327 | + $active.removeClass('active'); | ||
328 | + $this.addClass('active'); | ||
329 | + } | ||
330 | + | ||
331 | + if (nav.reload) { | ||
332 | + search(); | ||
333 | + } | ||
334 | + } | ||
90 | }); | 335 | }); |
91 | 336 | ||
92 | -/** | ||
93 | - * 根据用户的选择获取商品折扣值 | ||
94 | - * | ||
95 | - * @param int index | ||
96 | - * @return string | ||
97 | - */ | ||
98 | -function getSalePdByChoose(index) { | ||
99 | - var pd = "0.1,0.3"; | ||
100 | - switch (index) { | ||
101 | - case 0: | ||
102 | - pd = "0.1,0.3"; | ||
103 | - break; | ||
104 | - case 1: | ||
105 | - pd = "0.4,0.6"; | ||
106 | - break; | ||
107 | - case 2: | ||
108 | - pd = "0.7,0.9"; | ||
109 | - break; | ||
110 | - case 3: | ||
111 | - pd = "0.1,0.9"; | ||
112 | - break; | 337 | +$(window).scroll(function() { |
338 | + | ||
339 | + //当scroll到1/4$goodsContainer高度后继续请求下一页数据 | ||
340 | + if ($(window).scrollTop() + winH > | ||
341 | + $(document).height() - 0.25 * $goodsContainer.height()) { | ||
342 | + search(); | ||
113 | } | 343 | } |
114 | - return pd; | ||
115 | -} | ||
344 | +}); |
1 | /** | 1 | /** |
2 | - * 商品列表页 | ||
3 | - * @author: xuqi<qi.xu@yoho.cn> | ||
4 | - * @date: 2015/10/20 | 2 | + * 新品到着 |
3 | + * @author: liangzhifeng<zhifeng.liang@yoho.cn> | ||
4 | + * @date: 2015/10/24 | ||
5 | */ | 5 | */ |
6 | 6 | ||
7 | var $ = require('yoho.zepto'), | 7 | var $ = require('yoho.zepto'), |
@@ -144,7 +144,7 @@ function search(opt) { | @@ -144,7 +144,7 @@ function search(opt) { | ||
144 | } | 144 | } |
145 | 145 | ||
146 | //导航类别 | 146 | //导航类别 |
147 | - if ($pre.hasClass('today')) { | 147 | + if ($pre === undefined || $pre.hasClass('today')) { |
148 | navType = 'today'; | 148 | navType = 'today'; |
149 | dayLimit = 1; | 149 | dayLimit = 1; |
150 | } else if ($pre.hasClass('week')) { | 150 | } else if ($pre.hasClass('week')) { |
@@ -264,18 +264,7 @@ $listNav.delegate('li', 'touchstart', function() { | @@ -264,18 +264,7 @@ $listNav.delegate('li', 'touchstart', function() { | ||
264 | nav = navInfo[navType]; | 264 | nav = navInfo[navType]; |
265 | 265 | ||
266 | if ($this.hasClass('active')) { | 266 | if ($this.hasClass('active')) { |
267 | - | ||
268 | - //最新无排序切换 | ||
269 | - if ($this.hasClass('today')) { | ||
270 | - return; | ||
271 | - } | ||
272 | - | ||
273 | - if ($this.hasClass('week') || $this.hasClass('sale')) { | ||
274 | - | ||
275 | - // 价格/折扣切换排序状态 | ||
276 | - $pre = $this; //更新pre为当前项 | ||
277 | - nav.reload = true; //重置reload,HTML会被替换为逆序的HTML | ||
278 | - } | 267 | + |
279 | } else { | 268 | } else { |
280 | $active = $this.siblings('.active'); | 269 | $active = $this.siblings('.active'); |
281 | 270 | ||
@@ -320,6 +309,8 @@ $(window).scroll(function() { | @@ -320,6 +309,8 @@ $(window).scroll(function() { | ||
320 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 | 309 | //当scroll到1/4$goodsContainer高度后继续请求下一页数据 |
321 | if ($(window).scrollTop() + winH > | 310 | if ($(window).scrollTop() + winH > |
322 | $(document).height() - 0.25 * $goodsContainer.height()) { | 311 | $(document).height() - 0.25 * $goodsContainer.height()) { |
323 | - search(); | 312 | + if($pre){ |
313 | + search(); | ||
314 | + } | ||
324 | } | 315 | } |
325 | }); | 316 | }); |
@@ -89,7 +89,7 @@ body.passport-body { | @@ -89,7 +89,7 @@ body.passport-body { | ||
89 | height: 20px; | 89 | height: 20px; |
90 | right: 15px; | 90 | right: 15px; |
91 | top: 16px; | 91 | top: 16px; |
92 | - background-image: url('http://static.dev.yohobuy.com/img/passport/arrow-right.png'); | 92 | + background: image-url('passport/arrow-right.png') no-repeat; |
93 | background-size: 100% 100%; | 93 | background-size: 100% 100%; |
94 | } | 94 | } |
95 | } | 95 | } |
@@ -144,7 +144,7 @@ body.passport-body { | @@ -144,7 +144,7 @@ body.passport-body { | ||
144 | right: 10px; | 144 | right: 10px; |
145 | width: 16px; | 145 | width: 16px; |
146 | height: 16px; | 146 | height: 16px; |
147 | - background-image: url('http://static.dev.yohobuy.com/img/passport/clear-input.png'); | 147 | + background: image-url('passport/clear-input.png') no-repeat; |
148 | background-size: 100% 100%; | 148 | background-size: 100% 100%; |
149 | } | 149 | } |
150 | 150 | ||
@@ -154,11 +154,11 @@ body.passport-body { | @@ -154,11 +154,11 @@ body.passport-body { | ||
154 | right: 10px; | 154 | right: 10px; |
155 | width: 19px; | 155 | width: 19px; |
156 | height: 12px; | 156 | height: 12px; |
157 | - background-image: url('http://static.dev.yohobuy.com/img/passport/eye.png'); | 157 | + background: image-url('passport/eye.png') no-repeat; |
158 | background-size: 100% 100%; | 158 | background-size: 100% 100%; |
159 | 159 | ||
160 | &.close { | 160 | &.close { |
161 | - background-image: url('http://static.dev.yohobuy.com/img/passport/eye-close.png'); | 161 | + background-image: image-url('passport/eye-close.png'); |
162 | } | 162 | } |
163 | } | 163 | } |
164 | 164 |
@@ -31,11 +31,17 @@ | @@ -31,11 +31,17 @@ | ||
31 | <div id="goods-container" class="goods-container"> | 31 | <div id="goods-container" class="goods-container"> |
32 | {{# goodsContainer}} | 32 | {{# goodsContainer}} |
33 | <div class="new-goods container"> | 33 | <div class="new-goods container"> |
34 | + {{#if goods}} | ||
34 | {{# goods}} | 35 | {{# goods}} |
35 | {{> good}} | 36 | {{> good}} |
36 | {{/ goods}} | 37 | {{/ goods}} |
38 | + {{^}} | ||
39 | + <p class="no-result">未找到相关搜索结果</p> | ||
40 | + {{/if}} | ||
37 | </div> | 41 | </div> |
38 | {{/ goodsContainer}} | 42 | {{/ goodsContainer}} |
43 | + | ||
44 | + | ||
39 | 45 | ||
40 | {{> filter}} | 46 | {{> filter}} |
41 | </div> | 47 | </div> |
1 | -{{>layout/header}} | ||
2 | -<div class="discount-page yoho-page"> | ||
3 | - {{# headerBanner}} | 1 | +{{> layout/header}} |
2 | +<div class="good-list-page yoho-page"> | ||
3 | + {{# headerBanner}} | ||
4 | {{> product/banner_swipe_and_single}} | 4 | {{> product/banner_swipe_and_single}} |
5 | - {{/ headerBanner}} | ||
6 | - | ||
7 | - <ul id="discount-nav" class="discount-nav clearfix"> | ||
8 | - {{# tabs}} | ||
9 | - <li class="discount-nav-item {{#focus}}focus{{/focus}}">{{title}}</li> | ||
10 | - {{/ tabs}} | ||
11 | - </ul> | 5 | + {{/ headerBanner}} |
12 | 6 | ||
13 | - <div id="discount-goods-list"> | ||
14 | - {{> product/goods_container}} | ||
15 | - </div> | 7 | + <ul id="list-nav" class="list-nav clearfix"> |
8 | + <li class="today active"> | ||
9 | + <a href="javascript:void(0);"> | ||
10 | + 1-3折 | ||
11 | + <span class="iconfont cur"></span> | ||
12 | + </a> | ||
13 | + </li> | ||
14 | + <li class="week"> | ||
15 | + <a href="javascript:void(0);"> | ||
16 | + 4-6折 | ||
17 | + <span class="icon"> | ||
18 | + <i class="iconfont up"></i> | ||
19 | + <i class="iconfont down cur"></i> | ||
20 | + </span> | ||
21 | + </a> | ||
22 | + </li> | ||
23 | + <li class="sale"> | ||
24 | + <a href="javascript:void(0);"> | ||
25 | + 7-9折 | ||
26 | + <span class="icon"> | ||
27 | + <i class="iconfont up"></i> | ||
28 | + <i class="iconfont down cur"></i> | ||
29 | + </span> | ||
30 | + </a> | ||
31 | + </li> | ||
32 | + <li class="all"> | ||
33 | + <a href="javascript:void(0);"> | ||
34 | + All | ||
35 | + <span class="icon"> | ||
36 | + <i class="iconfont up"></i> | ||
37 | + <i class="iconfont down cur"></i> | ||
38 | + </span> | ||
39 | + </a> | ||
40 | + </li> | ||
41 | + <li class="filter"> | ||
42 | + <a href="javascript:void(0);"> | ||
43 | + 筛选 | ||
44 | + <span class="iconfont"></span> | ||
45 | + </a> | ||
46 | + </li> | ||
47 | + </ul> | ||
16 | 48 | ||
17 | - <div id="load-more-info" class="load-more-info"> | ||
18 | - <div class="loading status hide"> | ||
19 | - 正在加载... | ||
20 | - </div> | ||
21 | - <span class="no-more status hide">没有更多啦</span> | 49 | + <div id="goods-container" class="goods-container"> |
50 | + {{# goodsContainer}} | ||
51 | + <div class="new-goods container"> | ||
52 | + {{# goods}} | ||
53 | + {{> good}} | ||
54 | + {{/ goods}} | ||
55 | + </div> | ||
56 | + {{/ goodsContainer}} | ||
57 | + | ||
58 | + {{> filter}} | ||
22 | </div> | 59 | </div> |
60 | + | ||
61 | + {{#if brand}} | ||
62 | + <input id="brand" type="hidden" value={{brand}}> | ||
63 | + {{/if}} | ||
23 | 64 | ||
24 | -</div> | ||
25 | -{{>layout/footer}} | 65 | + {{#if gender}} |
66 | + <input id="gender" type="hidden" value={{gender}}> | ||
67 | + {{/if}} | ||
68 | + | ||
69 | + {{#if msort}} | ||
70 | + <input id="msort" type="hidden" value={{msort}}> | ||
71 | + {{/if}} | ||
26 | 72 | ||
73 | + {{#if color}} | ||
74 | + <input id="color" type="hidden" value={{color}}> | ||
75 | + {{/if}} | ||
27 | 76 | ||
77 | + {{#if size}} | ||
78 | + <input id="size" type="hidden" value={{size}}> | ||
79 | + {{/if}} | ||
28 | 80 | ||
81 | + {{#if price}} | ||
82 | + <input id="price" type="hidden" value={{price}}> | ||
83 | + {{/if}} | ||
84 | + | ||
85 | + {{#if p_d}} | ||
86 | + <input id="p_d" type="hidden" value={{p_d}}> | ||
87 | + {{/if}} | ||
88 | + | ||
89 | + {{#if channel}} | ||
90 | + <input id="channel" type="hidden" value={{channel}}> | ||
91 | + {{/if}} | ||
92 | + | ||
93 | + {{#if dayLimit}} | ||
94 | + <input id="dayLimit" type="hidden" value={{dayLimit}}> | ||
95 | + {{/if}} | ||
96 | + | ||
97 | + {{#if limit}} | ||
98 | + <input id="limit" type="hidden" value={{limit}}> | ||
99 | + {{/if}} | ||
100 | + | ||
101 | + {{#if page}} | ||
102 | + <input id="page" type="hidden" value={{page}}> | ||
103 | + {{/if}} | ||
104 | + | ||
105 | +</div> | ||
106 | +{{> layout/footer}} |
-
Please register or login to post a comment