login.html 9.2 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/base.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="stylesheet" href="css/weui.css">
    <script src="js/common.js"></script>
    <script src="js/base.js" type="text/javascript" charset="utf-8"></script>
    <script>
        function tab(pid) {
            var tabs = ["tab1", "tab2"];
            for (var i = 0; i < 2; i++) {
                if (tabs[i] == pid) {
                    document.getElementById(tabs[i]).style.display = "block";
                    var div = document.getElementById('ctab3');
                    div.setAttribute("class", "off");
                    var div = document.getElementById('ctab4');
                    div.setAttribute("class", "on");
                } else {
                    document.getElementById(tabs[i]).style.display = "none";
                    var div = document.getElementById('ctab4');
                    div.setAttribute("class", "off");
                    var div = document.getElementById('ctab3');
                    div.setAttribute("class", "on");
                    var div = document.getElementById('ctab3');
                    div.setAttribute("class", "on");
                }
            }
        }
    </script>
    <style>
        #tab2 {
            display: none;
        }
    </style>
    <title>登录</title>
</head>

<body style="background-color:#fff;">
    <div class="perheader center">
        <div class="left perback">
            <a href="#" onClick="javascript:history.back(-1);">
                <img src="images/care_03.jpg" />
            </a>
        </div>
        <div class="bloodtext">登录</div>
    </div>

    <div class="lopart1 center" id="tab">
        <div class="lotab">
            <a onclick="tab('tab1')" id="ctab3" class="on">快捷登录</a>
        </div>
        <div class="lotab1">
            <a onclick="tab('tab2')" id="ctab4" class="off">密码登录</a>
        </div>
        <form action="#" class="login" id="tab1">
            <input type="text" placeholder="请输入手机号" class="loinput" id="phone" />
            <div>
                <input type="text" placeholder="请输入验证码" class="loinput" id="code" />
                <span id="obtain">
                    <img src="images/loshu_03.jpg" />
                    <a class="T-getCode">获取验证码</a>
                </span>
            </div>
            <button type="button" id="lobut">登录</button>
        </form>

        <form action="#" class="login" id="tab2">
            <input type="text" placeholder="请输入手机号" class="loinput" id="phone2" />
            <div>
                <input type="text" placeholder="请输入验证码" class="loinput" id="code2" />
                <span id="obtain">
                    <img src="images/loshu_03.jpg" />
                    <a href="setPass.html">忘记密码</a>
                </span>
            </div>
            <button type="button" id="lobut" class="lobutTwo">登录</button>
        </form>

        <div class="noreg">未注册手机验证后自动注册</div>
        <div class="loqu">
            <img src="images/loqu_07.jpg" />使用以下账号快速登录
            <img src="images/loqu_07.jpg" />
        </div>
        <div class="loqq">
            <a href="#">
                <img src="images/qq_03.jpg" />
            </a>
            <a href="#">
                <img src="images/qq_05.jpg" />
            </a>
        </div>
        <div id="check_css3" class="check">
            <span>
                <input type="checkbox" class="input_check" id="check3">
                <label for="check3"></label>我同意
                <a href="#">《慈界医养用户服务协议》</a>
            </span>
        </div>
    </div>


    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/weui.js"></script>
    <script>
        $(function () {
            // 快捷登陆操作
            $("#lobut").on("click", (function () {
                var phone = $("#phone").val();
                var code = $("#code").val();
                if (phone != "") {
                    if (code != "") {
                        sendAjax('post', 'home/index/checkSMS', {
                            tel: phone,
                            code: code
                        }, function (res) {
                            console.log(res)
                            if (res.code == 1) {

                            } else if (res.code == 0) {
                                let loading = weui.loading(res.msg)
                                setTimeout(function () {
                                    loading.hide();
                                }, 1500);
                            }

                        });
                    } else {
                        let loading = weui.loading("请填写验证码")
                        setTimeout(function () {
                            loading.hide();
                        }, 1500);
                    }
                } else {
                    let loading = weui.loading("请填写手机号码")
                    setTimeout(function () {
                        loading.hide();
                    }, 1500);
                }

            }))
            // 密码登陆操作
            $(".lobutTwo").on("click", (function () {
                var phone = $("#phone2").val();
                var code = $("#code2").val();
                if (phone != "") {
                    if (code != "") {
                        sendAjax('post', 'home/index/loginByPass', {
                            tel: phone,
                            code: code
                        }, function (res) {
                            console.log(res)
                            if (res.code == 1) {

                            } else if (res.code == 0) {
                                let loading = weui.loading(res.msg)
                                setTimeout(function () {
                                    loading.hide();
                                }, 1500);
                            }

                        });
                    } else {
                        let loading = weui.loading("请填写密码")
                        setTimeout(function () {
                            loading.hide();
                        }, 1500);
                    }
                } else {
                    let loading = weui.loading("请填写手机号码")
                    setTimeout(function () {
                        loading.hide();
                    }, 1500);
                }

            }))
            // 短信验证码倒计时
            //获取短信验证码
            var validCode = true;
            $(".T-getCode").click(function () {
                var time = 60;
                var $code = $(this);
                if (validCode) {
                    var phone = $("#phone").val();
                    if (phone != "") {
                        if (phones() == true) {
                            sendAjax('post', 'home/index/sendCode', {
                                tel: phone,
                            }, function (res) {
                                console.log(res)
                                if (res.code == 1) {
                                    weui.toast(res.msg, 1000);
                                    validCode = false;
                                    var t = setInterval(function () {
                                        time--;
                                        $code.html(time + "秒");
                                        if (time == 0) {
                                            clearInterval(t);
                                            $code.html("重新获取");
                                            validCode = true;
                                        }
                                    }, 1000)
                                }
                            });
                        } else {
                            let loading = weui.loading("手机格式错误")
                            setTimeout(function () {
                                loading.hide();
                            }, 1500);
                        }
                    } else {
                        let loading = weui.loading("请填写手机号码")
                        setTimeout(function () {
                            loading.hide();
                        }, 1500);
                    }


                }
            })


            //	验证手机
            function phones() {
                var value = document.getElementById("phone").value;
                var reg = /^1(3|4|5|7|8)\d{9}$/;
                if (reg.test(value) == true) {

                    return true;
                } else {

                    return false;
                }
            }

        })

    </script>
</body>