<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>coderutil行为盾，滑块验证</title>

<!--框架样式-->
<link href="/ref/yz/css/bootstrap.min.css" rel="stylesheet">

<!--图标样式-->
<link href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" rel="stylesheet">

<!--主要样式-->
<link href="/ref/yz/disk/slidercaptcha.css" rel="stylesheet" />
<script src="/js/ref/jquery-3.4.1.js" type="text/javascript"></script>
<script src="/ref/layui-v2.6.8/layui/layui.js" type="text/javascript"></script>
<script src="/js/ref/common.js" type="text/javascript"></script>
<style>
.slidercaptcha {
	margin: 0 auto;
	width: 400px;
	height: 335px;
	border-radius: 4px;
}
.container-fluid {
    margin: 0px;
}

.slidercaptcha .card-body {
	padding: 1rem;
}

.slidercaptcha canvas:first-child {
	border-radius: 4px;
	border: 1px solid #e6e8eb;
    margin-top: -15px;
}

.slidercaptcha.card .card-header {
    border-bottom: none;
    background-color: transparent;
    background-image: linear-gradient(0deg, #fff, #ebf1f6);
}
.card-footer {
    font-size: 13px;
    background-color: transparent;
    margin-top: -12px;
    color: #757b86;
    border: none;
}

.refreshIcon {
	top: -54px;
}
</style>
</head>
<body>
    <div class="container-fluid" style="margin: 0px; padding: 0px;">
        <div class="form-row">
            <div class="col-12">
                <div class="slidercaptcha card" style="border: none">
                    <div class="card-header">
                        <span>请完成安全验证</span>
                    </div>
                    <div class="card-body"><div id="captcha"></div></div>
                    <div class="card-footer">
                        由《<a href="https://www.coderutil.com/star/35" target="_blank">coderutil技术学院</a>》提供技术支持
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="/ref/yz/js/jquery-1.11.0.min.js" type="text/javascript"></script>
    <script src="/ref/yz/disk/longbow.slidercaptcha.js"></script>
    <script>
        var fromH5 = location.href.indexOf("/h5") > 0;
        function getUserParamByName(key) {
            var url = window.location.search;
            var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
            var result = url.substr(1).match(reg);
            return result ? decodeURIComponent(result[2]) : "";
        }

        var mobile = getUserParamByName("mobile");
        var password = getUserParamByName("password");
        var tokenId = "";

        reloadSlideVerification();
        function reloadSlideVerification() {
            $.ajax({
                url:"/api/slide/verification/get",
                type:"get",
                success:function (data) {
                    data = eval(data);
                    if (data.success){
                        data = data.data;
                        tokenId = data.id;
                        $('#captcha').sliderCaptcha({
                            repeatIcon: 'fa fa-redo',
                            x: data.x,
                            y: data.y,
                            tokenId: data.id,
                            setSrc: function () {
                                return data.image;
                            },
                            onSuccess: function () {
                                $.ajax({
                                    url: "/api/user/login",
                                    type: "post",
                                    dataType: "json",
                                    contentType: "application/json;charset=utf-8",
                                    data: JSON.stringify({
                                        mobile: mobile,
                                        password: password,
                                        solidTokenId: tokenId
                                    }),
                                    success: function (data) {
                                        data = eval(data);
                                        if (data.success) {
                                            if (fromH5) {
                                                parent.location.href = "/h5/list";
                                            } else {
                                                parent.location.href = "/chat";
                                            }
                                        } else {
                                            layer.msg(data.msg);
                                        }
                                    }, error: function () {
                                        layer.msg("服务端异常");
                                    }
                                })
                            },
                            onFail: function () {
                                setTimeout('reloadSlideVerificationPlugin()', 2000);
                            },
                        });
                    }
                },error:function () {}
            })
        }

        function closeParentIframe() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        }

        function reloadSlideVerificationPlugin() {
            location.reload()
        }
    </script>
</body>
</html>