注册 第一步校验码UI完成

@@ -13,6 +13,7 @@ const sign = global.yoho.sign;
 const cookie = global.yoho.cookie;
 const cookie = global.yoho.cookie;
 const RegService = require('../models/reg-service');
 const RegService = require('../models/reg-service');
 const AuthHelper = require('../models/auth-helper');
 const AuthHelper = require('../models/auth-helper');
+const captchaService = require('../models/captcha-service');
 
 
 let index = (req, res) => {
 let index = (req, res) => {
     // 设置注册有效时间30分钟, 防机器刷
     // 设置注册有效时间30分钟, 防机器刷
@@ -28,6 +29,7 @@ let index = (req, res) => {
         page: 'reg',
         page: 'reg',
         title: '注册',
         title: '注册',
         backUrl: 'javascript:history.go(-1)', // eslint-disable-line
         backUrl: 'javascript:history.go(-1)', // eslint-disable-line
+        captchaUrl: helpers.urlFormat('/passport/reg/captcha.png', {t: Date.now()}),
         headerText: '注册', // 头部信息
         headerText: '注册', // 头部信息
         isPassportPage: true, // 模板中模块标识
         isPassportPage: true, // 模板中模块标识
         areaCode: '+86', // 默认的区号
         areaCode: '+86', // 默认的区号
@@ -269,6 +271,20 @@ let setPassword = (req, res, next) => {
     }).catch(next);
     }).catch(next);
 };
 };
 
 
+/**
+ *  生成 校验码
+ */
+const genCaptcha = (req, res) => {
+    let captcha = captchaService.generateCaptcha(90, 52, 4);
+
+    req.session.regCaptch = captcha.token;
+
+    res.type('png')
+       .set('Cache-Control', 'no-cache')
+       .status(200)
+       .end(captcha.image);
+};
+
 module.exports = {
 module.exports = {
     index,
     index,
     verifyMobile,
     verifyMobile,
@@ -276,5 +292,6 @@ module.exports = {
     sendCode,
     sendCode,
     verifyCode,
     verifyCode,
     password: passwordAction,
     password: passwordAction,
-    setPassword
+    setPassword,
+    genCaptcha
 };
 };

@@ -84,6 +84,7 @@ router.post('/passport/bind/changeMobile', bind.changeMobile);
  * 注册
  * 注册
  */
  */
 router.get('/passport/reg/index', reg.index);
 router.get('/passport/reg/index', reg.index);
+router.get('/passport/reg/captcha.png', reg.genCaptcha);
 router.post('/passport/reg/verifymobile', reg.verifyMobile);
 router.post('/passport/reg/verifymobile', reg.verifyMobile);
 router.get('/passport/reg/code', reg.code);
 router.get('/passport/reg/code', reg.code);
 router.post('/passport/reg/sendcode', reg.sendCode);
 router.post('/passport/reg/sendcode', reg.sendCode);

@@ -6,6 +6,15 @@
             <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">
+            <input type="text" placeholder="验证码">
+            <div class="passport-captcha-img">
+                <img class="passport-captcha-png" src="{{captchaUrl}}">
+                <button class="passport-captcha-refresh" type="button">换一张</button>
+            </div>
+        </div>
+        <!-- 验证码: 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>

@@ -7,3 +7,4 @@
 @import "bind";
 @import "bind";
 @import "success";
 @import "success";
 @import "app-update";
 @import "app-update";
+@import "passport-captcha"

+/*  验证码 css
+-----------------------------------
+结构：
+div.passport-captch
+    input
+    div
+       img
+       button
+
+emmet:
+div.passport-captch>input+div>img+button 
+
+*/
+
+.passport-captcha {
+    text-align: left;
+
+    input {
+        display: inline-block;
+        width: 50%;
+        position: relative;
+        padding-left: 15px;
+        height: 52PX;
+        font-size: 20PX;
+        background-color: #575757;
+        border: 1px solid #606060;
+        border-radius: 5PX;
+        color: #fff;
+    }
+}
+
+.passport-captcha-img {
+    width: 50%;
+    float: right;
+    text-align: right;
+
+    img {
+        display: inline-block;
+        margin-right: 30px;
+        background-color: #fff;
+        height: 52PX;
+        width: 90PX;
+        vertical-align: bottom;
+    }
+} 
+
+.passport-captcha-refresh {
+    display: inline-block;
+    text-decoration: underline;
+    font-size: 18px;
+    color: #ff1901;
+    background-color: transparent;
+    padding: 0;
+    margin: 0;
+    border: 0;
+    outline: 0;
+}