fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit 921aaa13c42ba1c8ba249a660825a07b7277efae 2 parents 222a0fb5 6400f34f

Merge branch 'feature/loginview' into release/6.0.1

Inline Side-by-side
Showing 12 changed files with 84 additions and 31 deletions
@@ -39,6 +39,7 @@ class Login { @@ -39,6 +39,7 @@ class Login {
39 internationalUrl: '/passport/international', // 国际号登录的URL链接 39 internationalUrl: '/passport/international', // 国际号登录的URL链接
40 phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接 40 phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
41 emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接 41 emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
  42 + isWechat: req.yoho.isWechat
42 }); 43 });
43 })().catch(next); 44 })().catch(next);
44 } 45 }
@@ -32,6 +32,7 @@ class SmsNew { @@ -32,6 +32,7 @@ class SmsNew {
32 internationalUrl: '/passport/international', // 国际号登录的URL链接 32 internationalUrl: '/passport/international', // 国际号登录的URL链接
33 phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接 33 phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
34 emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接 34 emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
  35 + isWechat: req.yoho.isWechat
35 }); 36 });
36 })().catch(next); 37 })().catch(next);
37 } 38 }
@@ -176,6 +176,7 @@ const BackNew = require('./controllers/back-new'); @@ -176,6 +176,7 @@ const BackNew = require('./controllers/back-new');
176 const backNew = new BackNew(); 176 const backNew = new BackNew();
177 177
178 router.get('/passport/login', 178 router.get('/passport/login',
  179 + validateCode.forTest, // 测试使用，上灰度前删除
179 validateCode.load, 180 validateCode.load,
180 login.common.beforeLogin, 181 login.common.beforeLogin,
181 login.common.clearCookie, 182 login.common.clearCookie,
@@ -20,6 +20,7 @@ @@ -20,6 +20,7 @@
20 <span 20 <span
21 id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span> 21 id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span>
22 </div> 22 </div>
  23 + <div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></div>
23 <button id="internationalLoginBtn" class="international-login-btn">登录</button> 24 <button id="internationalLoginBtn" class="international-login-btn">登录</button>
24 </div> 25 </div>
25 </div> 26 </div>
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 <label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码"> 18 <label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码">
19 <span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span> 19 <span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span>
20 </div> 20 </div>
21 - <div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check"></div> 21 + <div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></div>
22 <button id="loginBtn" class="login-btn">登录</button> 22 <button id="loginBtn" class="login-btn">登录</button>
23 <div class="other-info"> 23 <div class="other-info">
24 <a href="{{internationalUrl}}">海外账号</a> 24 <a href="{{internationalUrl}}">海外账号</a>
@@ -33,8 +33,11 @@ @@ -33,8 +33,11 @@
33 <span class="right-line"></span> 33 <span class="right-line"></span>
34 </div> 34 </div>
35 <div class="third-logo-box"> 35 <div class="third-logo-box">
  36 + {{#if isWechat}}
36 <a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a> 37 <a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a>
  38 + {{^}}
37 <a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a> 39 <a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a>
  40 + {{/if}}
38 <a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a> 41 <a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a>
39 <a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a> 42 <a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a>
40 </div> 43 </div>
@@ -40,8 +40,10 @@ @@ -40,8 +40,10 @@
40 <span class="right-line"></span> 40 <span class="right-line"></span>
41 </div> 41 </div>
42 <div class="third-logo-box"> 42 <div class="third-logo-box">
43 - <a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a>  
44 - <a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a> 43 + {{#if isWechat}}
  44 + <a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a> {{^}}
  45 + <a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a>
  46 + {{/if}}
45 <a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a> 47 <a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a>
46 <a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a> 48 <a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a>
47 </div> 49 </div>
1 {{!--图片验证--}} 1 {{!--图片验证--}}
2 <div class="img-check"> 2 <div class="img-check">
3 <div class="img-check-header"> 3 <div class="img-check-header">
4 - <span>请将下列图片点击翻转至正确方向</span> 4 + <span>请将下列图片点击翻转至正向朝上</span>
5 <a class="img-check-refresh">换一批</a> 5 <a class="img-check-refresh">换一批</a>
6 </div> 6 </div>
7 <div class="img-check-main"> 7 <div class="img-check-main">
@@ -7,19 +7,12 @@ const showErrTip = tip.show; @@ -7,19 +7,12 @@ const showErrTip = tip.show;
7 const trim = $.trim; 7 const trim = $.trim;
8 const $captcha = $('#js-img-check'); 8 const $captcha = $('#js-img-check');
9 const useVerify = $captcha.data('userverify'); // 170406 是否使用验证 9 const useVerify = $captcha.data('userverify'); // 170406 是否使用验证
10 -  
11 -let validate = {};  
12 -  
13 -if (useVerify) {  
14 - validate = new Validate($captcha, {  
15 - useREM: {  
16 - rootFontSize: 40,  
17 - picWidth: 150  
18 - }  
19 - });  
20 -  
21 - validate.init();  
22 -} 10 +const validate = new Validate($captcha, {
  11 + useREM: {
  12 + rootFontSize: 40,
  13 + picWidth: 150
  14 + }
  15 +});
23 16
24 class InternationalNew extends Page { 17 class InternationalNew extends Page {
25 constructor() { 18 constructor() {
@@ -40,6 +33,9 @@ class InternationalNew extends Page { @@ -40,6 +33,9 @@ class InternationalNew extends Page {
40 } 33 }
41 34
42 init() { 35 init() {
  36 + if ($captcha.data('userverify')) {
  37 + validate.init();
  38 + }
43 this.bindEvents(); 39 this.bindEvents();
44 } 40 }
45 41
@@ -35,6 +35,9 @@ class Login { @@ -35,6 +35,9 @@ class Login {
35 this.view.getPasswordBox.on('click', this.hiddenGetPasswordBox.bind(this)); 35 this.view.getPasswordBox.on('click', this.hiddenGetPasswordBox.bind(this));
36 this.view.showYohoFamilyTip.on('click', this.showYohoFamilyTip.bind(this)); 36 this.view.showYohoFamilyTip.on('click', this.showYohoFamilyTip.bind(this));
37 37
  38 + if ($captcha.data('userverify')) {
  39 + validate.init();
  40 + }
38 } 41 }
39 42
40 /** 43 /**
  1 +@import "layout/img-check";
  2 +
1 @define-extend padding-75 { 3 @define-extend padding-75 {
2 padding-left: 75px; 4 padding-left: 75px;
3 padding-right: 75px; 5 padding-right: 75px;
@@ -5,7 +5,6 @@ @@ -5,7 +5,6 @@
5 top: 0; 5 top: 0;
6 left: 0; 6 left: 0;
7 width: 750px; 7 width: 750px;
8 - height: 290px;  
9 } 8 }
10 9
11 @define-extend padding-75 { 10 @define-extend padding-75 {
@@ -22,6 +21,11 @@ @@ -22,6 +21,11 @@
22 $top-bar-font-color: #fff; 21 $top-bar-font-color: #fff;
23 22
24 .login-new-page { 23 .login-new-page {
  24 + input:-webkit-autofill {
  25 + background-color: transparent;
  26 + background-image: none;
  27 + }
  28 +
25 .hide { 29 .hide {
26 display: none; 30 display: none;
27 } 31 }
@@ -47,6 +51,7 @@ $top-bar-font-color: #fff; @@ -47,6 +51,7 @@ $top-bar-font-color: #fff;
47 @extend padding-75; 51 @extend padding-75;
48 52
49 z-index: 2; 53 z-index: 2;
  54 + height: 100%;
50 55
51 > .top-operation-bar { 56 > .top-operation-bar {
52 width: 600px; 57 width: 600px;
@@ -63,9 +68,9 @@ $top-bar-font-color: #fff; @@ -63,9 +68,9 @@ $top-bar-font-color: #fff;
63 float: left; 68 float: left;
64 background-color: transparent; 69 background-color: transparent;
65 color: $top-bar-font-color; 70 color: $top-bar-font-color;
66 - font-size: 45px;  
67 - overflow: hidden; 71 + font-size: 50px;
68 padding: 0; 72 padding: 0;
  73 + margin-top: -2px;
69 } 74 }
70 } 75 }
71 76
@@ -82,12 +87,15 @@ $top-bar-font-color: #fff; @@ -82,12 +87,15 @@ $top-bar-font-color: #fff;
82 } 87 }
83 88
84 > .tip { 89 > .tip {
  90 + width: 100%;
85 margin-top: 152px; 91 margin-top: 152px;
86 - height: 24px;  
87 font-size: 22px; 92 font-size: 22px;
88 - letter-spacing: 0.9px;  
89 - text-align: center;  
90 color: #fffefe; 93 color: #fffefe;
  94 + position: absolute;
  95 + bottom: 14px;
  96 + left: 50%;
  97 + transform: translateX(-50%);
  98 + text-align: center;
91 99
92 .iconfont { 100 .iconfont {
93 color: #fff; 101 color: #fff;
@@ -211,9 +219,9 @@ $top-bar-font-color: #fff; @@ -211,9 +219,9 @@ $top-bar-font-color: #fff;
211 > .third-logo-box { 219 > .third-logo-box {
212 margin-top: 49px; 220 margin-top: 49px;
213 margin-bottom: 60px; 221 margin-bottom: 60px;
  222 + text-align: center;
214 223
215 a { 224 a {
216 - float: left;  
217 width: 80px; 225 width: 80px;
218 height: 80px; 226 height: 80px;
219 margin-right: 93px; 227 margin-right: 93px;
@@ -227,6 +235,33 @@ $top-bar-font-color: #fff; @@ -227,6 +235,33 @@ $top-bar-font-color: #fff;
227 } 235 }
228 } 236 }
229 237
  238 + .full-img-verify {
  239 + margin-top: 70px;
  240 +
  241 + .img-check {
  242 + background-color: #fff;
  243 + margin-top: 0;
  244 + margin-bottom: 0;
  245 +
  246 + .img-check-header > span {
  247 + color: #444;
  248 + font-size: 21.9px;
  249 + line-height: 1.5;
  250 + }
  251 +
  252 + .img-check-header > .img-check-refresh {
  253 + color: #d0021b;
  254 + }
  255 +
  256 + .img-check-main > .img-check-pics > .img-check-pic {
  257 + width: 136.6px;
  258 + height: 136.8px;
  259 + background-color: #fff;
  260 + border: solid 1px #e0e0e0;
  261 + }
  262 + }
  263 + }
  264 +
230 .get-password-box { 265 .get-password-box {
231 position: fixed; 266 position: fixed;
232 top: 0; 267 top: 0;
@@ -5,7 +5,6 @@ @@ -5,7 +5,6 @@
5 top: 0; 5 top: 0;
6 left: 0; 6 left: 0;
7 width: 750px; 7 width: 750px;
8 - height: 290px;  
9 } 8 }
10 9
11 @define-extend padding-75 { 10 @define-extend padding-75 {
@@ -23,6 +22,11 @@ $top-bar-font-color: #fff; @@ -23,6 +22,11 @@ $top-bar-font-color: #fff;
23 $disable-gray: $b0b0b0; 22 $disable-gray: $b0b0b0;
24 23
25 .sms-login-new-page { 24 .sms-login-new-page {
  25 + input:-webkit-autofill {
  26 + background-color: transparent;
  27 + background-image: none;
  28 + }
  29 +
26 .active { 30 .active {
27 background-color: #444 !important; 31 background-color: #444 !important;
28 } 32 }
@@ -48,6 +52,7 @@ $disable-gray: $b0b0b0; @@ -48,6 +52,7 @@ $disable-gray: $b0b0b0;
48 @extend padding-75; 52 @extend padding-75;
49 53
50 z-index: 2; 54 z-index: 2;
  55 + height: 100%;
51 56
52 > .top-operation-bar { 57 > .top-operation-bar {
53 width: 600px; 58 width: 600px;
@@ -64,9 +69,9 @@ $disable-gray: $b0b0b0; @@ -64,9 +69,9 @@ $disable-gray: $b0b0b0;
64 float: left; 69 float: left;
65 background-color: transparent; 70 background-color: transparent;
66 color: $top-bar-font-color; 71 color: $top-bar-font-color;
67 - font-size: 45px;  
68 - overflow: hidden; 72 + font-size: 50px;
69 padding: 0; 73 padding: 0;
  74 + margin-top: -2px;
70 } 75 }
71 } 76 }
72 77
@@ -83,12 +88,15 @@ $disable-gray: $b0b0b0; @@ -83,12 +88,15 @@ $disable-gray: $b0b0b0;
83 } 88 }
84 89
85 > .tip { 90 > .tip {
  91 + width: 100%;
86 margin-top: 152px; 92 margin-top: 152px;
87 - height: 24px;  
88 font-size: 22px; 93 font-size: 22px;
89 - letter-spacing: 0.9px;  
90 - text-align: center;  
91 color: #fffefe; 94 color: #fffefe;
  95 + position: absolute;
  96 + bottom: 14px;
  97 + left: 50%;
  98 + transform: translateX(-50%);
  99 + text-align: center;
92 100
93 .iconfont { 101 .iconfont {
94 color: #fff; 102 color: #fff;
@@ -254,9 +262,9 @@ $disable-gray: $b0b0b0; @@ -254,9 +262,9 @@ $disable-gray: $b0b0b0;
254 > .third-logo-box { 262 > .third-logo-box {
255 margin-top: 49px; 263 margin-top: 49px;
256 margin-bottom: 60px; 264 margin-bottom: 60px;
  265 + text-align: center;
257 266
258 a { 267 a {
259 - float: left;  
260 width: 80px; 268 width: 80px;
261 height: 80px; 269 height: 80px;
262 margin-right: 93px; 270 margin-right: 93px;