fe / yoho-blk · Commits

Go to a project

Authored by htoooth
Commit 45f7d6865021c7d5167f5a2f366f45f707c38d33 1 parent c1a94a50

tips调整，找回密码首页

Inline Side-by-side
Showing 3 changed files with 39 additions and 26 deletions
@@ -52,12 +52,27 @@ @@ -52,12 +52,27 @@
52 <span id="country-code" class="country-code">{{location}}</span> 52 <span id="country-code" class="country-code">{{location}}</span>
53 <input value="" id="phoneNum" class="input va phone-num" type="text" name="phoneNum" 53 <input value="" id="phoneNum" class="input va phone-num" type="text" name="phoneNum"
54 placeholder="Phone Number" autocomplete="off"> 54 placeholder="Phone Number" autocomplete="off">
  55 +
  56 + <div class="tips hide">
  57 + <div class="triangle"></div>
  58 + <div class="rectangle"></div>
  59 + </div>
  60 +
55 </div> 61 </div>
56 </li> 62 </li>
57 63
58 <li class="clearfix"> 64 <li class="clearfix">
59 - <input id="verifyCode" class="input va captcha" type="text" name="verifyCode" placeholder="图形验证码"  
60 - autocomplete="off" maxlength="4"> 65 +
  66 + <div class="sms-captcha-wrapper">
  67 + <input id="verifyCode" class="input va captcha" type="text" name="verifyCode"
  68 + placeholder="图形验证码"
  69 + autocomplete="off" maxlength="4">
  70 +
  71 + <div class="tips hide">
  72 + <div class="triangle"></div>
  73 + <div class="rectangle"></div>
  74 + </div>
  75 + </div>
