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 {
internationalUrl: '/passport/international', // 国际号登录的URL链接
phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
isWechat: req.yoho.isWechat
});
})().catch(next);
}
... ...
... ... @@ -32,6 +32,7 @@ class SmsNew {
internationalUrl: '/passport/international', // 国际号登录的URL链接
phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
isWechat: req.yoho.isWechat
});
})().catch(next);
}
... ...
... ... @@ -176,6 +176,7 @@ const BackNew = require('./controllers/back-new');
const backNew = new BackNew();
router.get('/passport/login',
validateCode.forTest, // 测试使用，上灰度前删除
validateCode.load,
login.common.beforeLogin,
login.common.clearCookie,
... ...
... ... @@ -20,6 +20,7 @@
<span
id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span>
</div>
<div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></div>
<button id="internationalLoginBtn" class="international-login-btn">登录</button>
</div>
</div>
\ No newline at end of file
... ...
... ... @@ -18,7 +18,7 @@
<label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码">
<span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close">&#xe716;</i><i class="iconfont eye-open hide">&#xe714;</i></span>
</div>
<div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check"></div>
<div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></div>
<button id="loginBtn" class="login-btn">登录</button>
<div class="other-info">
<a href="{{internationalUrl}}">海外账号</a>
... ... @@ -33,8 +33,11 @@
<span class="right-line"></span>
</div>
<div class="third-logo-box">
{{#if isWechat}}
<a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a>
{{^}}
<a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a>
{{/if}}
<a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a>
<a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a>
</div>
... ...
... ... @@ -40,8 +40,10 @@
<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>
{{#if isWechat}}
<a href="{{wechatLoginUrl}}" class="iconfont">&#xe728;</a> {{^}}
<a href="{{aliLoginUrl}}" class="iconfont">&#xe72c;</a>
{{/if}}
<a href="{{weiboLoginUrl}}" class="iconfont">&#xe729;</a>
<a href="{{qqLoginUrl}}" class="iconfont">&#xe726;</a>
</div>
... ...
{{!--图片验证--}}
<div class="img-check">
<div class="img-check-header">
<span>请将下列图片点击翻转至正确方向</span>
<span>请将下列图片点击翻转至正向朝上</span>
<a class="img-check-refresh">换一批</a>
</div>
<div class="img-check-main">
... ...
... ... @@ -7,19 +7,12 @@ const showErrTip = tip.show;
const trim = $.trim;
const $captcha = $('#js-img-check');
const useVerify = $captcha.data('userverify'); // 170406 是否使用验证
let validate = {};
if (useVerify) {
validate = new Validate($captcha, {
useREM: {
rootFontSize: 40,
picWidth: 150
}
});
validate.init();
}
const validate = new Validate($captcha, {
useREM: {
rootFontSize: 40,
picWidth: 150
}
});
class InternationalNew extends Page {
constructor() {
... ... @@ -40,6 +33,9 @@ class InternationalNew extends Page {
}
init() {
if ($captcha.data('userverify')) {
validate.init();
}
this.bindEvents();
}
... ...
... ... @@ -35,6 +35,9 @@ class Login {
this.view.getPasswordBox.on('click', this.hiddenGetPasswordBox.bind(this));
this.view.showYohoFamilyTip.on('click', this.showYohoFamilyTip.bind(this));
if ($captcha.data('userverify')) {
validate.init();
}
}
/**
... ...
@import "layout/img-check";
@define-extend padding-75 {
padding-left: 75px;
padding-right: 75px;
... ...
... ... @@ -5,7 +5,6 @@
top: 0;
left: 0;
width: 750px;
height: 290px;
}
@define-extend padding-75 {
... ... @@ -22,6 +21,11 @@
$top-bar-font-color: #fff;
.login-new-page {
input:-webkit-autofill {
background-color: transparent;
background-image: none;
}
.hide {
display: none;
}
... ... @@ -47,6 +51,7 @@ $top-bar-font-color: #fff;
@extend padding-75;
z-index: 2;
height: 100%;
> .top-operation-bar {
width: 600px;
... ... @@ -63,9 +68,9 @@ $top-bar-font-color: #fff;
float: left;
background-color: transparent;
color: $top-bar-font-color;
font-size: 45px;
overflow: hidden;
font-size: 50px;
padding: 0;
margin-top: -2px;
}
}
... ... @@ -82,12 +87,15 @@ $top-bar-font-color: #fff;
}
> .tip {
width: 100%;
margin-top: 152px;
height: 24px;
font-size: 22px;
letter-spacing: 0.9px;
text-align: center;
color: #fffefe;
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
text-align: center;
.iconfont {
color: #fff;
... ... @@ -211,9 +219,9 @@ $top-bar-font-color: #fff;
> .third-logo-box {
margin-top: 49px;
margin-bottom: 60px;
text-align: center;
a {
float: left;
width: 80px;
height: 80px;
margin-right: 93px;
... ... @@ -227,6 +235,33 @@ $top-bar-font-color: #fff;
}
}
.full-img-verify {
margin-top: 70px;
.img-check {
background-color: #fff;
margin-top: 0;
margin-bottom: 0;
.img-check-header > span {
color: #444;
font-size: 21.9px;
line-height: 1.5;
}
.img-check-header > .img-check-refresh {
color: #d0021b;
}
.img-check-main > .img-check-pics > .img-check-pic {
width: 136.6px;
height: 136.8px;
background-color: #fff;
border: solid 1px #e0e0e0;
}
}
}
.get-password-box {
position: fixed;
top: 0;
... ...
... ... @@ -5,7 +5,6 @@
top: 0;
left: 0;
width: 750px;
height: 290px;
}
@define-extend padding-75 {
... ... @@ -23,6 +22,11 @@ $top-bar-font-color: #fff;
$disable-gray: $b0b0b0;
.sms-login-new-page {
input:-webkit-autofill {
background-color: transparent;
background-image: none;
}
.active {
background-color: #444 !important;
}
... ... @@ -48,6 +52,7 @@ $disable-gray: $b0b0b0;
@extend padding-75;
z-index: 2;
height: 100%;
> .top-operation-bar {
width: 600px;
... ... @@ -64,9 +69,9 @@ $disable-gray: $b0b0b0;
float: left;
background-color: transparent;
color: $top-bar-font-color;
font-size: 45px;
overflow: hidden;
font-size: 50px;
padding: 0;
margin-top: -2px;
}
}
... ... @@ -83,12 +88,15 @@ $disable-gray: $b0b0b0;
}
> .tip {
width: 100%;
margin-top: 152px;
height: 24px;
font-size: 22px;
letter-spacing: 0.9px;
text-align: center;
color: #fffefe;
position: absolute;
bottom: 14px;
left: 50%;
transform: translateX(-50%);
text-align: center;
.iconfont {
color: #fff;
... ... @@ -254,9 +262,9 @@ $disable-gray: $b0b0b0;
> .third-logo-box {
margin-top: 49px;
margin-bottom: 60px;
text-align: center;
a {
float: left;
width: 80px;
height: 80px;
margin-right: 93px;
... ...