diff --git a/template/www.yohobuy.com/actions/passport/login/index.phtml b/template/www.yohobuy.com/actions/passport/login/index.phtml
index ff12362..2810c9a 100644
--- a/template/www.yohobuy.com/actions/passport/login/index.phtml
+++ b/template/www.yohobuy.com/actions/passport/login/index.phtml
@@ -3,7 +3,62 @@
{{# passport}}
{{> passport/cover}}
<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"></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"></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>
{{/ passport}}
</div>
diff --git a/web-static/img/passport-s1e0ee48eb1.png b/web-static/img/passport-s1e0ee48eb1.png
new file mode 100644
index 0000000..8fe07bb
Binary files /dev/null and b/web-static/img/passport-s1e0ee48eb1.png differ
diff --git a/web-static/img/passport/alipay.png b/web-static/img/passport/alipay.png
new file mode 100644
index 0000000..49c0c97
Binary files /dev/null and b/web-static/img/passport/alipay.png differ
diff --git a/web-static/img/passport/douban.png b/web-static/img/passport/douban.png
new file mode 100644
index 0000000..c5b80de
Binary files /dev/null and b/web-static/img/passport/douban.png differ
diff --git a/web-static/img/passport/qq.png b/web-static/img/passport/qq.png
new file mode 100644
index 0000000..675d53f
Binary files /dev/null and b/web-static/img/passport/qq.png differ
diff --git a/web-static/img/passport/renren.png b/web-static/img/passport/renren.png
new file mode 100644
index 0000000..c85dc59
Binary files /dev/null and b/web-static/img/passport/renren.png differ
diff --git a/web-static/img/passport/weibo.png b/web-static/img/passport/weibo.png
new file mode 100644
index 0000000..fc6a7e8
Binary files /dev/null and b/web-static/img/passport/weibo.png differ
diff --git a/web-static/js/passport/login.js b/web-static/js/passport/login.js
index e69de29..e8d1a6d 100644
--- a/web-static/js/passport/login.js
+++ b/web-static/js/passport/login.js
@@ -0,0 +1,121 @@
+/**
+ * 登录
+ * @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: '',
+ unchecked: ''
+};
+
+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);
+ }
+});
\ No newline at end of file
diff --git a/web-static/sass/passport/_login.scss b/web-static/sass/passport/_login.scss
index e69de29..056a90f 100644
--- a/web-static/sass/passport/_login.scss
+++ b/web-static/sass/passport/_login.scss
@@ -0,0 +1,121 @@
+@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;
+ }
+ }
+}
\ No newline at end of file
diff --git a/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Login.php b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Login.php
index 28bf11d..adbef4d 100644
--- a/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Login.php
+++ b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Login.php
@@ -14,7 +14,26 @@ class LoginController extends AbstractAction
'passport' => array(
'coverHref' => '/passport',
'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);