fe / YOHO-ACTIVITY-PHP · Commits

Go to a project

Authored by xuqi
Commit 5887c165066d54c362fc98a5f427ee8ed054e225 1 parent 724220b6

login build

Inline Side-by-side
Showing 10 changed files with 318 additions and 2 deletions
... ... @@ -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">&#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>
{{/ passport}}
</div>
... ...
/**
* 登录
* @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);
}
});
\ No newline at end of file
... ...
@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
... ...
... ... @@ -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);
... ...