fe / yohobuywap-node · Commits

Go to a project

Authored by 毕凯
Commit 341971e36f845f95502d1e2f94104a3997c1cd3c 2 parents 4b2ebf59 bb1e193b

Merge branch 'feature/loginview' into 'release/6.0.1' 

ue-modified



See merge request !825
Inline Side-by-side
Showing 21 changed files with 102 additions and 67 deletions
... ... @@ -70,7 +70,7 @@ exports.validate = (req, res, next) => {
let jsonData = {
code: 400,
message: '请将图片旋转到正确方向',
message: '请将所有图片点击翻转至正向朝上',
captchaShow: true
};
... ...
... ... @@ -12,8 +12,8 @@
{{/ countrys}}
</select>
<i class="iconfont arrow-icon">&#xe613;</i>
<i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="mobile-input"><i id="clearMobile"
class="iconfont clear">&#xe72a;</i>
<i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号" class="mobile-input"><i id="clearMobile"
class="iconfont clear hide">&#xe72a;</i>
</div>
<div class="form-group password">
<label for="password" class="iconfont">&#xe723;</label><input type="password" name="password" placeholder="请输入密码">
... ...
... ... @@ -12,14 +12,14 @@
<div class="login-form">
<div class="form-group username">
<label for="username" class="iconfont">&#xe727;</label><input type="text" name="username" placeholder="请输入手机号/邮箱">
<i id="clearUsrname" class="iconfont clear">&#xe72a;</i>
<i id="clearUsrname" class="iconfont clear hide">&#xe72a;</i>
</div>
<div class="form-group password">
<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" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></div>
<button id="loginBtn" class="login-btn">登录</button>
<button id="loginBtn" class="login-btn disable">登录</button>
<div class="other-info">
<a href="{{internationalUrl}}">海外账号</a>
<a href="{{smsLoginUrl}}">手机验证码</a>
... ...
... ... @@ -13,7 +13,7 @@
</select>
<i class="iconfont arrow-icon">&#xe613;</i>
<i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号" class="mobile-input" autocomplete="off"><i id="clearMobile"
class="iconfont clear">&#xe72a;</i>
class="iconfont clear hide">&#xe72a;</i>
</div>
<div class="form-group verify-code">
<label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
... ...
... ... @@ -19,7 +19,7 @@
</select>
<i class="iconfont arrow-icon">&#xe613;</i>
<i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="mobile-input"><i id="clearMobile"
class="iconfont clear">&#xe72a;</i>
class="iconfont clear hide">&#xe72a;</i>
</div>
<div class="form-group verify-code">
<label for="verifyCode" class="iconfont">&#xe71c;</label><input type="text" name="verifyCode" placeholder="请输入验证码"
... ...
... ... @@ -89,10 +89,10 @@ module.exports = function(useInRegister, useForBind, useForRelate) {
itime = setInterval(function() {
if (count === 0) {
$captchaTip.text('重新发送').removeClass('disable');
$captchaTip.text('重新获取').removeClass('disable');
clearInterval(itime);
} else {
$captchaTip.text('重新发送 (' + count-- + '秒)');
$captchaTip.text('重新获取 (' + count-- + '秒)');
window.setCookie('count', count);
if (during && parseInt(during, 10) !== 0) {
... ... @@ -112,7 +112,7 @@ module.exports = function(useInRegister, useForBind, useForRelate) {
}
});
// 重新发送验证码
// 重新获取验证码
$captchaTip.on('touchstart', function() {
if ($captchaTip.hasClass('disable')) {
return;
... ...
... ... @@ -51,6 +51,13 @@ class InternationalNew extends Page {
* 改变登录按钮的状态
*/
changeLoginBtnStatus() {
// 清除手机号按钮
if (this.selector.mobileInput.val()) {
this.selector.clearMobile.removeClass('hide');
} else {
this.selector.clearMobile.addClass('hide');
}
// 登录按钮
if (this.selector.mobileInput.val() && this.selector.passwordInput.val()) {
this.selector.internationalLoginBtn.addClass('active');
... ... @@ -117,8 +124,13 @@ class InternationalNew extends Page {
this.selector.internationalLoginBtn.text('登录成功');
showErrTip('登录成功');
} else {
if (useVerify && data.captchaShow) {
((data.changeCaptcha && validate.type !== 2) && validate.refresh());
$captcha.data('userverify', data.captchaShow);
if (data.captchaShow) {
if (validate.atWorking) {
((data.changeCaptcha && validate.type !== 2) && validate.refresh());
} else {
validate.init();
}
}
showErrTip(data.message);
... ... @@ -155,6 +167,7 @@ class InternationalNew extends Page {
*/
clearMobile() {
this.selector.mobileInput.val('');
this.selector.clearMobile.addClass('hide');
}
}
... ...
... ... @@ -34,6 +34,8 @@ class Login {
this.view.getPswrdBtn.on('click', this.showGetPasswordBox.bind(this));
this.view.getPasswordBox.on('click', this.hiddenGetPasswordBox.bind(this));
this.view.showYohoFamilyTip.on('click', this.showYohoFamilyTip.bind(this));
this.view.usernameInput.bind('input', this.changeBtnStatus.bind(this));
this.view.passwordInput.bind('input', this.changeBtnStatus.bind(this));
if ($captcha.data('userverify')) {
validate.init();
... ... @@ -41,6 +43,25 @@ class Login {
}
/**
* 输入监听，改变按钮状态
*/
changeBtnStatus() {
// 清除按钮
if (this.view.usernameInput.val()) {
this.view.clearUsrname.removeClass('hide');
} else {
this.view.clearUsrname.addClass('hide');
}
// 登录按钮
if (this.view.usernameInput.val() && this.view.passwordInput.val()) {
this.view.loginBtn.removeClass('disable');
} else {
this.view.loginBtn.addClass('disable');
}
}
/**
* 展示弹窗
*/
showYohoFamilyTip() {
... ... @@ -156,6 +177,7 @@ class Login {
*/
clearUsrname() {
this.view.usernameInput.val('');
this.view.clearUsrname.addClass('hide');
}
/**
... ...
... ... @@ -47,6 +47,7 @@ class RegisterNew {
*/
clearMobile() {
this.view.mobileInput.val('');
this.view.clearMobile.addClass('hide');
}
/**
... ... @@ -75,10 +76,10 @@ class RegisterNew {
itime = setInterval(() => {
if (count === 0) {
this.view.getVerifyCodeBtn.text('重新发送').addClass('active');
this.view.getVerifyCodeBtn.text('重新获取').addClass('active');
clearInterval(itime);
} else {
this.view.getVerifyCodeBtn.text('重新发送 (' + count-- + '秒)');
this.view.getVerifyCodeBtn.text('重新获取 (' + count-- + '秒)');
window.setCookie('count', count);
if (during && parseInt(during, 10) !== 0) {
... ... @@ -95,8 +96,10 @@ class RegisterNew {
// 获取验证码按钮
if (this.view.mobileInput.val()) {
this.view.getVerifyCodeBtn.addClass('active');
this.view.clearMobile.removeClass('hide');
} else {
this.view.getVerifyCodeBtn.removeClass('active');
this.view.clearMobile.addClass('hide');
}
// 登录按钮
... ...
... ... @@ -84,7 +84,7 @@ page = {
}
$resendBtn.prop('disabled', true);
$resendBtn.text('重新发送(' + second + ')');
$resendBtn.text('重新获取(' + second + ')');
this.timerId = setInterval(function() {
let txt = self.resendText;
... ... @@ -95,7 +95,7 @@ page = {
self.timerId = null;
$resendBtn.prop('disabled', false);
} else {
txt = '重新发送(' + second + '秒)';
txt = '重新获取(' + second + '秒)';
}
$resendBtn.text(txt);
... ...
... ... @@ -75,10 +75,10 @@ class SmsLoginNew extends Page {
itime = setInterval(() => {
if (count === 0) {
this.selector.getVerifyCodeBtn.text('重新发送').addClass('active');
this.selector.getVerifyCodeBtn.text('重新获取').addClass('active');
clearInterval(itime);
} else {
this.selector.getVerifyCodeBtn.text('重新发送 (' + count-- + '秒)');
this.selector.getVerifyCodeBtn.text('重新获取 (' + count-- + '秒)');
window.setCookie('count', count);
if (during && parseInt(during, 10) !== 0) {
... ... @@ -95,8 +95,10 @@ class SmsLoginNew extends Page {
// 获取验证码按钮
if (this.selector.mobileInput.val()) {
this.selector.getVerifyCodeBtn.addClass('active');
this.selector.clearMobile.removeClass('hide');
} else {
this.selector.getVerifyCodeBtn.removeClass('active');
this.selector.clearMobile.addClass('hide');
}
// 登录按钮
... ... @@ -181,6 +183,7 @@ class SmsLoginNew extends Page {
*/
clearMobile() {
this.selector.mobileInput.val('');
this.selector.clearMobile.addClass('hide');
}
/**
... ...
... ... @@ -92,7 +92,7 @@ class Validate {
let captcha = this.imgCheck.getResults();
if (captcha === '0000') {
tip.show(' 请将图片旋转到正确方向');
tip.show('请将所有图片点击旋转至正向朝上');
return Promise.reject();
}
return Promise.resolve({captcha});
... ...
... ... @@ -102,7 +102,7 @@ button {
margin-top: -45PX;
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
font-size: 18PX;
font-size: 24px;
border: none;
z-index: 100;
box-sizing: border-box;
... ...
... ... @@ -17,7 +17,7 @@
.img-check-refresh {
float: right;
font-size: 22px;
color: #36a74c;
color: #d0021b;
}
.img-check-pics {
... ...
... ... @@ -19,7 +19,6 @@ $top-bar-font-color: #444;
color: $top-bar-font-color;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
... ... @@ -55,7 +54,7 @@ $top-bar-font-color: #444;
> label {
font-size: 26px;
margin-right: 45px;
margin-right: 36px;
}
> input {
... ...
... ... @@ -15,7 +15,6 @@ $top-bar-font-color: #444;
color: $top-bar-font-color;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
... ...
... ... @@ -19,7 +19,6 @@ $top-bar-font-color: #444;
color: $top-bar-font-color;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
... ... @@ -55,7 +54,7 @@ $top-bar-font-color: #444;
> label {
font-size: 26px;
margin-right: 45px;
margin-right: 36px;
}
> input {
... ... @@ -65,7 +64,7 @@ $top-bar-font-color: #444;
background-color: transparent;
&.mobile-input {
width: 294px;
width: 280px;
}
&.verify-code-input {
... ... @@ -84,11 +83,11 @@ $top-bar-font-color: #444;
&.mobile {
> label {
margin-right: 38px;
margin-right: 30px;
}
> .country-select {
width: 120px;
width: 140px;
appearance: none;
border: none;
background-color: transparent;
... ...
... ... @@ -6,7 +6,7 @@
}
$top-bar-font-color: #444;
$disable-gray: $b0b0b0;
$disable-gray: #b0b0b0;
.international-new-page {
@extend padding-75;
... ... @@ -31,7 +31,6 @@ $disable-gray: $b0b0b0;
color: $top-bar-font-color;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
... ... @@ -67,7 +66,7 @@ $disable-gray: $b0b0b0;
> label {
font-size: 26px;
margin-right: 45px;
margin-right: 36px;
}
> input {
... ... @@ -77,7 +76,7 @@ $disable-gray: $b0b0b0;
background-color: transparent;
&.mobile-input {
width: 294px;
width: 290px;
}
}
... ... @@ -92,11 +91,11 @@ $disable-gray: $b0b0b0;
&.mobile {
> label {
margin-right: 38px;
margin-right: 30px;
}
> .country-select {
width: 120px;
width: 140px;
appearance: none;
border: none;
background-color: transparent;
... ... @@ -110,7 +109,7 @@ $disable-gray: $b0b0b0;
> .clear {
color: #e0e0e0;
margin-right: 8px;
margin-right: 4px;
margin-top: 10px;
}
}
... ... @@ -141,14 +140,14 @@ $disable-gray: $b0b0b0;
height: 70px;
border-radius: 4px;
background-color: $disable-gray;
margin-top: 100px;
margin-top: 40px;
font-size: 32px;
color: #fff;
}
}
.full-img-verify {
margin-top: 70px;
margin-top: 40px;
.img-check {
background-color: #fff;
... ...
... ... @@ -13,12 +13,13 @@
}
@define-extend third-line {
width: 187px;
width: 178px;
border-top: 1px solid #b0b0b0;
margin-top: 18px;
}
$top-bar-font-color: #fff;
$disable-gray: #b0b0b0;
.login-new-page {
input:-webkit-autofill {
... ... @@ -60,7 +61,6 @@ $top-bar-font-color: #fff;
}
> .top-operation-bar > button {
height: 50px;
text-align: center;
&.close {
... ... @@ -70,7 +70,6 @@ $top-bar-font-color: #fff;
color: $top-bar-font-color;
font-size: 50px;
padding: 0;
margin-top: -2px;
}
}
... ... @@ -107,7 +106,7 @@ $top-bar-font-color: #fff;
.login-form {
@extend padding-75;
margin-top: 100px;
margin-top: 60px;
> .form-group {
border-bottom: 1px solid #e0e0e0;
... ... @@ -134,7 +133,7 @@ $top-bar-font-color: #fff;
> label {
font-size: 26px;
margin-right: 45px;
margin-right: 36px;
}
> input {
... ... @@ -176,16 +175,20 @@ $top-bar-font-color: #fff;
height: 70px;
border-radius: 4px;
background-color: #444;
margin-top: 100px;
margin-top: 40px;
font-size: 32px;
color: #fff;
}
.disable {
background-color: $disable-gray;
}
}
.third-party-login {
@extend padding-75;
margin-top: 236px;
margin-top: 130px;
text-align: center;
> .tip-box {
... ... @@ -208,7 +211,6 @@ $top-bar-font-color: #fff;
.tip {
margin-left: auto;
margin-right: auto;
width: 168px;
height: 23px;
font-size: 24px;
line-height: 1.33;
... ... @@ -236,7 +238,7 @@ $top-bar-font-color: #fff;
}
.full-img-verify {
margin-top: 70px;
margin-top: 40px;
.img-check {
background-color: #fff;
... ...
... ... @@ -26,7 +26,6 @@ $disableGray: #b0b0b0;
color: $top-bar-font-color;
> button {
height: 50px;
width: 50px;
background-color: transparent;
font-size: 45px;
... ... @@ -67,7 +66,7 @@ $disableGray: #b0b0b0;
> label {
font-size: 26px;
margin-right: 45px;
margin-right: 36px;
}
> input {
... ... @@ -77,7 +76,7 @@ $disableGray: #b0b0b0;
background-color: transparent;
&.mobile-input {
width: 294px;
width: 280px;
}
&.verify-code-input {
... ... @@ -96,11 +95,11 @@ $disableGray: #b0b0b0;
&.mobile {
> label {
margin-right: 38px;
margin-right: 30px;
}
> .country-select {
width: 120px;
width: 140px;
appearance: none;
border: none;
background-color: transparent;
... ... @@ -114,7 +113,7 @@ $disableGray: #b0b0b0;
> .clear {
color: #e0e0e0;
margin-right: 8px;
margin-right: 4px;
margin-top: 10px;
}
}
... ... @@ -164,7 +163,7 @@ $disableGray: #b0b0b0;
}
.full-img-verify {
margin-top: 70px;
margin-top: 40px;
.img-check {
background-color: #fff;
... ...
... ... @@ -13,13 +13,13 @@
}
@define-extend third-line {
width: 187px;
width: 178px;
border-top: 1px solid #b0b0b0;
margin-top: 18px;
}
$top-bar-font-color: #fff;
$disable-gray: $b0b0b0;
$disable-gray: #b0b0b0;
.sms-login-new-page {
input:-webkit-autofill {
... ... @@ -61,7 +61,6 @@ $disable-gray: $b0b0b0;
}
> .top-operation-bar > button {
height: 50px;
text-align: center;
&.close {
... ... @@ -71,7 +70,6 @@ $disable-gray: $b0b0b0;
color: $top-bar-font-color;
font-size: 50px;
padding: 0;
margin-top: -2px;
}
}
... ... @@ -108,7 +106,7 @@ $disable-gray: $b0b0b0;
.sms-login-form {
@extend padding-75;
margin-top: 100px;
margin-top: 60px;
> .form-group {
border-bottom: 1px solid #e0e0e0;
... ... @@ -117,7 +115,7 @@ $disable-gray: $b0b0b0;
> label {
font-size: 26px;
margin-right: 45px;
margin-right: 36px;
}
> input {
... ... @@ -127,7 +125,7 @@ $disable-gray: $b0b0b0;
background-color: transparent;
&.mobile-input {
width: 300px;
width: 280px;
}
&.verify-code-input {
... ... @@ -146,11 +144,11 @@ $disable-gray: $b0b0b0;
&.mobile {
> label {
margin-right: 38px;
margin-right: 30px;
}
> .country-select {
width: 120px;
width: 140px;
appearance: none;
border: none;
background-color: transparent;
... ... @@ -164,7 +162,7 @@ $disable-gray: $b0b0b0;
> .clear {
color: #e0e0e0;
margin-right: 8px;
margin-right: 4px;
margin-top: 10px;
}
}
... ... @@ -228,7 +226,7 @@ $disable-gray: $b0b0b0;
.third-party-login {
@extend padding-75;
margin-top: 236px;
margin-top: 130px;
text-align: center;
> .tip-box {
... ... @@ -251,7 +249,6 @@ $disable-gray: $b0b0b0;
.tip {
margin-left: auto;
margin-right: auto;
width: 168px;
height: 23px;
font-size: 24px;
line-height: 1.33;
... ... @@ -279,7 +276,7 @@ $disable-gray: $b0b0b0;
}
.full-img-verify {
margin-top: 70px;
margin-top: 40px;
.img-check {
background-color: #fff;
... ...