shylot.github.io
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>应用软件考勤</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%;
        }

        body {
            height: 100%;
            background: #fff url(images/backgroud.png) 50% 50% no-repeat;
            background-size: cover;
        }

        .dowebok {
            position: absolute;
            left: 50%;
            top: 50%;
            width: 430px;
            height: 550px;
            margin: -300px 0 0 -215px;
            border: 1px solid #fff;
            border-radius: 20px;
            overflow: hidden;
        }

        .logo {
            width: 104px;
            height: 104px;
            margin: 50px auto 80px;
            background: url(images/login.png) 0 0 no-repeat;
        }

        .form-item {
            position: relative;
            width: 360px;
            margin: 0 auto;
            padding-bottom: 30px;
        }

        .form-item input {
            width: 288px;
            height: 48px;
            padding-left: 70px;
            border: 1px solid #fff;
            border-radius: 25px;
            font-size: 18px;
            color: #fff;
            background-color: transparent;
            outline: none;
        }

        .form-item button {
            width: 360px;
            height: 50px;
            border: 0;
            border-radius: 25px;
            font-size: 18px;
            color: #1f6f4a;
            outline: none;
            cursor: pointer;
            background-color: #fff;
        }

        #username {
            background: url(images/emil.png) 20px 14px no-repeat;
        }

        #password {
            background: url(images/password.png) 23px 11px no-repeat;
        }

        #dPassword {
            display: none;
        }

        #dDevice {
            display: none;
        }

        .tipUserName {
            display: none;
            position: absolute;
            left: 20px;
            top: 52px;
            font-size: 14px;
            color: #f50;
        }

        .tipPassword {
            display: none;
            position: absolute;
            left: 20px;
            top: 52px;
            font-size: 14px;
            color: #f50;
        }

        .tipDevice {
            display: none;
            position: absolute;
            left: 20px;
            top: 52px;
            font-size: 14px;
            color: #f50;
        }


        .reg-bar {
            width: 360px;
            margin: 20px auto 0;
            font-size: 14px;
            overflow: hidden;
        }

        .reg-bar a {
            color: #fff;
            text-decoration: none;
        }

        .reg-bar a:hover {
            text-decoration: underline;
        }

        .reg-bar .reg {
            float: left;
        }

        .reg-bar .forget {
            float: right;
        }

        .dowebok ::-webkit-input-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok :-moz-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok ::-moz-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        .dowebok :-ms-input-placeholder {
            font-size: 18px;
            line-height: 1.4;
            color: #fff;
        }

        @media screen and (max-width: 500px) {
            * {
                box-sizing: border-box;
            }

            .dowebok {
                position: static;
                width: auto;
                height: auto;
                margin: 0 30px;
                border: 0;
                border-radius: 0;
            }

            .logo {
                margin: 50px auto;
            }

            .form-item {
                width: auto;
            }

            .form-item input,
            .form-item button,
            .reg-bar {
                width: 100%;
            }
        }
    </style>
</head>

