get-verify-code-ok

@@ -4,7 +4,7 @@
         <span class="page-title">手机找回密码</span>
         <button class="close iconfont">&#xe72d;</button>
     </div>
-     <form class="back-mobile-form">
+     <div class="back-mobile-form">
         <div class="form-group mobile">
             <label for="mobile" class="iconfont">&#xe727;</label>
             <select name="" id="countryCodeSelector" class="country-select">
@@ -24,5 +24,5 @@
         </div>
         <div data-geetest="{{useGeetest}}" id="js-img-check" {{#unless useGeetest}} class="full-img-verify" {{/unless}}></div>
         <button id="backMobileResetBtn" class="back-mobile-reset-btn">重置登录密码</button>
-     </form>
+     </div>
 </div>
\ No newline at end of file

 import $ from 'yoho-jquery';
+import tip from 'plugin/tip';
 import Page from 'yoho-page';
+import api from '../api';
+import Validate from 'plugin/validata';
+const $captcha = $('#js-img-check');
+const validate = new Validate($captcha, {
+    useREM: {
+        rootFontSize: 40,
+        picWidth: 150
+    }
+});
+const showErrTip = tip.show;
 
 class MobileNew extends Page {
     constructor() {
         super();
 
         this.selector = {
+            countryCodeSelector: $('#countryCodeSelector'),
             mobileInput: $('input[name=mobile]'),
+            clearMobile: $('#clearMobile'),
             verifyCodeInput: $('input[name=verifyCode]'),
             passwordInput: $('input[name=password]'),
             getVerifyCodeBtn: $('#getVerifyCodeBtn'),
@@ -17,12 +30,14 @@ class MobileNew extends Page {
     }
 
     init() {
+        validate.init();
         this.selector.getVerifyCodeBtn.data('oneClick', false);
         this.bindEvents();
     }
 
     bindEvents() {
         this.selector.mobileInput.on('input', this.changeBtnStatus.bind(this));
+        this.selector.clearMobile.on('click', this.clearMobile.bind(this));
         this.selector.verifyCodeInput.on('input', this.changeBtnStatus.bind(this));
         this.selector.passwordInput.on('input', this.changeBtnStatus.bind(this));
         this.selector.getVerifyCodeBtn.on('click', this.getVerifyCode.bind(this));
@@ -30,17 +45,110 @@ class MobileNew extends Page {
     }
 
     /**
-     * 监听输入，改变按钮状态
+     * 清除输入的手机号
+     */
+    clearMobile() {
+        this.selector.mobileInput.val('');
+        this.selector.clearMobile.addClass('hide');
+        this.selector.getVerifyCodeBtn.removeClass('active');
+    }
+
+    /**
+     * 输入监听，改变按钮状态
      */
     changeBtnStatus() {
-        console.log(this);
+        // 获取验证码按钮
+        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');
+        }
+
+        // 登录按钮
+        if (this.selector.mobileInput.val() &&
+            this.selector.getVerifyCodeBtn.data('oneClick') &&
+            this.selector.verifyCodeInput.val() &&
+            this.selector.passwordInput.val()) {
+            this.selector.backMobileResetBtn.addClass('active');
+        } else {
+            this.selector.backMobileResetBtn.removeClass('active');
+        }
     }
 
     /**
+     * 获取验证码倒计时
+     */
+    countDown(during) {
+        let count = during || 59;
+        let itime;
+
+        this.selector.getVerifyCodeBtn.removeClass('active');
+
+        itime = setInterval(() => {
+            if (count === 0) {
+                this.selector.getVerifyCodeBtn.text('重新获取').addClass('active');
+                clearInterval(itime);
+            } else {
+                this.selector.getVerifyCodeBtn.text('重新获取 (' + count-- + '秒)');
+                window.setCookie('count', count);
+
+                if (during && parseInt(during, 10) !== 0) {
+                    this.selector.getVerifyCodeBtn.removeClass('active');
+                }
+            }
+        }, 1000);
+    }
+
+
+    /**
      * 获取验证码
      */
     getVerifyCode() {
-        console.log('1');
+        let pn = $.trim(this.selector.mobileInput.val());
+        let area = $.trim(this.selector.countryCodeSelector.val());
+
+        if (!this.selector.getVerifyCodeBtn.hasClass('active')) {
+            return;
+        }
+
+        this.selector.getVerifyCodeBtn.data('oneClick', true);
+
+        if (area && pn && api.phoneRegx[area].test(pn)) {
+            validate.getResults().then(result => {
+                let params = {
+                    areaCode: area.replace('+', ''),
+                    phoneNum: pn
+                };
+
+                $.extend(params, result);
+
+                this.ajax({
+                    url: '/passport/back/sendcode',
+                    type: 'POST',
+                    data: params
+                }).then(codeResult => {
+                    validate.type === 2 && validate.refresh();
+                    if (codeResult.code === 200) {
+                        this.countDown();
+                        return;
+                    } else if (codeResult.code === 409) {
+                        showErrTip(codeResult.message);
+                    } else {
+                        showErrTip(codeResult.message);
+                    }
+                    (codeResult.changeCaptcha && validate.type !== 2) && validate.refresh();
+                }).catch(() => {
+                    showErrTip('出错了，请重试');
+                    validate.refresh();
+                });
+            });
+        } else if (!area) {
+            showErrTip('出错了，请重新刷新页面');
+        } else {
+            showErrTip('手机号格式不正确，请重新输入');
+        }
     }
 
     /**

+@import "layout/img-check";
+
 @define-extend padding-75 {
     padding-left: 75px;
     padding-right: 75px;
@@ -11,7 +13,11 @@ $active-gray:           #444;
     @extend padding-75;
 
     .active {
-        background-color: $active-gray;
+        background-color: $active-gray !important;
+    }
+
+    .hide {
+        display: none;
     }
 
     .iconfont {