Merge branch 'gray' into 'master'

Gray



See merge request !369

@@ -44,16 +44,40 @@ const _step1 = (req, res, next) => {
     }
 
     let template = 'sms/login';
+
+    // 登陆切换到短信登陆
+    // let viewData = {
+    //     width750: true,
+    //     module: 'passport',
+    //     page: 'sms-login',
+    //     title: '手机短信登录',
+    //     isPassportPage: true,
+    //     headerText: '手机号码快捷登录',
+    //     captchaUrl: helpers.urlFormat('/passport/sms_login/captcha.png', {t: Date.now()}),
+    //     areaCode: '+86', // 默认的区号
+    //     countrys: RegService.getAreaData() // 地区信息列表
+    // };
     let viewData = {
         width750: true,
         module: 'passport',
         page: 'sms-login',
+        backUrl: 'javascript:history.go(-1)', // eslint-disable-line
+        showHeaderImg: true, // 控制显示头部图片
         title: '手机短信登录',
         isPassportPage: true,
-        headerText: '手机号码快捷登录',
         captchaUrl: helpers.urlFormat('/passport/sms_login/captcha.png', {t: Date.now()}),
+        smsLoginUrl: '/passport/sms_login',
+        registerUrl: '/passport/reg/index', // 注册的URL链接
+        aliLoginUrl: '/passport/login/alipay', // 支付宝快捷登录的URL链接
+        weiboLoginUrl: '/passport/login/sina', // 微博登录的URL链接
+        qqLoginUrl: '/passport/login/qq', // 腾讯QQ登录的URL链接
+        wechatLoginUrl: '/passport/login/wechat', // 微信登录的URL链接
+        internationalUrl: '/passport/international', // 国际号登录的URL链接
+        phoneRetriveUrl: '/passport/back/mobile', // 通过手机号找回密码的URL链接
+        emailRetriveUrl: '/passport/back/email', // 通过邮箱找回密码的URL链接
         areaCode: '+86', // 默认的区号
-        countrys: RegService.getAreaData() // 地区信息列表
+        countrys: RegService.getAreaData(), // 地区信息列表
+        reg: true
     };
 
     res.render(template, viewData);

@@ -22,7 +22,8 @@ const agreement = require(cRoot + '/app-agreement');
 const router = express.Router(); // eslint-disable-line
 
 // 兼容老的路由
-router.get('/signin.html', login.common.beforeLogin, login.local.loginPage);
+// router.get('/signin.html', login.common.beforeLogin, login.local.loginPage);
+router.get('/signin.html', login.common.beforeLogin, smsLogin.loginPage);
 router.get('/reg.html', disableBFCahce, reg.index);
 router.get('/login.html', login.common.beforeLogin, login.local.international);
 router.get('/phoneback.html', back.indexMobilePage);
@@ -32,11 +33,12 @@ router.get('/emailback.html', back.indexEmailPage);
 router.get('/passport/signout/index', login.local.logout);
 
 // 登录页面
-router.get('/passport/login', login.common.beforeLogin, login.local.loginPage);
+// router.get('/passport/login', login.common.beforeLogin, login.local.loginPage);
+router.get('/passport/login', login.common.beforeLogin, smsLogin.loginPage);
 router.get('/passport/international', login.common.beforeLogin, login.local.international);
 
 // 本地登录
-router.post('/passport/login/auth', login.local.login);
+// router.post('/passport/login/auth', login.local.login);
 
 // SMS 短信
 router.use('/passport/sms_login', login.common.beforeLogin, smsLogin.beforeIn);

@@ -13,5 +13,35 @@
         </div>
         {{!--图片验证 end--}}
         <button id="btn-next" class="btn btn-next disable row" disabled>获取短信验证码</button>
+        <p class="op-container">
+            <a class="op-item internat" href={{internationalUrl}}>海外手机</a>
+            {{!--<a class="op-item sms-login" href={{smsLoginUrl}}>快速登录</a>--}}
+            <span id="forget-pwd" class="op-item forget-pwd">忘记密码</span>
+        </p>
+        <div class="third-party-login">
+            <div class="tp-link">
+                <a class="qq" href={{qqLoginUrl}}></a>
+                <a class="wechat" href={{wechatLoginUrl}}></a>
+                <a class="weibo" href={{weiboLoginUrl}}></a>
+                <a class="alipay" href={{aliLoginUrl}}></a>
+            </div>
+        </div>
+        <div class="login-tip">
+            <div class="info-icon"></div>
+            Yoho!Family账号可登录Yoho!Buy有货
+        </div>
+        
+        <div id="retrive-pwd-mask" class="mask"></div>
+        <ul id="retrive-pwd-ways" class="retrive-pwd-ways">
+            <li>
+                <a href={{phoneRetriveUrl}}>通过手机找回密码</a>
+            </li>
+            <li>
+                <a href={{emailRetriveUrl}}>通过邮箱找回密码</a>
+            </li>
+            <li id="cancel-retrive">
+                取消
+            </li>
+        </ul>
     </div>
 </div>
