Authored by xuqi

build common

var yohobuy;
require('./js/index');
require('./js/passport/index');
module.exports = yohobuy;
... ...
/**
* 登录注册公用API
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/8
*/
var $ = require('yoho.zepto');
var trim = $.trim;
//邮箱验证规则
var emailRegx = /^([a-zA-Z0-9]+[_|\_|\.|-]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.|-]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
//手机号码验证规则
var phoneRegx = {
'+86': /^1[35847]{1}[0-9]{9}$/,
'+852': /^[965]{1}[0-9]{7}$/,
'+853': /^[0-9]{8}$/,
'+886': /^[0-9]{10}$/,
'+65': /^[98]{1}[0-9]{7}$/,
'+60': /^1[1234679]{1}[0-9]{8}$/,
'+1': /^[0-9]{10}$/,
'+82': /^01[0-9]{9}$/,
'+44': /^7[789][0-9]{8}$/,
'+81': /^0[9|8|7][0-9]{9}$/,
'+61': /^[0-9]{11}$/
};
//错误验证
var $errTip,
tipTime;
/**
* 初始化错误提示
*/
function initErrTip() {
var errTipHtml = '<div id="err-tip" class="err-tip"></div>';
//插入错误提示HTML
$('.passport-page').append(errTipHtml);
$errTip = $('#err-tip');
$errTip.on('touchstart', function() {
$errTip.fadeOut();
//清除Timeout
clearTimeout(tipTime);
});
}
/**
* 显示错误提示
*/
function showErrTip(content) {
if (typeof $errTip === 'undefined') {
return;
}
$errTip.text(content).show();
//若2秒内未点击则自动消失
tipTime = setTimeout(function() {
if ($errTip.css('display') === 'block') {
$errTip.fadeOut();
}
}, 2000);
}
//密码显示隐藏
function bindEyesEvt() {
var $hasEye = $('.has-eye'),
$eye;
$hasEye.append('<div class="eye close"></div>');
$eye = $hasEye.children('.eye');
$eye.on('touchstart', function(e) {
var $this = $(this),
$pwd = $this.siblings('.pwd');
e.preventDefault();
$this.toggleClass('close');
//切换密码显示和文本显示
if ($this.hasClass('close')) {
$pwd.attr('type', 'password');
} else {
$pwd.attr('type', 'text');
}
$pwd.focus();
});
}
// 清空账号显示
function bindClearEvt() {
var $hasClear = $('.has-clear'),
$clear;
$hasClear.append('<div class="clear-input"></div>');
$clear = $hasClear.children('.clear');
$clear.on('touchstart', function(e) {
var $input = $clear.siblings('.input');
$input.val('').trigger('input').focus();
e.preventDefault();
});
//反向逻辑
$hasClear.children('.input').bind('input', function() {
var $this = $(this),
$thisClear = $this.siblings('.clear'),
val = trim($this.val());
if (val === '') {
$thisClear.hide();
} else {
$thisClear.show();
}
});
}
// 密码长度验证
function pwdValidate(pwd) {
if (pwd.length >= 6 && pwd.length <= 20) {
return true;
}
return false;
}
// hack for resolving direction:rtl didn't work in android uc
function selectCssHack($countrySelect) {
var u = navigator.userAgent;
function autoSelectWidth() {
var wordCount = $countrySelect.find('option:selected').text().length;
switch (wordCount) {
//分别有2,3,4个汉字的情况
case 2:
$countrySelect.outerWidth(90);
break;
case 3:
$countrySelect.outerWidth(110);
break;
default:
$countrySelect.outerWidth(130);
}
}
if (u.match(/uc/i) && u.match(/android/i)) {
$countrySelect.change(function() {
autoSelectWidth();
});
} else {
$countrySelect.removeClass('in-android-uc');
}
}
//Exports APIs
module.exports = {
emailRegx: emailRegx,
phoneRegx: phoneRegx,
initErrTip: initErrTip,
showErrTip: showErrTip,
bindEyesEvt: bindEyesEvt,
bindClearEvt: bindClearEvt,
pwdValidate: pwdValidate,
selectCssHack: selectCssHack
};
\ No newline at end of file
... ...
/**
* 注册/找回密码-验证码
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/8
*/
var $ = require('yoho.zepto');
module.exports = function(useInRegister) {
var $captcha = $('#captcha'),
$btnNext = $('#btn-next'),
$captchaTip = $('#captcha-tip');
var api = require('./api');
var trim = $.trim;
var showErrTip = api.showErrTip;
var urlMid = useInRegister ? 'register' : 'back';
function countDown() {
var count = 59,
itime;
itime = setInterval(function() {
if (count === 0) {
$captchaTip.text('重发验证码').removeClass('disable');
clearInterval(itime);
} else {
$captchaTip.text('重发验证码 (' + count-- + '秒)');
}
}, 1000);
}
api.initErrTip();
api.bindClearEvt();
$captcha.bind('input', function() {
if (trim($captcha.val()) !== '') {
$btnNext.removeClass('disable');
} else {
$btnNext.addClass('disable');
}
});
//重新发送验证码
$captchaTip.on('touchstart', function() {
if ($captchaTip.hasClass('disable')) {
return;
}
$.ajax({
type: 'POST',
url: '/passport/' + urlMid + '/sendPhone'
}).then(function (data) {
if (data.code === 200) {
$captchaTip.text('重发验证码 (60秒)').addClass('disable');
countDown();
} else {
//验证码不正确,显示提示
showErrTip(data.message);
}
});
});
$btnNext.on('touchstart', function() {
if ($btnNext.hasClass('disable')) {
return;
}
$.ajax({
type: 'POST',
url: '/passport/' + urlMid + '/verifycode',
data: {
verifyCode: trim($captcha.val())
}
}).then(function (data) {
if (data.code === 200) {
location.href = data.data;
} else {
//验证码不正确,显示提示
showErrTip(data.message);
}
});
});
countDown();
};
\ No newline at end of file
... ...
/**
* 注册、登录、密码找回打包入口
* @author: xuqi<qi.xu@yoho.cn>
* @date: 2015/10/8
*/
var $ = require('yoho.zepto');
//注册
require('./register/register');
require('./register/code');
require('./register/password');
//登录
require('./login/login');
require('./login/interational');
//密码找回
require('./back/mobile');
require('./back/code');
require('./back/email');
require('./back/email-success');
require('./back/new-password');
//FOR:登录注册密码找回页面样式覆盖
$('body').addClass('passport-body');
\ No newline at end of file
... ...
body {
background-color: #ff0;
@import "compass", "compass/reset";
$pxConvertRem: 40;
@import "passport/index";
html, body {
font-family: helvetica,Arial,"黑体";
width: 100%;
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
\ No newline at end of file
... ...
body.passport-body {
background-color: #444;
font-family: "MicroSoft YaHei",SimSun,sans-serif;
* {
box-sizing: border-box;
}
}
.passport-page {
text-align: center;
padding: 0 6%;
.header {
position: relative;
height: 40px;
margin: 20px 0 30px;
.go-back {
position: absolute;
height: 30px;
width: 30px;
top: 5px;
left: 0;
}
.title {
font-size: 20px;
line-height: 40px;
color: #fff;
}
.img-header {
width: 68px;
height: 40px;
}
}
.input-container, .select-container {
position: relative;
width: 100%;
height: 52px;
font-size: 20px;
background-color: #575757;
border: 1px solid #606060;
border-radius: 5px;
text-align: left;
color: #fff;
}
.select-container {
.select {
position: absolute;
height: 50px;
padding-right: 40px;
right: 0;
color: #fff;
background-color: transparent;
border: 0;
@include border-radius(5px);
@include appearance(none);
direction: rtl;
&:focus {
outline: 0;
border: none;
}
&.:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #fff;
}
}
.arrow-right {
position: absolute;
width: 13px;
height: 20px;
right: 15px;
top: 16px;
background-image: url('http://static.dev.yohobuy.com/passport/arrow-right.png');
background-size: 100% 100%;
}
}
.has-eye, .has-clear {
padding-left: 30px;
}
.country-code {
position: absolute;
left: 15px;
line-height: 2.5;
}
.phone-container {
padding-left: 55px;
}
.input {
width: 100%;
line-height: 26px;
padding: 12px 0;
padding-left: 15px;
border-radius: 5px;
color: #fff;
background-color: transparent;
border: none;
}
.btn {
display: block;
width: 100%;
font-size: 20px;
line-height: 2.5;
background-color: #36a74c;
@include border-radius(5px);
color: #fff;
&.disable {
background-color: #a2a2a2;
}
}
.country-select.in-android-uc {
width: 90px;
}
.clear-input {
position: absolute;
display: none;
top: 18px;
right: 10px;
width: 16px;
height: 16px;
background-image: url('http://static.dev.yohobuy.com/passport/clear-input.png');
background-size: 100% 100%;
}
.eye {
position: absolute;
top: 20px;
right: 10px;
width: 19px;
height: 12px;
background-image: url('http://static.dev.yohobuy.com/passport/eye.png');
background-size: 100% 100%;
&.close {
background-image: url('http://static.dev.yohobuy.com/passport/eye-close.png');
}
}
.row {
margin-bottom: 10px;
}
.err-tip {
position: absolute;
display: none;
text-align: center;
width: 70%;
padding: 34px 0;
top: 50%;
left: 50%;
margin-left: -35%;
margin-top: -45px;
background-color: #000;
opacity: 0.7;
color: #fff;
font-size: 18px;
border: none;
@include border-radius(10px);
}
}
\ No newline at end of file
... ...
@import "common", "register", "login", "back";
\ No newline at end of file
... ...
{{> passport/header}}
<div class="content">
<div class="text-container">
验证码已发送至
<span class="phone">
+{{areaCode}} {{phoneNum}}
</span>
</div>
<div class="input-container row has-clear">
<input id="captcha" class="input captcha" type="text" placeholder="验证码" maxlength="6" autocomplete="off">
<div id="captcha-tip" class="captcha-tip disable">重发验证码(60秒)</div>
</div>
<span id="btn-next" class="btn btn-next disable row">下一步</span>
</div>
\ No newline at end of file
... ...
<div class="select-container row">
<span class="select-title">国家和地区</span>
<select id="country-select" class="country-select select in-android-uc">
{{# countrys}}
<option value={{areaCode}} {{#selected}}selected{{/selected}}>{{name}}</option>
{{/ countrys}}
</select>
<div class="arrow-right"></div>
</div>
\ No newline at end of file
... ...
<div class="header">
{{#if showGoBack}}
<a class="go-back" href={{../backUrl}}>
<img src="http://static.dev.yohobuy.com/img/passport/go-back.png">
</a>
{{/if}}
{{#if useHeaderImg}}
<img src="img-header" src="http://static.dev.yohobuy.com/img/passport/yoho-family.png">
{{/if}}
{{#if useHeaderText}}
<p class="title">{{../headerText}}</p>
{{/if}}
</div>
\ No newline at end of file
... ...