Showing
11 changed files
with
49 additions
and
8 deletions
| @@ -70,7 +70,7 @@ exports.validate = (req, res, next) => { | @@ -70,7 +70,7 @@ exports.validate = (req, res, next) => { | ||
| 70 | 70 | ||
| 71 | let jsonData = { | 71 | let jsonData = { |
| 72 | code: 400, | 72 | code: 400, |
| 73 | - message: '请将图片旋转到正确方向', | 73 | + message: '请将所有图片点击翻转至正向朝上', |
| 74 | captchaShow: true | 74 | captchaShow: true |
| 75 | }; | 75 | }; |
| 76 | 76 |
| @@ -12,8 +12,8 @@ | @@ -12,8 +12,8 @@ | ||
| 12 | {{/ countrys}} | 12 | {{/ countrys}} |
| 13 | </select> | 13 | </select> |
| 14 | <i class="iconfont arrow-icon"></i> | 14 | <i class="iconfont arrow-icon"></i> |
| 15 | - <i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="mobile-input"><i id="clearMobile" | ||
| 16 | - class="iconfont clear"></i> | 15 | + <i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号" class="mobile-input"><i id="clearMobile" |
| 16 | + class="iconfont clear hide"></i> | ||
| 17 | </div> | 17 | </div> |
| 18 | <div class="form-group password"> | 18 | <div class="form-group password"> |
| 19 | <label for="password" class="iconfont"></label><input type="password" name="password" placeholder="请输入密码"> | 19 | <label for="password" class="iconfont"></label><input type="password" name="password" placeholder="请输入密码"> |
| @@ -12,14 +12,14 @@ | @@ -12,14 +12,14 @@ | ||
| 12 | <div class="login-form"> | 12 | <div class="login-form"> |
| 13 | <div class="form-group username"> | 13 | <div class="form-group username"> |
| 14 | <label for="username" class="iconfont"></label><input type="text" name="username" placeholder="请输入手机号/邮箱"> | 14 | <label for="username" class="iconfont"></label><input type="text" name="username" placeholder="请输入手机号/邮箱"> |
| 15 | - <i id="clearUsrname" class="iconfont clear"></i> | 15 | + <i id="clearUsrname" class="iconfont clear hide"></i> |
| 16 | </div> | 16 | </div> |
| 17 | <div class="form-group password"> | 17 | <div class="form-group password"> |
| 18 | <label for="password" class="iconfont"></label><input type="password" name="password" placeholder="请输入密码"> | 18 | <label for="password" class="iconfont"></label><input type="password" name="password" placeholder="请输入密码"> |
| 19 | <span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close"></i><i class="iconfont eye-open hide"></i></span> | 19 | <span id="passwordEyeIcon" class="eye"><i class="iconfont eye-close"></i><i class="iconfont eye-open hide"></i></span> |
| 20 | </div> | 20 | </div> |
| 21 | <div data-userverify="{{captchaShow}}" data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></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 disable">登录</button> |
| 23 | <div class="other-info"> | 23 | <div class="other-info"> |
| 24 | <a href="{{internationalUrl}}">海外账号</a> | 24 | <a href="{{internationalUrl}}">海外账号</a> |
| 25 | <a href="{{smsLoginUrl}}">手机验证码</a> | 25 | <a href="{{smsLoginUrl}}">手机验证码</a> |
| @@ -13,7 +13,7 @@ | @@ -13,7 +13,7 @@ | ||
| 13 | </select> | 13 | </select> |
| 14 | <i class="iconfont arrow-icon"></i> | 14 | <i class="iconfont arrow-icon"></i> |
| 15 | <i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号" class="mobile-input" autocomplete="off"><i id="clearMobile" | 15 | <i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号" class="mobile-input" autocomplete="off"><i id="clearMobile" |
| 16 | - class="iconfont clear"></i> | 16 | + class="iconfont clear hide"></i> |
| 17 | </div> | 17 | </div> |
| 18 | <div class="form-group verify-code"> | 18 | <div class="form-group verify-code"> |
| 19 | <label for="verifyCode" class="iconfont"></label><input type="text" name="verifyCode" placeholder="请输入验证码" | 19 | <label for="verifyCode" class="iconfont"></label><input type="text" name="verifyCode" placeholder="请输入验证码" |
| @@ -19,7 +19,7 @@ | @@ -19,7 +19,7 @@ | ||
| 19 | </select> | 19 | </select> |
| 20 | <i class="iconfont arrow-icon"></i> | 20 | <i class="iconfont arrow-icon"></i> |
| 21 | <i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="mobile-input"><i id="clearMobile" | 21 | <i class="line">|</i><input type="text" name="mobile" placeholder="请输入手机号/邮箱" class="mobile-input"><i id="clearMobile" |
| 22 | - class="iconfont clear"></i> | 22 | + class="iconfont clear hide"></i> |
| 23 | </div> | 23 | </div> |
| 24 | <div class="form-group verify-code"> | 24 | <div class="form-group verify-code"> |
| 25 | <label for="verifyCode" class="iconfont"></label><input type="text" name="verifyCode" placeholder="请输入验证码" | 25 | <label for="verifyCode" class="iconfont"></label><input type="text" name="verifyCode" placeholder="请输入验证码" |
| @@ -51,6 +51,13 @@ class InternationalNew extends Page { | @@ -51,6 +51,13 @@ class InternationalNew extends Page { | ||
| 51 | * 改变登录按钮的状态 | 51 | * 改变登录按钮的状态 |
| 52 | */ | 52 | */ |
| 53 | changeLoginBtnStatus() { | 53 | changeLoginBtnStatus() { |
| 54 | + // 清除手机号按钮 | ||
| 55 | + if (this.selector.mobileInput.val()) { | ||
| 56 | + this.selector.clearMobile.removeClass('hide'); | ||
| 57 | + } else { | ||
| 58 | + this.selector.clearMobile.addClass('hide'); | ||
| 59 | + } | ||
| 60 | + | ||
| 54 | // 登录按钮 | 61 | // 登录按钮 |
| 55 | if (this.selector.mobileInput.val() && this.selector.passwordInput.val()) { | 62 | if (this.selector.mobileInput.val() && this.selector.passwordInput.val()) { |
| 56 | this.selector.internationalLoginBtn.addClass('active'); | 63 | this.selector.internationalLoginBtn.addClass('active'); |
| @@ -155,6 +162,7 @@ class InternationalNew extends Page { | @@ -155,6 +162,7 @@ class InternationalNew extends Page { | ||
| 155 | */ | 162 | */ |
| 156 | clearMobile() { | 163 | clearMobile() { |
| 157 | this.selector.mobileInput.val(''); | 164 | this.selector.mobileInput.val(''); |
| 165 | + this.selector.clearMobile.addClass('hide'); | ||
| 158 | } | 166 | } |
| 159 | } | 167 | } |
| 160 | 168 |
| @@ -34,6 +34,8 @@ class Login { | @@ -34,6 +34,8 @@ class Login { | ||
| 34 | this.view.getPswrdBtn.on('click', this.showGetPasswordBox.bind(this)); | 34 | this.view.getPswrdBtn.on('click', this.showGetPasswordBox.bind(this)); |
| 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 | + this.view.usernameInput.bind('input', this.changeBtnStatus.bind(this)); | ||
| 38 | + this.view.passwordInput.bind('input', this.changeBtnStatus.bind(this)); | ||
| 37 | 39 | ||
| 38 | if ($captcha.data('userverify')) { | 40 | if ($captcha.data('userverify')) { |
| 39 | validate.init(); | 41 | validate.init(); |
| @@ -41,6 +43,25 @@ class Login { | @@ -41,6 +43,25 @@ class Login { | ||
| 41 | } | 43 | } |
| 42 | 44 | ||
| 43 | /** | 45 | /** |
| 46 | + * 输入监听，改变按钮状态 | ||
| 47 | + */ | ||
| 48 | + changeBtnStatus() { | ||
| 49 | + // 清除按钮 | ||
| 50 | + if (this.view.usernameInput.val()) { | ||
| 51 | + this.view.clearUsrname.removeClass('hide'); | ||
| 52 | + } else { | ||
| 53 | + this.view.clearUsrname.addClass('hide'); | ||
| 54 | + } | ||
| 55 | + | ||
| 56 | + // 登录按钮 | ||
| 57 | + if (this.view.usernameInput.val() && this.view.passwordInput.val()) { | ||
| 58 | + this.view.loginBtn.removeClass('disable'); | ||
| 59 | + } else { | ||
| 60 | + this.view.loginBtn.addClass('disable'); | ||
| 61 | + } | ||
| 62 | + } | ||
| 63 | + | ||
| 64 | + /** | ||
| 44 | * 展示弹窗 | 65 | * 展示弹窗 |
| 45 | */ | 66 | */ |
| 46 | showYohoFamilyTip() { | 67 | showYohoFamilyTip() { |
| @@ -156,6 +177,7 @@ class Login { | @@ -156,6 +177,7 @@ class Login { | ||
| 156 | */ | 177 | */ |
| 157 | clearUsrname() { | 178 | clearUsrname() { |
| 158 | this.view.usernameInput.val(''); | 179 | this.view.usernameInput.val(''); |
| 180 | + this.view.clearUsrname.addClass('hide'); | ||
| 159 | } | 181 | } |
| 160 | 182 | ||
| 161 | /** | 183 | /** |
| @@ -47,6 +47,7 @@ class RegisterNew { | @@ -47,6 +47,7 @@ class RegisterNew { | ||
| 47 | */ | 47 | */ |
| 48 | clearMobile() { | 48 | clearMobile() { |
| 49 | this.view.mobileInput.val(''); | 49 | this.view.mobileInput.val(''); |
| 50 | + this.view.clearMobile.addClass('hide'); | ||
| 50 | } | 51 | } |
| 51 | 52 | ||
| 52 | /** | 53 | /** |
| @@ -95,8 +96,10 @@ class RegisterNew { | @@ -95,8 +96,10 @@ class RegisterNew { | ||
| 95 | // 获取验证码按钮 | 96 | // 获取验证码按钮 |
| 96 | if (this.view.mobileInput.val()) { | 97 | if (this.view.mobileInput.val()) { |
| 97 | this.view.getVerifyCodeBtn.addClass('active'); | 98 | this.view.getVerifyCodeBtn.addClass('active'); |
| 99 | + this.view.clearMobile.removeClass('hide'); | ||
| 98 | } else { | 100 | } else { |
| 99 | this.view.getVerifyCodeBtn.removeClass('active'); | 101 | this.view.getVerifyCodeBtn.removeClass('active'); |
| 102 | + this.view.clearMobile.addClass('hide'); | ||
| 100 | } | 103 | } |
| 101 | 104 | ||
| 102 | // 登录按钮 | 105 | // 登录按钮 |
| @@ -95,8 +95,10 @@ class SmsLoginNew extends Page { | @@ -95,8 +95,10 @@ class SmsLoginNew extends Page { | ||
| 95 | // 获取验证码按钮 | 95 | // 获取验证码按钮 |
| 96 | if (this.selector.mobileInput.val()) { | 96 | if (this.selector.mobileInput.val()) { |
| 97 | this.selector.getVerifyCodeBtn.addClass('active'); | 97 | this.selector.getVerifyCodeBtn.addClass('active'); |
| 98 | + this.selector.clearMobile.removeClass('hide'); | ||
| 98 | } else { | 99 | } else { |
| 99 | this.selector.getVerifyCodeBtn.removeClass('active'); | 100 | this.selector.getVerifyCodeBtn.removeClass('active'); |
| 101 | + this.selector.clearMobile.addClass('hide'); | ||
| 100 | } | 102 | } |
| 101 | 103 | ||
| 102 | // 登录按钮 | 104 | // 登录按钮 |
| @@ -181,6 +183,7 @@ class SmsLoginNew extends Page { | @@ -181,6 +183,7 @@ class SmsLoginNew extends Page { | ||
| 181 | */ | 183 | */ |
| 182 | clearMobile() { | 184 | clearMobile() { |
| 183 | this.selector.mobileInput.val(''); | 185 | this.selector.mobileInput.val(''); |
| 186 | + this.selector.clearMobile.addClass('hide'); | ||
| 184 | } | 187 | } |
| 185 | 188 | ||
| 186 | /** | 189 | /** |
| @@ -92,7 +92,7 @@ class Validate { | @@ -92,7 +92,7 @@ class Validate { | ||
| 92 | let captcha = this.imgCheck.getResults(); | 92 | let captcha = this.imgCheck.getResults(); |
| 93 | 93 | ||
| 94 | if (captcha === '0000') { | 94 | if (captcha === '0000') { |
| 95 | - tip.show(' 请将图片旋转到正确方向'); | 95 | + tip.show('请将所有图片点击旋转至正向朝上'); |
| 96 | return Promise.reject(); | 96 | return Promise.reject(); |
| 97 | } | 97 | } |
| 98 | return Promise.resolve({captcha}); | 98 | return Promise.resolve({captcha}); |
| @@ -19,6 +19,7 @@ | @@ -19,6 +19,7 @@ | ||
| 19 | } | 19 | } |
| 20 | 20 | ||
| 21 | $top-bar-font-color: #fff; | 21 | $top-bar-font-color: #fff; |
| 22 | +$disable-gray: #b0b0b0; | ||
| 22 | 23 | ||
| 23 | .login-new-page { | 24 | .login-new-page { |
| 24 | input:-webkit-autofill { | 25 | input:-webkit-autofill { |
| @@ -180,6 +181,10 @@ $top-bar-font-color: #fff; | @@ -180,6 +181,10 @@ $top-bar-font-color: #fff; | ||
| 180 | font-size: 32px; | 181 | font-size: 32px; |
| 181 | color: #fff; | 182 | color: #fff; |
| 182 | } | 183 | } |
| 184 | + | ||
| 185 | + .disable { | ||
| 186 | + background-color: $disable-gray; | ||
| 187 | + } | ||
| 183 | } | 188 | } |
| 184 | 189 | ||
| 185 | .third-party-login { | 190 | .third-party-login { |
-
Please register or login to post a comment