TDataView_ui/scripts/vendor/userLogin/userLogin.js

(function ($) {
    $.fn.userLogin = function (param) {
        var html = '<div id="userLogin">' +
            '<div class="cover-content">' +
            '<div class="login">' +
            '<div class="left"><p class="loginBg"></p></div>' +
            '<ul class="right">' +
            '<li class="head">' +
            '<span class="passWay active">密码登录</span>' +
            '<span class="msgWay">短信登录</span>' +
            '<p class="weixin">微信</p>' +
            '<p class="qq">QQ</p>' +
            '<p class="weibo">微博</p>' +
            // '<img src="../userLogin/images/wx.png" alt="微信" class="weixin">' +
            // '<img src="../userLogin/images/qq.png" alt="QQ" class="qq">' +
            // '<img src="../userLogin/images/weibo.png" alt="微博" class="weibo">' +
            '<button class="close"></button>' +
            '</li>' +
            '<li><input type="text" placeholder="请输入用户名" class="user"></li>' +
            '<li class="passShow show"><input type="password" placeholder="请输入密码" class="lock"></li>' +
            '<li class="msgShow"><input type="text" placeholder="请输入验证码" class="yzm"><button class="getYzm">获取短信验证码</button><div class="btn_cov"></div></li>' +
            '<li><button class="loginBtn">登录</button></li>' +
            '<li class="other"><button class="fl forgetPass">忘记密码</button><button class="openReg fr">免费注册</button></li>' +
            '</ul>' +
            '</div>' +
            '<div class="regist">' +
            '<li class="para"><span class="menu">用户名</span><span class="redAlert">请输入用户名</span><input type="text" placeholder="请输入用户名" class="regName"></li>' +
            '<li class="para"><span class="menu">手机号</span><span class="redAlert">请输入手机号</span><input type="text" placeholder="可用于登录和找回密码" class="regNum"></li>' +
            '<li class="para"><span class="menu">密码</span><span class="redAlert">请输入密码</span><input type="password" placeholder="请设置登录密码" class="regPass"></li>' +
            '<li class="para li_cover"><span class="menu">验证码</span><span class="redAlert">请输入验证码</span><input type="text" placeholder="请输入验证码" class="yzm"><button class="getYzm">获取短信验证码</button><div class="btn_cov"></div></li>' +
            '<li class="xieyi"><span class="check"></span>阅读并接受《<a href="yonghuXieyi.html" target="_blank">MAPPLUS用户协议</a>》<span class="redAlert">请阅读协议及声明</span></li>' +
            '<li class="zhuce"><button class="regBtn">注册</button></li>' +
            '<li class="queding"><button class="queding">确定</button></li>' +
            '<li class="other">我已注册，现在去<button class="openLogin">登录</button></li>' +
            '<li class="back"><button class="openLogin">返回登录</button></li>' +
            '</div>' +
            '<div class="tip"></div>' +
            '</div>' +
            '</div>';
        $(this).append(html);
        //当前正在浏览的方式： pc/mobile
        var curNumCode = "sinup";

        function setTip(type, str) {
            $("#userLogin .tip").html(str)
            $("#userLogin .tip").addClass(type)
            $("#userLogin .tip").show()
            setTimeout(function () {
                $("#userLogin .tip").hide()
                $("#userLogin .tip").removeClass(type)
                $("#userLogin .tip").html("")
            }, 4000);
        }

        var cookie = {
            /**
             * 设置cookie
             * @type {Function}
             * @param name {String} 名称
             * @param value {String} 值
             * @param days {Number} 过期时间(天)
             * @example
             */
            set: function (name, value, days) {
                document.cookie = name + "=" + value;
            },

            /**
             * 获取cookie
             * @type {Function}
             * @param name {String} 名称 
             * @returns {null|String} 返回值
             * @example
             */
            get: function (name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                arr = document.cookie.match(reg);
                if (arr) {
                    return arr[2];
                } else {
                    return null;
                }
            },

            /**
             * 删除cookie
             * @type {Function}
             * @param name {String} 名称
             * @example
             */
            del: function (name) {
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval = this.get(name);
                if (cval !== null) document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
            }
        }

        function uuid4() {
            var text = "";
            var length = [8, 4, 4, 4, 12];
            var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            for (var j = 0; j < 5; j++) {
                for (var i = 0; i < length[j]; i++) {
                    text += possible.charAt(Math.floor(Math.random() * possible.length));
                }
                if (j < 3) {
                    text += "-"
                }
            }

            return text;
        }

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return decodeURI(r[2]);
            return '';
        };

        //判断接口中是否有session，如果有设置session
        if (getQueryString('session')) {
            session = getQueryString('session');
            cookie.del('session');
            cookie.set('session', session);
            var href = window.location.origin;
            window.location.replace(href);
        } else {
            session = uuid4();
        }

        var isLoad = false

        $.ajax({
            type: "get",
            dataType: 'jsonp',
            url: param.userServer + '/v1.0/user/me',
            success: function (data) {
                if (data.status == 401) {
                    isLoad = false
                    cookie.del('session');
                    cookie.set('session', session);
                    var callData = {
                        isLoad: isLoad,
                        userInfo: data.data
                    }
                    if (param.callback)
                        param.callback(callData)
                } else {
                    //$("#userLogin").addClass('hide');
                    isLoad = true
                    if (param.callback)
                        var callData = {
                            isLoad: isLoad,
                            userInfo: data.data
                        }
                    getCurUserJWT(callData)
                }
            },
            error: function (data) {
                console.log(data)
            }
        });
        /**
         * [getCurUserJWT description]
         * 获取当前用户的jwt
         * @return {[type]} [description]
         */
        function getCurUserJWT(calldata) {
            $.ajax({
                type: "post",
                url: param.userServer + '/v1.0/user/jwt',
                success: function (data) {
                    if (data.status == 0) {
                        calldata.jwt = data.data;
                        param.callback(calldata)
                    }
                },
                error: function (data) {
                    console.log(data)
                }
            });
        }
        /**
         * 交互
         */
        $("#userLogin .close").bind('click', function () {
            // $("#userLogin").addClass("hide");
            $("#userLogin").hide("hide");
        })
        //注册
        $("#userLogin .openReg").bind('click', function () {
            $("#userLogin .login").hide();
            $("#userLogin .regist").show();
            $("#userLogin .regist li.queding").hide();
            $("#userLogin .regist .zhuce, #userLogin .regist .xieyi, #userLogin .regist .other").show();
            $("#userLogin .regist .para").eq(0).show();
            $("#userLogin .regist .back").hide();
            curNumCode = "sinup";
        })
        //忘记密码
        $("#userLogin .forgetPass").bind('click', function () {
            $("#userLogin .regist").show();
            $("#userLogin .login").hide();
            $("#userLogin .regist li.queding").show();
            $("#userLogin .regist .zhuce, #userLogin .regist .xieyi, #userLogin .regist .other").hide();
            $("#userLogin .regist .para").eq(0).hide();
            $("#userLogin .regist .back").show();
            curNumCode = "forgetPass";
        })
        //登录
        $("#userLogin .openLogin").bind('click', function () {
            $("#userLogin .login").show();
            $("#userLogin .regist").hide();
        })
        //复选框
        $("#userLogin .autoLogin,#userLogin .check").bind('click', function () {
            if ($(this).hasClass('active')) {
                $(this).removeClass('active');
            } else {
                $(this).addClass('active');
            }
        })
        //登录方式
        $("#userLogin .head .passWay").bind('click', function () {
            $("#userLogin .head span").removeClass('active');
            $(this).addClass('active');
            $("#userLogin .passShow").addClass('show');
            $("#userLogin .msgShow").removeClass('show');
            $("#userLogin .login .user").attr("placeholder", "请输入用户名");
        })
        $("#userLogin .head .msgWay").bind('click', function () {
            $("#userLogin .head span").removeClass('active');
            $(this).addClass('active');
            $("#userLogin .msgShow").addClass('show');
            $("#userLogin .passShow").removeClass('show');
            $("#userLogin .login .user").attr("placeholder", "请输入手机号").text("");
        })

        // 协议
        $("#userLogin .regist li.xieyi a").bind('click', function () {
            $("#xieyi").addClass('active')
        })
        $("#xieyi .close").bind('click', function () {
            $("#xieyi").removeClass('active')
        })
        /**
         * 交互结束
         */
        /**
         * 请求开始
         */
        //重置密码
        $("#userLogin .regist button.queding").bind('click', function () {
            var shouji = $("#userLogin .regist .regNum").val();
            var mima = $("#userLogin .regist .regPass").val();
            var yanzhengma = $("#userLogin .regist .yzm").val();
            if (shouji.length > 0 && mima.length > 0 && yanzhengma.length > 0) {
                $.ajax({
                    url: param.userServer + '/v1.0/user/mobile/reset_password',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        mobile: shouji,
                        password: mima,
                        code: yanzhengma
                    }
                }).done(function (data) {
                    console.log(data);
                    if (data.status == 0) {
                        setTip("success", "重置密码成功")
                        $("#userLogin .regist").hide();
                        $("#userLogin .login").show();
                        $("#userLogin .regist li").show();
                        $("#userLogin .regist li.queding").hide();
                    } else {
                        setTip("warning", data.message)
                    }
                })
            } else {
                setTip("warning", '请填写正确信息')
            }
        })
        //注册获取验证码
        $("#userLogin .regist .getYzm").bind('click', function () {
            var num = $("#userLogin .regist .regNum").val();
            //验证手机号
            var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
            if (!reg.test(num)) {
                setTip("warning", '请输入正确的手机号')
            } else {
                if (curNumCode == "sinup") {
                    var url = param.userServer + '/v1.0/user/mobile/register/code';
                } else {
                    var url = param.userServer + '/v1.0/user/mobile/reset_password/code';
                }
                $.ajax({
                    url: url,
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        mobile: num
                    }
                }).done(function (data) {
                    console.log(data);
                    if (data.status == 0) {
                        showNumCover();
                        setTip("success", '获取成功')
                    } else {
                        setTip("warning", data.message)
                    }
                })
            }
        })
        //注册
        $("#userLogin .regist .regBtn").bind('click', function () {
            var check = $("#userLogin .regist .check").hasClass('active');
            if (!check) {
                $("#userLogin .regist .xieyi .redAlert").addClass('show');
            } else {
                $("#userLogin .regist .xieyi .redAlert").removeClass('show');
            }
            var redAlert = $("#userLogin .regist .para .redAlert");
            for (let i = 0; i < redAlert.length; i++) {
                if (redAlert.eq(i).next().val().length < 1) {
                    redAlert.eq(i).addClass('show');
                } else {
                    redAlert.eq(i).removeClass('show');
                }
                if (redAlert.eq(i).next().hasClass('regNum') && redAlert.eq(i).next().val().length < 11) {
                    redAlert.eq(i).text('请输入正确的手机号').addClass('show');
                } else if (redAlert.eq(i).next().hasClass('regNum') && redAlert.eq(i).next().val().length >= 11) {
                    var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
                    if (!reg.test(redAlert.eq(i).next().val())) {
                        setTip("warning", '请输入正确的手机号')
                    } else {
                        redAlert.eq(i).text('请输入手机号').removeClass('show');
                    }
                }
                if (redAlert.eq(i).next().hasClass('regPass') && redAlert.eq(i).next().val().length < 6) {
                    redAlert.eq(i).text('密码不得少于6位').addClass('show');
                } else if (redAlert.eq(i).next().hasClass('regPass') && redAlert.eq(i).next().val().length >= 6) {
                    redAlert.eq(i).text('请输入密码').removeClass('show');
                }
            }
            if (!redAlert.hasClass('show') && check) {
                $.ajax({
                    url: param.userServer + '/v1.0/user/mobile/register',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        username: $("#userLogin .regist .regName").val(),
                        mobile: $("#userLogin .regist .regNum").val(),
                        password: $("#userLogin .regist .regPass").val(),
                        code: $("#userLogin .regist .yzm").val(),
                        referer_src: document.title
                    }
                }).done(function (data) {
                    console.log(data);
                    if (data.status == 0) {
                        // ONEMAP.C.publisher.publish({
                        //     type: 'success',
                        //     message: '获取成功'
                        // }, 'noteBar::add');
                        setTip("success", '获取成功')
                    } else {
                        // ONEMAP.C.publisher.publish({
                        //     type: 'warning',
                        //     message: data.message
                        // }, 'noteBar::add');
                        setTip("warning", data.message)
                    }
                })
            }
        })

        function showNumCover() {
            $("#userLogin .btn_cov").show();
            var i = 60;
            $("#userLogin .btn_cov").html(i + '秒后再次发送');
            setTimeout(function () {
                $("#userLogin .btn_cov").hide();
                clearInterval(interval);
            }, 60000)
            var interval = setInterval(function () {
                i--;
                $("#userLogin .btn_cov").html(i + '秒后再次发送');
            }, 1000)
        }
        //登录获取验证码
        $("#userLogin .login .getYzm").bind('click', function () {
            var phoneNum = $("#userLogin .login .user").val();
            //验证手机号
            var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
            if (!reg.test(phoneNum)) {
                // ONEMAP.C.publisher.publish({
                //     type: 'warning',
                //     message: '请输入正确的手机号'
                // }, 'noteBar::add');
                setTip("warning", "请输入正确的手机号!")
            } else {
                $.ajax({
                    url: param.userServer + '/v1.0/user/mobile/login/code',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        mobile: phoneNum
                    }
                }).done(function (data) {
                    console.log(data);
                    if (data.status == 0) {
                        // ONEMAP.C.publisher.publish({
                        //     type: 'success',
                        //     message: '获取成功'
                        // }, 'noteBar::add');
                        showNumCover();
                        setTip("success", "获取成功!")
                    } else {
                        // ONEMAP.C.publisher.publish({
                        //     type: 'warning',
                        //     message: data.message
                        // }, 'noteBar::add');
                        setTip("warning", data.message)
                    }
                })
            }
        })
        $("#userLogin .login .lock").bind('keydown', function (e) {
            if (e.keyCode === 13) {
                userLogin();
            }
        });
        //登录
        $("#userLogin .login .loginBtn").bind('click', function () {
            userLogin();
        })

        function userLogin() {
            // 通过验证码
            if ($("#userLogin .msgShow").hasClass('show')) {
                var phoneNum = $("#userLogin .login .user").val();
                var yzm = $("#userLogin .login .yzm").val();
                //验证手机号
                var reg = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/;
                if (!reg.test(phoneNum)) {
                    // ONEMAP.C.publisher.publish({
                    //     type: 'warning',
                    //     message: '请输入正确的手机号'
                    // }, 'noteBar::add');
                    setTip("warning", "请输入正确的手机号")
                } else if (yzm.length < 1) {
                    // ONEMAP.C.publisher.publish({
                    //     type: 'warning',
                    //     message: '请输入验证码'
                    // }, 'noteBar::add');
                    setTip("warning", "请输入验证码")
                } else {
                    $.ajax({
                        url: param.userServer + '/v1.0/user/mobile/login',
                        method: 'POST',
                        dataType: 'json',
                        headers: {
                            "Cookie": session,
                        },
                        data: {
                            mobile: phoneNum,
                            code: yzm
                        }
                    }).done(function (data) {
                        console.log(data);
                        if (data.status == 0) {
                            setTip("warning", '登录成功');
                            window.location.reload();
                        } else {
                            // ONEMAP.C.publisher.publish({
                            //     type: 'warning',
                            //     message: data.message
                            // }, 'noteBar::add');
                            setTip("warning", data.message)
                        }
                    })
                }
            } else if ($("#userLogin .passShow").hasClass('show')) {
                var userEmail = $("#userLogin .login .user").val();
                var psd = $("#userLogin .login .lock").val();
                // shell示例
                // curl -v -XPOST 'http://202.107.245.52:3010/account/login' -H "Content-Type: application/json" -d '{"username": "admin", "password": "admin888"}'
                // curl -v 'http://202.107.245.52:3010/v1.0/user/me' -H 'Cookie: session=08eb5ff4-49a8-4efa-b725-228ceb24cda2'
                $.ajax({
                    type: "POST",
                    dataType: 'json',
                    url: param.userServer + '/account/login', //3010  
                    contentType: 'application/json',
                    headers: {
                        "Cookie": session,
                    },
                    data: JSON.stringify({
                        "username": userEmail,
                        "password": psd
                    })
                }).done(function (data) {
                    if (data.meta.code == 400) {
                        setTip("warning", '用户名或密码错误');
                        return false;
                    }
                    window.location.reload();
                }).error(function (data) {
                    // ONEMAP.C.publisher.publish({
                    //     type: 'warning',
                    //     message: '该用户尚未注册'
                    // }, 'noteBar::add');
                    setTip("warning", '该用户尚未注册!')
                })
            }
        }
        //微信登录
        $("#userLogin .login p.weixin").bind('click', function () {
            window.location.replace(param.userServer + '/oauth_client/weixin/login?next=' + param.system);
        })
        $("#userLogin .login p.qq").bind('click', function () {
            window.location.replace(param.userServer + '/oauth_client/qq/login?next=' + param.system);
        })
        $("#userLogin .login p.weibo").bind('click', function () {
            window.location.replace(param.userServer + '/oauth_client/weibo/login?next=' + param.system);
        })

        this.logout = function () {
            cookie.del('session');
            window.location.reload();
        }
        return this;
    }
})(jQuery)