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: "请先登录"})，且不会出现绑定手机表单