61 76
62 <div class="left captcha-component"> 77 <div class="left captcha-component">
63 <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt=""> 78 <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
@@ -69,16 +84,11 @@ @@ -69,16 +84,11 @@
69 <li class="clearfix"> 84 <li class="clearfix">
70 <input name="refer" id="refer" type="hidden" value="http%3A%2F%2Fwww.yohoblk.com%2F"> 85 <input name="refer" id="refer" type="hidden" value="http%3A%2F%2Fwww.yohoblk.com%2F">
71 <div class="center"> 86 <div class="center">
72 - <a id="find-btn" class="find-btn disable" >下一步</a> 87 + <a id="find-btn" class="find-btn disable">下一步</a>
73 </div> 88 </div>
74 </li> 89 </li>
75 </form> 90 </form>
76 </ul> 91 </ul>
77 92
78 - <div class="tips hide">  
79 - <div class="triangle"></div>  
80 - <div class="rectangle"></div>  
81 - </div>  
82 -  
83 {{/ back}} 93 {{/ back}}
84 </div> 94 </div>
@@ -15,7 +15,6 @@ var $regionCodeText = $('#country-code'), @@ -15,7 +15,6 @@ var $regionCodeText = $('#country-code'),
15 $imgCaptchaInput = $('#verifyCode'), 15 $imgCaptchaInput = $('#verifyCode'),
16 $regionSelectCtrl = $('#area'), 16 $regionSelectCtrl = $('#area'),
17 $nextBtn = $('#find-btn'), 17 $nextBtn = $('#find-btn'),
18 - $phone = $('#phone'),  
19 $form = $('#back-form'); 18 $form = $('#back-form');
20 19
21 var emailRegx = regx.emailRegx, 20 var emailRegx = regx.emailRegx,
@@ -23,23 +22,16 @@ var emailRegx = regx.emailRegx, @@ -23,23 +22,16 @@ var emailRegx = regx.emailRegx,
23 22
24 var ep = new EventProxy(); 23 var ep = new EventProxy();
25 24
26 -var $errTip = $('.tips'),  
27 - $errMsg = $errTip.find('.rectangle');  
28 -  
29 function errTip(ele, msg) { 25 function errTip(ele, msg) {
30 - var topLeft = ele.offset(); 26 + var $errTip = ele.next('.tips');
  27 + var $errMsg = $errTip.find('.rectangle');
31 28
32 $errMsg.text(msg); 29 $errMsg.text(msg);
33 - return $errTip.css({  
34 - top: topLeft.top + ele.height() - 2,  
35 - left: topLeft.left,  
36 - width: ele.width() + 2,  
37 - height: ele.height  
38 - }).removeClass('hide'); 30 + return $errTip.removeClass('hide');
39 } 31 }
40 32
41 -function hideTip() {  
42 - return $errTip.addClass('hide'); 33 +function hideTip(ele) {
  34 + return ele.next('.tips').addClass('hide');
43 } 35 }
44 36
45 require('yoho-jquery-placeholder'); 37 require('yoho-jquery-placeholder');
@@ -64,7 +56,7 @@ function validatePhoneNumAsync() { @@ -64,7 +56,7 @@ function validatePhoneNumAsync() {
64 if (data.code === 200) { 56 if (data.code === 200) {
65 return true; 57 return true;
66 } else if (data.code === 402) { 58 } else if (data.code === 402) {
67 - errTip($phone, '该账号不存在'); 59 + errTip($phoneNumInput, '该账号不存在');
68 return false; 60 return false;
69 } else if (data.code === 400) { 61 } else if (data.code === 400) {
70 refreshImgCaptcha(); 62 refreshImgCaptcha();
@@ -89,7 +81,7 @@ function validatePhoneNumLocal() { @@ -89,7 +81,7 @@ function validatePhoneNumLocal() {
89 if (val.length === 11 && phoneRegx['+86'].test(val)) { 81 if (val.length === 11 && phoneRegx['+86'].test(val)) {
90 return true; 82 return true;
91 } else { 83 } else {
92 - errTip($phone, '手机号码不正确，请重新输入'); 84 + errTip($phoneNumInput, '手机号码不正确，请重新输入');
93 return false; 85 return false;
94 } 86 }
95 } 87 }
@@ -99,12 +91,12 @@ function validatePhoneNumLocal() { @@ -99,12 +91,12 @@ function validatePhoneNumLocal() {
99 if (emailRegx.test(val)) { 91 if (emailRegx.test(val)) {
100 return true; 92 return true;
101 } else { 93 } else {
102 - errTip($phone, '邮箱格式不正确，请重新输入'); 94 + errTip($phoneNumInput, '邮箱格式不正确，请重新输入');
103 return false; 95 return false;
104 } 96 }
105 } 97 }
106 } else { 98 } else {
107 - errTip($phone, '请输入帐号'); 99 + errTip($phoneNumInput, '请输入帐号');
108 return false; 100 return false;
109 } 101 }
110 } 102 }
@@ -118,7 +110,7 @@ function validatePhoneNum() { @@ -118,7 +110,7 @@ function validatePhoneNum() {
118 if (result) { 110 if (result) {
119 defer.resolve(true); 111 defer.resolve(true);
120 } else { 112 } else {
121 - errTip($phone, '帐号不存在'); 113 + errTip($phoneNumInput, '帐号不存在');
122 defer.reject(false); 114 defer.reject(false);
123 } 115 }
124 }); 116 });
@@ -130,6 +122,7 @@ function validatePhoneNum() { @@ -130,6 +122,7 @@ function validatePhoneNum() {
130 } 122 }
131 123
132 return validate().then(function() { 124 return validate().then(function() {
  125 + hideTip($phoneNumInput);
133 ep.emit('phone-num', true); 126 ep.emit('phone-num', true);
134 }).fail(function() { 127 }).fail(function() {
135 ep.emit('phone-num', false); 128 ep.emit('phone-num', false);
@@ -229,6 +222,12 @@ exports.init = function() { @@ -229,6 +222,12 @@ exports.init = function() {
229 222
230 $imgCaptchaInput.on('blur', function() { 223 $imgCaptchaInput.on('blur', function() {
231 validateImgCaptcha(); 224 validateImgCaptcha();
  225 + }).on('focus', function() {
  226 + hideTip($imgCaptchaInput);
  227 + });
  228 +
  229 + $phoneNumInput.on('focus', function() {
  230 + hideTip($phoneNumInput);
232 }); 231 });
233 232
234 $nextBtn.on('click', function() { 233 $nextBtn.on('click', function() {
@@ -104,6 +104,10 @@ @@ -104,6 +104,10 @@
104 .center { 104 .center {
105 text-align: center; 105 text-align: center;
106 } 106 }
  107 +
  108 + .sms-captcha-wrapper {
  109 + width: $captcha;
  110 + }
107 } 111 }
108 112
109 .send-email-page { 113 .send-email-page {