pfz_smile
/
depositroy
2
0
Fork 0
Code Issues Pull Requests Projects Releases 1 Wiki Activity
Browse Source

添加企业微信扫码功能

lwx_dev
erdanergou 3 years ago
parent
185ed735ec
commit
210778f016
1 changed files with 208 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 262
      src/main/resources/templates/pages/user/login.html

262
src/main/resources/templates/pages/user/login.html
View File

@ -9,26 +9,139 @@
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="/static/lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="/static/css/public.css">
<link rel="stylesheet" href="/static/css/public.css">
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<style>
html, body {width: 100%;height: 100%;overflow: hidden}
body {background: #1E9FFF;}
body:after {content:'';background-repeat:no-repeat;background-size:cover;-webkit-filter:blur(3px);-moz-filter:blur(3px);-o-filter:blur(3px);-ms-filter:blur(3px);filter:blur(3px);position:absolute;top:0;left:0;right:0;bottom:0;z-index:-1;}
.layui-container {width: 100%;height: 100%;overflow: hidden}
.admin-login-background {width:360px;height:300px;position:absolute;left:50%;top:40%;margin-left:-180px;margin-top:-100px;}
.logo-title {text-align:center;letter-spacing:2px;padding:14px 0;}
.logo-title h1 {color:#1E9FFF;font-size:25px;font-weight:bold;}
.login-form {background-color:#fff;border:1px solid #fff;border-radius:3px;padding:14px 20px;box-shadow:0 0 8px #eeeeee;}
.login-form .layui-form-item {position:relative;}
.login-form .layui-form-item label {position:absolute;left:1px;top:1px;width:38px;line-height:36px;text-align:center;color:#d2d2d2;}
.login-form .layui-form-item input {padding-left:36px;}
.captcha {width:60%;display:inline-block;}
.captcha-img {display:inline-block;width:34%;float:right;}
.captcha-img img {height:34px;border:1px solid #e6e6e6;height:36px;width:100%;}
html, body {
width: 100%;
height: 100%;
overflow: hidden
}
body {
background: #1E9FFF;
}
body:after {
content: '';
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(3px);
-moz-filter: blur(3px);
-o-filter: blur(3px);
-ms-filter: blur(3px);
filter: blur(3px);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
.layui-container {
width: 100%;
height: 100%;
overflow: hidden
}
.admin-login-background {
width: 360px;
height: 300px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -180px;
margin-top: -100px;
}
.logo-title {
text-align: center;
letter-spacing: 2px;
padding: 14px 0;
}
.logo-title h1 {
color: #1E9FFF;
font-size: 25px;
font-weight: bold;
}
.login-form {
background-color: #fff;
border: 1px solid #fff;
border-radius: 3px;
padding: 14px 20px;
box-shadow: 0 0 8px #eeeeee;
}
.login-form .layui-form-item {
position: relative;
}
.login-form .layui-form-item label {
position: absolute;
left: 1px;
top: 1px;
width: 38px;
line-height: 36px;
text-align: center;
color: #d2d2d2;
}
.login-form .layui-form-item input {
padding-left: 36px;
}
.captcha {
width: 60%;
display: inline-block;
}
.captcha-img {
display: inline-block;
width: 34%;
float: right;
}
.captcha-img img {
height: 34px;
border: 1px solid #e6e6e6;
height: 36px;
width: 100%;
}
#scanQrCodeLogin{
float: right;
display: block;
padding: 9px 0!important;
line-height: 20px;
margin-right: 10px;
color: #666;
cursor: pointer;
}
#login_panle{
background-color: #fff;
padding: 40px 40px 40px 40px;
border-radius: 10px;
position: absolute;
left: 50%;
top: 40%;
margin-left: -180px;
margin-top: -100px;
}
#nameAndPwdLogin{
color: #666;
cursor: pointer;
position: absolute;
bottom: 10%;
left: 40%;
}
</style>
</head>
<body>
@ -41,54 +154,69 @@
<h1>仓库管理系统登录</h1>
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-username" ></label>
<input type="text" name="username" lay-verify="required|account" placeholder="请输入工号或用户名" autocomplete="off" class="layui-input" >
<label class="layui-icon layui-icon-username"></label>
<input type="text" name="username" lay-verify="required|account" placeholder="请输入工号或用户名"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-password" ></label>
<input type="password" name="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
<label class="layui-icon layui-icon-password"></label>
<input type="password" name="password" lay-verify="required|password" placeholder="请输入密码"
autocomplete="off" class="layui-input">
</div>
<div class="layui-form-item">
<label class="layui-icon layui-icon-vercode" ></label>
<input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码" autocomplete="off" class="layui-input verification captcha">
<label class="layui-icon layui-icon-vercode"></label>
<input type="text" name="captcha" id="captcha" lay-verify="required|captcha" placeholder="图形验证码"
autocomplete="off" class="layui-input verification captcha">
<div class="captcha-img">
<input type="text" id="captchaId" name="captchaId" style="display: none" th:value="${captchaid}">
<input type="text" id="captchaId" name="captchaId" style="display: none"
th:value="${captchaid}">
<img id="captchaPic" th:src="${picPath}" onclick="changerPic()">
</div>
</div>
<div class="layui-form-item">
<input type="checkbox" name="rememberMe" value="true" lay-skin="primary" title="记住密码">
<span id="scanQrCodeLogin">扫码登录</span>
</div>
<div class="layui-form-item">
<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit="" lay-filter="login">登 入</button>
<button class="layui-btn layui-btn layui-btn-normal layui-btn-fluid" lay-submit=""
lay-filter="login">登 入
</button>
</div>
</form>
</div>
</div>
<div id="login_panle" style="display:none;" >
<div id="login_mainPanle">
</div>
<div class="layui-form-item">
<span id="nameAndPwdLogin">账号密码登录</span>
</div>
</div>
</div>
<script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="static/lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/lib/jq-module/jquery.particleground.min.js" charset="utf-8"></script>
<script src="https://wwcdn.weixin.qq.com/node/open/js/wecom-jssdk-1.3.1.js"></script>
<script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.4.js"></script>
<script>
layui.use(['layer','form'], function () {
layui.use(['layer', 'form'], function () {
var form = layui.form,
layer = layui.layer;
// 登录过期的时候，跳出ifram框架
if (top.location != self.location) top.location = self.location;
// 粒子线条背景
$(document).ready(function(){
$(document).ready(function () {
$('.layui-container').particleground({
dotColor:'#7ec7fd',
lineColor:'#7ec7fd'
dotColor: '#7ec7fd',
lineColor: '#7ec7fd'
});
});
// 进行登录操作
form.on('submit(login)', function (data) {
data = data.field;
@ -105,35 +233,35 @@
return false;
}
$.ajax({
url:"/login",
type:'post',
dataType:'json',
url: "/login",
type: 'post',
dataType: 'json',
contentType: "application/json;charset=utf-8",
data:JSON.stringify(data),
beforeSend:function () {
this.layerIndex = layer.load(0, { shade: [0.5, '#393D49'] });
data: JSON.stringify(data),
beforeSend: function () {
this.layerIndex = layer.load(0, {shade: [0.5, '#393D49']});
},
success:function(data){
success: function (data) {
layer.close(this.layerIndex);
if(data.status !== 200){
if (data.status !== 200) {
layer.msg(data.statusInfo.message);//失败的表情
$.ajax({
url:"/getCaptchaid",
type:"get",
dataType:'json',
url: "/getCaptchaid",
type: "get",
dataType: 'json',
contentType: "application/json;charset=utf-8",
success:function (data) {
success: function (data) {
$("#captcha").val("");
$("#captchaPic").attr("src",data.picPath);
$("#captchaPic").attr("src", data.picPath);
$("#captchaId").val(data.captchaid);
}
});
return;
}else{
} else {
layer.msg("登录成功", {
icon: 6,//成功的表情
time: 1000 //1秒关闭（如果不配置，默认是3秒）
}, function(){
}, function () {
window.location = '/index';
});
@ -145,20 +273,46 @@
});
return false;
});
$("#scanQrCodeLogin").click(function() {
$("#login_panle").show();
let url = "https://jy.hxgk.group/QyWxLogin";
var wwLogin = new WwLogin({
"id": "login_mainPanle", // 登录页面显示二维码的容器id
"appid": "ww02f310301953277a",  // 企业微信的CorpID，在企业微信管理端查看
"agentid": "1000037", // 授权方的网页应用id，在具体的网页应用中查看
"redirect_uri": encodeURIComponent(url), // 重定向的地址，需要进行encode
"state": "loginState",
"href": "",  //自定义样式链接，只支持https协议的资源地址
"lang": "zh",
});
});
$("#nameAndPwdLogin").click(function () {
$("#login_panle").hide();
})
// 卸载
});
function changerPic() {
$.ajax({
url:"/getCaptchaid",
type:"get",
dataType:'json',
url: "/getCaptchaid",
type: "get",
dataType: 'json',
contentType: "application/json;charset=utf-8",
success:function (data) {
$("#captchaPic").attr("src",data.picPath);
success: function (data) {
$("#captchaPic").attr("src", data.picPath);
$("#captchaId").val(data.captchaid);
}
});
}
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save