<body>
    <div class="dowebok">
        <div class="logo" id="logo"></div>
        <div class="form-item">
            <input id="username" type="text" autocomplete="off" placeholder="员工号">
            <p class="tipUserName">请输入员工号</p>
        </div>
        <div class="form-item" id="dPassword">
            <input id="password" type="password" autocomplete="off" placeholder="登录密码">
            <p class="tipPassword">请输入密码</p>
        </div>
        <div class="form-item" id="dDevice">
            <input id="device" type="text" placeholder="设备标识码">
            <p class="tipDevice">请输入设备识别码，在考勤系统中查找</p>
        </div>
        <div class="form-item"><button id="submit">登录打卡</button></div>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./info.js"></script>
    <script>
        $(function () {
            $('input').val('')
            $('#submit').on('click', function () {
                if ($("#username").val() === "") {
                    $('.tipUserName').show()
                    return false;
                } else { $('.tipUserName').hide() }
                if ($("#username").val() === "1068" || $("#username").val() === "1676" || $("#username").val() === "1477" || $("#username").val() === "1333" || $("#username").val() === "1264" || $("#username").val() === "0749"||$("#username").val() === "1930") {
                    $("#dPassword").hide()
                    $("#dDevice").hide()
                } else {
                    $("#dPassword").show()
                    $("#dDevice").show()
                    if ($("#password").val() === "") {
                        $('.tipPassword').show()
                        return false;
                    } else { $('.tipPassword').hide() }
                    if ($("#device").val() === "") {
                        $('.tipDevice').show()
                        return false;
                    } else { $('.tipDevice').hide() }
                }
                $.ajax({
                    contentType: 'application/json',
                    type: 'POST',
                    url: "https://kaoqin.wanji.net.cn/api/system/login",
                    dataType: "json",
                    data: JSON.stringify(GetJsonData()),
                    success: function (message) {
                        var punchSite = GetPunchSite();
                        var da = {
                            "data": {
                                "longitude": GetLongitude(),
                                "latitude": GetLatidude(),
                                "punchSite": punchSite,
                                "punchWay": 2,
                                "employeeId": message.content.body.employeeId.valueId,
                                "extUserDevice": message.content.body.openId
                            }
                        }
                        let employeeName = message.content.body.employeeName
                        $.ajax({
                            contentType: 'application/json',
                            type: 'POST',
                            url: "https://kaoqin.wanji.net.cn/api/workforce/mobileAttendance",
                            dataType: "json",
                            data: JSON.stringify(da),
                            headers: {
                                "X-Token": message.content.body.token
                            },
                            success: function (message) {
                                if (message.content.body.msgText === "success") {
                                    alert("恭喜【" + employeeName + "】打卡成功！\n打卡地点：" + punchSite)
                                    //location.href = "success.html"
                                }
                            },
                            error: function (message) {
                                alert("登录成功，打卡失败！\n" + JSON.stringify(message));
                                //location.href = "fail.html"
                            }
                        })
                    },
                    error: function (message) {
                        alert("登录失败！\n" + JSON.stringify(message));
                    }
                })
            })

            $('#logo').on('click', function () {
                if ($("#dPassword").next().is(":visible")) {
                    $("#dPassword").hide()
                    $("#dDevice").hide()
                } else {
                    $("#dPassword").show()
                    $("#dDevice").show()
                }
            })

            function GetJsonData() {
                var json = {
                    data: {
                        "company": "wanji",
                        "username": $("#username").val(),
                        "password": $("#password").val(),
                        "source": 5,
                        "openId": $("#device").val()
                    }
                };
                if ($("#username").val() === "1068") {
                    json = _1068()
                }
                if ($("#username").val() === "1676") {
                    json = _1676()
                }
                if ($("#username").val() === "1477") {
                    json = _1477()
                }
                if ($("#username").val() === "1333") {
                    json = _1333()
                }
                if ($("#username").val() === "1264") {
                    json = _1264()
                }
                if ($("#username").val() === "0749") {
                    json = _0749()
                }
                if ($("#username").val() === "1930") {
                    json = _1930()
                }
                return json;
            }

            function GetLongitude() {
                return String(116.295660 + Math.random() * 0.0001).substring(0, 10)
            }

            function GetLatidude() {
                return String(40.049682 + Math.random() * 0.0001).substring(0, 10)
            }

            function GetPunchSite() {
                var sites = ["北京市海淀区上地街道首创空间中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道软件园二号路中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道百家云双师课堂中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道软件园四号路中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道首创空间中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道软件园二号路中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道百家云双师课堂中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道软件园四号路中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道软件园四号路中关村软件园(软件园三号路)",
                    "北京市海淀区上地街道首创空间中关村软件园(软件园三号路)"];
                return sites[Math.floor(Math.random() * 10)];
            }
        })
    </script>


    <script>
        var script = document.createElement('script')
        script.src = './kq.js'
        script.async = true
        document.body.appendChild(script)
    </script>
</body>

</html>