|
...
|
...
|
@@ -8,7 +8,10 @@ |
|
|
|
/* 流程 */
|
|
|
|
/** ************************************************************************/
|
|
|
|
/**
|
|
|
|
* 登录分为：普通登录(使用帐户和密码登录)和手机验证码登录（使用手机号和验证短信登录）
|
|
|
|
* 登录分为：
|
|
|
|
* 1.普通登录(使用帐户和密码登录)
|
|
|
|
* 2.短信验证码登录（使用手机号和验证短信登录）
|
|
|
|
* 3.二维码登录
|
|
|
|
*
|
|
|
|
* 每种登录的流程都是一致的，具体如下：
|
|
|
|
* 1. 各个输入框失去焦点验证（包括本地和网络）。
|
|
...
|
...
|
@@ -21,6 +24,9 @@ |
|
|
|
* 手机验证码登录
|
|
|
|
* 帐号验证 => 手机短信验证 => 图形验证码验证 => 登录之前验证 => 登录
|
|
|
|
* 注意： **短信验证使用的是验证短信成功后的code进行登录**
|
|
|
|
*
|
|
|
|
* 二维码登录
|
|
|
|
* 生成二维码 => 轮询二维码 => 成功后 => 用二维码登录 => 登录
|
|
|
|
*/
|
|
|
|
|
|
|
|
/** ************************************************************************/
|
|
...
|
...
|
@@ -89,7 +95,9 @@ var $accountInput1 = $('#account1'), |
|
|
|
getQrCodeVal = function() {
|
|
|
|
return $qrcodeInput.val();
|
|
|
|
},
|
|
|
|
$qrCodeContainer = $('.qrcode');
|
|
|
|
$qrCodeContainer = $('#qrcode-container'),
|
|
|
|
$qrCodeOverlay = $('#qrcode-overlay'),
|
|
|
|
timerCheckQrCode;
|
|
|
|
|
|
|
|
// 提示
|
|
|
|
var $accountTip1 = $accountInput1.siblings('.err-tip'),
|
|
...
|
...
|
@@ -114,6 +122,9 @@ var checkboxSymbol = { |
|
|
|
// 短信验证码的时间间隔，60s
|
|
|
|
var second = 60;
|
|
|
|
|
|
|
|
// 检查二维码的时间 3s
|
|
|
|
var CHECK_INTERVAL = 3000;
|
|
|
|
|
|
|
|
// 只能验证一次
|
|
|
|
var isSmsCheckedSuccess = false;
|
|
|
|
|
|
...
|
...
|
@@ -122,7 +133,7 @@ var isSmsCheckedSuccess = false; |
|
|
|
/** ************************************************************************/
|
|
|
|
var accountChangeLoginTypeEvent = $.Callbacks(); //eslint-disable-line
|
|
|
|
var currentLogin = null;
|
|
|
|
var $switchLoginType = $('.switch');
|
|
|
|
var $switchPhoneLoginType = $('.switch');
|
|
|
|
var AccountLoginType = {
|
|
|
|
PasswordLogin: {
|
|
|
|
ele: '.password-login',
|
|
...
|
...
|
@@ -195,13 +206,24 @@ var AccountLoginType = { |
|
|
|
getAccountVal: getAccountVal2, // eslint-disable-line
|
|
|
|
showAccountTip: showAccountTip2, // eslint-disable-line
|
|
|
|
hideAccountTip: hideAccountTip2 // eslint-disable-line
|
|
|
|
},
|
|
|
|
QRCodeLogin: {
|
|
|
|
type: function() {
|
|
|
|
return 'qrcode';
|
|
|
|
},
|
|
|
|
getAccountVal: function() {
|
|
|
|
return $.trim($('#uid').val());
|
|
|
|
},
|
|
|
|
creditableToken: getQrCodeVal,
|
|
|
|
validate: function() {
|
|
|
|
return $.Deferred().resolve().promise(); // eslint-disable-line
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
/** ************************************************************************/
|
|
|
|
/* 设备登录类型 */
|
|
|
|
/** ************************************************************************/
|
|
|
|
var deviceChangeLoginTypeEvent = $.Callbacks(); //eslint-disable-line
|
|
|
|
var $switchDeviceType = $('#device-bg');
|
|
|
|
var DeviceLoginType = {
|
|
|
|
DesktopLogin: {
|
|
...
|
...
|
@@ -223,9 +245,21 @@ var DeviceLoginType = { |
|
|
|
};
|
|
|
|
|
|
|
|
var $deviceTips = $('.type-tip');
|
|
|
|
var desktopTipShowOnce = $.Callbacks('once'); //eslint-disable-line
|
|
|
|
var mobileTipShowOnce = $.Callbacks('once'); //eslint-disable-line
|
|
|
|
|
|
|
|
var desktopShowOnce = $.Callbacks('once'); //eslint-disable-line
|
|
|
|
var mobileShowOnce = $.Callbacks('once'); //eslint-disable-line
|
|
|
|
var QR_CODE_ERR = {
|
|
|
|
fail: '扫描失败',
|
|
|
|
error: '二维码已失效'
|
|
|
|
};
|
|
|
|
|
|
|
|
var tpl = function(text) {
|
|
|
|
return [
|
|
|
|
'<div class="qrcode-err-tip">',
|
|
|
|
text,
|
|
|
|
'</div><a id="qrcode-refresh-btn" class="qrcode-refresh-btn">请点击刷新</a>'
|
|
|
|
].join('');
|
|
|
|
};
|
|
|
|
|
|
|
|
// 切换登录方式
|
|
|
|
accountChangeLoginTypeEvent.add(function(type) {
|
|
...
|
...
|
@@ -244,6 +278,8 @@ accountChangeLoginTypeEvent.add(function() { |
|
|
|
$captchaImgInput.val('');
|
|
|
|
$captchaSmsInput.val('');
|
|
|
|
$captchaSmsTokenHideInput.val('');
|
|
|
|
qrcodeDefaultValue(); // eslint-disable-line
|
|
|
|
$qrCodeOverlay.empty();
|
|
|
|
});
|
|
|
|
|
|
|
|
// placeholder 变化
|
|
...
|
...
|
@@ -255,11 +291,11 @@ accountChangeLoginTypeEvent.add(function(type) { |
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
desktopShowOnce.add(function() {
|
|
|
|
desktopTipShowOnce.add(function() {
|
|
|
|
$deviceTips.removeClass('hide');
|
|
|
|
});
|
|
|
|
|
|
|
|
mobileShowOnce.add(function() {
|
|
|
|
mobileTipShowOnce.add(function() {
|
|
|
|
$deviceTips.removeClass('hide');
|
|
|
|
});
|
|
|
|
|
|
...
|
...
|
@@ -334,6 +370,25 @@ function hideCaptchaSmsTip() { |
|
|
|
return errTipHide($captchaSmsTip, $captchaSmsInput);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**************************************************************************/
|
|
|
|
// qrcode
|
|
|
|
function showQrCodeTip(msg) {
|
|
|
|
$qrCodeOverlay.addClass('qrcode-overlay-fail');
|
|
|
|
$qrCodeOverlay.append(tpl(msg));
|
|
|
|
}
|
|
|
|
|
|
|
|
function hideQrCodeTip() {
|
|
|
|
$qrCodeOverlay.empty();
|
|
|
|
$qrCodeOverlay.removeClass('qrcode-overlay-fail');
|
|
|
|
}
|
|
|
|
|
|
|
|
function showQrCodeSuccess() {
|
|
|
|
$qrCodeOverlay.addClass('qrcode-overlay-success');
|
|
|
|
$qrCodeOverlay.css({
|
|
|
|
left: '65px'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/** ************************************************************************/
|
|
|
|
/* 用户帐号验证 */
|
|
|
|
/** ************************************************************************/
|
|
...
|
...
|
@@ -662,6 +717,72 @@ function preSmsLoginWithValidate() { |
|
|
|
}()).then(validateWithSmsMode);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**************************************************************************/
|
|
|
|
/* 二维码 */
|
|
|
|
/**************************************************************************/
|
|
|
|
|
|
|
|
function refreshQrCode() {
|
|
|
|
return $.ajax({
|
|
|
|
url: '/passport/login/qrcode/refresh',
|
|
|
|
type: 'POST',
|
|
|
|
data: {}
|
|
|
|
}).then(function(result) {
|
|
|
|
hideQrCodeTip();
|
|
|
|
$qrCodeContainer.empty();
|
|
|
|
$qrCodeContainer.qrcode({
|
|
|
|
render: 'table',
|
|
|
|
size: 140,
|
|
|
|
text: result.data.qrcode
|
|
|
|
});
|
|
|
|
|
|
|
|
$qrcodeInput.val(result.data.qrcode);
|
|
|
|
timerCheckQrCodeAsync(); // eslint-disable-line
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function validateQrCodeAsync(code) {
|
|
|
|
return $.ajax({
|
|
|
|
url: '/passport/login/qrcode/check',
|
|
|
|
type: 'POST',
|
|
|
|
data: {
|
|
|
|
qrcode: code
|
|
|
|
}
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function timerCheckQrCodeAsync() {
|
|
|
|
timerCheckQrCode = window.setTimeout(function() {
|
|
|
|
validateQrCodeAsync(getQrCodeVal).then(function(result) {
|
|
|
|
clearTimerQrCode(); // eslint-disable-line
|
|
|
|
if (result.code === 200) {
|
|
|
|
showQrCodeSuccess();
|
|
|
|
login(); // eslint-disable-line
|
|
|
|
} else if (result.code === 403) {
|
|
|
|
setImmediate(function() {
|
|
|
|
timerCheckQrCodeAsync();
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
showQrCodeTip(QR_CODE_ERR.fail);
|
|
|
|
}
|
|
|
|
|
|
|
|
});
|
|
|
|
}, CHECK_INTERVAL);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
function clearTimerQrCode() {
|
|
|
|
clearTimeout(timerCheckQrCode);
|
|
|
|
timerCheckQrCode = null;
|
|
|
|
}
|
|
|
|
|
|
|
|
function qrcodeDefaultValue() {
|
|
|
|
$('.qrcode').empty().qrcode({
|
|
|
|
render: 'table',
|
|
|
|
size: 150,
|
|
|
|
text: '//m.yohobuy.com/signin.html'
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
/** ************************************************************************/
|
|
|
|
/* 帮助函数 */
|
|
|
|
/** ************************************************************************/
|
|
...
|
...
|
@@ -745,9 +866,12 @@ function login() { |
|
|
|
if (currentLogin.type() === 'password') {
|
|
|
|
showPasswordTip(res.message);
|
|
|
|
$passwordInput.addClass('error').val('');
|
|
|
|
} else {
|
|
|
|
} else if (currentLogin.type() === 'sms') {
|
|
|
|
showCaptchaSmsTip('短信验证码错误');
|
|
|
|
$captchaSmsInput.addClass('error').val('');
|
|
|
|
} else if (currentLogin.type() === 'qrcode') {
|
|
|
|
// noting to do
|
|
|
|
showQrCodeTip(QR_CODE_ERR.fail);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
...
|
...
|
@@ -795,7 +919,7 @@ $(document).on('click', function(e) { |
|
|
|
|
|
|
|
/** ************************************************************************/
|
|
|
|
|
|
|
|
// 邮箱自动完成后失去焦点：1. 本地验证格式；2.服务器检查用户是否注册；3.检查验证用户次数
|
|
|
|
// 邮箱自动完成后失去焦点：1. 本地验证格式；2.服务器检查用户是否注册；3.检查验证用户次数
|
|
|
|
mailAc($accountInput1, function() {
|
|
|
|
return currentLogin.validateAccountLocal().then(function() {
|
|
|
|
return currentLogin.validateAccountAsync().always(checkUserAuthCountAsync);
|
|
...
|
...
|
@@ -879,7 +1003,7 @@ $captchaImgWrapper.on('click', '.change-captcha, .captcha-img', function() { |
|
|
|
});
|
|
|
|
|
|
|
|
// 切换登录模式：密码登录和短信登录
|
|
|
|
$switchLoginType.on('click', 'div', function() {
|
|
|
|
$switchPhoneLoginType.on('click', 'div', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
type = $this.data('type');
|
|
|
|
|
|
...
|
...
|
@@ -896,7 +1020,7 @@ $switchLoginType.on('click', 'div', function() { |
|
|
|
$(AccountLoginType[type].hideEle).addClass('hide');
|
|
|
|
});
|
|
|
|
|
|
|
|
// 切换登录模式：帐号登录和二维码登录
|
|
|
|
// 切换登录模式：手机登录和二维码登录
|
|
|
|
$switchDeviceType.on('click', function() {
|
|
|
|
var $this = $(this),
|
|
|
|
$parent = $this.parent(),
|
|
...
|
...
|
@@ -912,23 +1036,34 @@ $switchDeviceType.on('click', function() { |
|
|
|
$parent.find('#device-tip').html(DeviceLoginType[type].tipText);
|
|
|
|
|
|
|
|
if (type === 'DesktopLogin') {
|
|
|
|
desktopShowOnce.fire();
|
|
|
|
desktopTipShowOnce.fire();
|
|
|
|
clearTimerQrCode();
|
|
|
|
accountChangeLoginTypeEvent.fire('PasswordLogin');
|
|
|
|
} else {
|
|
|
|
mobileShowOnce.fire();
|
|
|
|
mobileTipShowOnce.fire();
|
|
|
|
timerCheckQrCodeAsync();
|
|
|
|
accountChangeLoginTypeEvent.fire('QRCodeLogin');
|
|
|
|
refreshQrCode(); // 生成二维码
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
$qrCodeContainer.on('mouseenter', function() {
|
|
|
|
console.log('enter');
|
|
|
|
}).on('mouseleave', function() {
|
|
|
|
console.log('leave');
|
|
|
|
$qrCodeOverlay.addClass('qrcode-overlay-helper');
|
|
|
|
});
|
|
|
|
|
|
|
|
$qrCodeOverlay.on('mouseleave', function() {
|
|
|
|
$qrCodeOverlay.removeClass('qrcode-overlay-helper');
|
|
|
|
});
|
|
|
|
|
|
|
|
$qrCodeOverlay.on('click', '#qrcode-refresh-btn', function() {
|
|
|
|
refreshQrCode();
|
|
|
|
});
|
|
|
|
|
|
|
|
/** ************************************************************************/
|
|
|
|
/* 登录 */
|
|
|
|
/** ************************************************************************/
|
|
|
|
|
|
|
|
// click登录
|
|
|
|
// click登录
|
|
|
|
$('#login-btn').on('click', login);
|
|
|
|
|
|
|
|
// enter登录
|
|
...
|
...
|
@@ -942,8 +1077,8 @@ $('input.va').on('keypress', function(e) { |
|
|
|
/* 初始化 */
|
|
|
|
/** ************************************************************************/
|
|
|
|
|
|
|
|
// 初始化为密码登录
|
|
|
|
accountChangeLoginTypeEvent.fire('PasswordLogin');
|
|
|
|
// 初始化为桌面登录
|
|
|
|
$switchDeviceType.triggerHandler('click');
|
|
|
|
|
|
|
|
// 只带账户名的页面，密码输入获得焦点
|
|
|
|
if (($accountInput1.val() !== '' || $accountInput1.val() === $accountInput1.attr('placeholder')) &&
|
|
...
|
...
|
@@ -955,10 +1090,4 @@ if (($accountInput1.val() !== '' || $accountInput1.val() === $accountInput1.attr |
|
|
|
/* 结束 */
|
|
|
|
/** ************************************************************************/
|
|
|
|
|
|
|
|
$('.qrcode').qrcode({
|
|
|
|
render: 'table',
|
|
|
|
size: 150,
|
|
|
|
text: getQrCodeVal()
|
|
|
|
});
|
|
|
|
|
|
|
|
$switchDeviceType.triggerHandler('click'); |
...
|
...
|
|