\ No newline at end of file

 {
   "name": "m-yohobuy-node",
-  "version": "5.4.31",
+  "version": "5.4.32",
   "private": true,
   "description": "A New Yohobuy Project With Express",
   "repository": {

@@ -8,7 +8,9 @@ var $countrySelect,
     $resetBtn,
     $captcha,
     $captchaPNG,
-    $phoneNum;
+    $phoneNum,
+    $mask = $('#retrive-pwd-mask'),
+    $ways = $('#retrive-pwd-ways');
 
 var page;
 
@@ -31,7 +33,31 @@ let imgCheck = new ImgCheck('#js-img-check', {
 imgCheck.init();
 
 
+// 显示找回密码面板
+function showRetrivePanel() {
+    $mask.show();
+    $ways.show();
+}
 
+// 隐藏找回密码面板
+function hideRetrivePanel() {
+    $mask.hide();
+    $ways.hide();
+}
+
+
+$('#forget-pwd').on('touchstart', function() {
+    showRetrivePanel();
+});
+
+$mask.on('touchstart', function() {
+    hideRetrivePanel();
+});
+
+$('#cancel-retrive').on('touchstart', function(e) {
+    e.preventDefault();
+    hideRetrivePanel();
+});
 page = {
     init: function() {
         this.domInit();

@@ -44,3 +44,145 @@
         color: #858585;
     }
 }
+
+.op-container {
+    position: relative;
+    width: 100%;
+    margin: 20PX 0;
+    text-align: center;
+    font-size: 16PX;
+    display: flex;
+
+    .op-item {
+        flex: 1;
+        color: #fff;
+    }
+
+    .internat {
+        text-align: left;
+    }
+
+    .forget-pwd {
+        text-align: right;
+    }
+}
+
+.third-party-login {
+    text-align: left;
+
+    > span {
+        font-size: 16PX;
+        color: #858585;
+    }
+
+    .tp-link {
+        text-align: center;
+        padding: 20PX 0;
+
+        > a {
+            display: inline-block;
+            width: 44PX;
+            height: 44PX;
+            margin: 0 7PX;
+            border-radius: 50%;
+            background-color: #333;
+            background-repeat: no-repeat;
+            background-size: 100% 100%;
+        }
+
+        .alipay {
+            background-image: resolve("passport/alipay.png");
+        }
+
+        .weibo {
+            background-image: resolve("passport/weibo.png");
+        }
+
+        .qq {
+            background-image: resolve("passport/qq.png");
+        }
+
+        .wechat {
+            display: none;
+            background-image: resolve("passport/wechat.png");
+        }
+    }
+}
+
+.international {
+    display: block;
+    width: 200PX;
+    padding: 5PX 10PX;
+    background-color: #333;
+    border: none;
+    border-radius: 20PX;
+    margin: 0 auto 28px;
+    font-size: 16PX;
+    color: #d8d8d8;
+}
+
+.go-register {
+    color: #858585;
+
+    a {
+        color: inherit;
+    }
+}
+
+.login-tip {
+    font-size: 14PX;
+    position: relative;
+    color: #d8d8d8;
+    margin: 15PX 0;
+
+    .info-icon {
+        display: inline-block;
+        height: 12PX;
+        width: 12PX;
+        background-image: resolve("passport/info.png");
+        background-size: 100% 100%;
+    }
+}
+
+.mask {
+    position: fixed;
+    display: none;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.retrive-pwd-ways {
+    position: fixed;
+    display: none;
+    bottom: 5PX;
+    left: 10PX;
+    right: 10PX;
+    font-size: 16PX;
+
+    li {
+        background-color: #fff;
+        width: 100%;
+        height: 40PX;
+        line-height: 40PX;
+        text-align: center;
+
+        &:nth-child(1) {
+            border-top-left-radius: 5PX;
+            border-top-right-radius: 5PX;
+            border-bottom: 1PX solid #9f9f9f;
+        }
+
+        &:nth-child(2) {
+            border-bottom-left-radius: 5PX;
+            border-bottom-right-radius: 5PX;
+        }
+
+        &:last-child {
+            margin-top: 10PX;
+            border-radius: 5PX;
+        }
+    }
+}
\ No newline at end of file