diff --git a/docs/web-data-structure.md b/docs/web-data-structure.md index 30e7910..966e838 100644 --- a/docs/web-data-structure.md +++ b/docs/web-data-structure.md @@ -490,6 +490,35 @@ } } +## Passport + +### 【公用】左侧YohoFamily LOGO + + { + coverHref: '', //跳转链接,需要有跳转就传,不需要就不传 + coverImg: '' //图片地址 + } + +### 登录页 + + { + passport: { + coverHref: '', //跳转链接,需要有跳转就传,不需要就不传 + coverImg: '' //图片地址 + + countryCode: '86', //无+ + countryName: '中国', + + countryList: [ + { + code: '', + name: '' + }, + ... + ] + } + } + ## 站点头部 { gobuytype: 'gobuyboys',//购物车样式 @@ -584,4 +613,27 @@ name: '衬衫' } }] + } + +## 注册页 + + { + registerPage: true, //用于加载js + passport: { + actionUrl: '/passport/register/mobileregister', //action + region: [ + { + id: 86, //国家地区码 + name: '中国', + selected: true + } + ], + location: '+86', //默认在哪个地区 + captchaUrl: 'http://www.yohobuy.com/passport/images?t=1449799445', //验证码请求地址 + itemUrl' => '##', //服务条款地址 + referUrl' => 'http://www.yohobuy.com/', //注册后跳转链接 + loginUrl' => '/signin.html?refer=http://www.yohobuy.com/', //登录链接 + coverHref' => '/passport', //右侧封面跳转链接 + coverImg' => '##', //右侧封面地址 + } } \ No newline at end of file diff --git a/template/www.yohobuy.com/actions/passport/back/index.phtml b/template/www.yohobuy.com/actions/passport/back/index.phtml new file mode 100644 index 0000000..769d171 --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/back/index.phtml @@ -0,0 +1,47 @@ +{{> layout/simple-header}} +<div class="back-page passport-page yoho-page clearfix"> + {{# back}} + {{> passport/cover}} + <div class="content"> + <div class="back-header clearfix"> + <h2 class="title">找回密码</h2> + <span id="country-code" class="country-code"> + <em>{{countryName}} +{{countryCode}}</em> + <i class="iconfont"></i> + </span> + <ul id="country-code-list" class="country-code-list"> + {{# countryList}} + <li data-cc="+{{code}}">{{name}} +{{code}}</li> + {{/ countryList}} + </ul> + </div> + <form id="back-form" class="back-form" action=""> + <input id="country-code-hide" type="hidden" name="country-code" value="+86"> + <ul> + <li class="input-container-li clearfix"> + <input id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="邮箱/手机号码" autocomplete="off"> + <ul id="tip-panel" class="tip-panel"></ul> + <span id="account-err" class="err-tip hide"> + <i></i> + <em>账户名不能为空</em> + </span> + </li> + <li class="input-container-li clearfix"> + <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="验证码" autocomplete="off" maxlength="4"> + <img id="captcha-img" class="captcha-img" src="http://www.yohobuy.com/passport/images" alt=""> + <a id="change-captcha" class="link change-captcha">换一张</a> + <span id="captcha-err" class="err-tip captcha-err hide"> + <i></i> + <em>验证码不能为空</em> + </span> + </li> + <li class="input-container-li clearfix"> + <input name="refer" id="refer" type="hidden" value="http%3A%2F%2Fwww.yohobuy.com%2F"> + <input id="find-btn" class="btn find-btn disable" type="submit" value="下一步" disabled=""> + </li> + </ul> + </form> + </div> + {{/ back}} +</div> +{{> layout/footer}} \ No newline at end of file diff --git a/template/www.yohobuy.com/actions/passport/back/reset-pwd.phtml b/template/www.yohobuy.com/actions/passport/back/reset-pwd.phtml new file mode 100644 index 0000000..be8a65f --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/back/reset-pwd.phtml @@ -0,0 +1,41 @@ +{{> layout/simple-header}} +<div class="reset-pwd-page back-page passport-page yoho-page clearfix"> +{{# resetPwd}} + {{> passport/cover}} + <div class="content"> + <h2 class="title2">重置密码</h2> + <form id="reset-pwd-form" class="reset-pwd-form" method="POST" action="/passport/back/update"> + <ul> + <li class="input-container-li po-re"> + <input id="pwd" class="input va pwd" type="password" name="pwd" placeholder="新密码" maxlength="20"> + <div class="pwd-intensity-container"> + <span class="pwd-intensity low">低</span> + <span class="pwd-intensity mid">中</span> + <span class="pwd-intensity high">高</span> + </div> + <div id="pwd-tips" class="pwd-tips hide"> + <div class="default" id="pwd-tip1"><i></i>密码只支持6-20位字符</div> + <div class="default" id="pwd-tip2"><i></i>建议由字母、 数字、 符号两种以上组合</div> + </div> + <span id="pwd-err" class="err-tip hide"> + <i></i> + <em>请输入密码</em> + </span> + </li> + <li class="input-container-li clearfix po-re"> + <input id="re-input" class="input va re-input repwd" type="password" name="re-input" placeholder="再次输入" maxlength="20"> + <span id="repwd-err" class="err-tip hide"> + <i></i> + <em>请输入密码确认</em> + </span> + </li> + <li class="input-container-li clearfix"> + <input type="hidden" name="code" value="159bI6arxsuaPBxG2iV9OE9BrgDnAPiTecUqYh2iUC3ntt6S0eOtxXpVu+jWIlveXx9NRuwS9zdrXzcUyOd+d3ikzYBAo0k"> + <input id="reset-pwd-btn" class="btn reset-pwd-btn" type="submit" value="提交" disabled=""> + </li> + </ul> + </form> + </div> +{{/ resetPwd}} +</div> +{{> layout/footer}} \ No newline at end of file diff --git a/template/www.yohobuy.com/actions/passport/back/reset-success.phtml b/template/www.yohobuy.com/actions/passport/back/reset-success.phtml new file mode 100644 index 0000000..90dbbf1 --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/back/reset-success.phtml @@ -0,0 +1,13 @@ +{{> layout/simple-header}} +<div class="reset-success-page back-page passport-page yoho-page clearfix"> +{{# resetSuccess}} + {{> passport/cover}} + <div class="content"> + <div class="success-text"> + <i class="iconfont"></i><span>恭喜!</span>密码修改成功, <span id="count-down">5</span> 秒后将跳转至首页 + </div> + <a class="success-btn" href="/">随便逛逛</a> + </div> +{{/ resetSuccess}} +</div> +{{> layout/footer}} diff --git a/template/www.yohobuy.com/actions/passport/back/send-email.phtml b/template/www.yohobuy.com/actions/passport/back/send-email.phtml new file mode 100644 index 0000000..924e22c --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/back/send-email.phtml @@ -0,0 +1,15 @@ +{{> layout/simple-header}} +<div class="send-email-page passport-page yoho-page clearfix"> +{{# sendEmail}} + {{> passport/cover}} + <div class="content"> + <div class="send-tips"><i class="iconfont"></i>我们已经把验证邮件发送至您的邮箱,请在24小时内通过邮件内的<br>链接继续设置新的密码。</div> + <div class="no-find">没有收到?到您邮箱的垃圾邮件里找找。</div> + <div class="to-my-email"> + <a href="http://mail.qq.com" target="_blank" class="btn_b_ar_r">去我的邮箱></a> + </div> + + </div> +{{/ sendEmail}} +</div> +{{> layout/footer}} \ No newline at end of file diff --git a/template/www.yohobuy.com/actions/passport/back/verification.phtml b/template/www.yohobuy.com/actions/passport/back/verification.phtml new file mode 100644 index 0000000..f42f6f3 --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/back/verification.phtml @@ -0,0 +1,35 @@ +{{> layout/simple-header}} +<div class="verification-page back-page passport-page yoho-page clearfix"> +{{# verification}} + {{> passport/cover}} + <div class="content"> + <form id="verification-form" class="verification-form" method="POST" action="/passport/back/backmobile"> + <ul> + <li class="head-title">验证身份</li> + <li class="po-re"> + <label class="pn-label">手机号码</label> + <span class="country-code">+86</span> + <span class="phone-num">18115624066</span> + </li> + <li class="po-re"> + <input id="captcha" class="input va captcha" type="text" name="captcha"> + <input id="send-captcha" class="btn send-captcha" type="button" value="发送验证码" disabled=""> + <div id="captcha-tip" class="captcha-tips"><i class="iconfont"></i>验证码已发送至您的手机,请查收</div> + <span id="err-tip" class="err-tip hide"> + <i></i> + <em>请输入验证码</em> + </span> + </li> + <li> + <input name="area" id="area" type="hidden" value="86"> + <input name="mobile" id="mobile" type="hidden" value="18115624066"> + <input name="captchaPic" id="captchaPic" type="hidden" value="g7ce"> + <input name="refer" id="refer" type="hidden" value=""> + <input id="next-step" class="btn next-step disable" type="submit" value="下一步" disabled=""> + </li> + </ul> + </form> + </div> +{{/ verification}} +</div> +{{> layout/footer}} \ No newline at end of file diff --git a/template/www.yohobuy.com/actions/passport/login/index.phtml b/template/www.yohobuy.com/actions/passport/login/index.phtml new file mode 100644 index 0000000..09be276 --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/login/index.phtml @@ -0,0 +1,73 @@ +{{> layout/simple-header}} +<div class="login-page passport-page yoho-page clearfix"> + {{# 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> + <span class="err-tip hide"> + <i></i> + <em></em> + </span> + </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> + <span class="err-tip hide"> + <i></i> + <em>请输入密码</em> + </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> +{{> layout/footer}} \ No newline at end of file diff --git a/template/www.yohobuy.com/actions/passport/register/index.phtml b/template/www.yohobuy.com/actions/passport/register/index.phtml new file mode 100644 index 0000000..6c545d3 --- /dev/null +++ b/template/www.yohobuy.com/actions/passport/register/index.phtml @@ -0,0 +1,68 @@ +{{> layout/header}} +<div class="login-page passport-page yoho-page clearfix"> + {{# passport}} + {{> passport/cover}} + <div class="content"> + <div class="register-page"> + <form id="register-form" class="register-form" method="POST" action="{{actionUrl}}" autocomplete="off"> + <ul> + <li class="clearfix"> + <select id="region" class="region" name="region"> + {{#each region}} + <option {{#if selected}}selected="selected"{{/if}} value="{{id}}">{{name}}</option> + {{/each}} + </select> + </li> + <li class="clearfix" data-index="0"> + <span id="country-code" class="country-code">{{location}}</span> + <input value="" id="phone-num" class="input va phone-num" type="text" name="phoneNum" placeholder="请输入手机号码" autocomplete="off"> + </li> + <li class="w330 clearfix" data-index="1"> + <input id="captcha" class="input va captcha" type="text" name="captcha" placeholder="图形验证码" autocomplete="off" maxlength="4"> + <img id="captcha-img" class="captcha-img" src="{{captchaUrl}}" alt=""> + <a class="link change-captcha">换一张</a> + </li> + <li class="clearfix" data-index="2"> + <input id="msg-captcha" class="input va msg-captcha" type="text" name="msgCaptcha" placeholder="短信验证码" autocomplete="off" maxlength="4"> + <input id="send-captcha" class="btn send-captcha disable" type="button" value="获取短信验证码"> + <span id="msg-tip" class="hide msg-tip">短信验证码已发送至您的手机,请查收</span> + </li> + <li class="clearfix" data-index="3"> + <input id="pwd" class="input va pwd" name="pwd" placeholder="设置密码" autocomplete="off" maxlength="20" type="password"> + <div class="pwd-intensity-container"> + <span class="pwd-intensity low">低</span> + <span class="pwd-intensity mid">中</span> + <span class="pwd-intensity high">高</span> + </div> + <div id="pwd-tips" class="hide pwd-tips"> + <div class="default" id="pwd-tip1"><i></i>密码只支持6-20位字符</div> + <div class="default" id="pwd-tip2"><i></i>建议由字母、 数字、 符号两种以上组合</div> + </div> + </li> + + <li class="items-container clearfix"> + <input id="agree-terms" class="agree-terms" type="checkbox" checked=""> + <span> + 我已阅读并同意遵守 + <a class="link go-yoho-items" href="{{itemUrl}}">YOHO!有货服务条款</a> + </span> + </li> + <li class="clearfix"> + <input name="refer" id="refer" type="hidden" value="{{referUrl}}"> + <input id="register-btn" class="btn register-btn disable" type="submit" value="立即注册" disabled=""> + </li> + <li class="quick-login-container"> + 我已注册YOHO!有货账号 + <a class="link go-login" href="{{loginUrl}}">快速登录</a> + </li> + </ul> + <div id="err-tip" class="err-tip hide"> + <span></span> + <b></b> + </div> + </form> + </div> + </div> + {{/ passport}} +</div> +{{> layout/footer}} \ No newline at end of file diff --git a/template/www.yohobuy.com/partials/layout/simple-header.phtml b/template/www.yohobuy.com/partials/layout/simple-header.phtml new file mode 100644 index 0000000..274966c --- /dev/null +++ b/template/www.yohobuy.com/partials/layout/simple-header.phtml @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<html> + <head> + <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <meta http-equiv="Cache-Control" content="no-siteapp" /> + <meta name="renderer" content="webkit"> + <link rel="shortcut icon" href="http://www.yohobuy.com/favicon.ico" type="image/x-icon" /> + <meta name="keywords" content="{{keywords}}"> + <meta name="description" content="{{description}}"> + <title>{{title}}</title> + <!-- [if (gte IE 6)&(lte IE 8)> + <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script> + <![endif]--> + <link rel="stylesheet" href="http://webstatic.dev.yohobuy.com/css/index.css"> + </head> + <body> + {{# simpleHeader}} + <div class="simple-header"> + <div class="header-inner clearfix"> + {{# logo}} + <h1 class="logo"> + <a href="{{url}}"> + <img src="{{img}}" alt=""> + </a> + </h1> + {{/ logo}} + <ul class="header-tool clearfix"> + {{# tool}} + <li {{#if options}}class="tool-options"{{/if}}{{#if loginUrl}}class="login-box"{{/if}}> + {{# tell}} + <i class="tell-icon iconfont"></i> + {{/ tell}} + + {{#if url}} + <a href="{{url}}">{{title}}</a> + {{/if}} + + {{#unless url}} + <span>{{title}}</span> + {{/unless}} + + {{#if options}} + <i class="options-icon down iconfont"></i> + <i class="options-icon up iconfont"></i> + <div class="tool-select"> + {{# options}} + <a href="{{url}}">{{textCn}}</a> + {{/ options}} + </div> + {{/if}} + + {{# loginInfo}} + <a href="{{url}}">{{textCn}}</a> + {{/ loginInfo}} + </li> + {{/ tool}} + </ul> + </div> + </div> + {{/ simpleHeader}} \ No newline at end of file diff --git a/template/www.yohobuy.com/partials/layout/use.phtml b/template/www.yohobuy.com/partials/layout/use.phtml index 980a9ff..6633a52 100644 --- a/template/www.yohobuy.com/partials/layout/use.phtml +++ b/template/www.yohobuy.com/partials/layout/use.phtml @@ -24,4 +24,39 @@ product.init(4); }); </script> +{{/if}} + +{{!-- 登录注册找回密码--}} +{{#if loginPage}} + <script> + seajs.use('js/passport/login'); + </script> +{{/if}} + +{{!-- 注册页--}} +{{#if registerPage}} +<script> + seajs.use('js/passport/reg'); +</script> +{{/if}} + +{{!-- 找回密码--}} +{{#if backPage}} + <script> + seajs.use('js/passport/back'); + </script> +{{/if}} + +{{!-- 重置密码--}} +{{#if resetPage}} + <script> + seajs.use('js/passport/reset'); + </script> +{{/if}} + +{{!-- 验证手机 --}} +{{#if vertificationPage}} + <script> + seajs.use('js/passport/vertification'); + </script> {{/if}} \ No newline at end of file diff --git a/template/www.yohobuy.com/partials/passport/cover.phtml b/template/www.yohobuy.com/partials/passport/cover.phtml new file mode 100644 index 0000000..bcc69c6 --- /dev/null +++ b/template/www.yohobuy.com/partials/passport/cover.phtml @@ -0,0 +1,11 @@ +<div class="passport-cover"> + <div class="cover-content"> + {{#if coverHref}} + <a href="{{coverHref}}" target="_bank"> + <img class="cover-img" src="{{coverImg}}"> + </a> + {{^}} + <img class="cover-img" src="{{coverImg}}"> + {{/if}} + </div> +</div> \ No newline at end of file diff --git a/web-static/font/iconfont.eot b/web-static/font/iconfont.eot index d1ba598..a58fe2e 100644 Binary files a/web-static/font/iconfont.eot and b/web-static/font/iconfont.eot differ diff --git a/web-static/font/iconfont.svg b/web-static/font/iconfont.svg index 0edad14..7a6ec38 100644 --- a/web-static/font/iconfont.svg +++ b/web-static/font/iconfont.svg @@ -2,7 +2,7 @@ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" > <svg xmlns="http://www.w3.org/2000/svg"> <metadata> -Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015 +Created by FontForge 20120731 at Mon Dec 14 13:45:36 2015 By Ads </metadata> <defs> @@ -19,7 +19,7 @@ Created by FontForge 20120731 at Thu Dec 10 11:10:57 2015 bbox="0 -214 1172.1 864" underline-thickness="50" underline-position="-100" - unicode-range="U+0078-E61B" + unicode-range="U+0078-E620" /> <missing-glyph horiz-adv-x="374" d="M34 0v682h272v-682h-272zM68 34h204v614h-204v-614z" /> @@ -97,5 +97,23 @@ d="M903 493l-68 69l-388 -388l-231 230l-68 -68l299 -298l65 65z" /> <glyph glyph-name="uniE61B" unicode="" d="M505 253l2 -2q2 -1 4 -1l3 1l430 364q2 2 1 6l-2 2q-1 1 -3 1h-435h-424q-2 0 -3 -1l-2 -2l1 -6zM72 585q-3 2 -6 0l-3 -4v-584q0 -4 3.5 -5t5.5 1l288 346zM953 585h-5l-288 -246l287 -346q3 -2 6 -1t3 5v584q0 3 -3 4zM641 322l-131 -111l-5 5l-125 103l-275 -328 q-2 -3 -1 -6l2 -2q1 -1 3 -1h396h407q4 0 5 3t-1 6z" /> + <glyph glyph-name="uniE61C" unicode="" +d="M982 137l-4 6l-10 12q-12 13 -42 38q-12 10 -25.5 20.5t-27.5 21t-26 17.5l-48 31l-21 11q-5 2 -11.5 3t-13 0.5t-11.5 -2.5q-7 -2 -13.5 -7.5t-9.5 -10.5l-17 -25q-4 -6 -8 -13l-12 -24q-9 -18 -15 -28q-7 -14 -21 -24t-32 -13.5t-36 7.5q-102 57 -171 123 +q-101 95 -135 172q-8 13 -1.5 37t26.5 34q12 6 25 11.5t23 9.5t18 9q7 4 14.5 8.5t18.5 11.5l2 1l4 4l2 1l3 3q19 18 9 43l-3 8q-1 4 -4 10t-12.5 24.5t-19.5 34.5q-8 14 -19.5 31t-21.5 31q-10 13 -20.5 24t-18.5 17.5t-14.5 11.5t-9.5 6l-4 2l-13 7q-9 4 -17.5 4.5t-16 -1 +t-16.5 -4.5q-5 -2 -9.5 -4.5t-8.5 -4t-9 -4.5l-7 -4q-3 -2 -8 -6t-7 -5t-7.5 -5.5t-7 -5.5t-8 -6.5t-7.5 -5.5q-44 -37 -69.5 -82.5t-19.5 -86.5q10 -72 88 -198.5t182.5 -225.5t237.5 -173t209 -84q79 -10 169 73q16 15 31.5 34.5t24.5 38.5q6 14 7.5 30t-5.5 31v0z +M982 137z" /> + <glyph glyph-name="uniE61D" unicode="" +d="M888 620q8 8 18.5 10.5t20.5 0t18 -10.5q4 -4 6.5 -8.5t4 -9.5t1.5 -10.5t-1.5 -10t-4 -9.5t-6.5 -9l-406 -405q-12 -12 -28.5 -12t-27.5 12q-6 5 -9 12.5t-3 15.5t3 15t9 13zM539 214q3 -3 5 -6t3.5 -7t2 -7.5t0.5 -7.5t-0.5 -8t-2 -7.5t-3.5 -6.5t-5 -6 +q-12 -12 -28.5 -12t-28.5 12l-406 405q-7 8 -10 18.5t0 20.5t10 18q6 6 13.5 9t15 3t15 -3t13.5 -9zM539 214z" /> + <glyph glyph-name="uniE61E" unicode="" +d="M127 769v-770h770v770h-770zM555 170h-86v86h86v-86zM555 298h-86v257h86v-257z" /> + <glyph glyph-name="uniE61F" unicode="" +d="M511.5 747q-72.5 0 -141 -22.5t-123.5 -64t-96 -96.5t-63.5 -123t-22.5 -141q0 -91 35 -173.5t95 -142.5t143 -95.5t173.5 -35.5t173.5 35.5t143 95.5t95 142.5t35 173.5q1 73 -22 141t-64 123t-96 96.5t-123.5 64t-141 22.5zM452 100h-1v0l-38 38l-179 180l38 37 +l179 -179l318 318l38 -38zM512 -147q-91 0 -175 35q-80 34 -142 96t-96 142q-8 21 -15 42t-11 43t-6.5 44t-2.5 45q0 91 35 174q34 81 96 142.5t142 95.5q84 36 175 36q45 0 88.5 -9t85.5 -27q40 -16 75.5 -40.5t66.5 -54.5q20 -21 38 -44t32.5 -47.5t25.5 -51.5 +q35 -83 35 -174t-35 -174q-34 -80 -96 -142t-142 -96q-14 -6 -28 -11t-28.5 -9t-29 -6.5t-29 -4.5t-29.5 -3t-30 -1zM511.5 747q-90.5 0 -173 -35.5t-142.5 -95.5t-95.5 -142.5t-35.5 -173.5t35.5 -173.5t95.5 -142.5t142.5 -95t173 -35t173.5 35t142.5 95t95 142.5 +t35.5 173.5t-35.5 173.5t-95 142.5t-142.5 95.5t-173.5 35.5zM451 99l-38 39l-180 180l39 38l179 -180l318 318l39 -38zM414 138l37 -37l355 355l-37 37l-318 -318l-179 180l-38 -37z" /> + <glyph glyph-name="uniE620" unicode="" +d="M958 662q0 30 -21 51.5t-51 21.5h-749q-30 0 -51 -21.5t-21 -51.5v-748q0 -30 21 -51t51 -21h749q30 0 51 21t21 51v748zM778 358l-267 -267q-14 -14 -34 -14q-9 0 -18 3.5t-16 10.5l-168 168q-14 14 -14 34t14 34q9 10 21.5 13t25 0t21.5 -13l134 -133l233 232 +q9 10 21.5 13t25 0t21.5 -13q14 -14 14 -34t-14 -34z" /> </font> </defs></svg> diff --git a/web-static/font/iconfont.ttf b/web-static/font/iconfont.ttf index 7bcb343..a362bab 100644 Binary files a/web-static/font/iconfont.ttf and b/web-static/font/iconfont.ttf differ diff --git a/web-static/font/iconfont.woff b/web-static/font/iconfont.woff index 032af45..fbce481 100644 Binary files a/web-static/font/iconfont.woff and b/web-static/font/iconfont.woff differ diff --git a/web-static/img/header/logo.png b/web-static/img/header/logo.png new file mode 100644 index 0000000..3e59bda Binary files /dev/null and b/web-static/img/header/logo.png differ diff --git a/web-static/img/passport/third-s81c3ccb2fa.png b/web-static/img/passport/third-s81c3ccb2fa.png new file mode 100644 index 0000000..8fe07bb Binary files /dev/null and b/web-static/img/passport/third-s81c3ccb2fa.png differ diff --git a/web-static/img/passport/third/alipay.png b/web-static/img/passport/third/alipay.png new file mode 100644 index 0000000..49c0c97 Binary files /dev/null and b/web-static/img/passport/third/alipay.png differ diff --git a/web-static/img/passport/third/douban.png b/web-static/img/passport/third/douban.png new file mode 100644 index 0000000..c5b80de Binary files /dev/null and b/web-static/img/passport/third/douban.png differ diff --git a/web-static/img/passport/third/qq.png b/web-static/img/passport/third/qq.png new file mode 100644 index 0000000..675d53f Binary files /dev/null and b/web-static/img/passport/third/qq.png differ diff --git a/web-static/img/passport/third/renren.png b/web-static/img/passport/third/renren.png new file mode 100644 index 0000000..c85dc59 Binary files /dev/null and b/web-static/img/passport/third/renren.png differ diff --git a/web-static/img/passport/third/weibo.png b/web-static/img/passport/third/weibo.png new file mode 100644 index 0000000..fc6a7e8 Binary files /dev/null and b/web-static/img/passport/third/weibo.png differ diff --git a/web-static/img/passport/tip-saaf6d94c96.png b/web-static/img/passport/tip-saaf6d94c96.png new file mode 100644 index 0000000..4cadc82 Binary files /dev/null and b/web-static/img/passport/tip-saaf6d94c96.png differ diff --git a/web-static/img/passport/tip/angle.png b/web-static/img/passport/tip/angle.png new file mode 100644 index 0000000..1fa7f3b Binary files /dev/null and b/web-static/img/passport/tip/angle.png differ diff --git a/web-static/img/passport/tip/block.png b/web-static/img/passport/tip/block.png new file mode 100644 index 0000000..418a662 Binary files /dev/null and b/web-static/img/passport/tip/block.png differ diff --git a/web-static/img/passport/tip/error.png b/web-static/img/passport/tip/error.png new file mode 100644 index 0000000..48768b7 Binary files /dev/null and b/web-static/img/passport/tip/error.png differ diff --git a/web-static/img/passport/tip/info.png b/web-static/img/passport/tip/info.png new file mode 100644 index 0000000..75a8b15 Binary files /dev/null and b/web-static/img/passport/tip/info.png differ diff --git a/web-static/img/passport/tip/success.png b/web-static/img/passport/tip/success.png new file mode 100644 index 0000000..5a11647 Binary files /dev/null and b/web-static/img/passport/tip/success.png differ diff --git a/web-static/img/passport/tip/warn.png b/web-static/img/passport/tip/warn.png new file mode 100644 index 0000000..3f0506b Binary files /dev/null and b/web-static/img/passport/tip/warn.png differ diff --git a/web-static/js/passport/back.js b/web-static/js/passport/back.js new file mode 100644 index 0000000..c60f199 --- /dev/null +++ b/web-static/js/passport/back.js @@ -0,0 +1,272 @@ +/** + * 找回密码 + * @author: xuqi<qi.xu@yoho.cn> + * @date: 2015/12/14 + */ + +var $ = require('yoho.jquery'), + phoneRegx = require('./mail-phone-regx').phoneRegx; + +var $cr = $('#country-code-hide'), + $phoneNum = $('#phone-num'), + $ca = $('#captcha'), + $tipPanel = $('#tip-panel'), + emailReg = /^[.\-_a-zA-Z0-9]+@[\-_a-zA-Z0-9]+\.[a-zA-Z0-9]/, + acAccount = [ + ['qq.com', '163.com', '126.com', 'sina.com', 'gmail.com', + 'sohu.com', 'hotmail.com', '139.com', '189.com'], //数字顺序 + ['gmail.com', 'qq.com', '163.com', '126.com', 'sina.com', + 'sohu.com', 'hotmail.com', '139.com', '189.com'] //组合顺序 + ], + $ccList = $('#country-code-list'), + $cc = $('#country-code'), + $btn = $('#find-btn'), + $accErr = $('#account-err'), + $caErr = $('#captcha-err'), + time, //timeout-id + caCount = 4, //验证码位数 + hasPh = false, + hasCa = false; + +require('../../plugin/jquery.placeholder'); + +/*function getSource(column, postition, event) { + try { + dataLayer.push({ + louceng: column, + weizhi: postition, + event: event + }); + } catch (e) {} +}*/ + +function imgcode() { + $('#captcha-img').attr('src', 'http://www.yohobuy.com/passport/images?t=' + Math.random()); + + //getSource('yoho_family_web', '换一张', 'homepage_man'); +} + +function enableBtn() { + if (hasPh && hasCa) { + $btn.removeClass('disable').prop('disabled', false); + } else { + $btn.addClass('disable').prop('disabled', true); + } +} + +function vaPn(v) { + var pass = true, + errTxt = ''; + + v = $.trim(v); + if (v !== '') { + if (/^[0-9]+$/.test(v)) { + if (phoneRegx[$cr.val()].test(v)) { + pass = true; + } else { + errTxt = '手机号码格式不正确, 请重新输入'; + pass = false; + } + } else { + if (emailReg.test(v)) { + pass = true; + } else { + errTxt = '邮箱格式不正确, 请重新输入'; + pass = false; + } + } + } else { + errTxt = '账户名不能为空'; + pass = false; + } + hasPh = pass; + return { + pass: pass, + errTxt: errTxt + }; +} + +function vaCa() { + var v = $.trim($ca.val()); + + if (v === '' || v.length < caCount) { + hasCa = false; + enableBtn(); + return; + } else { + $.ajax({ + type: 'POST', + url: '/passport/back/authcode', + data: { + code: v, + mobile: $('#phone-num').val(), + area: $('#country-code-hide').val() + } + + }).then(function(data) { + if (data.code === 200) { + hasCa = true; + } else { + hasCa = false; + imgcode(); + } + enableBtn(); + }); + } +} + +$ca.attr('maxlength', caCount); + +//IE8 placeholder +$('input').placeholder(); + +$('#change-captcha, #captcha-img').on('click', function() { + imgcode(); +}); + +$cc.on('click', function(e) { + e.stopPropagation(); + if ($ccList.css('style') === 'block') { + $ccList.slideUp('fast'); + } else { + $ccList.slideDown('fast'); + } +}); + +$ccList.delegate('li', 'click', function(e) { + var $cur = $(this), + code = $cur.data('cc'), + pnVa; + + e.stopPropagation(); + $cr.val(code); + $cc.find('em').html($cur.text()); + + //切换后验证手机号码 + if ($.trim($phoneNum.val()) !== '') { + pnVa = vaPn($phoneNum.val()); + enableBtn(); + if (hasPh) { + $accErr.addClass('hide'); + $phoneNum.removeClass('error'); + } else { + $accErr.removeClass('hide').text(pnVa.errTxt); + $phoneNum.addClass('error'); + } + } + $ccList.slideUp('fast'); +}); + +$(document).click(function() { + if ($tipPanel.css('display') === 'block') { + $tipPanel.slideUp(); + } + if ($ccList.css('display') === 'block') { + $ccList.slideUp(); + } +}); + + + +$phoneNum.keyup(function() { + var account = $.trim($(this).val()), + html = '', + acs, + i; + + //输入@时显示自动补全列表 + if (account.indexOf('@') !== -1 && account.lastIndexOf('@') === account.indexOf('@')) { + if (/^[0-9]*@$/.test(account)) { + + //数字顺序 + acs = acAccount[0]; + } else { + acs = acAccount[1]; + } + for (i = 0; i < acs.length; i++) { + html += '<li>' + account.slice(0, account.indexOf('@')) + '@' + acs[i] + '</li>'; + } + $tipPanel.html(html).slideDown(); + } else { + $tipPanel.slideUp(); + } + vaPn(account); + enableBtn(); +}).blur(function() { + time = setTimeout(function() { + var pnVa = vaPn($phoneNum.val()); + + if (pnVa.pass) { + $accErr.addClass('hide'); + $phoneNum.removeClass('error'); + } else { + $accErr.removeClass('hide').find('em').text(pnVa.errTxt); + $phoneNum.addClass('error'); + } + }, 170); +}).focus(function() { + $(this).removeClass('error'); + + //focus隐藏错误提示 + $accErr.addClass('hide'); +}); + +//验证码在鼠标移开后验证, keyup时不再验证 +$ca.blur(function() { + var errTxt = $.trim($ca.val()) === '' ? '验证码不能为空' : '验证码不正确'; + + if (hasCa) { + $caErr.addClass('hide'); + $ca.removeClass('error'); + } else { + $caErr.removeClass('hide').find('em').text(errTxt); + $ca.addClass('error'); + + //验证码错误则刷新验证码 + imgcode(); + } +}).focus(function() { + $(this).removeClass('error'); + + //focus隐藏错误提示 + $caErr.addClass('hide'); +}).keyup(function() { + vaCa(); +}); + +$tipPanel.delegate('li', 'click', function(e) { + var account = $(this).text(), + pnVa; + + e.stopPropagation(); + $phoneNum.val(account); + if (time) { + clearTimeout(time); + pnVa = vaPn(account); + enableBtn(); + if (pnVa.pass) { + $accErr.addClass('hide'); + $phoneNum.removeClass('error'); + } else { + $accErr.removeClass('hide').find('em').text(pnVa.errTx); + $phoneNum.addClass('error'); + } + time = null; + } + $tipPanel.slideUp(); +}); + +$('#find-btn').click(function(e) { + + //getSource('yoho_family_web', '下一步按钮', 'homepage_man'); + if (/^[0-9]+$/.test($.trim($phoneNum.val()))) { + $('#find-form').attr('action', '/passport/back/mobile'); + } + if ($(this).hasClass('disable')) { + return; + } + if (!hasCa || !hasPh) { + e.preventDefault(); + return true; + } +}); \ No newline at end of file diff --git a/web-static/js/passport/login.js b/web-static/js/passport/login.js new file mode 100644 index 0000000..4b37b0d --- /dev/null +++ b/web-static/js/passport/login.js @@ -0,0 +1,260 @@ +/** + * 登录 + * @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'), + $password = $('#password'); + +var $accountTip = $account.siblings('.err-tip'), + $passwordTip = $password.siblings('.err-tip'), + $capsLock = $('#caps-lock'); + +var $countryCodeHide = $('#country-code-hide'), + $countryCodeEm = $('#country-code > em'), + $countryList = $('#country-list'); + +var $emailAutoComplete = $('#email-autocomplete'); + +var mailPhoneRegx = require('./mail-phone-regx'); + +//checkbox status unicode +var checkbox = { + checked: '', + unchecked: '' +}; + +var emailAcTime; + +require('yoho.placeholder'); + + +//验证账户名 +function validateAccount() { + var pass = false, + account = $.trim($account.val()), + err; + + if (account !== '') { + if (/^[0-9]+$/.test(account)) { + + //如果是纯数字,则作为手机号码处理 + if (mailPhoneRegx.phoneRegx['+' + $countryCodeHide.val()].test(account)) { + pass = true; + } else { + pass = false; + err = '手机号码不正确,请重新输入'; + } + } else { + if (mailPhoneRegx.emailRegx.test(account)) { + pass = true; + } else { + pass = false; + err = '邮箱格式不正确,请重新输入'; + } + } + } else { + err = '请输入账户名'; + } + + if (pass) { + $accountTip.addClass('hide'); + $account.removeClass('error'); + } else { + $accountTip.removeClass('hide').children('em').text(err); + $account.addClass('error'); + } + return pass; +} + +//验证密码 +function validatePassword() { + var pass = false, + password = $.trim($password.val()), + err; + + if (password !== '') { + if (password.length < 6) { + err = '请输入长度为6-20字符的密码'; + } else { + pass = true; + } + } else { + err = '请输入密码'; + } + + if (pass) { + $passwordTip.addClass('hide'); + $password.removeClass('error'); + } else { + $passwordTip.removeClass('hide').children('em').text(err); + $password.addClass('error'); + } +} + +//验证 +function validate() { + var pass = true, + account = $.trim($account.val()), + password = $.trim($password.val()); + + if (account !== '') { + pass = validateAccount() && validatePassword(); + } else { + pass = false; + $account.addClass('error'); + + if (password === '') { + + //账户名和密码都为空的情况下点击登陆,只在账户输入框后显示错误提示 + $accountTip.addClass('both-error').removeClass('hide').children('em').text('请输入账户名和密码'); + $passwordTip.addClass('hide'); + $password.addClass('error'); + } else { + $accountTip.removeClass('hide').children('em').text('请输入账户名'); + } + } + + return pass; +} + +$('[placeholder]').placeholder(); + +//展开地区列表 +$('#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'); + + //验证 + validateAccount(); + }, 200); + +}); + +//密码 +$password.on('blur', function() { + validatePassword(); +}).on('keypress', function(e) { + var code = e.which, + isShift = e.shiftKey || (code === 16) || false; + + //CapsLock检测 + if ((!isShift && (code >= 65 && code <= 90)) || + (isShift && (code >= 97 && code <= 122))) { + $capsLock.removeClass('hide'); + return; + } + $capsLock.addClass('hide'); +}); + +//邮箱自动完成列表项点击 +$emailAutoComplete.on('click', 'li', function() { + clearTimeout(emailAcTime); //清空默认关闭 + + $account.val($(this).text()).focus(); + + $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); + } +}); + +//focus到输入框则隐藏错误提示和样式 +$('.va').on('focus', function() { + var $this = $(this); + + $this.removeClass('error'); + + $this.siblings('.err-tip').addClass('hide'); +}); + +//登录 +$('#login-btn').on('click', function() { + var pass = validate(); + + if (pass) { + $('#login-form').submit(); + } +}); \ No newline at end of file diff --git a/web-static/js/passport/mail-phone-regx.js b/web-static/js/passport/mail-phone-regx.js new file mode 100644 index 0000000..168af23 --- /dev/null +++ b/web-static/js/passport/mail-phone-regx.js @@ -0,0 +1,25 @@ +/** + * 国家区号Map手机号码以及邮箱验证正则 + * @author: xuqi<qi.xu@yoho.cn> + * @date: 2015/12/11 + */ + +var countryPhoneRegx = { + '+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]{1}[0-9]{8}$/, + '+81': /^0[9|8|7][0-9]{9}$/, + '+61': /^[0-9]{11}$/ +}; + +var emailRegx = /^[.\-_a-zA-Z0-9]+@[\-_a-zA-Z0-9]+\.[a-zA-Z0-9]/; + +exports.phoneRegx = countryPhoneRegx; + +exports.emailRegx = emailRegx; \ No newline at end of file diff --git a/web-static/js/passport/pwd-strength.js b/web-static/js/passport/pwd-strength.js new file mode 100644 index 0000000..68dbebf --- /dev/null +++ b/web-static/js/passport/pwd-strength.js @@ -0,0 +1,67 @@ +/* + * 计算密码复杂度 + */ + +function gettype(str, i) { + if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) { + return 1; + } else if (str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) { + return 2; + } else if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) { + return 3; + } + + return 4; +} + +function isregular(cur, pre, type) { + var curCode = cur.charCodeAt(0); + var preCode = pre.charCodeAt(0); + + if (curCode - preCode === 0) { + return true; + } + + if (type !== 4 && (curCode - preCode === 1 || curCode - preCode === -1)) { + return true; + } + + return false; +} + +function getcomplex(curType, preType) { + if (preType === 0 || curType === preType) { + return 0; + } else if (curType === 4 || preType === 4) { + return 2; + } else { + return 1; + } +} + +function computeComplex(password) { + var complex = 0, + length = password.length, + pre = '', + preType = 0, + i = 0, + cur, + curType; + + + for (i = 0; i < length; i++) { + cur = password.charAt(i); + curType = gettype(password, i); + + if (preType !== curType || !isregular(cur, pre, curType)) { + complex += curType + getcomplex(curType, preType); + } + + pre = cur; + preType = curType; + } + + return complex; +} + +module.exports = computeComplex; \ No newline at end of file diff --git a/web-static/js/passport/reg.js b/web-static/js/passport/reg.js new file mode 100644 index 0000000..4f14ae4 --- /dev/null +++ b/web-static/js/passport/reg.js @@ -0,0 +1,459 @@ +/* + * @description 注册页js + * @time 2015/12/14 + */ + +var $ = require('yoho.jquery'), + regValidate = require('./mail-phone-regx'), + computeComplex = require('./pwd-strength'); + +var $registerPage = $('.register-page'), + $pwdTips = $('#pwd-tips'), + $pwdTip1 = $pwdTips.find('#pwd-tip1'), + $errTip = $('#err-tip'), + $registerBtn = $('#register-btn'); + +var $sendCaptcha = $('#send-captcha'), + caCount = 4, + validateResult = []; + +var $pn = $('#phone-num'), + $mc = $('#msg-captcha'), + $pwd = $('#pwd'), + $repwd = $('#repwd'), + $ca = $('#captcha'); + +// 密码强度验证 +var $pwdIntensity = $('.pwd-intensity'), + $pwdParent = $pwdIntensity.closest('.pwd-intensity-container'); + +//signup验证 +var $region = $('#country-code'), + $regionSelect = $('#region'); + +setTimeout(function() { + $pn.val(''); + $mc.val(''); + $pwd.val(''); + $repwd.val(''); + $ca.val(''); +}, 100); + +//验证码位数 +$ca.attr('maxlength', caCount); + +//密码规则提示 +$pwd.focus(function() { + $pwdTips.removeClass('hide'); +}).blur(function() { + $pwdTips.addClass('hide'); +}); + + +//IE8 placeholder +//$('[placeholder]').placeholder(); + +// 存储校验信息 +validateResult = [ + { + id: 'phone-num', + message: '', //错误信息 + status: false //当前的状态 + }, + { + id: 'captcha', + message: '', + status: false + }, + { + id: 'msg-captcha', + message: '', + status: false + }, + { + id: 'pwd', + message: '', + status: false + }, + { + id: 'repwd', + message: '', + status: false + } +]; + +//手机号ajax校验 +function phoneAjaxFn(callback) { + $.ajax({ + url: '/passport/register/checkmobile', + type: 'POST', + data: { + mobile: $pn.val(), + area: $region.text().split('+')[1] + } + }).then(function(data) { + switch (data.code) { + case 200: + validateResult[0].message = ''; + validateResult[0].status = true; + break; + case 404: + validateResult[0].message = '改账号已经存在'; + validateResult[0].status = false; + break; + } + + callback(); + }); +} + +//图形验证码ajax校验 +function picCaptchaAjaxFn(callback) { + $.ajax({ + type: 'POST', + url: '/passport/register/piccaptcha', + data: { + code: $ca.val(), + mobile: $pn.val(), + area: $region.text().split('+')[1] + } + }).then(function(data) { + switch (data.code) { + case 200: + validateResult[1].message = ''; + validateResult[1].status = true; + break; + case 404: + validateResult[1].message = '图形验证码错误'; + validateResult[1].status = false; + break; + } + callback(); + }); +} + +//短信验证码ajax校验 +function msgCaptchaAjaxFn(callback) { + $.ajax({ + type: 'POST', + url: '/passport/register/msgcaptcha', + data: { + code: $ca.val(), + mobile: $pn.val(), + area: $region.text().split('+')[1] + } + }).then(function(data) { + switch (data.code) { + case 200: + validateResult[2].message = ''; + validateResult[2].status = true; + break; + case 404: + validateResult[2].message = '短信验证码错误'; + validateResult[2].status = false; + break; + } + + callback(); + }); +} + +// 验证 +function validateRule($element, callback) { + + var val = $.trim($element.val()), + regionCode; + + + //手机号校验 + if ($element.hasClass('phone-num')) { + + regionCode = $region.text(); + + if (val === '') { + validateResult[0].message = '请输入手机号码'; + validateResult[0].status = false; + callback(); + + } else if (!regValidate.phoneRegx[regionCode].test(val)) { + validateResult[0].message = '手机号码格式不正确,请重新输入'; + validateResult[0].status = false; + callback(); + + } else { + phoneAjaxFn(callback); + } + + //图形验证码校验 + } else if ($element.hasClass('captcha')) { + if (val === '') { + validateResult[1].message = '请输入图形验证码'; + validateResult[1].status = false; + callback(); + + } else if (val.length <= 3) { + validateResult[1].message = '图形验证码为4位'; + validateResult[1].status = false; + callback(); + + } else { + + // 并且手机号正确 + if (validateResult[0].status) { + picCaptchaAjaxFn(callback); + } else { + validateResult[1].message = '图形验证码错误'; + validateResult[1].status = false; + callback(); + } + + } + + //短信验证码校验 + } else if ($element.hasClass('msg-captcha')) { + + if (val === '') { + validateResult[2].message = '请输入短信验证码'; + validateResult[2].status = false; + callback(); + + } else if (val.length <= 3) { + validateResult[2].message = '短信验证码为4位'; + validateResult[2].status = false; + callback(); + + } else { + + // 并且图形验证码正确 + if (validateResult[1].status) { + msgCaptchaAjaxFn(callback); + } else { + validateResult[2].message = '短信验证码错误'; + validateResult[2].status = false; + } + } + + //密码校验 + } else if ($element.hasClass('pwd')) { + if (val === '') { + validateResult[3].message = '请输入密码'; + validateResult[3].status = false; + + } else if (val.length < 6 || val.length > 20) { + validateResult[3].message = '密码只支持6-20位字符'; + validateResult[3].status = false; + + } else if (/\s/.test($element.val())) { + validateResult[3].message = '密码不能包含空格'; + validateResult[3].status = false; + + } else { + validateResult[3].message = ''; + validateResult[3].status = true; + } + callback(); + + //二次密码校验 + } else if ($element.hasClass('repwd')) { + if (val === '') { + validateResult[4].message = '请输入密码确认'; + validateResult[4].status = false; + + } else if ($pwd.val() !== val) { + validateResult[4].message = '与密码不一致,请重新输入'; + validateResult[4].status = false; + + } else { + validateResult[4].message = ''; + validateResult[4].status = true; + + } + + callback(); + } +} + +//显示提示信息 +function showErrTip() { + + var show = false, + tipPosition, + $container, + i, + validateResultLen = validateResult.length; + + for (i = 0; i < validateResultLen; i++) { + if (!show) { + + //不可以通过status判断 + if (!!validateResult[i].message) { + + //显示错误提示 + $errTip.find('span').text(validateResult[i].message); + + $container = $('#' + validateResult[i].id); + + tipPosition = $container.offset(); + $errTip.css({ + top: tipPosition.top - 40, + left: tipPosition.left + }).removeClass('hide'); + + show = true; //停止判断 + } else { + $errTip.addClass('hide'); + } + } + } +} + +//显示红色边框 +function showBorder() { + + var $errInput, + i, + validateResultLen = validateResult.length; + + for (i = 0; i < validateResultLen; i++) { + if (!!validateResult[i].message) { + + //显示红色边框 + $errInput = $('#' + validateResult[i].id); + $errInput.addClass('error'); + + } else { + + //去掉红色边框 + $errInput = $('#' + validateResult[i].id); + $errInput.removeClass('error'); + } + } +} + +// 密码强度验证 +function pwdFn($obj) { + var pwd = $obj.val(), + pwdStrength = computeComplex(pwd), + level = 0; + + if (pwdStrength === 0) { + level = 0; + } else if (pwdStrength <= 10) { + level = 1; + } else if (pwdStrength <= 20) { + level = 2; + } else { + level = 3; + } + + switch (level) { + case 0: + $pwdParent.removeClass('red yellow green'); + $pwdIntensity.removeClass('color'); + break; + case 1: + $pwdParent.addClass('red').removeClass('yellow green'); + $pwdIntensity.filter('.low').addClass('color'); + $pwdIntensity.filter('.mid,.high').removeClass('color'); + break; + case 2: + $pwdParent.addClass('yellow').removeClass('red green'); + $pwdIntensity.filter('.low,.mid').addClass('color'); + $pwdIntensity.filter('.high').removeClass('color'); + break; + case 3: + $pwdParent.addClass('green').removeClass('yellow red'); + $pwdIntensity.addClass('color'); + break; + } + + //提示框 + if (pwd === '') { + $pwdTip1.removeClass('red yes no').addClass('default'); + } else if (pwd.length < 6 || pwd.length > 20) { + $pwdTip1.removeClass('default yes').addClass('no red'); + } else { + $pwdTip1.removeClass('default no red').addClass('yes'); + } +} + +// 失去焦点时开始校验 +// Tips: 不可以在获得焦点的时候验证,获得焦点和失去焦点的间隔太小,如果中间存在ajax校验的话会出现问题 +$registerPage.find('.va').keyup(function() { + + var j, + statusLen = 0, + vLen = validateResult.length, + $that = $(this); + + validateRule($(this), function() { + showErrTip(); // 显示错误提示 + showBorder(); // 显示红色边框 + + // 如果validateResult中有4个status为true表示验证通过 + for (j = 0; j < vLen; j++) { + + if (validateResult[j].status) { + + statusLen++; + } + + } + + if (statusLen === 4 && $('#agree-terms').is(':checked')) { + $registerBtn.removeClass('disable'); + } else { + $registerBtn.addClass('disable'); + } + + // 图形验证通过时,发送短信按钮可点击 + if (validateResult[1].status) { + $sendCaptcha.removeClass('disable'); + } else { + $sendCaptcha.addClass('disable'); + } + + //图形验证通过时,发送短信按钮可点击 end + + }); + + // 如果是密码则校验强度 + if (($that).hasClass('pwd')) { + pwdFn($that); + } + +}).blur(function() { + + /*validateRule($(this), function() { + showErrTip(); + showBorder(); // 显示红色边框 + });*/ +}); + +$regionSelect.change(function() { + + $region.text('+' + $('#region').val()); + + validateRule($pn, showErrTip); //验证 +}); + +// 点击发送验证码 +$sendCaptcha.click(function() { + var timeResidue = 10, + t; + + if ($(this).hasClass('disable')) { + return; + } + + //todo ajax + + t = setInterval(function() { + if (timeResidue <= 0) { + $sendCaptcha.removeClass('disable').val('获取短信验证码'); + clearInterval(t); + return; + } + $sendCaptcha.addClass('disable').val(timeResidue-- + '秒可重新发送'); + }, 1000); +}); \ No newline at end of file diff --git a/web-static/js/passport/reset.js b/web-static/js/passport/reset.js new file mode 100644 index 0000000..1f169a2 --- /dev/null +++ b/web-static/js/passport/reset.js @@ -0,0 +1,229 @@ +/** + * 找回密码 + * @author: xuqi<qi.xu@yoho.cn> + * @date: 2015/12/14 + */ + +var $ = require('yoho.jquery'); + +var $pwd = $('#pwd'), + $repwd = $('#re-input'), + $next = $('#reset-pwd-btn'), + $pwdErr = $('#pwd-err'), + $repwdErr = $('#repwd-err'), + $pwdTips = $('#pwd-tips'); + +var hasNoErrPw = false; + +var $pwdIntensity = $('.pwd-intensity'), + $pwdParent = $pwdIntensity.closest('.pwd-intensity-container'), + $pwdTip1 = $('#pwd-tip1'); + +require('../../plugin/jquery.placeholder'); + + +/* + * 计算密码复杂度 + */ + +function gettype(str, i) { + if (str.charCodeAt(i) >= 48 && str.charCodeAt(i) <= 57) { + return 1; + } else if (str.charCodeAt(i) >= 97 && str.charCodeAt(i) <= 122) { + return 2; + } else if (str.charCodeAt(i) >= 65 && str.charCodeAt(i) <= 90) { + return 3; + } + + return 4; +} + +function isregular(cur, pre, type) { + var curCode = cur.charCodeAt(0); + var preCode = pre.charCodeAt(0); + + if (curCode - preCode === 0) { + return true; + } + + if (type !== 4 && (curCode - preCode === 1 || curCode - preCode === -1)) { + return true; + } + + return false; +} + +function getcomplex(curType, preType) { + if (preType === 0 || curType === preType) { + return 0; + } else if (curType === 4 || preType === 4) { + return 2; + } else { + return 1; + } +} + +function computeComplex(password) { + var complex = 0, + length = password.length, + pre = '', + preType = 0, + i = 0, + cur, + curType; + + + for (i = 0; i < length; i++) { + cur = password.charAt(i); + curType = gettype(password, i); + + if (preType !== curType || !isregular(cur, pre, curType)) { + complex += curType + getcomplex(curType, preType); + } + + pre = cur; + preType = curType; + } + + return complex; +} + +function pwdKeyupEvt() { + var pwd = $pwd.val(), + pwdStrength = computeComplex(pwd), + level = 0; + + //TODO:自定义密码强度规则,需要修正 + if (pwdStrength === 0) { + level = 0; + } else if (pwdStrength <= 10) { + level = 1; + } else if (pwdStrength <= 20) { + level = 2; + } else { + level = 3; + } + switch (level) { + case 0: + $pwdParent.removeClass('red yellow green'); + $pwdIntensity.removeClass('color'); + break; + case 1: + $pwdParent.addClass('red').removeClass('yellow green'); + $pwdIntensity.filter('.low').addClass('color'); + $pwdIntensity.filter('.mid,.high').removeClass('color'); + break; + case 2: + $pwdParent.addClass('yellow').removeClass('red green'); + $pwdIntensity.filter('.low,.mid').addClass('color'); + $pwdIntensity.filter('.high').removeClass('color'); + break; + case 3: + $pwdParent.addClass('green').removeClass('yellow red'); + $pwdIntensity.addClass('color'); + break; + } + + // + if (pwd === '') { + hasNoErrPw = false; + $pwdTip1.removeClass('red yes no').addClass('default'); + } else { + if (pwd.length < 6 || pwd.length > 20) { + hasNoErrPw = false; + $pwdTip1.removeClass('default yes').addClass('no red'); + } else { + hasNoErrPw = true; + $pwdTip1.removeClass('default no red').addClass('yes'); + } + + //提示2不做验证 + } +} + +//IE8 placeholder +$('input').placeholder(); + +$('.va').keyup(function() { + var pass = true; + + if ($(this).hasClass('pwd')) { + pwdKeyupEvt(); + } else { + if ($(this).val() === '') { + pass = false; + } + } + if (pass && hasNoErrPw && $pwd.val() === $repwd.val()) { + pass = true; + } else { + pass = false; + } + if (pass) { + $next.removeClass('disable').prop('disabled', false); + } else { + $next.addClass('disable').prop('disabled', true); + } +}).blur(function() { + var v = $(this).val(); + + if ($(this).hasClass('pwd')) { + if (v === '') { + $(this).addClass('error'); + $pwdErr.removeClass('hide').find('em').text('请输入密码'); + } else if (v.length < 6 || v.length > 20) { + $(this).addClass('error'); + $pwdErr.removeClass('hide').find('em').text('密码只支持6-20位'); + } else { + $pwdErr.addClass('hide'); + if ($repwd.val() !== '') { + if (v !== $repwd.val()) { + $repwd.addClass('error'); + $repwdErr.removeClass('hide').find('em').text('两次密码输入不一致,请重新输入'); + } else { + $repwd.removeClass('error'); + $repwdErr.addClass('hide'); + } + } + } + } else { + if (v === '') { + $(this).addClass('error'); + $repwdErr.removeClass('hide').find('em').text('请输入密码确认'); + } else { + if ($pwd.val() !== '' && v !== $pwd.val()) { + $(this).addClass('error'); + $repwdErr.removeClass('hide').find('em').text('两次密码输入不一致,请重新输入'); + } else { + $(this).removeClass('error'); + $repwdErr.addClass('hide'); + } + } + } +}).focus(function() { + $(this).removeClass('error'); + + //focus后错误提示隐藏 + if ($(this).hasClass('pwd')) { + $pwdErr.addClass('hide'); + } else { + $repwdErr.addClass('hide'); + } +}); + +$pwd.focus(function() { + $pwdErr.addClass('hide'); + $pwdTips.removeClass('hide'); +}).blur(function() { + $pwdTips.addClass('hide'); +}); + +$('#pwd, #repwd').keydown(function(e) { + var code = e.keyCode || e.which; + + //空格输入过滤 + if (code === 32) { + e.preventDefault(); + return; + } +}); diff --git a/web-static/js/passport/vertification.js b/web-static/js/passport/vertification.js new file mode 100644 index 0000000..a4e4699 --- /dev/null +++ b/web-static/js/passport/vertification.js @@ -0,0 +1,101 @@ +/** + * 验证手机 + * @author: xuqi<qi.xu@yoho.cn> + * @date: 2015/12/14 + */ + +var $ = require('yoho.jquery'); + +var $sc = $('#send-captcha'), + $msgTip = $('#captcha-tip'), + $errTip = $('#err-tip'), + $next = $('#next-step'), + seconds, + itime; + +$sc.click(function() { + $.post('/passport/register/authcode', { + mobile: $('#mobile').val(), + area: $('#area').val(), + captcha: $('#captchaPic').val(), + project: 'repassword' + }, function(jsonData) { + if (jsonData.code === 200) { + $errTip.hide(); + if ($(this).hasClass('disable')) { + return; + } + seconds = 60; + + //$sc.addClass('disable').prop('disabled', true); + $sc.addClass('disable').attr('disabled', true); + $msgTip.removeClass('hide'); + + $sc.val(seconds-- + '秒后可重新操作'); + itime = setInterval(function() { + if (seconds === 0) { + clearInterval(itime); + + //$sc.val('发送验证码').removeClass('disable').prop('disabled', false); + $sc.val('发送验证码').removeClass('disable').removeAttr('disabled'); + } else { + $sc.val(seconds-- + '秒后可重新操作'); + } + }, 1000); + } else { + $(this).addClass('error'); + $errTip.removeClass('hide').text('发送失败'); + } + }); +}); + +if ($(this).hasClass('disable')) { + return; +} +seconds = 60; + +//$sc.addClass('disable').prop('disabled', true); +$sc.addClass('disable').attr('disabled', true); +$msgTip.removeClass('hide'); + +$sc.val(seconds-- + '秒后可重新操作'); +itime = setInterval(function() { + if (seconds === 0) { + clearInterval(itime); + + //$sc.val('发送验证码').removeClass('disable').prop('disabled', false); + $sc.val('发送验证码').removeClass('disable').removeAttr('disabled'); + } else { + $sc.val(seconds-- + '秒后可重新操作'); + } +}, 1000); + + +$('#captcha').keyup(function() { + var v = $.trim($(this).val()); + + if (v !== '') { + + //添加验证码正确验证 + //$next.removeClass('disable').prop('disabled', false); + $next.removeClass('disable').removeAttr('disabled'); + } else { + + //$next.addClass('disable').prop('disabled', true); + $next.addClass('disable').attr('disabled', true); + } +}).blur(function() { + var v = $.trim($(this).val()); + + if (v === '') { + + //添加验证码正确验证 + $(this).addClass('error'); + $errTip.removeClass('hide'); + } else { + $(this).removeClass('error'); + $errTip.addClass('hide'); + } +}).focus(function() { + $(this).removeClass('error'); +}); \ No newline at end of file diff --git a/web-static/package.json b/web-static/package.json index 0cc21cc..f594c47 100644 --- a/web-static/package.json +++ b/web-static/package.json @@ -16,7 +16,8 @@ "yoho.lazyload": "1.0.0", "yoho.handlebars": "3.0.3", "yoho.jquery": "1.8.3", - "json2": "1.0.0" + "json2": "1.0.0", + "yoho.placeholder": "0.0.1" }, "devDependencies": { "expect.js": "0.3.1" diff --git a/web-static/plugin/jquery.placeholder.js b/web-static/plugin/jquery.placeholder.js new file mode 100644 index 0000000..1276f53 --- /dev/null +++ b/web-static/plugin/jquery.placeholder.js @@ -0,0 +1,8 @@ +/*! + * HTML5 Placeholder jQuery Plugin v1.8.3 + * @link http://mths.be/placeholder + * @author Mathias Bynens <http://mathiasbynens.be/> + */ + + var jQuery = require('yoho.jquery'); +(function(f){var e='placeholder' in document.createElement('input'),a='placeholder' in document.createElement('textarea');if(e&&a){f.fn.placeholder=function(){return this};f.fn.placeholder.input=f.fn.placeholder.textarea=true}else{f.fn.placeholder=function(){return this.filter((e?'textarea':':input')+'[placeholder]').bind('focus.placeholder',b).bind('blur.placeholder',d).trigger('blur.placeholder').end()};f.fn.placeholder.input=e;f.fn.placeholder.textarea=a;f(function(){f('form').bind('submit.placeholder',function(){var g=f('.placeholder',this).each(b);setTimeout(function(){g.each(d)},10)})});f(window).bind('unload.placeholder',function(){f('.placeholder').val('')})}function c(h){var g={},i=/^jQuery\d+$/;f.each(h.attributes,function(k,j){if(j.specified&&!i.test(j.name)){g[j.name]=j.value}});return g}function b(){var g=f(this);if(g.val()===g.attr('placeholder')&&g.hasClass('placeholder')){if(g.data('placeholder-password')){g.hide().next().attr('id',g.removeAttr('id').data('placeholder-id')).show().focus()}else{g.val('').removeClass('placeholder')}}}function d(h){var l,k=f(this),g=k,j=this.id;if(k.val()===''){if(k.is(':password')){if(!k.data('placeholder-textinput')){try{l=k.clone().attr({type:'text'})}catch(i){l=f('<input>').attr(f.extend(c(this),{type:'text'}))}l.removeAttr('name').data('placeholder-password',true).data('placeholder-id',j).bind('focus.placeholder',b);k.data('placeholder-textinput',l).data('placeholder-id',j).before(l)}k=k.removeAttr('id').hide().prev().attr('id',j).show()}k.addClass('placeholder').val(k.attr('placeholder'))}else{k.removeClass('placeholder')}}}(jQuery)); \ No newline at end of file diff --git a/web-static/sass/_header.scss b/web-static/sass/_header.scss index bc4cfe3..b838e47 100644 --- a/web-static/sass/_header.scss +++ b/web-static/sass/_header.scss @@ -1048,6 +1048,99 @@ line-height: 16px; } } + +.simple-header { + height: 66px; + margin: 0 0 20px 0; + border-bottom: 2px solid #222; + + .header-inner { + width: 990px; + height: 100%; + margin: 0 auto; + } + + .logo { + float: left; + line-height: 66px; + font-size: 0; + img { + vertical-align: middle; + } + } +} + +.simple-header .header-tool { + float: right; + line-height: 66px; + font-size: 0; + li { + @include inline-block; + padding: 0 10px; + *margin: 19px 0 0; + line-height: 28px; + font-size: 12px; + + span, a { + font-size: 12px; + vertical-align: middle; + } + + .tell-icon { + font-size: 12px; + } + .tell-icon ~ span { + font-weight: bold; + } + } + .login-box { + a { + color: #666; + } + } + .tool-options { + position: relative; + font-size: 0; + cursor: pointer; + + &:hover { + background-color: #eaeceb; + .iconfont { + &.up { + display: inline-block; + *display: inline; + *zoom: 1; + } + &.down { + display: none; + } + } + } + .iconfont, span{ + @include inline-block; + font-size: 12px; + height: 28px; + line-height: 28px; + &.up { + display: none; + } + + } + .tool-select { + display: none; + position: absolute; + width: 74px; + left: 0; + background: #eaeceb; + z-index: 9; + a { + display: block; + padding: 0 0 0 10px; + border-top: 1px solid #ddd; + } + } + } +} @media (max-width:1180px) { .yoho-header { .header-topwrapper { diff --git a/web-static/sass/index.scss b/web-static/sass/index.scss index c363633..bb695bf 100644 --- a/web-static/sass/index.scss +++ b/web-static/sass/index.scss @@ -79,4 +79,5 @@ a:focus { width: 990px; } } -@import "home/index", "product/index"; + +@import "home/index", "product/index", "passport/index"; diff --git a/web-static/sass/passport/_back.scss b/web-static/sass/passport/_back.scss new file mode 100644 index 0000000..6d93931 --- /dev/null +++ b/web-static/sass/passport/_back.scss @@ -0,0 +1,245 @@ +.back-page { + font-size: 14px; + + .content { + margin: 175px 0 0 !important; + } + + .back-header { + position: relative; + width: 268px; + line-height: 40px; + margin-bottom: 5px; + + .country-code { + float: right; + cursor: pointer; + color: #b9b9b9; + .iconfont { + font-size: 14px; + vertical-align: middle; + } + } + } + + .title { + float: left; + margin: 0px; + font-size: 22px; + line-height: 40px; + color: #000; + font-weight: normal; + } + .title2 { + margin: 0 0 5px; + font-size: 22px; + line-height: 40px; + color: #000; + font-weight: normal; + } + + .err-tip.captcha-err { + top: 10px; + left: 326px; + } + + .country-code-list { + display: none; + position: absolute; + padding: 0 10px; + color: #000; + background-color: #fff; + border: 1px solid #000; + margin-top: 5px; + cursor: pointer; + z-index: 100; + top: 30px; + right: 0; + @include border-radius(5px); + + li { + height: 20px; + line-height: 20px; + } + } + + input { + padding: 0; + outline: none; + font-family: Regular, arial, 'Microsoft YaHei'; + } + + .input-container-li { + position: relative; + margin-bottom: 22px; + + .btn { + width: 270px; + height: 45px; + line-height: 45px; + cursor: pointer; + font-size: 20px; + border: none; + letter-spacing: 0; + } + + .captcha { + width: 160px; + } + + .captcha-img { + height: 37px; + width: 90px; + border: 0; + margin-left: 10px; + vertical-align: middle; + outline: none; + cursor: pointer; + } + .change-captcha { + color: #ff1901; + font-size: 12px; + text-decoration: underline; + margin-left: 10px; + cursor: pointer; + } + + } +} + +.send-email-page { + font-size: 14px; + + .content { + margin: 216px 0 0 !important; + } + + .send-tips { + line-height: 28px; + color: #4c4c4c; + text-align: center; + font-size: 15px; + + .iconfont { + margin: 0 8px 0 0; + } + } + + .no-find { + margin: 10px 0 0 0; + line-height: 20px; + color: #a5a4a4; + text-align: center; + } + + .to-my-email { + a { + display: block; + margin: 53px auto 0; + width: 270px; + height: 45px; + line-height: 45px; + background: #ff1901; + text-align: center; + color: #fff; + letter-spacing: 2px; + } + } +} + +.verification-page .content{ + li { + position: relative; + margin-bottom: 43px; + } + + .btn { + @include inline-block; + border: none; + } + + .head-title { + font-size: 24px; + color: #000; + } + + .pn-label { + color: #828282; + font-size: 16px; + } + + .country-code { + margin: 0 10px; + } + + .country-code, .phone-num { + color: #000; + font-size: 16px; + } + + .captcha { + width: 160px !important; + } + + .send-captcha { + width: 133px; + font-size: 12px; + position: relative; + top: -1px; + letter-spacing: 0; + } + + .err-tip { + left: 310px; + } + + .captcha-tips { + position: absolute; + top: 50px; + color: #a5a4a4; + + .iconfont { + color: #0F9ACD; + font-size: 14px; + margin: 0 8px 0 0; + vertical-align: 12%; + } + } +} + +.reset-success-page { + .content { + margin: 255px 0 0 !important; + } + + .success-text { + line-height: 35px; + + .iconfont { + font-size: 30px; + color: #ee3f14; + } + + span { + font-size: 24px; + margin: 0 18px; + } + + #count-down { + color: #ee3f14; + } + } + + .success-btn { + display: block; + margin: 43px auto 0; + width: 269px; + line-height: 269px; + height: 45px; + line-height: 45px; + font-size: 14px; + color: #fff; + text-align: center; + background-color: #ff1901; + } +} \ No newline at end of file diff --git a/web-static/sass/passport/_index.scss b/web-static/sass/passport/_index.scss new file mode 100644 index 0000000..8465938 --- /dev/null +++ b/web-static/sass/passport/_index.scss @@ -0,0 +1,196 @@ +$tip: sprite-map("passport/tip/*.png", $spacing: 10px); + +@import "login", "register", "back"; +/**/ +.passport-page { + width: 1150px; + margin-left: auto; + margin-right: auto; + + .content { + float: left; + margin-top: 107px; + padding-left: 85px; + } + + .input { + height: 43px; + font-size: 16px; + line-height: 1.2; + line-height: 43px\9; + width: 268px; + border: 1px solid #dbdbdb; + text-indent: 10px; + color: #9a9a9a; + color: rgba(0,0,0,.5); + } + + .error { + border-color: #f00 !important; + } + + .btn { + display: block; + height: 46px; + line-height: 46px; + width: 100%; + text-align: center; + color: #fff; + background-color: #ff1901; + letter-spacing: 10px; + font-size: 20px; + cursor: pointer; + + &.disable { + background-color: #555; + cursor: default; + } + } + + .pwd-intensity-container { + width: 270px; + text-align: right; + padding-top: 5px; + + &.red { + .pwd-intensity { + color: #ee0011; + } + .color { + background: #ee0011; + color: #fff; + } + } + + &.yellow { + .pwd-intensity { + color: #f6da1e; + } + .color { + background: #f6da1e; + color: #fff; + } + } + + &.green { + .pwd-intensity { + color: #3ee392; + } + .color { + background: #3ee392; + color: #fff; + } + } + .pwd-intensity { + height: 15px; + font-size: 12px; + background-color: #e8e8e8; + padding: 0px 10px; + text-align: center; + color: #b9b9b9; + } + } + + .pwd-tips { + position: absolute; + top: -10px; + left: 285px; + width: 160px !important; + height: 72px; + padding-top: 7px; + font-size: 12px; + background: sprite($tip, block) no-repeat; + + >div { + position: relative; + height: 22px; + line-height: 22px; + margin-left: 15px; + padding-left: 15px; + font-size: 12px; + color: #b9b9b9; + + i { + position: absolute; + width: 14px; + height: 14px; + left: -2px; + top: 50%; + margin: -7px 0 0; + background: sprite($tip, info); + } + + &.no { + color: red; + i { + background: sprite($tip, error); + } + + } + + &.yes { + i { + background: sprite($tip, success); + } + } + } + } + + .tip-panel { + position: absolute; + display: none; + width: 248px; + padding: 0 10px; + z-index: 100; + background-color: #161616; + border: 1px solid rgba(255, 255, 255, 0.7); + margin-top: 5px; + cursor: pointer; + @include border-radius(5px); + + li { + height: 20px; + line-height: 20px; + color: #b9b9b9; + } + } + .err-tip { + position: absolute; + font-size: 14px; + white-space: nowrap; + top: 8px; + left: 285px; + padding: 6px 0; + color: #f00; + + i { + display: block; + float: left; + height: 14px; + width: 14px; + background: sprite($tip, error) no-repeat; + margin-right: 5px; + } + } +} + +.passport-cover { + float: left; + margin: 107px 0; + width: 575px; + + .cover-content { + width: 100%; + height: 318px; + padding: 50px 0; + border-right: 1px solid #dfdfdf; + } + + .cover-img { + display: block; + width: 252px; + height: 190px; + margin: 0 auto; + margin-top: 50px; + } +} \ No newline at end of file diff --git a/web-static/sass/passport/_login.scss b/web-static/sass/passport/_login.scss new file mode 100644 index 0000000..bf88bd6 --- /dev/null +++ b/web-static/sass/passport/_login.scss @@ -0,0 +1,120 @@ +$third: sprite-map("passport/third/*.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/web-static/sass/passport/_register.scss b/web-static/sass/passport/_register.scss new file mode 100644 index 0000000..7a36d0f --- /dev/null +++ b/web-static/sass/passport/_register.scss @@ -0,0 +1,227 @@ +/* + * @description 注册页样式 + * @author chenglong.wang@yoho.cn + * @time 2015/12/11 + */ + +.content { + + .register-page { + font-size: 14px; + color: #b9b9b9; + } + + .register-form { + height: auto; + + li { + margin-bottom: 25px; + width: 270px; + position: relative; + + &.w330 { + width: 330px; + } + + input, select { + outline: none; + } + + input { + height: 43px; + line-height: 43px; + font-size: 16px; + width: 268px; + border: 1px solid #dbdbdb; + text-indent: 10px; + font-family: '黑体' Regular; + color: #9a9a9a; + padding: 0; + + &.error { + border: 1px solid red; + } + + &.phone-num { + width: 209px; + display: block; + float: left; + } + + &.captcha, &.msg-captcha{ + width: 160px; + float: left; + } + + &.send-captcha { + top: 0; + background: #ff1901; + position: absolute; + width: 100px; + right: 0; + font-size: 12px; + text-indent: 0; + letter-spacing: 0; + + &.disable { + background: #555; + } + } + + &.agree-terms { + width: initial; + height: initial; + vertical-align: middle; + } + } + + .link { + text-decoration: underline; + color: #ff1901; + } + + .btn { + height: 45px; + line-height: 45px; + color: #fff; + border: none; + padding: 0; + font-family: '黑体' Regular; + text-align: center; + } + + //区域下拉选择框 + select.region { + height: 30px; + padding: 4px 0; + width: 132px; + border-color: #c1c1c1; + color: #9a9a9a; + font-size: 16px; + font-family: '黑体' Regular; + } + + //手机号 + .country-code { + width: 58px; + height: 43px; + line-height: 43px; + text-align: center; + white-space: nowrap; + border: 1px solid #dbdbdb; + border-right: 0; + font-size: 16px; + display: block; + float: left; + } + + //验证码 + .captcha-img { + height: 37px; + width: 90px; + border: 0; + vertical-align: middle; + outline: none; + margin-left: 10px; + margin-top: 4px; + float: left; + } + .change-captcha { + margin-left: 10px; + cursor: pointer; + float: left; + height: 43px; + line-height: 43px; + } + + //密码强度 + .pwd-intensity-container { + width: 270px; + text-align: right; + margin-top: 5px; + height: auto; + overflow: hidden; + + .pwd-intensity { + height: 15px; + font-size: 12px; + background-color: #e8e8e8; + padding: 1px 10px; + text-align: center; + } + + &.red { + color: red; + + .color { + background: red; + color: #fff; + } + } + + &.yellow { + .color { + background: #ff0; + color: #fff; + } + } + + &.green { + .color { + background: #3ee392; + color: #fff; + } + } + } + + //服务条款 + &.items-container { + font-size: 13px; + text-align: right; + white-space: nowrap; + } + + //立即注册 + .register-btn { + width: 270px; + font-size: 20px; + font-weight: bold; + background: #ff1901; + + &.disable { + background: #555; + } + } + + //立即登录 + &.quick-login-container { + width: 270px; + font-size: 13px; + text-align: right; + white-space: nowrap; + } + } + + .err-tip { + z-index: 1000; + position: absolute; + height: 30px; + line-height: 30px; + color: red; + background-color: #ffebeb; + border: 1px solid #ffbdbe; + padding: 0 10px; + + b { + display: block; + position: absolute; + top: 30px; + left: 20px; + background: sprite($tip, angle) no-repeat; + width: image-width(sprite-file($tip, angle)); + height: image-height(sprite-file($tip, angle)); + + } + } + } +} \ No newline at end of file diff --git a/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Back.php b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Back.php new file mode 100644 index 0000000..b8ec8b5 --- /dev/null +++ b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Back.php @@ -0,0 +1,369 @@ +<?php + +use Action\AbstractAction; + +class BackController extends AbstractAction +{ + /** + * 找回密码 + */ + public function indexAction() + { + + $simpleHeader = array( + 'logo' => array( + 'img' => 'http://static.yohobuy.com/newheader/img/logo_e.png', + 'url' => 'http://www.yohobuy.com' + ), + 'tool' => array( + array( + 'title' => 'Hi~', + 'loginInfo' => array( + array( + 'textCn' => '2586****@qq.com', + 'url' => '' + ), + array( + 'textCn' => '[请登录]', + 'url' => '' + ), + array( + 'textCn' => '[免费注册]', + 'url' => '' + ), + array( + 'textCn' => '[退出]', + 'url' => '' + ) + ) + ), + array( + 'title' => 'MY有货', + 'options' => array( + array( + 'textCn' => '我的收藏', + 'url' => '' + ), + array( + 'textCn' => '优惠券', + 'url' => '' + ), + ) + ), + array( + 'title' => '订单中心', + 'url' => 'http://www.yohobuy.com/home/orders?t=1449801433.5294' + ), + array( + 'title' => '帮助中心', + 'url' => 'http://www.yohobuy.com/help' + ), + array( + 'title' => '400-9889-9646', + 'tell' => true + ) + ) + ); + $data = array( + 'simpleHeader' => $simpleHeader, + 'backPage' => true, + 'back' => array( + 'coverHref' => '/passport', + 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190', + '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); + } + + /** + * 发送邮件 + */ + public function sendemailAction() { + $simpleHeader = array( + 'logo' => array( + 'img' => 'http://static.yohobuy.com/newheader/img/logo_e.png', + 'url' => 'http://www.yohobuy.com' + ), + 'tool' => array( + array( + 'title' => 'Hi~', + 'loginInfo' => array( + array( + 'textCn' => '2586****@qq.com', + 'url' => '' + ), + array( + 'textCn' => '[请登录]', + 'url' => '' + ), + array( + 'textCn' => '[免费注册]', + 'url' => '' + ), + array( + 'textCn' => '[退出]', + 'url' => '' + ) + ) + ), + array( + 'title' => 'MY有货', + 'options' => array( + array( + 'textCn' => '我的收藏', + 'url' => '' + ), + array( + 'textCn' => '优惠券', + 'url' => '' + ), + ) + ), + array( + 'title' => '订单中心', + 'url' => 'http://www.yohobuy.com/home/orders?t=1449801433.5294' + ), + array( + 'title' => '帮助中心', + 'url' => 'http://www.yohobuy.com/help' + ), + array( + 'title' => '400-9889-9646', + 'tell' => true + ) + ) + ); + $data = array( + 'simpleHeader' => $simpleHeader, + 'sendEmail' => 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() + ) + ); + $this->_view->display('send-email', $data); + } + + /** + * 重置密码 + */ + public function resetPwdAction() { + $simpleHeader = array( + 'logo' => array( + 'img' => 'http://static.yohobuy.com/newheader/img/logo_e.png', + 'url' => 'http://www.yohobuy.com' + ), + 'tool' => array( + array( + 'title' => 'Hi~', + 'loginInfo' => array( + array( + 'textCn' => '2586****@qq.com', + 'url' => '' + ), + array( + 'textCn' => '[请登录]', + 'url' => '' + ), + array( + 'textCn' => '[免费注册]', + 'url' => '' + ), + array( + 'textCn' => '[退出]', + 'url' => '' + ) + ) + ), + array( + 'title' => 'MY有货', + 'options' => array( + array( + 'textCn' => '我的收藏', + 'url' => '' + ), + array( + 'textCn' => '优惠券', + 'url' => '' + ), + ) + ), + array( + 'title' => '订单中心', + 'url' => 'http://www.yohobuy.com/home/orders?t=1449801433.5294' + ), + array( + 'title' => '帮助中心', + 'url' => 'http://www.yohobuy.com/help' + ), + array( + 'title' => '400-9889-9646', + 'tell' => true + ) + ) + ); + $data = array( + 'simpleHeader' => $simpleHeader, + 'resetPage' => true, + 'resetPwd' => 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() + ) + ); + $this->_view->display('reset-pwd', $data); + } + + public function resetSuccessAction() { + $simpleHeader = array( + 'logo' => array( + 'img' => 'http://static.yohobuy.com/newheader/img/logo_e.png', + 'url' => 'http://www.yohobuy.com' + ), + 'tool' => array( + array( + 'title' => 'Hi~', + 'loginInfo' => array( + array( + 'textCn' => '2586****@qq.com', + 'url' => '' + ), + array( + 'textCn' => '[请登录]', + 'url' => '' + ), + array( + 'textCn' => '[免费注册]', + 'url' => '' + ), + array( + 'textCn' => '[退出]', + 'url' => '' + ) + ) + ), + array( + 'title' => 'MY有货', + 'options' => array( + array( + 'textCn' => '我的收藏', + 'url' => '' + ), + array( + 'textCn' => '优惠券', + 'url' => '' + ), + ) + ), + array( + 'title' => '订单中心', + 'url' => 'http://www.yohobuy.com/home/orders?t=1449801433.5294' + ), + array( + 'title' => '帮助中心', + 'url' => 'http://www.yohobuy.com/help' + ), + array( + 'title' => '400-9889-9646', + 'tell' => true + ) + ) + ); + $data = array( + 'simpleHeader' => $simpleHeader, + 'resetSuccess' => 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() + ) + ); + $this->_view->display('reset-success', $data); + } + + public function verificationAction() { + $simpleHeader = array( + 'logo' => array( + 'img' => 'http://static.yohobuy.com/newheader/img/logo_e.png', + 'url' => 'http://www.yohobuy.com' + ), + 'tool' => array( + array( + 'title' => 'Hi~', + 'loginInfo' => array( + array( + 'textCn' => '2586****@qq.com', + 'url' => '' + ), + array( + 'textCn' => '[请登录]', + 'url' => '' + ), + array( + 'textCn' => '[免费注册]', + 'url' => '' + ), + array( + 'textCn' => '[退出]', + 'url' => '' + ) + ) + ), + array( + 'title' => 'MY有货', + 'options' => array( + array( + 'textCn' => '我的收藏', + 'url' => '' + ), + array( + 'textCn' => '优惠券', + 'url' => '' + ), + ) + ), + array( + 'title' => '订单中心', + 'url' => 'http://www.yohobuy.com/home/orders?t=1449801433.5294' + ), + array( + 'title' => '帮助中心', + 'url' => 'http://www.yohobuy.com/help' + ), + array( + 'title' => '400-9889-9646', + 'tell' => true + ) + ) + ); + $data = array( + 'simpleHeader' => $simpleHeader, + 'vertificationPage' => true, + 'verification' => 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() + ) + ); + $this->_view->display('verification', $data); + } +} \ 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 new file mode 100644 index 0000000..dcf78e6 --- /dev/null +++ b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Login.php @@ -0,0 +1,41 @@ +<?php + +use Action\AbstractAction; + +class LoginController extends AbstractAction +{ + /** + * 登录页 + */ + public function indexAction() + { + $data = array( + 'loginPage' => true, + 'passport' => array( + 'coverHref' => '/passport', + 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190', + '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); + } +} \ No newline at end of file diff --git a/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Register.php b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Register.php new file mode 100644 index 0000000..391d09f --- /dev/null +++ b/yohobuy/www.yohobuy.com/application/modules/Passport/controllers/Register.php @@ -0,0 +1,84 @@ +<?php + +use Action\AbstractAction; + +class RegisterController extends AbstractAction +{ + /** + * 登录页 + */ + public function indexAction() + { + $data = array( + 'registerPage' => true, + 'passport' => array( + 'actionUrl' => '/passport/register/mobileregister', + 'region' => array( + array( + 'id' => 86, + 'name' => '中国', + 'selected' => true + ), + array( + 'id' => 853, + 'name' => '中国澳门', + 'selected' => false + ), + array( + 'id' => 886, + 'name' => '中国台湾', + 'selected' => false + ), + array( + 'id' => 65, + 'name' => '中国香港', + 'selected' => false + ), + array( + 'id' => 60, + 'name' => '马来西亚', + 'selected' => false + ), + ), + 'location' => '+86', + 'captchaUrl' => 'http://www.yohobuy.com/passport/images?t=1449799445', + 'itemUrl' => '##', + 'referUrl' => 'http://www.yohobuy.com/', + 'loginUrl' => '/signin.html?refer=http://www.yohobuy.com/', + 'coverHref' => '/passport', + 'coverImg' => 'http://img12.static.yhbimg.com/yhb-img01/2015/12/01/07/020a0b6e7ff908d0c2bc4045b4fef42b9f.png?imageView/2/w/252/h/190' + ) + ); + $this->_view->display('index', $data); + } + + public function checkmobileAction() + { + $data = array( + 'code' => 200 + ); + + $this -> echoJson($data); + + } + + public function piccaptchaAction() + { + $data = array( + 'code' => 200 + ); + + $this -> echoJson($data); + + } + + public function msgcaptchaAction() + { + $data = array( + 'code' => 200 + ); + + $this -> echoJson($data); + + } +} \ No newline at end of file diff --git a/yohobuy/www.yohobuy.com/configs/application.developer.ini b/yohobuy/www.yohobuy.com/configs/application.developer.ini index 36e4a18..4c785f3 100644 --- a/yohobuy/www.yohobuy.com/configs/application.developer.ini +++ b/yohobuy/www.yohobuy.com/configs/application.developer.ini @@ -4,7 +4,7 @@ application.directory = APPLICATION_PATH "/application" ;;website library application.library = ROOT_PATH "/library" ;;模块配置 -application.modules = "Index,Product" +application.modules = "Index,Product,Passport" ;;加载 application.bootstrap = APPLICATION_PATH "/application/Bootstrap.php" ;;view文件的扩展名