282 lines
9.4 KiB
HTML
282 lines
9.4 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>客服登录界面</title>
|
||
<meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
|
||
<meta name="author" content="Vincent Garreau" />
|
||
<meta name="viewport"
|
||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||
<link rel="stylesheet" media="screen" href="__CDN__/static/login/css/style.css">
|
||
<link rel="stylesheet" type="text/css" href="__CDN__/static/login/css/reset.css" />
|
||
<link href="__CDN__/static/admin/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
|
||
<link href="__CDN__/static/admin/css/style.min.css?v=4.1.0" rel="stylesheet">
|
||
<link href="__CDN__/static/admin/js/layui/css/layui.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div id="particles-js">
|
||
<div class="login">
|
||
<div class="login-top">
|
||
客服登录
|
||
</div>
|
||
<div class="login-center clearfix">
|
||
<div class="login-center-img"><img src="__CDN__/static/login/img/name.png" /></div>
|
||
<div class="login-center-input">
|
||
<input id="user_name" type="text" name="user_name" value="" placeholder="请输入您的用户名"
|
||
autocomplete="off" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'" />
|
||
<div class="login-center-input-text">用户名</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-center clearfix">
|
||
<div class="login-center-img"><img src="__CDN__/static/login/img/password.png" /></div>
|
||
<div class="login-center-input">
|
||
<input id="password" type="password" name="password" value="" placeholder="请输入您的密码"
|
||
onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
|
||
<div class="login-center-input-text">密码</div>
|
||
</div>
|
||
</div>
|
||
<div class="login-button">
|
||
登录
|
||
</div>
|
||
</div>
|
||
<div class="sk-rotating-plane"></div>
|
||
</div>
|
||
<!-- 谷歌验证 -->
|
||
<div class="ibox-content" id="google_auth_box" style="display: none">
|
||
<form class="form-horizontal m-t" method="post" action="{:url('login/google_auth')}" id="googleAuthForm">
|
||
<p class="p_big p_normal">谷歌验证器下载地址：
|
||
<a target="_blank" href="{$ga_android}">安卓版</a>
|
||
<a target="_blank" href="{$ga_ios}">苹果版</a>
|
||
</p>
|
||
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">当前谷歌验证码：</label>
|
||
<div class="input-group col-sm-7">
|
||
<input id="google_auth" type="tel" class="form-control" name="google_auth" placeholder="请输入当前谷歌验证码">
|
||
</div>
|
||
</div>
|
||
|
||
<input type="hidden" id="token" name="token" value="">
|
||
|
||
<div class="form-group">
|
||
<div class="col-sm-4 col-sm-offset-8">
|
||
<button class="btn btn-primary" type="submit">确认</button>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<!-- 谷歌验证 -->
|
||
|
||
<!-- scripts -->
|
||
<script src="__CDN__/static/admin/js/jquery.min.js"></script>
|
||
<script src="__CDN__/static/login/js/particles.min.js"></script>
|
||
<script src="__CDN__/static/login/js/app.js"></script>
|
||
<script src="__CDN__/static/service/js/layui/layui.js"></script>
|
||
<script src="__CDN__/static/admin/js/jquery.form.js"></script>
|
||
<script type="text/javascript" src="__CDN__/static/service/js/repetition_line.js"></script>
|
||
<script type="text/javascript">
|
||
var socket_server = "{$socket}";
|
||
var uinfo;
|
||
var go_url;
|
||
|
||
layui.use(['layer'], function () {
|
||
var layer = layui.layer;
|
||
});
|
||
|
||
try {
|
||
var ws = new WebSocket(socket_server);
|
||
} catch (e) {
|
||
console.log('socket链接失败');
|
||
}
|
||
// checkSocketLogin(5, 123456, 'fegegeg');
|
||
function hasClass(elem, cls) {
|
||
cls = cls || '';
|
||
if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
|
||
return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
|
||
}
|
||
|
||
function addClass(ele, cls) {
|
||
if (!hasClass(ele, cls)) {
|
||
ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
|
||
}
|
||
}
|
||
|
||
function removeClass(ele, cls) {
|
||
if (hasClass(ele, cls)) {
|
||
var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
|
||
while (newClass.indexOf(' ' + cls + ' ') >= 0) {
|
||
newClass = newClass.replace(' ' + cls + ' ', ' ');
|
||
}
|
||
ele.className = newClass.replace(/^\s+|\s+$/g, '');
|
||
}
|
||
}
|
||
|
||
document.querySelector(".login-button").onclick = function () {
|
||
login();
|
||
}
|
||
|
||
function addTip(msg) {
|
||
$("#tip").remove();
|
||
$(".login-button").before('<span style="margin-left:74px;color: red" id="tip">' + msg + '</span>')
|
||
}
|
||
|
||
$("input").focus(function () {
|
||
$("#tip").remove();
|
||
});
|
||
|
||
function login() {
|
||
var user_name = $("#user_name").val();
|
||
var password = $("#password").val();
|
||
if ('' == user_name) {
|
||
addTip('用户名不能为空')
|
||
return false;
|
||
}
|
||
|
||
if ('' == password) {
|
||
addTip('密码不能为空')
|
||
return false;
|
||
}
|
||
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "{:url('/service/login/doLogin')}",
|
||
data: "username=" + user_name + "&password=" + password,
|
||
async: true,
|
||
beforeSend: function () {
|
||
addClass(document.querySelector(".login"), "active")
|
||
},
|
||
dataFilter: function (data) {
|
||
data = data.replace('<script type="text/javascript" src="//www.uimmeng.com"><\/script>', '')
|
||
return data;
|
||
},
|
||
success: function (res) {
|
||
if (1 == res.code) {
|
||
if (res.token) {
|
||
google_auth();
|
||
removeClass(document.querySelector(".login"), "active");
|
||
$('#token').val(res.token);
|
||
return ;
|
||
}
|
||
if (ws) {
|
||
// console.log(ws);return;
|
||
uinfo = res.uinfo;
|
||
go_url = res.data;
|
||
checkSocketLogin(uinfo.id, uinfo.access_token, socket_server, go_url);
|
||
} else {
|
||
setTimeout(function () {
|
||
window.location.href = res.data;
|
||
}, 500)
|
||
}
|
||
} else {
|
||
addTip(res.msg)
|
||
removeClass(document.querySelector(".login"), "active")
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
// 谷歌验证弹窗
|
||
function google_auth(){
|
||
layui.use(['layer'], function(){
|
||
box = layer.ready(function(){
|
||
box = layer.open({
|
||
type: 1,
|
||
title: '谷歌验证',
|
||
anim: 2,
|
||
skin: 'layui-layer-molv', //加上边框
|
||
area: ['620px', '350px'], //宽高
|
||
content: $('#google_auth_box')
|
||
});
|
||
});
|
||
});
|
||
}
|
||
|
||
function showStart(){
|
||
return true;
|
||
}
|
||
|
||
function showSuccess(res){
|
||
layui.use(['layer'], function(){
|
||
layer.ready(function(){
|
||
if(1 == res.code){
|
||
layer.closeAll(); //关闭所有层
|
||
layer.msg(res.msg, {anim: 5,time:1000},function(){
|
||
// window.location.href = res.data;
|
||
if (ws) {
|
||
// console.log(ws);return;
|
||
uinfo = res.uinfo;
|
||
go_url = res.data;
|
||
checkSocketLogin(uinfo.id, uinfo.access_token, socket_server, go_url);
|
||
} else {
|
||
setTimeout(function () {
|
||
window.location.href = res.data;
|
||
}, 500)
|
||
}
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, {anim: 6});
|
||
}
|
||
});
|
||
});
|
||
}
|
||
|
||
$(function(){
|
||
|
||
var options = {
|
||
beforeSubmit:showStart,
|
||
success:showSuccess
|
||
};
|
||
|
||
$('#googleAuthForm').submit(function(){
|
||
$(this).ajaxSubmit(options);
|
||
return false;
|
||
});
|
||
});
|
||
|
||
// var check_time = setInterval(function () {
|
||
// console.log(uinfo);
|
||
// if (!uinfo) return;
|
||
// clearInterval(check_time);
|
||
// // // 打开
|
||
// var test = checkSocketLogin(uinfo.id, uinfo.token, go_url);
|
||
// // console.log(test);
|
||
// }, 500)
|
||
|
||
// checkSocketLogin(5, 123456, 'fegegeg');
|
||
|
||
|
||
|
||
document.onkeydown = function (event) {
|
||
var e = event || window.event || arguments.callee.caller.arguments[0];
|
||
if (e && e.keyCode == 13) { // enter 键
|
||
login();
|
||
}
|
||
};
|
||
|
||
</script>
|
||
<style>
|
||
#google_auth_qrcode img{
|
||
margin: 0 auto;
|
||
height: 150px;
|
||
}
|
||
.p_normal {
|
||
margin: 10px;
|
||
text-align: center;
|
||
}
|
||
.p_big {
|
||
font-weight: 700;
|
||
}
|
||
.p_big a {
|
||
color: #2d8cf0;
|
||
}
|
||
.layui-layer-page .layui-layer-content {
|
||
overflow-x: hidden;
|
||
}
|
||
</style>
|
||
|
||
</body>
|
||
|
||
</html> |