fe / YOHOBUYWAP · Commits

Go to a project

Authored by xuqi
Commit 2776dadb6cb2e74c0b87ad02e865c3010519ad46 1 parent ec8ba25c

build login

Inline Side-by-side
Showing 7 changed files with 432 additions and 9 deletions
alert('I am test');
\ No newline at end of file
/**
* 国际账号登录
* @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');
\ No newline at end of file
... ...
/**
* 登录
* @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');
\ No newline at end of file
... ...
.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);
}
}
}
}
\ No newline at end of file
... ...
<?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>
\ No newline at end of file
... ...
<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>
\ No newline at end of file
... ...