build login

-alert('I am test');

+/**
+ * 国际账号登录
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/10/8
+ */
+var $ = require('yoho.jquery');
+
+var $phoneNum = $('#phone-num'),
+    $countrySelect = $('#country-select'),
+    $countryCode = $('#country-code'),
+    $pwd = $('#pwd'),
+    $loginBtn = $('#btn-login'),
+
+    pnPass = false,
+    pwdPass = false;
+
+var api = require('../api');
+
+var trim = $.trim;
+var showErrTip = api.showErrTip;
+
+//登录按钮状态切换
+function switchLoginBtnStatus() {
+    if (pnPass && pwdPass) {
+        $loginBtn.removeClass('disable');
+    } else {
+        $loginBtn.addClass('disable');
+    }
+}
+
+//Android-UC下显示select的direction:rtl无效的临时解决办法
+api.selectCssHack($countrySelect);
+
+//初始化ErrTip
+api.initErrTip();
+
+//显示隐藏密码
+api.bindEyesEvt();
+
+//清空手机号码
+api.bindClearEvt();
+
+$phoneNum.bind('input', function() {
+    if (trim($phoneNum.val()) === '') {
+        pnPass = false;
+    } else {
+        pnPass = true;
+    }
+
+    switchLoginBtnStatus();
+});
+
+$pwd.bind('input', function() {
+    var pwd = trim($pwd.val());
+
+    if (pwd === '') {
+        pwdPass = false;
+    } else {
+        pwdPass = true;
+    }
+
+    switchLoginBtnStatus();
+});
+
+$countrySelect.change(function() {
+    $countryCode.text($countrySelect.val());
+});
+
+$loginBtn.on('touchstart', function() {
+    var pn = trim($phoneNum.val()),
+        country = $countrySelect.val(),
+        pwd = trim($pwd.val());
+
+    if ($loginBtn.hasClass('disable')) {
+        return;
+    }
+
+    if (api.phoneRegx[country].test(pn) && api.pwdValidate(pwd)) {
+        $.ajax({
+            type: 'POST',
+            url: '/passport/signin/auth',
+            data: {
+                area: country.split('+')[1],
+                account: pn,
+                pwd: pwd
+            }
+        }).then(function(data) {
+            if (data.code === 200) {
+                showErrTip('登录成功');
+
+                //1000ms后跳转页面
+                setTimeout(function() {
+                    location.href = data.data;
+                }, 1000);
+            } else {
+                showErrTip(data.message);
+            }
+        }, function() {
+            showErrTip('网络断开连接啦~');
+        });
+    } else {
+        showErrTip('账号或密码有错误，请重新输入');
+    }
+});
+
+//对初始有默认值的情况去初始化登录按钮状态
+$phoneNum.trigger('input');
+$pwd.trigger('input');

+/**
+ * 登录
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/9/30
+ */
+var $ = require('yoho.jquery');
+
+var $account = $('#account'),
+    $pwd = $('#pwd'),
+    $loginBtn = $('#btn-login'),
+
+    $mask = $('#retrive-pwd-mask'),
+    $ways = $('#retrive-ways'),
+
+    accPass = false,
+    pwdPass = false;
+
+var api = require('../api');
+
+var trim = $.trim;
+var showErrTip = api.showErrTip;
+
+//登录按钮状态切换
+function switchLoginBtnStatus() {
+    if (accPass && pwdPass) {
+        $loginBtn.removeClass('disable');
+    } else {
+        $loginBtn.addClass('disable');
+    }
+}
+
+//显示找回密码面板
+function showRetrivePanel() {
+    $mask.show();
+    $ways.slideDown();
+}
+
+//隐藏找回密码面板
+function hideRetrivePanel() {
+    $mask.hide();
+    $ways.slideUp();
+}
+
+//初始化ErrTip
+api.initErrTip();
+
+//密码显示与隐藏
+api.bindEyesEvt();
+
+//清空账号输入框
+api.bindClearEvt();
+
+$account.bind('input', function() {
+    if (trim($account.val()) !== '') {
+        accPass = true;
+    } else {
+        accPass = false;
+    }
+    switchLoginBtnStatus();
+});
+
+$pwd.bind('input', function() {
+    if (trim($pwd.val()) === '') {
+        pwdPass = false;
+    } else {
+        pwdPass = true;
+    }
+    switchLoginBtnStatus();
+});
+
+
+// Login
+$loginBtn.on('touchstart', function() {
+    var acc = trim($account.val()),
+        pwd = trim($pwd.val());
+
+    if ($loginBtn.hasClass('disable')) {
+        return;
+    }
+
+    //验证账号（数字或者邮箱）和密码合理性
+    if ((/^[0-9]+$/.test(acc) || api.emailRegx.test(acc)) && api.pwdValidate(pwd)) {
+        $.ajax({
+            type: 'POST',
+            url: '/passport/signin/auth',
+            data: {
+                account: acc,
+                pwd: pwd
+            }
+        }).then(function(data) {
+            if (data.code === 200) {
+                showErrTip('登录成功');
+
+                //1s后跳转页面
+                setTimeout(function() {
+                    location.href = data.data;
+                }, 1000);
+            } else {
+                showErrTip(data.message);
+            }
+        }, function() {
+            showErrTip('网络断开连接啦~');
+        });
+    } else {
+        showErrTip('账号或密码有错误，请重新输入');
+    }
+});
+
+
+$('#forget-pwd').on('touchstart', function() {
+    showRetrivePanel();
+});
+
+$mask.on('touchstart', function() {
+    hideRetrivePanel();
+});
+
+$('#cancel-retrive').on('touchstart', function(e) {
+    e.preventDefault();
+    hideRetrivePanel();
+});
+
+//对初始有默认值的情况去初始化登录按钮状态
+$account.trigger('input');
+$pwd.trigger('input');

