fe / yohobuywap-node · Commits

Go to a project

Authored by 郭成尧
Commit b233ad7d3c8e6bb6af27e76206c0ff606f4a3a1a 2 parents fe1fd308 60ce8c4e

Merge branch 'feature/loginview' into release/6.0.1

Inline Side-by-side
Showing 6 changed files with 215 additions and 40 deletions
@@ -31,7 +31,7 @@ class Login { @@ -31,7 +31,7 @@ class Login {
31 captchaShow: req.yoho.captchaShow, 31 captchaShow: req.yoho.captchaShow,
32 backUrl: 'javascript:history.go(-1)', // eslint-disable-line 32 backUrl: 'javascript:history.go(-1)', // eslint-disable-line
33 smsLoginUrl: '/passport/sms_login', 33 smsLoginUrl: '/passport/sms_login',
34 - registerUrl: '/passport/reg-new', // 注册的URL链接 34 + registerUrl: '/passport/reg/index', // 注册的URL链接
35 aliLoginUrl: '/passport/login/alipay', // 支付宝快捷登录的URL链接 35 aliLoginUrl: '/passport/login/alipay', // 支付宝快捷登录的URL链接
36 weiboLoginUrl: '/passport/login/sina', // 微博登录的URL链接 36 weiboLoginUrl: '/passport/login/sina', // 微博登录的URL链接
37 qqLoginUrl: '/passport/login/qq', // 腾讯QQ登录的URL链接 37 qqLoginUrl: '/passport/login/qq', // 腾讯QQ登录的URL链接
1 const _ = require('lodash'); 1 const _ = require('lodash');
2 const RegService = require('../models/reg-service'); 2 const RegService = require('../models/reg-service');
  3 +const co = Promise.coroutine;
  4 +const LoginNewModel = require('../models/login-new');
3 5
4 class SmsNew { 6 class SmsNew {
5 - smsLoginPage(req, res) { 7 + smsLoginPage(req, res, next) {
6 _.set(req.session, 'smsLogin.step', 1); 8 _.set(req.session, 'smsLogin.step', 1);
7 9
8 if (req.session.captchaValidCount == null) { // eslint-disable-line 10 if (req.session.captchaValidCount == null) { // eslint-disable-line
9 req.session.captchaValidCount = 5; 11 req.session.captchaValidCount = 5;
10 } 12 }
11 13
12 - res.render('sms/sms-login-new', {  
13 - module: 'passport',  
14 - page: 'sms-login-new',  
15 - width750: true,  
16 - localCss: true,  
17 - countrys: RegService.getAreaData(), // 地区信息列表  
18 - }); 14 + co(function* () {
  15 + let bannerData = yield req.ctx(LoginNewModel).getTopBanner();
  16 + let banner = _.get(bannerData, 'result.data[0].data.list[0]', '');
  17 +
  18 + res.render('sms/sms-login-new', {
  19 + module: 'passport',
  20 + page: 'sms-login-new',
  21 + width750: true,
  22 + localCss: true,
  23 + banner: banner,
  24 + countrys: RegService.getAreaData(), // 地区信息列表
  25 + backUrl: 'javascript:history.go(-1)', // eslint-disable-line
  26 + loginUrl: '/passport/login',
  27 + registerUrl: '/passport/reg/index', // 注册的URL链接
  28 + aliLoginUrl: '/passport/login/alipay', // 支付宝快捷登录的URL链接
  29 + weiboLoginUrl: '/passport/login/sina', // 微博登录的URL链接
  30 + qqLoginUrl: '/passport/login/qq', // 腾讯QQ登录的URL链接
  31 + wechatLoginUrl: '/passport/login/wechat', // 微信登录的URL链接
  32 + internationalUrl: '/passport/international-new', // 国际号登录的URL链接
  33 + phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
  34 + emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
  35 + });
  36 + })().catch(next);
19 } 37 }
20 } 38 }
21 39
@@ -22,7 +22,7 @@ class LoginNewModel extends global.yoho.BaseModel { @@ -22,7 +22,7 @@ class LoginNewModel extends global.yoho.BaseModel {
22 22
23 return serviceApi.get('operations/api/v5/resource/get', { 23 return serviceApi.get('operations/api/v5/resource/get', {
24 content_code: resource 24 content_code: resource
25 - }); 25 + }, {cache: true});
26 } 26 }
27 } 27 }
28 28
@@ -201,8 +201,10 @@ router.get('/passport/sms_login', @@ -201,8 +201,10 @@ router.get('/passport/sms_login',
201 201
202 // 兼容老的路由 202 // 兼容老的路由
203 router.get('/signin.html', 203 router.get('/signin.html',
  204 + login.common.weixinCheck,
204 validateCode.forTest, // 测试使用，上灰度前删除 205 validateCode.forTest, // 测试使用，上灰度前删除
205 validateCode.load, 206 validateCode.load,
  207 + login.common.beforeLogin,
206 smsNew.smsLoginPage); // 短信验证码登录 208 smsNew.smsLoginPage); // 短信验证码登录
207 router.get('/reg.html', 209 router.get('/reg.html',
208 validateCode.forTest, // 测试使用，上灰度前删除 210 validateCode.forTest, // 测试使用，上灰度前删除
1 <div class="sms-login-new-page"> 1 <div class="sms-login-new-page">
2 - <div class="top-operation-bar">  
3 - <button class="back iconfont">&#xe72e;</button>  
4 - <span class="page-title">手机验证码登录</span>  
5 - <button class="close iconfont">&#xe72d;</button> 2 + <div class="banner-box">
  3 + <img src="{{banner}}">
  4 + <div class="banner-info">
  5 + <div class="top-operation-bar">
  6 + <button class="close iconfont" onclick="location.href='{{backUrl}}'">&#xe72d;</button>
  7 + <a href="{{registerUrl}}" class="register">注册</a>
  8 + </div>
  9 + <div class="yoho-family-logo"></div>
  10 + <div class="tip">Yoho!Family账号可登录Yoho!Buy有货 <i class="iconfont">&#xe639;</i></div>
  11 + </div>
6 </div> 12 </div>
7 <div class="sms-login-form"> 13 <div class="sms-login-form">
8 <div class="form-group mobile"> 14 <div class="form-group mobile">
@@ -20,7 +26,31 @@ @@ -20,7 +26,31 @@
20 <label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码" 26 <label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
21 class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button> 27 class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button>
22 </div> 28 </div>
  29 + <div class="other-info">
  30 + <a href="{{internationalUrl}}">海外账号</a>
  31 + <a href="{{loginUrl}}">账号密码登录</a>
  32 + <a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a>
  33 + </div>
23 <div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div> 34 <div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>
24 <button id="smsLoginBtn" class="sms-login-btn">登录</button> 35 <button id="smsLoginBtn" class="sms-login-btn">登录</button>
25 </div> 36 </div>
  37 + <div class="third-party-login">
  38 + <div class="tip-box">
  39 + <span class="left-line"></span>
  40 + <span class="tip">使用第三方登录</span>
  41 + <span class="right-line"></span>
  42 + </div>
  43 + <div class="third-logo-box">
  44 + <a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a>
  45 + <a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a>
  46 + <a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a>
  47 + <a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a>
  48 + </div>
  49 + </div>
  50 + <div class="get-password-box hide">
  51 + <div class="bottom-button-box">
  52 + <a class="by-email" onclick="location.href='{{emailRetriveUrl}}'">邮箱找回</a>
  53 + <a class="by-mobile" onclick="location.href='{{phoneRetriveUrl}}'">手机找回</a>
  54 + </div>
  55 + </div>
26 </div> 56 </div>
  1 +@define-extend banner-box-elem {
  2 + position: absolute;
  3 + top: 0;
  4 + left: 0;
  5 + width: 750px;
  6 + height: 400px;
  7 +}
  8 +
1 @define-extend padding-75 { 9 @define-extend padding-75 {
2 padding-left: 75px; 10 padding-left: 75px;
3 padding-right: 75px; 11 padding-right: 75px;
4 } 12 }
5 13
  14 +@define-extend third-line {
  15 + width: 187px;
  16 + border-top: 1px solid #b0b0b0;
  17 + margin-top: 18px;
  18 +}
  19 +
6 $top-bar-font-color: #444; 20 $top-bar-font-color: #444;
7 $disable-gray: $b0b0b0; 21 $disable-gray: $b0b0b0;
8 22
9 .sms-login-new-page { 23 .sms-login-new-page {
10 - @extend padding-75;  
11 -  
12 .active { 24 .active {
13 background-color: #444 !important; 25 background-color: #444 !important;
14 } 26 }
@@ -17,40 +29,79 @@ $disable-gray: $b0b0b0; @@ -17,40 +29,79 @@ $disable-gray: $b0b0b0;
17 color: #444; 29 color: #444;
18 } 30 }
19 31
20 - .top-operation-bar {  
21 - width: 600px;  
22 - height: 50px;  
23 - margin-top: 50px;  
24 - color: $top-bar-font-color; 32 + .banner-box {
  33 + width: 750px;
  34 + height: 400px;
  35 + overflow: hidden;
  36 + position: relative;
25 37
26 - > button {  
27 - height: 50px;  
28 - width: 50px;  
29 - background-color: transparent;  
30 - font-size: 45px;  
31 - overflow: hidden;  
32 - padding: 0;  
33 - text-align: center;  
34 -  
35 - &.back {  
36 - float: left; 38 + img {
  39 + @extend banner-box-elem;
  40 +
  41 + z-index: 1;
  42 + }
  43 +
  44 + .banner-info {
  45 + @extend banner-box-elem;
  46 + @extend padding-75;
  47 +
  48 + z-index: 2;
  49 +
  50 + > .top-operation-bar {
  51 + width: 600px;
  52 + height: 50px;
  53 + margin-top: 50px;
  54 + }
  55 +
  56 + > .top-operation-bar > button {
  57 + height: 50px;
  58 + text-align: center;
  59 +
  60 + &.close {
  61 + width: 50px;
  62 + float: left;
  63 + background-color: transparent;
  64 + color: $top-bar-font-color;
  65 + font-size: 45px;
  66 + overflow: hidden;
  67 + padding: 0;
  68 + }
37 } 69 }
38 70
39 - &.close { 71 + .register {
  72 + width: 110px;
  73 + height: 50px;
  74 + line-height: 50px;
  75 + border-radius: 25px;
  76 + background-color: transparent;
  77 + color: $top-bar-font-color;
  78 + border: solid 1px $top-bar-font-color;
40 float: right; 79 float: right;
  80 + text-align: center;
41 } 81 }
42 - }  
43 82
44 - > .page-title {  
45 - width: 500px;  
46 - font-size: 34px;  
47 - text-align: center;  
48 - display: inline-block;  
49 - margin-top: 7px; 83 + > .yoho-family-logo {
  84 + background: resolve("passport/yoho-family.png") no-repeat;
  85 + background-size: contain;
  86 + margin: 82px auto 0;
  87 + width: 200px;
  88 + height: 115px;
  89 + }
  90 +
  91 + > .tip {
  92 + margin-top: 50px;
  93 + height: 24px;
  94 + font-size: 22px;
  95 + letter-spacing: 0.9px;
  96 + text-align: center;
  97 + color: #fffefe;
  98 + }
50 } 99 }
51 } 100 }
52 101
53 .sms-login-form { 102 .sms-login-form {
  103 + @extend padding-75;
  104 +
54 margin-top: 100px; 105 margin-top: 100px;
55 106
56 > .form-group { 107 > .form-group {
@@ -135,6 +186,28 @@ $disable-gray: $b0b0b0; @@ -135,6 +186,28 @@ $disable-gray: $b0b0b0;
135 } 186 }
136 } 187 }
137 188
  189 + .other-info {
  190 + width: 600px;
  191 + font-size: 24px;
  192 + line-height: 1.33;
  193 + color: #444;
  194 + margin-top: 30px;
  195 +
  196 + a {
  197 + float: left;
  198 + width: 200px;
  199 + text-align: center;
  200 + }
  201 +
  202 + a:first-child {
  203 + text-align: left;
  204 + }
  205 +
  206 + a:last-child {
  207 + text-align: right;
  208 + }
  209 + }
  210 +
138 .sms-login-btn { 211 .sms-login-btn {
139 width: 600px; 212 width: 600px;
140 height: 70px; 213 height: 70px;
@@ -146,6 +219,58 @@ $disable-gray: $b0b0b0; @@ -146,6 +219,58 @@ $disable-gray: $b0b0b0;
146 } 219 }
147 } 220 }
148 221
  222 + .third-party-login {
  223 + @extend padding-75;
  224 +
  225 + margin-top: 236px;
  226 + text-align: center;
  227 +
  228 + > .tip-box {
  229 + span {
  230 + display: inline-block;
  231 + }
  232 +
  233 + .left-line {
  234 + @extend third-line;
  235 +
  236 + float: left;
  237 + }
  238 +
  239 + .right-line {
  240 + @extend third-line;
  241 +
  242 + float: right;
  243 + }
  244 +
  245 + .tip {
  246 + margin-left: auto;
  247 + margin-right: auto;
  248 + width: 168px;
  249 + height: 23px;
  250 + font-size: 24px;
  251 + line-height: 1.33;
  252 + color: #b0b0b0;
  253 + }
  254 + }
  255 +
  256 + > .third-logo-box {
  257 + margin-top: 49px;
  258 +
  259 + a {
  260 + float: left;
  261 + width: 80px;
  262 + height: 80px;
  263 + margin-right: 93px;
  264 + background-color: transparent;
  265 + font-size: 80px;
  266 +
  267 + &:last-child {
  268 + margin-right: 0;
  269 + }
  270 + }
  271 + }
  272 + }
  273 +
149 .full-img-verify { 274 .full-img-verify {
150 padding-left: 30px; 275 padding-left: 30px;
151 padding-right: 30px; 276 padding-right: 30px;