注册 图形旋转 验证码 完成

@@ -76,6 +76,7 @@ let index = (req, res) => {
     }
     }
 
 
     res.render('reg/index', {
     res.render('reg/index', {
+        width750: true,
         module: 'passport',
         module: 'passport',
         page: 'reg',
         page: 'reg',
         title: '注册',
         title: '注册',
@@ -99,7 +100,7 @@ let verifyMobile = (req, res, next) => {
     let mobile = +req.body.phoneNum;
     let mobile = +req.body.phoneNum;
     let area = +(req.body.areaCode || 86);
     let area = +(req.body.areaCode || 86);
     let captcha = (req.body.captcha || '').trim();
     let captcha = (req.body.captcha || '').trim();
-    let diffCaptcha = _.get(req.session, 'phoneReg.captcha');
+    let diffCaptcha = _.get(req.session, 'captcha');
 
 
     // error case： 没有验证码
     // error case： 没有验证码
     if (!diffCaptcha) {
     if (!diffCaptcha) {
@@ -110,7 +111,7 @@ let verifyMobile = (req, res, next) => {
         });
         });
     }
     }
 
 
-    delete req.session.phoneReg.captcha; // captcha 一次性
+    delete req.session.captcha; // captcha 一次性
 
 
     // error case: 验证码不匹配
     // error case: 验证码不匹配
     if (captcha !== diffCaptcha) {
     if (captcha !== diffCaptcha) {

@@ -6,16 +6,13 @@
             <span id="area-code" class="area-code">{{areaCode}}</span>
             <span id="area-code" class="area-code">{{areaCode}}</span>
             <input id="phone-num" class="input phone-num" type="text" placeholder="手机号">
             <input id="phone-num" class="input phone-num" type="text" placeholder="手机号">
         </div>
         </div>
-        <!-- 验证码: start-->
-        <div class="passport-captcha row">
-            <div class="passport-captcha-img">
-                <img class="passport-captcha-png" src="{{captchaUrl}}">
+
+        {{!--图片验证 start--}}
+        <div id="js-img-check">
+            <input type="hidden" name="captsrc" value="{{captsrc}}">
         </div>
         </div>
-            <div class="passport-captcha-input">
-                <input id="js-captcha"  type="text" placeholder="验证码">
-            </div>
-        </div>
-        <!-- 验证码: end-->
+        {{!--图片验证 end--}}
+
         <span id="btn-next" class="btn btn-next disable row">下一步</span>
         <span id="btn-next" class="btn btn-next disable row">下一步</span>
         <p class="register-tip">Yoho!Family账号可登录Yoho!Buy有货、Yoho!Now、mars及SHOW</p>
         <p class="register-tip">Yoho!Family账号可登录Yoho!Buy有货、Yoho!Now、mars及SHOW</p>
     </div>
     </div>

@@ -24,17 +24,29 @@ api.selectCssHack($('#country-select'));
 
 
 api.bindClearEvt();
 api.bindClearEvt();
 
 
+
+// 图片验证码
+let ImgCheck = require('plugin/img-check');
+
+let imgCheck = new ImgCheck('#js-img-check', {
+    useREM: {
+        rootFontSize: 40,
+        picWidth: 150
+    }
+});
+
+imgCheck.init();
+
 /**
 /**
  * 必填校验
  * 必填校验
  */
  */
 function checkEnableNext() {
 function checkEnableNext() {
     var phone = trim($phoneNum.val());
     var phone = trim($phoneNum.val());
     var area = trim($countrySelect.val());
     var area = trim($countrySelect.val());
-    var captcha = trim($captcha.val());
 
 
     var ret = true;
     var ret = true;
 
 
-    $.each([phone, area, captcha], function(i, val) {
+    $.each([phone, area], function(i, val) {
         if (!val) {
         if (!val) {
             ret = false;
             ret = false;
             return ret;
             return ret;
@@ -44,24 +56,13 @@ function checkEnableNext() {
     return ret;
     return ret;
 }
 }
 
 
-
-/**
- *  刷新 校验码
- */
-function refreshCaptcha() {
-    $captcha.val('').focus();
-    $captchaPNG.attr('src', ['//m.yohobuy.com/passport/reg/captcha.png', '?t=', Date.now()].join(''));
-}
-
-
 /*
 /*
     Event bind
     Event bind
 */
 */
 $('.reg-page')
 $('.reg-page')
-    .on('input', '.phone-num, #js-captcha', function() {
+    .on('input', '.phone-num', function() {
         $btnNext.toggleClass('disable', !checkEnableNext());
         $btnNext.toggleClass('disable', !checkEnableNext());
-    })
-    .on('click', '.passport-captcha-png', refreshCaptcha);
+    });
 
 
 $countrySelect.change(function() {
 $countrySelect.change(function() {
     $areaCode.text($countrySelect.val());
     $areaCode.text($countrySelect.val());
@@ -70,10 +71,10 @@ $countrySelect.change(function() {
 $btnNext.on('touchstart', function() {
 $btnNext.on('touchstart', function() {
     var pn = trim($phoneNum.val()),
     var pn = trim($phoneNum.val()),
         areaCode = $countrySelect.val(),
         areaCode = $countrySelect.val(),
-        captcha = $captcha.val().trim();
+        captcha = imgCheck.getResults();
 
 
-    if (!captcha) {
-        tip.show('请输入验证码');
+    if (captcha === '0000') {
+        tip.show('请将图片旋转到正确位置');
         return false;
         return false;
     }
     }
 
 
@@ -102,7 +103,7 @@ $btnNext.on('touchstart', function() {
                 if (data.code === 200) {
                 if (data.code === 200) {
                     location.href = data.data;
                     location.href = data.data;
                 } else {
                 } else {
-                    refreshCaptcha();
+                    imgCheck.refresh();
 
 
                     showErrTip(data.message);
                     showErrTip(data.message);
                     requested = false;
                     requested = false;
@@ -110,7 +111,7 @@ $btnNext.on('touchstart', function() {
             },
             },
             error: function() {
             error: function() {
                 showErrTip('出错了，请重试');
                 showErrTip('出错了，请重试');
-                refreshCaptcha();
+                imgCheck.refresh();
                 requested = false;
                 requested = false;
             }
             }
         });
         });