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 {
captchaShow: req.yoho.captchaShow,
backUrl: 'javascript:history.go(-1)', // eslint-disable-line
smsLoginUrl: '/passport/sms_login',
registerUrl: '/passport/reg-new', // 注册的URL链接
registerUrl: '/passport/reg/index', // 注册的URL链接
aliLoginUrl: '/passport/login/alipay', // 支付宝快捷登录的URL链接
weiboLoginUrl: '/passport/login/sina', // 微博登录的URL链接
qqLoginUrl: '/passport/login/qq', // 腾讯QQ登录的URL链接
... ...
const _ = require('lodash');
const RegService = require('../models/reg-service');
const co = Promise.coroutine;
const LoginNewModel = require('../models/login-new');
class SmsNew {
smsLoginPage(req, res) {
smsLoginPage(req, res, next) {
_.set(req.session, 'smsLogin.step', 1);
if (req.session.captchaValidCount == null) { // eslint-disable-line
req.session.captchaValidCount = 5;
}
res.render('sms/sms-login-new', {
module: 'passport',
page: 'sms-login-new',
width750: true,
localCss: true,
countrys: RegService.getAreaData(), // 地区信息列表
});
co(function* () {
let bannerData = yield req.ctx(LoginNewModel).getTopBanner();
let banner = _.get(bannerData, 'result.data[0].data.list[0]', '');
res.render('sms/sms-login-new', {
module: 'passport',
page: 'sms-login-new',
width750: true,
localCss: true,
banner: banner,
countrys: RegService.getAreaData(), // 地区信息列表
backUrl: 'javascript:history.go(-1)', // eslint-disable-line
loginUrl: '/passport/login',
registerUrl: '/passport/reg/index', // 注册的URL链接
aliLoginUrl: '/passport/login/alipay', // 支付宝快捷登录的URL链接
weiboLoginUrl: '/passport/login/sina', // 微博登录的URL链接
qqLoginUrl: '/passport/login/qq', // 腾讯QQ登录的URL链接
wechatLoginUrl: '/passport/login/wechat', // 微信登录的URL链接
internationalUrl: '/passport/international-new', // 国际号登录的URL链接
phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
});
})().catch(next);
}
}
... ...
... ... @@ -22,7 +22,7 @@ class LoginNewModel extends global.yoho.BaseModel {
return serviceApi.get('operations/api/v5/resource/get', {
content_code: resource
});
}, {cache: true});
}
}
... ...
... ... @@ -201,8 +201,10 @@ router.get('/passport/sms_login',
// 兼容老的路由
router.get('/signin.html',
login.common.weixinCheck,
validateCode.forTest, // 测试使用，上灰度前删除
validateCode.load,
login.common.beforeLogin,
smsNew.smsLoginPage); // 短信验证码登录
router.get('/reg.html',
validateCode.forTest, // 测试使用，上灰度前删除
... ...
<div class="sms-login-new-page">
<div class="top-operation-bar">
<button class="back iconfont">&#xe72e;</button>
<span class="page-title">手机验证码登录</span>
<button class="close iconfont">&#xe72d;</button>
<div class="banner-box">
<img src="{{banner}}">
<div class="banner-info">
<div class="top-operation-bar">
<button class="close iconfont" onclick="location.href='{{backUrl}}'">&#xe72d;</button>
<a href="{{registerUrl}}" class="register">注册</a>
</div>
<div class="yoho-family-logo"></div>
<div class="tip">Yoho!Family账号可登录Yoho!Buy有货 <i class="iconfont">&#xe639;</i></div>
</div>
</div>
<div class="sms-login-form">
<div class="form-group mobile">
... ... @@ -20,7 +26,31 @@
<label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
class="verify-code-input"><button id="getVerifyCodeBtn" class="get-verify-code">获取验证码</button>
</div>
<div class="other-info">
<a href="{{internationalUrl}}">海外账号</a>
<a href="{{loginUrl}}">账号密码登录</a>
<a id="getPswrdBtn" href="javascript:void(0);">忘记密码?</a>
</div>
<div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify hide" {{/unless}}></div>
<button id="smsLoginBtn" class="sms-login-btn">登录</button>
</div>
<div class="third-party-login">
<div class="tip-box">
<span class="left-line"></span>
<span class="tip">使用第三方登录</span>
<span class="right-line"></span>
</div>
<div class="third-logo-box">
<a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a>
<a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a>
<a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a>
<a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a>
</div>
</div>
<div class="get-password-box hide">
<div class="bottom-button-box">
<a class="by-email" onclick="location.href='{{emailRetriveUrl}}'">邮箱找回</a>
<a class="by-mobile" onclick="location.href='{{phoneRetriveUrl}}'">手机找回</a>
</div>
</div>
</div>
\ No newline at end of file
... ...
@define-extend banner-box-elem {
position: absolute;
top: 0;
left: 0;
width: 750px;
height: 400px;
}
@define-extend padding-75 {
padding-left: 75px;
padding-right: 75px;
}
@define-extend third-line {
width: 187px;
border-top: 1px solid #b0b0b0;
margin-top: 18px;
}
$top-bar-font-color: #444;
$disable-gray: $b0b0b0;
.sms-login-new-page {
@extend padding-75;
.active {
background-color: #444 !important;
}
... ... @@ -17,40 +29,79 @@ $disable-gray: $b0b0b0;
color: #444;
}
.top-operation-bar {
width: 600px;
height: 50px;
margin-top: 50px;
color: $top-bar-font-color;
.banner-box {
width: 750px;
height: 400px;
overflow: hidden;
position: relative;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
overflow: hidden;
padding: 0;
text-align: center;
&.back {
float: left;
img {
@extend banner-box-elem;
z-index: 1;
}
.banner-info {
@extend banner-box-elem;
@extend padding-75;
z-index: 2;
> .top-operation-bar {
width: 600px;
height: 50px;
margin-top: 50px;
}
> .top-operation-bar > button {
height: 50px;
text-align: center;
&.close {
width: 50px;
float: left;
background-color: transparent;
color: $top-bar-font-color;
font-size: 45px;
overflow: hidden;
padding: 0;
}
}
&.close {
.register {
width: 110px;
height: 50px;
line-height: 50px;
border-radius: 25px;
background-color: transparent;
color: $top-bar-font-color;
border: solid 1px $top-bar-font-color;
float: right;
text-align: center;
}
}
> .page-title {
width: 500px;
font-size: 34px;
text-align: center;
display: inline-block;
margin-top: 7px;
> .yoho-family-logo {
background: resolve("passport/yoho-family.png") no-repeat;
background-size: contain;
margin: 82px auto 0;
width: 200px;
height: 115px;
}
> .tip {
margin-top: 50px;
height: 24px;
font-size: 22px;
letter-spacing: 0.9px;
text-align: center;
color: #fffefe;
}
}
}
.sms-login-form {
@extend padding-75;
margin-top: 100px;
> .form-group {
... ... @@ -135,6 +186,28 @@ $disable-gray: $b0b0b0;
}
}
.other-info {
width: 600px;
font-size: 24px;
line-height: 1.33;
color: #444;
margin-top: 30px;
a {
float: left;
width: 200px;
text-align: center;
}
a:first-child {
text-align: left;
}
a:last-child {
text-align: right;
}
}
.sms-login-btn {
width: 600px;
height: 70px;
... ... @@ -146,6 +219,58 @@ $disable-gray: $b0b0b0;
}
}
.third-party-login {
@extend padding-75;
margin-top: 236px;
text-align: center;
> .tip-box {
span {
display: inline-block;
}
.left-line {
@extend third-line;
float: left;
}
.right-line {
@extend third-line;
float: right;
}
.tip {
margin-left: auto;
margin-right: auto;
width: 168px;
height: 23px;
font-size: 24px;
line-height: 1.33;
color: #b0b0b0;
}
}
> .third-logo-box {
margin-top: 49px;
a {
float: left;
width: 80px;
height: 80px;
margin-right: 93px;
background-color: transparent;
font-size: 80px;
&:last-child {
margin-right: 0;
}
}
}
}
.full-img-verify {
padding-left: 30px;
padding-right: 30px;
... ...