Merge branch 'feature/passport' of http://git.dev.yoho.cn/web/yohobuy into feature/passport

@@ -3,7 +3,62 @@
     {{# passport}}
     {{# passport}}
         {{> passport/cover}}
         {{> passport/cover}}
         <div class="content">
         <div class="content">
-
+            <form id="login-form" method="POST" action="/passport/index/login">
+                <ul class="login-ul">
+                    <li class="relative clearfix">
+                        <h2 class="title">会员登录</h2>
+                        <span id="country-code" class="country-code right">
+                            <em>{{countryName}} +{{countryCode}}</em>
+                            <i class="iconfont">&#xe600;</i>
+                            <ul id="country-list" class="country-list">
+                                {{#each countryList}}
+                                    <li data-cc="{{code}}">{{name}} +{{code}}</li>
+                                {{/each}}
+                            </ul>
+                        </span>
+                    </li>
+                    <li class="relative">
+                        <input id="account" class="account input va" name="account" type="text" placeholder="邮箱/手机号码" autocomplete="off">
+                        <ul id="email-autocomplete" class="email-autocomplete hide"></ul>
+                    </li>
+                    <li class="relative">
+                        <input id="password" class="password input va" name="password" type="text" placeholder="密码" autocomplete="off" maxlength="20">
+                        <span id="caps-lock" class="caps-lock hide">大写状态开启</span>
+                    </li>
+                    <li>
+                        <span id="login-btn" class="login-btn btn">登录</span>
+                    </li>
+                    <li class="other-opts">
+                        <span class="remeber-me">
+                            <i class="iconfont">&#xe613;</i>
+                            记住登录状态
+                        </span>
+                        <span class="right">
+                            <a class="forget-password" href="{{forgetPwd}}">忘记密码?</a>
+                            |
+                            <a class="fast-reg" href="{{fastReg}}">快速注册</a>
+                        </span>
+                    </li>
+                    <li class="third-party-login">
+                        <a href="{{qqLogin}}">
+                            <span class="icon qq"></span>
+                        </a>
+                        <a href="{{weiboLogin}}">
+                            <span class="icon weibo"></span>
+                        </a>
+                        <a href="{{alipayLogin}}">
+                            <span class="icon alipay"></span>
+                        </a>
+                        <a href="{{doubanLogin}}">
+                            <span class="icon douban"></span>
+                        </a>
+                        <a href="{{renrenLogin}}">
+                            <span class="icon renren"></span>
+                        </a>
+                    </li>
+                </ul>
+                 <input id="country-code-hide" name="countryCode" type="hidden" value="{{countryCode}}">
+            </form>
         </div>
         </div>
     {{/ passport}}
     {{/ passport}}
 </div>
 </div>

+{{> layout/header}}
+<div class="login-page passport-page yoho-page clearfix">
+    {{# passport}}
+        {{> passport/cover}}
+        <div class="content">
+            <div class="register-page">
+                <form id="register-form" class="register-form" method="POST" action="{{actionUrl}}" autocomplete="off">
+                    <ul>
+                        <li class="clearfix">
+                            <select id="region" class="region" name="region">
+                                {{#each region}}
+                                <option {{#if selected}}selected="selected"{{/if}} value="{{id}}">{{name}}</option>
+                                {{/each}}
+                            </select>
+                        </li>
+                        <li class="clearfix">
+                            <span id="country-code" class="country-code">{{location}}</span>
+                            <input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off">
+                        </li>
+                        <li class="w330 clearfix">
+                            <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4">
+                            <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt="">
+                            <a class="link change-captcha">换一张</a>
+                        </li>
+                        <li class="clearfix">
+                            <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4">
+                            <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码" disabled="">
+                            <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机，请查收</span>
+                        </li>
+                        <li class="clearfix">
+                            <input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password">
+                            <div class="pwd-intensity-container">
+                                <span class="pwd-intensity low">低</span>
+                                <span class="pwd-intensity mid">中</span>
+                                <span class="pwd-intensity high">高</span>
+                            </div>
+                            <div id="pwd-tips" class="hide pwd-tips">
+                                <div class="default" id="pwd-tip1">密码只支持6-20位字符</div>
+                                <div class="default" id="pwd-tip2">建议由字母、 数字、 符号两种以上组合</div>
+                            </div>
+                        </li>
+
+                        <li class="items-container clearfix">
+                            <input id="agree-terms" class="agree-terms" type="checkbox" checked="">
+                            <span>
+                                我已阅读并同意遵守
+                                <a class="link go-yoho-items" href="{{itemUrl}}">YOHO!有货服务条款</a>
+                            </span>
+                        </li>
+                        <li class="clearfix">
+                            <input name="refer" id="refer" type="hidden" value="{{referUrl}}">
+                            <input id="register-btn" class="btn register-btn disable" type="submit" value="立即注册" disabled="">
+                        </li>
+                        <li class="quick-login-container">
+                            我已注册YOHO!有货账号
+                            <a class="link go-login" href="{{loginUrl}}">快速登录</a>
+                        </li>
+                    </ul>
+                    <div id="err-tip" class="err-tip hide">
+                        <span></span>
+                        <b></b>
+                    </div>
+                </form>
+            </div>
+        </div>
+    {{/ passport}}
+</div>
+{{> layout/footer}}

+/**
+ * 登录
+ * @author: xuqi<qi.xu@yoho.cn>
+ * @date: 2015/12/11
+ */
+var $ = require('yoho.jquery');
+
+var mailPostfix = {
+    num: ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com', 'sohu.com', 'hotmail.com', '139.com', '189.com'],
+    other: ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', 'sohu.com', 'hotmail.com', '139.com', '189.com']
+};
+
+var $account = $('#account');
+
+var $countryCodeHide = $('#country-code-hide'),
+    $countryCodeEm = $('#country-code > em'),
+    $countryList = $('#country-list');
+
+var $emailAutoComplete = $('#email-autocomplete');
+
+//checkbox status unicode
+var checkbox = {
+    checked: '&#xe612;',
+    unchecked: '&#xe613;'
+};
+
+var emailAcTime;
+
+//展开地区列表
+$('#country-code').on('click', function() {
+    if ($countryList.css('display') === 'none') {
+        $countryList.slideDown();
+    }
+});
+
+//选中地区列表项
+$countryList.on('click', 'li', function() {
+    var $this = $(this),
+        cc = $this.data('cc');
+
+    $countryCodeEm.html($this.html());
+
+    $countryCodeHide.val(cc);
+
+    $countryList.slideUp();
+});
+
+//点击其他区域，收起区域列表
+$(document).on('click', function(e) {
+    if ($(e.target).closest('#country-code').length > 0) {
+        return;
+    }
+
+    if ($countryList.css('display') === 'block') {
+        $countryList.slideUp();
+    }
+});
+
+//邮箱自动完成
+$account.on('keyup', function() {
+    var account = $.trim($(this).val()),
+        html = '',
+        accountMatch,
+        matchStr,
+        postfix,
+        i;
+
+    //输入@时自动补全邮箱后缀
+    //此处>0非错误，用于避免输入的第一个字符为@被识别为邮箱
+    if (account.indexOf('@') > 0) {
+        accountMatch = account.match(/^[0-9]+@(.*)/);
+        if (accountMatch) {
+
+            //数字邮箱补全
+            postfix = mailPostfix.num;
+        } else {
+            postfix = mailPostfix.other;
+        }
+
+        matchStr = accountMatch[1];
+        for (i = 0; i < postfix.length; i++) {
+            if (postfix[i].indexOf(matchStr) > -1) {
+                html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + postfix[i] + '</li>';
+            }
+        }
+
+        if (html !== '') {
+            $emailAutoComplete.html(html).removeClass('hide');
+        } else {
+
+            //隐藏autocomplete
+            $emailAutoComplete.html('').addClass('hide');
+        }
+    }
+}).on('blur', function() {
+    emailAcTime = setTimeout(function() {
+        $emailAutoComplete.addClass('hide');
+    }, 200);
+});
+
+//邮箱自动完成列表项点击
+$emailAutoComplete.on('click', 'li', function() {
+    clearTimeout(emailAcTime); //清空默认关闭
+
+    $account.val($(this).text());
+
+    $emailAutoComplete.addClass('hide');
+});
+
+//记住登录状态
+$('.remeber-me').on('click', function() {
+    var $this = $(this);
+
+    $this.toggleClass('checked');
+
+    if ($this.hasClass('checked')) {
+        $this.children('i').html(checkbox.checked);
+    } else {
+        $this.children('i').html(checkbox.unchecked);
+    }
+});

-@import "login";
+@import "login", "register";
 
 
 .passport-page {
 .passport-page {
     width: 1150px;
     width: 1150px;

+@import "passport/*.png";
+$third: sprite-map("passport/*.png");
+
+.login-page {
+    .relative {
+        position: relative;
+    }
+
+    .right {
+        float: right;
+    }
+
+    .login-ul > li {
+        margin-bottom: 25px;
+    }
+
+    .title {
+        float: left;
+        font-size: 20px;
+    }
+
+    .country-code {
+        cursor: pointer;
+        color: #b9b9b9;
+    }
+
+    .country-list {
+        display: none;
+        position: absolute;
+        padding: 0 10px;
+        background: #fff;
+        border: 1px solid #000;
+        top: 20px;
+        right: 0;
+        z-index: 1;
+
+        @include border-radius(5px);
+
+        li {
+            height: 20px;
+            line-height: 20px;
+            color: #000;
+        }
+    }
+
+    .email-autocomplete {
+        position: absolute;
+        width: 248px;
+        padding: 0 10px;
+        z-index: 1;
+        margin-top: 5px;
+        border-radius: 5px;
+        cursor: pointer;
+        border: 1px solid #fefefe;
+        background-color: #161616;
+        color: #fff;
+
+        li {
+            height: 24px;
+            line-height: 24px;
+        }
+    }
+
+    .remeber-me {
+        cursor: pointer;
+    }
+
+    .other-opts {
+        color: #b9b9b9;
+        font-size: 14px;
+
+        .iconfont {
+            font-size: 14px;
+        }
+
+        .fast-reg {
+            color: #ff1901;
+        }
+    }
+
+    .forget-password {
+        color: #b9b9b9;
+    }
+
+    .third-party-login {
+        display: table;
+
+        a {
+            display: table-cell;
+            width: 54px;
+            background-size: 100% 100%;
+        }
+
+        .icon {
+            display: block;
+            width: 30px;
+            height: 30px;
+            margin: 0 auto;
+        }
+
+        .qq {
+            background: sprite($third, qq) no-repeat;
+        }
+
+        .weibo {
+            background: sprite($third, weibo) no-repeat;
+        }
+
+        .alipay {
+            background: sprite($third, alipay) no-repeat;
+        }
+
+        .douban {
+            background: sprite($third, douban) no-repeat;
+        }
+
+        .renren {
+            background: sprite($third, renren) no-repeat;
+        }
+    }
+}

+/*
+ * @description 注册页样式
+ * @author chenglong.wang@yoho.cn
+ * @time 2015/12/11
+ */
+
+.content {
+
+    .register-page {
+        font-size: 14px;
+        color: #b9b9b9;
+    }
+
+    .register-form {
+        height: auto;
+
+        li {
+            margin-bottom: 25px;
+            width: 270px;
+            position: relative;
+
+            &.w330 {
+                width: 330px;
+            }
+
+            input, select {
+                outline: none;
+            }
+
+            input {
+                height: 43px;
+                line-height: 43px;
+                font-size: 16px;
+                width: 268px;
+                border: 1px solid #dbdbdb;
+                text-indent: 10px;
+                font-family: '黑体' Regular;
+                color: #9a9a9a;
+                padding: 0;
+
+                &.phone-num {
+                    width: 209px;
+                    display: block;
+                    float: left;
+                }
+
+                &.captcha, &.msg-captcha{
+                    width: 160px;
+                    float: left;
+                }
+
+                &.send-captcha {
+                    top: 0;
+                    background: #555;
+                    position: absolute;
+                    width: 100px;
+                    right: 0;
+                    font-size: 12px;
+                    text-indent: 0;
+                    letter-spacing: 0;
+                }
+
+                &.agree-terms {
+                    width: initial;
+                    height: initial;
+                    vertical-align: middle;
+                }
+            }
+
+            .link {
+                text-decoration: underline;
+                color: #ff1901;
+            }
+
+            .btn {
+                height: 45px;
+                line-height: 45px;
+                color: #fff;
+                border: none;
+                padding: 0;
+                font-family: '黑体' Regular;
+                text-align: center;
+            }
+
+            //区域下拉选择框
+            select.region {
+                height: 30px;
+                padding: 4px 0;
+                width: 132px;
+                border-color: #c1c1c1;
+                color: #9a9a9a;
+                font-size: 16px;
+                font-family: '黑体' Regular;
+            }
+
+            //手机号
+            .country-code {
+                width: 58px;
+                height: 43px;
+                line-height: 43px;
+                text-align: center;
+                white-space: nowrap;
+                border: 1px solid #dbdbdb;
+                border-right: 0;
+                font-size: 16px;
+                display: block;
+                float: left;
+            }
+
+            //验证码
+            .captcha-img {
+                height: 37px;
+                width: 90px;
+                border: 0;
+                vertical-align: middle;
+                outline: none;
+                margin-left: 10px;
+                margin-top: 4px;
+                float: left;
+            }
+            .change-captcha {
+                margin-left: 10px;
+                cursor: pointer;
+                float: left;
+                height: 43px;
+                line-height: 43px;
+            }
+
+            //密码强度
+            .pwd-intensity-container {
+                width: 270px;
+                text-align: right;
+                margin-top: 5px;
+
+                .pwd-intensity {
+                    height: 15px;
+                    font-size: 12px;
+                    background-color: #e8e8e8;
+                    padding: 1px 10px;
+                    text-align: center;
+                }
+            }
+
+            //服务条款
+            &.items-container {
+                font-size: 13px;
+                text-align: right;
+                white-space: nowrap;
+            }
+
+            //立即注册
+            .register-btn {
+                width: 270px;
+                font-size: 20px;
+                font-weight: bold;
+
+                &.disable {
+                    background: #555;
+                }
+            }
+
+            //立即登录
+            &.quick-login-container {
+                width: 270px;
+                font-size: 13px;
+                text-align: right;
+                white-space: nowrap;
+            }
+        }
+    }
+}

@@ -14,7 +14,26 @@ class LoginController extends AbstractAction
             'passport' => array(
             'passport' => array(
                 'coverHref' => '/passport',
                 'coverHref' => '/passport',
                 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
                 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190',
-                'countrys' => array()
+                'countryCode' => '86',
+                'countryName' => '中国',
+                'countryList' => array(
+                    array(
+                        'code' => '61',
+                        'name' => '澳大利亚'
+                    ),
+                    array(
+                        'code' => '82',
+                        'name' => '韩国'
+                    ),
+                    array(
+                        'code' => '1',
+                        'name' => '加拿大'
+                    ),
+                    array(
+                        'code' => '86',
+                        'name' => '中国'
+                    )
+                )
             )
             )
         );
         );
         $this->_view->display('index', $data);
         $this->_view->display('index', $data);

+<?php
+
+use Action\AbstractAction;
+
+class RegisterController extends AbstractAction
+{
+    /**
+     * 登录页
+     */
+    public function indexAction()
+    {
+        $data = array(
+            'registerPage' => true,
+            'passport' => array(
+                'actionUrl' => '/passport/register/mobileregister',
+                'region' => array(
+                    array(
+                        'id' => 12,
+                        'name' => '中国',
+                        'selected' => true
+                    ),
+                    array(
+                        'id' => 13,
+                        'name' => '中国澳门',
+                        'selected' => false
+                    ),
+                    array(
+                        'id' => 14,
+                        'name' => '中国台湾',
+                        'selected' => false
+                    ),
+                    array(
+                        'id' => 15,
+                        'name' => '中国香港',
+                        'selected' => false
+                    ),
+                    array(
+                        'id' => 16,
+                        'name' => '马来西亚',
+                        'selected' => false
+                    ),
+                ),
+                'location' => '+86',
+                'captchaUrl' => 'http://www.yohobuy.com/passport/images?t=1449799445',
+                'itemUrl' => '##',
+                'refUrl' => 'http://www.yohobuy.com/',
+                'loginUrl' => '/signin.html?refer=http://www.yohobuy.com/',
+                'coverHref' => '/passport',
+                'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190'
+            )
+        );
+        $this->_view->display('index', $data);
+    }
+}