+.login-page {
+    .yoho-log {
+        position: absolute;
+        height: 31px;
+        width: 26px;
+        background: image-url('yohofamily/yoho.png');
+        background-size: 100% 100%;
+        top: 10px;
+        left: 15px;
+    }
+
+    .op-container {
+        position: relative;
+        width: 100%;
+        margin: 20px 0;
+        text-align: left;
+        font-size: 16px;
+
+        .go-register {
+            text-decoration: underline;
+            color: #858585;
+        }
+
+        .forget-pwd {
+            position: absolute;
+            right: 0;
+            text-decoration: underline;
+            color: #858585;
+        }
+    }
+
+    .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;
+                @include border-radius(50%);
+                background-color: #333;
+                background-repeat: no-repeat;
+                background-size: 100% 100%;
+            }
+
+            .alipay {
+                background-image: image-url('yohofamily/alipay.png');
+            }
+
+            .weibo {
+                background-image: image-url('yohofamily/weibo.png');
+            }
+
+            .weixin {
+                background-image: image-url('yohofamily/weixin.png');
+            }
+
+            .qq {
+                background-image: image-url('yohofamily/qq.png');
+            }
+        }
+    }
+
+    .interational {
+        display: block;
+        width: 200px;
+        padding: 5px 10px;
+        background-color: #333;
+        border: none;
+        border-radius: 20px;
+        margin: 0 auto;
+        font-size: 16px;
+        color: #d8d8d8;
+    }
+
+    .login-tip {
+        font-size: 16px;
+        position: relative;
+        color: #d8d8d8;
+        margin: 15px 0;
+
+        .info {
+            display: inline-block;
+            height: 12px;
+            width: 12px;
+            background-image: image-url('yohofamily/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,.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) {
+                @include border-top-left-radius(5px);
+                @include border-top-right-radius(5px);
+                border-bottom: 1px solid #9f9f9f;
+            }
+
+            &:nth-child(2) {
+                @include border-bottom-left-radius(5px);
+                @include border-bottom-right-radius(5px);
+            }
+
+            &:last-child {
+                margin-top: 10px;
+                @include border-radius(5px);
+            }
+        }
+    }
+
+}

-<?php
-
-/* 
- * To change this license header, choose License Headers in Project Properties.
- * To change this template file, choose Tools | Templates
- * and open the template in the editor.
- */
-

+<div class="login-page passport-page yoho-page">
+    {{> passport/header}}
+    <div class="content">
+        <div class="acc-container input-container row has-clear">
+            <div class="yoho-logo"></div>
+            <input id="account" class="input account" type="text" placeholder="手机号/邮箱" autocomplete="off" value={{defAccount}}>
+        </div>
+        <div class="input-container row has-eye">
+            <input id="pwd" class="pwd input" type="password" placeholder="密码">
+        </div>
+        <span id="btn-login" class="btn btn-login disable">登录</span>
+        <p class="op-container">
+            <a class="go-register" href={{registerUrl}}>免费注册</a>
+            <span id="forget-pwd" class="forget-pwd">忘记密码</span>
+        </p>
+        <div class="third-party-login">
+            <span>其他登录方式</span>
+            <div class="tp-link">
+                <a class="alipay" href={{aliLoginUrl}}></a>
+                <a class="weibo" href={{weiboLoginUrl}}></a>
+                <a class="qq" href={{qqLoginUrl}}></a>
+            </div>
+        </div>
+        <a class="interational" href={{interationalUrl}}>Interational Customer</a>
+        <div class="login-tip">
+            <div class="info-icon"></div>
+            Yoho!Family账号可登录YOHO!有货
+        </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>

+<div class="login-interational-page passport-page yoho-page">
+    {{> passport/header}}
+    <div class="content">
+        {{> passport/country_list}}
+        <div class="input-container phone-container row has-clear">
+            <span id="country-code" class="country-code">{{countryCode}}</span>
+            <input id="phone-num" class="input phone-num" type="text" placeholder="手机号" value={{phoneNum}}>
+        </div>
+        <div class="input-container row has-eye">
+            <input id="pwd" class="pwd input" type="password" placeholder="密码">
+        </div>
+        <span id="btn-login" class="btn btn-login disble row">登录</span>
+    </div>
+</div>