tw-login

anjuke移动端登录／绑定手机组件

功能：

1. 设置成功/失败后的回调函数，事件参数为包含user_id等用户信息的对象
2. 同一页面可以引用多次本组件，iframe与实例对象一一对应即可
3. 通过iframe的src中的查询参数对表单进行配置，如：设置倒计时时长、提交按钮文案等

0. 登录功能／绑定手机功能的地址

登录的 页面的iframe的src： http://login.anjuke.com/member/login/iframeform
绑定手机页面的iframe的src： http://login.anjuke.com/member/bindphone/iframeform

1. 如何使用

• 1.1 安装包：

$ npm install tw-login

• 1.2 引入node_modules/tw-login/login.js

• 1.3 创建对象（以下为例子）：

 <script>
    var inited = false;

    // 绑定事件：点击按钮打开登录弹层
    $("#openBtn").on("click", function(e) {

        // 尚未初始化实例对象
        if (!inited) {

            // 以异步加载为例（同步加载即直接将iframe写在html中）：
            var ifm = $('<iframe id="loginIfm" src="http://login.anjuke.com/member/login/iframeform" frameborder="0" scrolling="no" style="height: 140px;"></iframe>');

            // 设置登陆成功之后显示的样式（默认无任何提示）
            var successHtmlStr = '<p style="text-align: center;font-size: 24px;color: #333;line-height: 140px;margin:0;">登陆成功！</p>';

            // 注意先将ifm插入页面相应节点中
            $("#ifmWrapNode").append(ifm);

            // 初始化实例
            window.loginObj = new LoginClass({
                ifm: "loginIfm" // 可以为iframe的[id、DOM对象或者Zepto类型的对象]。一定要唯一标识iframe，不可以为class等其他选择器
            });

            // 注册登录成功后的回调【可选】
            loginObj.onSuccess = function(data) {
                window.console && console.log(">> 登录成功，得到的登录信息：", data);
            }

            // 每次登录失败后调用【可选】
            loginObj.onError = function(data) {
                window.console && console.log(">> 登录失败：", data); // data.phone【手机号】，data.code【错误码】
            }

            // ifm onload之后才能调用实例的方法（如showError、hideError()等）
            ifm.on("load", function(e) {

                // 设置登录成功之后的提示【可选】
                loginObj.setSuccessHtml(successHtmlStr);

                // 获取当前登录状态( true/false)【可选】
                loginObj.getLoginStatus(function(result) {
                    window.console && console.log("当前已登录？", result);
                });

            });
            inited = true;
        } // -- 对象初始化已完成

        // 显示登录弹层（略）
        ...
    });
</script>

2. 配置项

配置参数由iframe的src传入（同步输出，以免页面闪动）
=后面的内容需要经过encodeURIComponent

字段	说明	默认值（即不传此字段）
phone_holder	手机号输入框的placeholder	请输入您的手机号码
sms_holder	短信验证码输入框的placeholder	请输入短信验证码
captcha_holder	图片验证码输入框的placeholder	请输入图片验证码
sms_btn_html	发短信按钮的文案	获取验证码
countdown_time	倒计时时长	60
submit_btn_html	提交按钮的文案	确定
captcha_length	图片验证码的位数	4
sms_length	短信验证码的位数	4
prevent_scroll	是否阻止iframe内部滚动	1

3. 实例的方法

调用实例的方法可以控制iframe内部的行为（在onload后执行有效）

var loginObj = new window.LoginClass({
    ifm: "ifmId"
});

方法名	方法解释
loginObj.showError(msg)	在iframe内部提示错误，msg为错误信息字符串，调用完成后iframe节点的高度会自动调整
loginObj.hideError()	隐藏掉iframe内部的错误提示，调用完成后iframe节点的高度会自动调整
loginObj.setSuccessHtml(nodeString)	设置登陆成功后的提示.@nodeString为包含节点及內联样式的字符串,默认登陆成功后显示空白页面
loginObj.reset(boolean)	重置登录表单，@boolean传true的话将倒计时也重置，默认false
loginObj.setPhone(phoneNumber:string)	填入手机号
loginObj.blur()	让iframe内的所有input元素失去焦点（有些浏览器在iframe隐藏后仍会保持键盘弹出）

4. 实例的回调函数

实例的回调函数用来定义登录成功或失败后的钩子

回调名称	解释
onSuccess(data)	登录成功之后执行，@data: { user_id: "xxx", phone: "13xxxx", ...}
onError(data)	每次登录失败之后都会调用， @data: {phone: "输入的手机号", code: "错误码"}
onafterFocus(inputId)	input节点获得焦点时触发，参数@inputId为内部获得焦点的input节点的id
onafterBlur()	iframe内部输入框失去焦点时触发

5. 自定义样式

通过在iframe的src中传入'style=xxx'（xxx需要经过url编码）的方式来自定义表单的样式，例如：

<iframe src="http://login.anjuke.test/touch/login/iframeform?style=.slide-item-btn%20%7Bcolor%3A%20%23ff552e%3B%20background%3A%20%23ffeeea%3B%20border%3A%201px%20solid%20%23ffddd5%3B%20%7D%20.submit-btn%20%7Bcolor%3A%20%23fff%3B%20background%3A%20%23ff552e%3B%20%7D"></iframe>

上述自定义样式后的iframe的表单的样式为：

6. 注意事项

• iframe必须要设置有id属性（是为了保证多次引用时不重复）
• iframe节点的高度默认为140px，请在业务css中将其高度设置好（140px），当在调用showError、hideError等方法时iframe会自动调整高度
• iframe``append到页面上5分钟后内部token会过期（登录时报token过期的错误），例子【1.3】中采取的动态生成iframe的方式可避免此种报错，但是点击时会有一定的加载时间，导致页面出现短暂的空白，若想避免此空白可自行在业务中定时刷新iframe的src或者用iframe的onload事件加个loading
• 已登录用户访问登录页：直接调用loginObj.onSuccess(userInfoObj)，且不会出现登录表单
• 未登录用户访问绑定页：直接调用loginObj.onError({phone: "输入的手机号", code: -1, msg: "请先登录"})，且不会出现绑定手机表单