调整登录页面为thymeleaf、vue、layui共同处理
This commit is contained in:
parent
cce3d084a4
commit
68bab56534
@ -37,6 +37,10 @@ public interface IUserCenterConst {
|
||||
* 系统子标题大小
|
||||
*/
|
||||
String SYSTEM_SUB_TITLE_SIZE = "systemSubTitleSize";
|
||||
/**
|
||||
* 系统简称，菜单上方名称
|
||||
*/
|
||||
String SYSTEM_SIMPLE_TITLE = "systemSimpleTitle";
|
||||
/**
|
||||
* 版权年份
|
||||
*/
|
||||
@ -81,8 +85,5 @@ public interface IUserCenterConst {
|
||||
* 菜单模式
|
||||
*/
|
||||
String MENU_MODE = "menuMode";
|
||||
/**
|
||||
* 登录页面
|
||||
*/
|
||||
String LOGIN_PAGE = "loginPage";
|
||||
|
||||
}
|
||||
|
||||
@ -20,6 +20,7 @@ import javax.servlet.http.HttpServletRequest;
|
||||
import javax.servlet.http.HttpServletResponse;
|
||||
import javax.servlet.http.HttpSession;
|
||||
import java.io.IOException;
|
||||
import java.util.HashMap;
|
||||
import java.util.Map;
|
||||
import java.util.Objects;
|
||||
|
||||
@ -48,100 +49,38 @@ public class OAuthRouteController {
|
||||
@GetMapping("login")
|
||||
public ModelAndView login(HttpServletRequest request) {
|
||||
ModelAndView mv = new ModelAndView();
|
||||
mv.addObject(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
|
||||
if (request.getParameter(IUserCenterConst.ERROR) != null) {
|
||||
mv.addObject(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
|
||||
}
|
||||
Map<String, Object> config = ConfigManager.getInstance().getConfig();
|
||||
|
||||
Map<String, Object> pageParams = new HashMap<>(16);
|
||||
pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
|
||||
pageParams.put(IUserCenterConst.ERROR_MESSAGE, request.getSession().getAttribute(IUserCenterConst.ERROR_MESSAGE));
|
||||
// 服务地址
|
||||
pageParams.put(IUserCenterConst.SERVER_URL, serverProperties.getUrl());
|
||||
// 系统LOGO
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_LOGO)) && !StringUtils.isBlank(config.get(IUserCenterConst.SYSTEM_LOGO).toString())) {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_LOGO, "");
|
||||
}
|
||||
pageParams.put(IUserCenterConst.SYSTEM_LOGO, config.get(IUserCenterConst.SYSTEM_LOGO).toString());
|
||||
// 背景图片
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES)) && !StringUtils.isBlank(config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString())) {
|
||||
mv.addObject(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, "");
|
||||
}
|
||||
pageParams.put(IUserCenterConst.LOGIN_BACKGROUND_IMAGES, config.get(IUserCenterConst.LOGIN_BACKGROUND_IMAGES).toString());
|
||||
// 系统标题
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_TITLE)) && !StringUtils.isBlank(config.get(IUserCenterConst.SYSTEM_TITLE).toString())) {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_TITLE, serverProperties.getSystemTitle());
|
||||
}
|
||||
// 系统标题大小
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE)) && Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()) > 12) {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, 26);
|
||||
}
|
||||
pageParams.put(IUserCenterConst.SYSTEM_TITLE, config.get(IUserCenterConst.SYSTEM_TITLE).toString());
|
||||
// 系统标题大小，默认26
|
||||
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
|
||||
// 系统子标题
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_SUB_TITLE)) && !StringUtils.isBlank(config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString())) {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE, serverProperties.getSystemSubTitle());
|
||||
}
|
||||
// 系统子标题大小
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE)) && Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()) > 12) {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, 16);
|
||||
}
|
||||
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE, config.get(IUserCenterConst.SYSTEM_SUB_TITLE).toString());
|
||||
// 系统子标题大小，默认16
|
||||
pageParams.put(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE, Integer.parseInt(config.get(IUserCenterConst.SYSTEM_SUB_TITLE_SIZE).toString()));
|
||||
// 版权年份
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.COPY_RIGHT_YEAR))) {
|
||||
mv.addObject(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.COPY_RIGHT_YEAR, "");
|
||||
}
|
||||
pageParams.put(IUserCenterConst.COPY_RIGHT_YEAR, config.get(IUserCenterConst.COPY_RIGHT_YEAR).toString());
|
||||
// 版权所属
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.COPY_LEFT))) {
|
||||
mv.addObject(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.COPY_LEFT, "");
|
||||
}
|
||||
pageParams.put(IUserCenterConst.COPY_LEFT, config.get(IUserCenterConst.COPY_LEFT).toString());
|
||||
// 官方链接
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.OFFICIAL_URL))) {
|
||||
mv.addObject(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.OFFICIAL_URL, "");
|
||||
}
|
||||
pageParams.put(IUserCenterConst.OFFICIAL_URL, config.get(IUserCenterConst.OFFICIAL_URL).toString());
|
||||
// 开启验证码
|
||||
if (!Objects.isNull(config.get(ISystemConstant.VERIFICATION_CODE))) {
|
||||
mv.addObject(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
|
||||
} else {
|
||||
mv.addObject(ISystemConstant.VERIFICATION_CODE, ISystemConstant.IS_FALSE);
|
||||
}
|
||||
// 开启uKey登录
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.UKEY_LOGIN))) {
|
||||
mv.addObject(IUserCenterConst.UKEY_LOGIN, config.get(IUserCenterConst.UKEY_LOGIN).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.UKEY_LOGIN, ISystemConstant.IS_FALSE);
|
||||
}
|
||||
// 开启扫码登录
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.SCAN_CODE_LOGIN))) {
|
||||
mv.addObject(IUserCenterConst.SCAN_CODE_LOGIN, config.get(IUserCenterConst.SCAN_CODE_LOGIN).toString());
|
||||
// 钉钉扫码登陆APPID
|
||||
// if (!StringUtils.isBlank(dingDingScanCodeLoginProperties.getAppId())) {
|
||||
// mv.addObject(IUserCenterConst.DING_DING_SCAN_CODE_APP_ID, dingDingScanCodeLoginProperties.getAppId());
|
||||
// } else {
|
||||
// mv.addObject(IUserCenterConst.DING_DING_SCAN_CODE_APP_ID, "");
|
||||
// }
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.SCAN_CODE_LOGIN, ISystemConstant.IS_FALSE);
|
||||
}
|
||||
pageParams.put(ISystemConstant.VERIFICATION_CODE, config.get(ISystemConstant.VERIFICATION_CODE).toString());
|
||||
// 登录框位置
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_BOX_POSITION))) {
|
||||
mv.addObject(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
|
||||
} else {
|
||||
mv.addObject(IUserCenterConst.LOGIN_BOX_POSITION, "default");
|
||||
}
|
||||
if (!Objects.isNull(config.get(IUserCenterConst.LOGIN_PAGE))) {
|
||||
mv.setViewName(config.get(IUserCenterConst.LOGIN_PAGE).toString());
|
||||
} else {
|
||||
mv.setViewName("login");
|
||||
}
|
||||
pageParams.put(IUserCenterConst.LOGIN_BOX_POSITION, config.get(IUserCenterConst.LOGIN_BOX_POSITION).toString());
|
||||
mv.addObject("pageParams", pageParams);
|
||||
mv.addObject("customLoginForm", "<div><form action=\"123\"></form></div>");
|
||||
mv.setViewName("login");
|
||||
return mv;
|
||||
}
|
||||
|
||||
|
||||
@ -12,13 +12,13 @@
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/admin.css?v=3" media="all">
|
||||
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
|
||||
<style th:if="${loginBoxPosition eq 'center'}">
|
||||
<style th:if="${pageParams.loginBoxPosition eq 'center'}">
|
||||
.layadmin-user-login-main {
|
||||
left: 50%;
|
||||
margin-left: -188px;
|
||||
}
|
||||
</style>
|
||||
<style th:if="${loginBoxPosition eq 'left'}">
|
||||
<style th:if="${pageParams.loginBoxPosition eq 'left'}">
|
||||
@media screen and (max-width: 1920px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 68%;
|
||||
@ -32,303 +32,186 @@
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login">
|
||||
<div id="layadminUserLoginMain" class="layadmin-user-login-main" style="">
|
||||
<div class="layadmin-user-login-box layadmin-user-login-header">
|
||||
<img class="system-logo" th:src="'route/file/download/true/'+ ${systemLogo}" th:if="${systemLogo ne ''}">
|
||||
<div th:class="${(systemLogo ne '') ? 'system-logo-title': ''}">
|
||||
<h2 th:text="${systemTitle}" th:style="'font-size:'+ ${systemTitleSize} +'px'"></h2>
|
||||
<p th:text="${systemSubTitle}" th:style="'font-size:'+ ${systemSubTitleSize} +'px'"></p>
|
||||
<div id="app">
|
||||
<div v-cloak>
|
||||
<div id="loginBox" class="layadmin-user-login-main">
|
||||
<div class="layadmin-user-login-box layadmin-user-login-header">
|
||||
<img class="system-logo" :src="'route/file/download/true/'+ pageParams.systemLogo" v-if="pageParams.systemLogo">
|
||||
<div :class="{'system-logo-title': pageParams.systemLogo}">
|
||||
<h2 :style="{'font-size': (pageParams.systemTitleSize ? pageParams.systemTitleSize : 26) +'px'}">{{pageParams.systemTitle}}</h2>
|
||||
<p :style="{'font-size': (pageParams.systemSubTitleSize ? pageParams.systemSubTitleSize : 16) +'px'}">{{pageParams.systemSubTitle}}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="userLoginBox" class="layadmin-user-login-box layadmin-user-login-body layui-form" lay-filter="LAY-form-signin">
|
||||
<form id="LAY-form-signin" action="userlogin" method="post">
|
||||
<input type="hidden" name="loginType" id="LAY-user-login-logintype" value="1">
|
||||
<input type="hidden" name="uKey" id="LAY-user-login-ukey" value="">
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-username"></label>
|
||||
<input type="text" name="username" id="LAY-user-login-username" lay-verify="required" placeholder="用户名" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" id="passwordBox">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
|
||||
<input type="password" name="password" id="LAY-user-login-password" lay-verify="required" placeholder="密码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" id="verificationCodeBox" th:if="${verificationCode eq 'true'}">
|
||||
<!-- 验证码 -->
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
|
||||
<input type="text" name="verificationCode" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px;">
|
||||
<img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
|
||||
<div id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
|
||||
<form id="loginForm" action="userlogin" method="post" @submit.prevent="submitForm">
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
|
||||
<input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" id="passwordBox">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="password" v-model="formData.password" id="password" name="password" lay-verify="password" placeholder="密码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item" id="verificationCodeBox" v-if="pageParams.verificationCode == 'true'">
|
||||
<!-- 验证码 -->
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
|
||||
<input type="text" v-model="formData.verificationCode" id="verificationCode" name="verificationCode" lay-verify="verificationCode" placeholder="图形验证码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-xs5">
|
||||
<div style="margin-left: 10px;">
|
||||
<img src="oauth/verification-code/png" class="layadmin-user-login-codeimg" id="LAY-user-get-vercode">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item u-key-box" id="uKeyBox" th:if="${uKeyLogin eq 'true'}">
|
||||
<!-- ukey登录 -->
|
||||
<span id="checkUKey">【检测UKey中...】</span>
|
||||
<span class="get-u-key" id="getUKey">【UKey已插入】</span>
|
||||
</div>
|
||||
<div class="layui-form-item remember-password" id="rememberPassword">
|
||||
<input type="checkbox" name="remember" lay-filter="LAY-user-login-remember" lay-skin="primary" title="记住密码">
|
||||
<!--<a href="forget.html" class="layadmin-user-jump-change layadmin-link" style="margin-top: 7px;">忘记密码？</a>-->
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button class="layui-btn layui-btn-fluid" id="LAY-user-login-submit" lay-submit lay-filter="LAY-user-login-submit">登 入</button>
|
||||
</div>
|
||||
<div id="otherLoginBox" class="other-login-box" th:if="${scanCodeLogin ne 'false'}">
|
||||
<!-- 钉钉扫码 -->
|
||||
<div th:if="${scanCodeLogin eq 'dingDingScanCode'}">
|
||||
<img src="assets/images/login/dingding.png" style="width: 16px;">
|
||||
<a href="javascript:void(0);" id="dingDingScanCodeBtn">钉钉扫码</a>
|
||||
<div class="layui-form-item remember-password" id="rememberPassword">
|
||||
<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div id="dingDingScanCodeBox" class="ding-ding-scan-code-box" th:if="${scanCodeLogin eq 'dingDingScanCode'}">
|
||||
<!-- 钉钉扫码登录 -->
|
||||
<div class="code-box">
|
||||
<div id="dingDingScanCode"></div>
|
||||
<a id="cancelDingDingScanCodeBtn" class="cancel-ding-ding-scan-code-btn" href="javascript:void(0);">取消扫码</a>
|
||||
<div class="layui-form-item">
|
||||
<button type="submit" class="layui-btn layui-btn-fluid" lay-submit>登 录</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" id="errorMessage" th:value="${errorMessage}"/>
|
||||
</div>
|
||||
<div class="layui-trans layadmin-user-login-footer footer-text">
|
||||
<p th:if="${copyRightYear ne ''}"><span th:text="${'© '+ copyRightYear +' '}"></span><a href="javascript:void(0);" th:if="${copyleft ne ''}" th:text="${copyleft}"></a></p>
|
||||
<p th:if="${officialUrl ne ''}">
|
||||
<span><a th:href="@{${officialUrl}}" target="_blank">前往官网</a></span>
|
||||
</p>
|
||||
<div class="layui-trans layadmin-user-login-footer footer-text">
|
||||
<p v-if="pageParams.copyRightYear"><span>{{'© '+ pageParams.copyRightYear +' '}}</span><a href="javascript:void(0);" v-if="pageParams.copyleft">{{pageParams.copyleft}}</a></p>
|
||||
<p v-if="pageParams.officialUrl">
|
||||
<span><a :href="pageParams.officialUrl" target="_blank">前往官网</a></span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: none">
|
||||
<object type="application/x-dongle" id="uKey"></object>
|
||||
</div>
|
||||
<input type="hidden" id="serverUrl" th:value="${serverUrl +'/userlogin/dingding'}">
|
||||
<input type="hidden" id="dingDingScanCodeAppId" th:value="${dingDingScanCodeAppId}" th:if="${scanCodeLogin eq 'dingDingScanCode'}">
|
||||
<input type="hidden" id="loginBackgroundImages" th:value="${loginBackgroundImages}">
|
||||
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js" th:if="${scanCodeLogin eq 'dingDingScanCode'}"></script>
|
||||
<script src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script>
|
||||
<script type="text/javascript" src="assets/js/vue.min.js"></script>
|
||||
<script type="text/javascript" src="assets/layuiadmin/layui/layui.js"></script>
|
||||
<script type="text/javascript" th:inline="javascript">
|
||||
layui.config({
|
||||
base: 'assets/layuiadmin/'
|
||||
}).extend({
|
||||
index: 'lib/index'
|
||||
}).use(['index', 'user', 'cookie', 'md5', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
|
||||
}).use(['index', 'form', 'cookie', 'md5', 'base64', 'supersized', 'common', 'ftukey', 'restajax'], function () {
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var cookie = layui.cookie;
|
||||
var md5 = layui.md5;
|
||||
var base64 = layui.base64;
|
||||
var common = layui.common;
|
||||
var ftukey = layui.ftukey;
|
||||
var restAjax = layui.restajax;
|
||||
var isCheckLoginType = false;
|
||||
|
||||
var pageData = {
|
||||
remember: false
|
||||
};
|
||||
// 显示错误信息
|
||||
var errorMessage = $('#errorMessage').val();
|
||||
if (errorMessage != '') {
|
||||
layer.msg(errorMessage);
|
||||
}
|
||||
// 初始化背景
|
||||
function initBackground() {
|
||||
var loginBackgroundImages = $('#loginBackgroundImages').val();
|
||||
var photos = [];
|
||||
if(loginBackgroundImages != '') {
|
||||
var loginBackgroundImageArray = loginBackgroundImages.split(',');
|
||||
for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
|
||||
photos.push({
|
||||
image: 'route/file/download/true/'+ item
|
||||
})
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
pageParams: [[${pageParams}]],
|
||||
formData: {
|
||||
verificationCode: '',
|
||||
username: '',
|
||||
password: '',
|
||||
remember: false
|
||||
}
|
||||
} else {
|
||||
for(var i = 1; i <= 9; i++) {
|
||||
photos.push({
|
||||
image: 'assets/images/backgrounds/'+ i +'.jpg'
|
||||
})
|
||||
}
|
||||
}
|
||||
$.supersized({
|
||||
slide_interval : 4000, // Length between transitions
|
||||
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
|
||||
transition_speed : 1000, // Speed of transition
|
||||
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
|
||||
// Size & Position
|
||||
min_width : 0, // Min width allowed (in pixels)
|
||||
min_height : 0, // Min height allowed (in pixels)
|
||||
vertical_center : 1, // Vertically center background
|
||||
horizontal_center : 1, // Horizontally center background
|
||||
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
|
||||
fit_portrait : 1, // Portrait images will not exceed browser height
|
||||
fit_landscape : 0, // Landscape images will not exceed browser width
|
||||
// Components
|
||||
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
|
||||
slides : photos
|
||||
});
|
||||
}
|
||||
initBackground();
|
||||
|
||||
// 记住密码
|
||||
form.on('checkbox(LAY-user-login-remember)', function(data){
|
||||
pageData.remember = data.elem.checked;
|
||||
});
|
||||
|
||||
//提交
|
||||
form.on('submit(LAY-user-login-submit)', function (obj) {
|
||||
if(pageData.remember) {
|
||||
cookie.setCookie('rememberMe', base64.encode(obj.field.username +'_$cm$_'+ obj.field.password), 30);
|
||||
} else {
|
||||
cookie.setCookie('rememberMe', '', 0);
|
||||
}
|
||||
$('#LAY-user-login-password').val(md5(md5(md5(obj.field.password))));
|
||||
layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
|
||||
});
|
||||
|
||||
$('#dingDingScanCodeBtn').on('click', function() {
|
||||
$('#userLoginBox').hide();
|
||||
var url = encodeURIComponent($('#serverUrl').val());
|
||||
var appId = $('#dingDingScanCodeAppId').val();
|
||||
var obj = DDLogin({
|
||||
id: 'dingDingScanCode',
|
||||
goto: encodeURIComponent('https://oapi.dingtalk.com/connect/qrconnect?appid='+ appId +'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ url),
|
||||
style: 'border:none; background-color:#FFFFFF;',
|
||||
width : '100%',
|
||||
height: '320'
|
||||
});
|
||||
$('#dingDingScanCodeBox').show();
|
||||
|
||||
var handleMessage = function (event) {
|
||||
var origin = event.origin;
|
||||
if( origin == "https://login.dingtalk.com" ) {
|
||||
var loginTmpCode = event.data;
|
||||
var snsAuthorizeHref = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid='+ appId +'&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ url +'&loginTmpCode='+ loginTmpCode;
|
||||
window.location.href = snsAuthorizeHref;
|
||||
}
|
||||
};
|
||||
// 添加监听事件
|
||||
if (typeof window.addEventListener != 'undefined') {
|
||||
window.addEventListener('message', handleMessage, false);
|
||||
} else if (typeof window.attachEvent != 'undefined') {
|
||||
window.attachEvent('onmessage', handleMessage);
|
||||
}
|
||||
});
|
||||
|
||||
$('#cancelDingDingScanCodeBtn').on('click', function() {
|
||||
$('#dingDingScanCodeBox').hide();
|
||||
$('#userLoginBox').show();
|
||||
});
|
||||
|
||||
// 记住我
|
||||
var rememberMe = cookie.getCookie('rememberMe');
|
||||
if(null != rememberMe && '' != rememberMe) {
|
||||
var rememberMes = base64.decode(rememberMe).split('_$cm$_');
|
||||
$('#LAY-user-login-username').val(rememberMes[0]);
|
||||
$('#LAY-user-login-password').val(rememberMes[1])
|
||||
pageData.remember = true;
|
||||
form.val('LAY-form-signin', {
|
||||
remember: true
|
||||
});
|
||||
}
|
||||
// 刷新表单
|
||||
form.render();
|
||||
|
||||
// 初始化表单
|
||||
function initLoginForm(uKeyData) {
|
||||
if(uKeyData.UserLoginName.length == 0) {
|
||||
return;
|
||||
}
|
||||
$('#LAY-user-login-username').val(uKeyData.UserLoginName);
|
||||
var loadLayerIndex;
|
||||
restAjax.get(restAjax.path('api/user/getsignintype/{userUsername}', [uKeyData.UserLoginName]), {}, null, function(code, data) {
|
||||
if(data.data != 1 && data.data != 2 && data.data != 3) {
|
||||
layer.msg('用户登录类型错误，请使用用户名和密码登录');
|
||||
return;
|
||||
}
|
||||
$('#LAY-user-login-logintype').val(data.data);
|
||||
if(data.data == 1) {
|
||||
return;
|
||||
}
|
||||
// 隐藏验证码
|
||||
if($('#verificationCodeBox')) {
|
||||
$('#verificationCodeBox').hide();
|
||||
}
|
||||
$('#LAY-user-login-vercode').removeAttr('lay-verify');
|
||||
if(data.data === 2) {
|
||||
return;
|
||||
}
|
||||
$('#LAY-user-login-password').removeAttr('lay-verify');
|
||||
$('#passwordBox').hide();
|
||||
$('#rememberPassword').hide();
|
||||
$('#uKeyBox').css('marginBottom', '20px');
|
||||
if(data.data === 3) {
|
||||
return;
|
||||
}
|
||||
}, function(code, data) {
|
||||
layer.msg(data.msg);
|
||||
}, function() {
|
||||
loadLayerIndex = layer.msg('查询登录类型，请稍后...', {icon: 16, time: 0, shade: 0.3});
|
||||
}, function() {
|
||||
layer.close(loadLayerIndex);
|
||||
});
|
||||
}
|
||||
// 检查UKey
|
||||
function checkUKey() {
|
||||
var ukeyData = ftukey.ReadUKeyData();
|
||||
if(ukeyData.success && ukeyData.data.length != 0) {
|
||||
if(!isCheckLoginType) {
|
||||
isCheckLoginType = true;
|
||||
$('#LAY-form-signin').attr('action', 'userlogin/ukey');
|
||||
$('#checkUKey').hide();
|
||||
$('#getUKey').show();
|
||||
setTimeout(function() {
|
||||
var data = ftukey.ParseJson(ukeyData.data);
|
||||
$('#LAY-user-login-ukey').val(ukeyData.hid);
|
||||
initLoginForm(data);
|
||||
}, 500);
|
||||
}
|
||||
} else {
|
||||
if(isCheckLoginType) {
|
||||
isCheckLoginType = false;
|
||||
$('#LAY-form-signin').attr('action', 'userlogin');
|
||||
$('#LAY-user-login-vercode').attr('lay-verify', 'required');
|
||||
$('#LAY-user-login-password').attr('lay-verify', 'required');
|
||||
if($('#verificationCodeBox')) {
|
||||
$('#verificationCodeBox').show();
|
||||
},
|
||||
methods: {
|
||||
showErrorMessage: function() {
|
||||
var self = this;
|
||||
if(self.pageParams.errorMessage) {
|
||||
layer.msg(self.pageParams.errorMessage);
|
||||
}
|
||||
$('#passwordBox').show();
|
||||
$('#rememberPassword').show();
|
||||
$('#uKeyBox').css('marginBottom', '0px');
|
||||
$('#getUKey').hide();
|
||||
$('#checkUKey').show();
|
||||
}
|
||||
},
|
||||
initBackground: function() {
|
||||
var self = this;
|
||||
var loginBackgroundImages = self.pageParams.loginBackgroundImages;
|
||||
var photos = [];
|
||||
if(loginBackgroundImages) {
|
||||
var loginBackgroundImageArray = loginBackgroundImages.split(',');
|
||||
for(var i = 0, item = loginBackgroundImageArray[i]; item = loginBackgroundImageArray[i++];) {
|
||||
photos.push({
|
||||
image: 'route/file/download/true/'+ item
|
||||
})
|
||||
}
|
||||
} else {
|
||||
for(var i = 1; i <= 9; i++) {
|
||||
photos.push({
|
||||
image: 'assets/images/backgrounds/'+ i +'.jpg'
|
||||
})
|
||||
}
|
||||
}
|
||||
$.supersized({
|
||||
slide_interval : 4000, // Length between transitions
|
||||
transition : 1, // 0-None, 1-Fade, 2-Slide Top, 3-Slide Right, 4-Slide Bottom, 5-Slide Left, 6-Carousel Right, 7-Carousel Left
|
||||
transition_speed : 1000, // Speed of transition
|
||||
performance : 1, // 0-Normal, 1-Hybrid speed/quality, 2-Optimizes image quality, 3-Optimizes transition speed // (Only works for Firefox/IE, not Webkit)
|
||||
// Size & Position
|
||||
min_width : 0, // Min width allowed (in pixels)
|
||||
min_height : 0, // Min height allowed (in pixels)
|
||||
vertical_center : 1, // Vertically center background
|
||||
horizontal_center : 1, // Horizontally center background
|
||||
fit_always : 0, // Image will never exceed browser width or height (Ignores min. dimensions)
|
||||
fit_portrait : 1, // Portrait images will not exceed browser height
|
||||
fit_landscape : 0, // Landscape images will not exceed browser width
|
||||
// Components
|
||||
slide_links : 'blank', // Individual links for each slide (Options: false, 'num', 'name', 'blank')
|
||||
slides : photos
|
||||
});
|
||||
},
|
||||
// 记住我
|
||||
rememberMe: function() {
|
||||
var self = this;
|
||||
var rememberMe = cookie.getCookie('rememberMe');
|
||||
if(rememberMe) {
|
||||
var rememberMes = base64.decode(rememberMe).split('_$WG$_');
|
||||
self.formData.username = rememberMes[0];
|
||||
self.formData.password = rememberMes[1];
|
||||
self.formData.remember = true;
|
||||
}
|
||||
self.$nextTick(function() {
|
||||
form.render();
|
||||
});
|
||||
},
|
||||
// 提交表单
|
||||
submitForm: function() {
|
||||
var self = this;
|
||||
if(self.formData.remember) {
|
||||
cookie.setCookie('rememberMe', base64.encode(self.formData.username +'_$WG$_'+ self.formData.password), 30);
|
||||
} else {
|
||||
cookie.setCookie('rememberMe', '', 0);
|
||||
}
|
||||
layer.msg('正在登录，请稍后...', {icon: 16, shade: 0.1, time: 0});
|
||||
self.formData.password = md5(md5(md5(self.formData.password)));
|
||||
self.$nextTick(function() {
|
||||
$('#loginForm').submit();
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
mounted: function() {
|
||||
var self = this;
|
||||
self.showErrorMessage();
|
||||
self.initBackground();
|
||||
self.rememberMe();
|
||||
// 复选框勾选事件
|
||||
form.on('checkbox(rememberFilter)', function(data) {
|
||||
self.formData.remember = data.elem.checked;
|
||||
console.log(self.formData.remember);
|
||||
});
|
||||
// 保单验证
|
||||
form.verify({
|
||||
username: function(value, item) {
|
||||
if(!value){
|
||||
return '用户名不能为空';
|
||||
}
|
||||
},
|
||||
password: function(value, item) {
|
||||
if(!value) {
|
||||
return '密码不能为空';
|
||||
}
|
||||
},
|
||||
verificationCode: function(value, item) {
|
||||
if(!value) {
|
||||
return '验证码不能为空';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
setTimeout(function() {
|
||||
checkUKey();
|
||||
}, 1000);
|
||||
}
|
||||
// 初始化UKey监听器
|
||||
function initUKeyListener() {
|
||||
if (common.getBrowserType() != 'IE') {
|
||||
return;
|
||||
}
|
||||
if (common.getIEBrowserVersion() != '11') {
|
||||
return;
|
||||
}
|
||||
$('#uKeyBox').show();
|
||||
setTimeout(function() {
|
||||
checkUKey();
|
||||
}, 1000);
|
||||
}
|
||||
if($('#uKeyBox')) {
|
||||
initUKeyListener();
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user