增加腾讯短信验证码接口
This commit is contained in:
TS-QD1
parent
db536b0cc4
commit
aab774220b
5
pom.xml
5
pom.xml
@ -191,6 +191,11 @@
|
||||
<artifactId>commons-compress</artifactId>
|
||||
<version>1.19</version>
|
||||
</dependency>
|
||||
<dependency>
|
||||
<groupId>com.tencentcloudapi</groupId>
|
||||
<artifactId>tencentcloud-sdk-java</artifactId>
|
||||
<version>3.1.501</version>
|
||||
</dependency>
|
||||
</dependencies>
|
||||
|
||||
<build>
|
||||
|
||||
@ -0,0 +1,39 @@
|
||||
package cn.com.tenlion.operator.controller.api.verify.code;
|
||||
|
||||
import cn.com.tenlion.operator.service.verify.code.VerifyCodeService;
|
||||
import ink.wgink.common.base.DefaultBaseController;
|
||||
import ink.wgink.exceptions.ParamsException;
|
||||
import ink.wgink.interfaces.consts.ISystemConstant;
|
||||
import ink.wgink.pojo.result.ErrorResult;
|
||||
import ink.wgink.pojo.result.SuccessResult;
|
||||
import ink.wgink.util.RegexUtil;
|
||||
import io.swagger.annotations.*;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.web.bind.annotation.GetMapping;
|
||||
import org.springframework.web.bind.annotation.PathVariable;
|
||||
import org.springframework.web.bind.annotation.RequestMapping;
|
||||
import org.springframework.web.bind.annotation.RestController;
|
||||
|
||||
@Api(tags = ISystemConstant.API_TAGS_SYSTEM_PREFIX + "验证码接口")
|
||||
@RestController
|
||||
@RequestMapping(ISystemConstant.API_PREFIX + "/verify/code")
|
||||
public class VerifyCodeController extends DefaultBaseController {
|
||||
|
||||
@Autowired
|
||||
private VerifyCodeService verifyCodeService;
|
||||
|
||||
@ApiOperation(value = "获取短信验证码", notes = "获取短信验证码接口")
|
||||
@ApiImplicitParams({
|
||||
@ApiImplicitParam(name = "phone", value = "手机", paramType = "path"),
|
||||
})
|
||||
@ApiResponses({@ApiResponse(code = 400, message = "请求失败", response = ErrorResult.class)})
|
||||
@GetMapping("send/{phone}")
|
||||
public SuccessResult send(@PathVariable("phone") String phone) {
|
||||
if (!RegexUtil.isPhone(phone)) {
|
||||
throw new ParamsException("手机号格式错误");
|
||||
}
|
||||
verifyCodeService.send(phone);
|
||||
return new SuccessResult();
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,5 +1,6 @@
|
||||
package cn.com.tenlion.operator.login.phone.auth;
|
||||
|
||||
import ink.wgink.exceptions.ParamsException;
|
||||
import ink.wgink.login.base.exceptions.UserAuthenticationException;
|
||||
import ink.wgink.module.sms.service.sms.ISmsService;
|
||||
import ink.wgink.service.user.enums.UserStateEnum;
|
||||
@ -31,19 +32,17 @@ public class LoginPhoneAuthFilter extends AbstractAuthenticationProcessingFilter
|
||||
@Override
|
||||
public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException, IOException, ServletException {
|
||||
String phone = request.getParameter("username").trim();
|
||||
String code = request.getParameter("code").trim();
|
||||
String smsCode = request.getParameter("smsCode").trim();
|
||||
if (StringUtils.isBlank(phone)) {
|
||||
throw new UserAuthenticationException("手机号不能为空");
|
||||
}
|
||||
if (StringUtils.isBlank(code)) {
|
||||
if (StringUtils.isBlank(smsCode)) {
|
||||
throw new UserAuthenticationException("验证码不能为空");
|
||||
}
|
||||
String verifyCode = smsService.getVerifyCode(phone);
|
||||
if (StringUtils.isBlank(verifyCode)) {
|
||||
throw new UserAuthenticationException("验证码错误");
|
||||
}
|
||||
if (!StringUtils.equals(code, verifyCode)) {
|
||||
throw new UserAuthenticationException("验证码不匹配");
|
||||
try {
|
||||
smsService.checkVerifyCode(phone, smsCode);
|
||||
} catch (ParamsException e) {
|
||||
throw new UserAuthenticationException(e.getMessage());
|
||||
}
|
||||
/**
|
||||
* 查到用户
|
||||
|
||||
@ -0,0 +1,57 @@
|
||||
package cn.com.tenlion.operator.service.verify.code;
|
||||
|
||||
import ink.wgink.common.base.DefaultBaseService;
|
||||
import ink.wgink.exceptions.ParamsException;
|
||||
import ink.wgink.exceptions.base.SystemException;
|
||||
import ink.wgink.module.sms.factory.sms.ISmsSend;
|
||||
import ink.wgink.module.sms.factory.sms.SmsSendFactory;
|
||||
import ink.wgink.module.sms.factory.sms.impl.TencentSmsSendImpl;
|
||||
import ink.wgink.module.sms.manager.VerifyCodeManager;
|
||||
import ink.wgink.module.sms.pojo.vos.sms.SmsVO;
|
||||
import ink.wgink.module.sms.service.sms.ISmsService;
|
||||
import ink.wgink.properties.sms.SmsProperties;
|
||||
import org.springframework.beans.factory.annotation.Autowired;
|
||||
import org.springframework.stereotype.Service;
|
||||
|
||||
@Service
|
||||
public class VerifyCodeService extends DefaultBaseService {
|
||||
|
||||
@Autowired
|
||||
private SmsProperties smsProperties;
|
||||
@Autowired
|
||||
private ISmsService smsService;
|
||||
|
||||
|
||||
public void send(String phone) {
|
||||
VerifyCodeManager verifyCodeManager = VerifyCodeManager.getInstance();
|
||||
long timeRemaining = verifyCodeManager.effectiveVerificationCodeTimeRemaining(phone);
|
||||
if (timeRemaining > 0) {
|
||||
throw new ParamsException(String.format("验证码已发送，若没有收到，请在%d秒后重试", (timeRemaining / 1000)));
|
||||
}
|
||||
|
||||
String currentTimeStr = String.valueOf(System.currentTimeMillis());
|
||||
String code = currentTimeStr.substring(currentTimeStr.length() - 6);
|
||||
LOG.info(">>>>> 向手机号：{}，发送验证码：{}", phone, code);
|
||||
|
||||
|
||||
SmsVO smsVO = new SmsVO();
|
||||
smsVO.setPhone(phone);
|
||||
smsVO.setContent(code);
|
||||
try {
|
||||
if (smsProperties.getActive()) {
|
||||
ISmsSend smsSend = new TencentSmsSendImpl(smsProperties.getTencentSms());
|
||||
smsSend.code(phone, code);
|
||||
}
|
||||
verifyCodeManager.setVerificationCode(phone, code);
|
||||
smsVO.setSendStatus(1);
|
||||
} catch (Exception e) {
|
||||
LOG.error(e.getMessage());
|
||||
String errorMessage = e.getMessage();
|
||||
smsVO.setSendStatus(0);
|
||||
smsVO.setErrorMessage(errorMessage);
|
||||
throw new SystemException("短信发送失败");
|
||||
} finally {
|
||||
smsService.save(smsVO);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -139,14 +139,20 @@ api-path:
|
||||
#
|
||||
# 短信验证码服务
|
||||
sms:
|
||||
active: true
|
||||
active: false
|
||||
type: default
|
||||
default-sms:
|
||||
account: xd001382
|
||||
password: xd001382136
|
||||
sign: 【AI秒著引擎】
|
||||
sign: 【AI秒著网】
|
||||
template:
|
||||
verification-code: '{sign} 您的验证码为 {content}, 有效时间为120秒，若非本人操作，请忽略。'
|
||||
tencent-sms:
|
||||
secret-id: AKID1wfBXhr287weLsFTm05zlYHsNn3871sY
|
||||
secret-key: d4PaebVKzWs8IKG7uY2SmyxpeMtHYihX
|
||||
sdk-app-id: 1400945659
|
||||
sign-name: AI秒著网
|
||||
verification-code-template-id: 2295389
|
||||
|
||||
pay:
|
||||
wx-pay:
|
||||
|
||||
798
src/main/resources/templates/systemuser/login-old.html
Normal file
798
src/main/resources/templates/systemuser/login-old.html
Normal file
@ -0,0 +1,798 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<base th:href="${#request.getContextPath() + '/'}">
|
||||
<title th:text="${systemTitle}"></title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
|
||||
<link rel="icon" type="image/svg" href="assets/favicon.svg"/>
|
||||
<link rel="stylesheet" href="assets/fonts/font-awesome/css/font-awesome.css"/>
|
||||
<link rel="stylesheet" href="assets/layuiadmin/layui/css/layui.css?v=3" media="all">
|
||||
<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>[v-cloak] {display: none;}</style>
|
||||
<style th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formCss}"></style>
|
||||
<style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'left'}">
|
||||
@media screen and (max-width: 1920px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 68%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 62%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
|
||||
<style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'center'}">
|
||||
.layadmin-user-login-main {
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
}
|
||||
</style>
|
||||
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
|
||||
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
position: relative;
|
||||
/*display: flex;*/
|
||||
/*flex-direction: column;*/
|
||||
/*width: 100%;*/
|
||||
/*height: 100vh;*/
|
||||
}
|
||||
|
||||
.layadmin-user-login-main {
|
||||
margin-right: 0;
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: relative;
|
||||
/*position: absolute;*/
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
.sign {
|
||||
display: flex;
|
||||
/* position: absolute; */
|
||||
width: 500px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.sign h2 {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
/* padding: auto 20px auto 50px; */
|
||||
font-size: 36px;
|
||||
margin: auto 20px auto 50px;
|
||||
}
|
||||
|
||||
.sign p {
|
||||
width: 180px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
/* height: 20px; */
|
||||
padding: 0 25px;
|
||||
border-left: 2px solid rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.go-page {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
/* position: absolute; */
|
||||
width: 260px;
|
||||
height: 80px;
|
||||
/* border: 2px solid red; */
|
||||
font-size: 16px;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go-page #register {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: auto 0;
|
||||
margin-right: 20px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
/* border: none; */
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
color: #42210B;
|
||||
}
|
||||
|
||||
.go-page #back-homepage {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: auto 0;
|
||||
margin-right: 40px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
/* background-color: rgba(255, 255, 255, .3); */
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#register:hover {
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#back-homepage:hover {
|
||||
background-color: #332817;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#loginBox {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
/*position: relative;*/
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0,160px);
|
||||
/*margin-top: -250px;*/
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
/*margin-top: 150px;*/
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 12px 12px rgba(0,0,0,.5),0 -12px -12px rgba(0,0,0,.5);
|
||||
}
|
||||
|
||||
#loginBox .btnlist {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/*display: none;*/
|
||||
width: 330px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 20px auto;
|
||||
/* border: 1px solid red; */
|
||||
}
|
||||
#loginBox #change {
|
||||
display: none;
|
||||
width: 330px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 20px auto;
|
||||
}
|
||||
|
||||
#loginBox #change h3 {
|
||||
width: 80px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
/* margin-right: 30px; */
|
||||
border: none;
|
||||
/*border-bottom: 5px solid #fda633;*/
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loginBox #change span {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
margin-left: 15px;
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
#loginBox .btnlist button {
|
||||
font-size: 18px;
|
||||
margin-right: 30px;
|
||||
border: none;
|
||||
/*border-bottom: 5px solid #fda633;*/
|
||||
margin-bottom: 5px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loginBox .btnlist div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#loginBox .btnlist div:first-child span {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
margin-left: 15px;
|
||||
background-color: #fda633;
|
||||
|
||||
}
|
||||
#loginBox .btnlist div:last-child span {
|
||||
display: none;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
margin-left: 20px;
|
||||
background-color: #fda633;
|
||||
|
||||
}
|
||||
.forget-username-password {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
line-height: 18px;
|
||||
color: #6d6d6d;
|
||||
}
|
||||
#rememberPassword a:hover {
|
||||
color: #0080ff;
|
||||
}
|
||||
.login-btn {
|
||||
margin: 80px auto 20px auto;
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
.go {
|
||||
/*display: flex;*/
|
||||
/*justify-content: space-between;*/
|
||||
/*align-content: center;*/
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 15px auto;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.go p {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.go p a {
|
||||
color: #1d8eff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.go p a:hover {
|
||||
color: #0080ff;
|
||||
}
|
||||
|
||||
.change-password #goLogin {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.change-password #goLogin:hover {
|
||||
font-weight: 500;
|
||||
color: #0080ff;
|
||||
}
|
||||
.bixuan {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
/* align-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: center; */
|
||||
position: relative;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
#loginBox .denglu .yzmtx1 {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border: 1px solid #D2D2D2!important;
|
||||
}
|
||||
#loginBox .denglu .yzmtx1 input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 322px;
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
background-color: #FFF;
|
||||
color: #666666;
|
||||
border: none;
|
||||
}
|
||||
#loginBox .denglu .yzmbox1 {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #D2D2D2!important;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
background-color: #FAFAFA;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sign a {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
margin-left: 50px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.sign a img{
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
}
|
||||
#loginBox .change-password {
|
||||
display: none;
|
||||
}
|
||||
#loginBox .change-password ul li {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 38px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#loginBox .change-password ul li input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 322px;
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
background-color: #FFF;
|
||||
color: #666666;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#loginBox .change-password ul li {
|
||||
position: relative;
|
||||
border: 1px solid #D2D2D2!important;
|
||||
}
|
||||
#loginBox .change-password .yzmbox {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #D2D2D2!important;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
background-color: #FAFAFA;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
}
|
||||
#loginBox .denglu .yzmbox1:hover,
|
||||
#loginBox .change-password .yzmbox:hover {
|
||||
cursor: pointer;
|
||||
/*color: #333;*/
|
||||
font-weight: 550;
|
||||
-webkit-box-shadow: 0 0 10px #0CC;
|
||||
-moz-box-shadow: 0 0 10px #0CC;
|
||||
box-shadow: 0 0 10px #0CC;
|
||||
}
|
||||
#confirmNewPassword {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin: 50px auto 20px auto;
|
||||
font-size: 16px;
|
||||
border-radius: 2px;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
}
|
||||
/*#loginBox #loginFormBox #loginForm .layui-form-item:focus {*/
|
||||
/* border: 1px solid #fa911e;*/
|
||||
/*}*/
|
||||
/*#password:focus {*/
|
||||
/* border: 1px solid #fa911e;*/
|
||||
/*}*/
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
|
||||
<div v-cloak th:if="${customLoginForm eq null}">
|
||||
<div class="nav">
|
||||
<div class="sign">
|
||||
<a>
|
||||
<img src="assets/images/headicon1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="go-page">
|
||||
<a id="register" th:href="${ HomeServerUrl + 'Register.html'}">注册</a>
|
||||
<a id="back-homepage" th:href="${ HomeServerUrl }">返回首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div id="loginBox" class="layadmin-user-login-main">
|
||||
<div class="btnlist">
|
||||
<div>
|
||||
<button id="zhanghaomima" @click="loginTypeChange('zhanghaomima')">账号密码</button>
|
||||
<span class="span1"></span>
|
||||
</div>
|
||||
<div>
|
||||
<button id="yzmlongin" @click="loginTypeChange('yanzhengma')">验证码登录</button>
|
||||
<span class="span2"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="change">
|
||||
<h3 id="changeCode">修改密码</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<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 id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
|
||||
<form id="loginForm" :action="activeAction" method="post" @submit.prevent="submitForm" class="denglu">
|
||||
<input type="hidden" name="referToken" v-model="formData.referToken"/>
|
||||
<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 mima" id="passwordBox" v-if="loginType === 'zhanghaomima'">
|
||||
<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="yzmbox1" @click="getLoginVerificationCode" v-if="loginType === 'yanzhengma'">
|
||||
<span id="yzm11">点击获取验证码</span>
|
||||
</div>
|
||||
<div class="yzmtx1" v-if="loginType === 'yanzhengma'">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="inputyzm11"></label>
|
||||
<input type="text" v-model="formData.code" name="code" placeholder="请输入验证码" lay-verify="code" id="inputyzm11">
|
||||
</div>
|
||||
<div class="layui-form-item" id="verificationCodeBox" v-if="loginType === 'zhanghaomima' && 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" @click="refreshVerificationCode($event)">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item remember-password login-btn-up bixuan" id="rememberPassword">
|
||||
<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
|
||||
<a href="javascript:void(0)" class="forget-username-password" id="goChangePassword">忘记密码?</a>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button type="submit" class="layui-btn layui-btn-fluid login-btn" lay-submit>登 录</button>
|
||||
</div>
|
||||
<div class="go">
|
||||
<p>没有账号？<a th:href="${ HomeServerUrl + 'Register.html'}">立即注册</a></p>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<form class="change-password">
|
||||
<ul>
|
||||
<li class="zhanghao">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
|
||||
<input type="text" placeholder="手机号" id="phone">
|
||||
</li>
|
||||
<li class="yzmbox">
|
||||
<span id="yzm" @click="getLoginVerificationCode2">点击获取验证码</span>
|
||||
</li>
|
||||
<li class="yzmtx">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="text" placeholder="请输入验证码" id="inputyzm">
|
||||
</li>
|
||||
<li class="newPassword1">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="text" placeholder="请输入新密码(8~16位)" id="newPassword">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<a id="confirmNewPassword" href="javascript:void(0)" @click="confirmNewPassword">确定</a>
|
||||
<a id="goLogin" href="javascript:void(0)">去登录</a>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<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', 'form', 'cookie', 'md5', 'dialog', '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 restAjax = layui.restajax;
|
||||
var dialog = layui.dialog;
|
||||
|
||||
var pageParams = [[${pageParams}]];
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
pageParams: pageParams,
|
||||
loginType: 'zhanghaomima',
|
||||
activeAction: pageParams.loginFormAction,
|
||||
formData: {
|
||||
referToken: pageParams.referToken,
|
||||
verificationCode: '',
|
||||
username: pageParams.loginUsername,
|
||||
password: '',
|
||||
remember: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmNewPassword: function() {
|
||||
var password = md5(md5(md5($('#newPassword').val())));
|
||||
var data = {
|
||||
"newPassword": password,
|
||||
"phone": $('#phone').val(),
|
||||
"verificationCode": $('#inputyzm').val()
|
||||
};
|
||||
var loadLayerIndex;
|
||||
restAjax.put(restAjax.path('app/user/forget-phone-password', []), data, null, function(code, data) {
|
||||
layer.msg("密码修改成功");
|
||||
|
||||
let btnList = document.querySelector('.btnlist')
|
||||
let change = document.querySelector('#change')
|
||||
let dengLu = document.querySelector('.denglu')
|
||||
let changePassword = document.querySelector('.change-password')
|
||||
btnList.style.display = 'block'
|
||||
change.style.display = 'none'
|
||||
dengLu.style.display = 'block'
|
||||
changePassword.style.display = 'none'
|
||||
}, function(code, data) {
|
||||
dialog.msg(data.msg);
|
||||
}, function() {
|
||||
loadLayerIndex = dialog.msg('正在提交修改信息...', {icon: 16, time: 0, shade: 0.3});
|
||||
}, function() {
|
||||
dialog.close(loadLayerIndex);
|
||||
});
|
||||
},
|
||||
getLoginVerificationCode2: function() {
|
||||
let phoneVal = $("#phone").val();
|
||||
if (!phoneVal) {
|
||||
layer.msg("手机号不能为空");
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "api/verify/code/send" + phoneVal,
|
||||
success: function (msg) {
|
||||
layer.msg("验证码已发送");
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
if (data.responseJSON.msg) {
|
||||
layer.msg(data.responseJSON.msg);
|
||||
}else{
|
||||
layer.msg("验证码发送失败");
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
getLoginVerificationCode: function() {
|
||||
let phoneVal = $("#username").val();
|
||||
if (!phoneVal) {
|
||||
layer.msg("用户名不能为空");
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "api/verify/code/send/" + phoneVal,
|
||||
success: function (msg) {
|
||||
layer.msg("验证码已发送");
|
||||
},
|
||||
error: function (data) {
|
||||
if (data.responseJSON.msg) {
|
||||
layer.msg(data.responseJSON.msg);
|
||||
}else{
|
||||
layer.msg("验证码发送失败");
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showErrorMessage: function() {
|
||||
var self = this;
|
||||
if(self.pageParams.errorMessage) {
|
||||
layer.msg(self.pageParams.errorMessage);
|
||||
}
|
||||
},
|
||||
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
|
||||
});
|
||||
},
|
||||
// 刷新验证码
|
||||
refreshVerificationCode: function(event) {
|
||||
event.target.src = event.target.src + '?t='+ new Date().getTime();
|
||||
},
|
||||
// 记住我
|
||||
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();
|
||||
})
|
||||
},
|
||||
loginTypeChange: function(type) {
|
||||
if(type === 'zhanghaomima') {
|
||||
this.activeAction = this.pageParams.loginFormAction;
|
||||
}
|
||||
if(type === 'yanzhengma') {
|
||||
this.activeAction = this.pageParams.loginPhoneAction;
|
||||
}
|
||||
this.loginType = type;
|
||||
}
|
||||
},
|
||||
mounted: function() {
|
||||
var self = this;
|
||||
self.showErrorMessage();
|
||||
self.initBackground();
|
||||
self.rememberMe();
|
||||
// 复选框勾选事件
|
||||
form.on('checkbox(rememberFilter)', function(data) {
|
||||
self.formData.remember = data.elem.checked;
|
||||
});
|
||||
// 保单验证
|
||||
form.verify({
|
||||
username: function(value, item) {
|
||||
if(!value){
|
||||
return '用户名不能为空';
|
||||
}
|
||||
},
|
||||
password: function(value, item) {
|
||||
if(!value) {
|
||||
return '密码不能为空';
|
||||
}
|
||||
},
|
||||
code: function(value, item) {
|
||||
if(!value) {
|
||||
return '验证码不能为空';
|
||||
}
|
||||
},
|
||||
verificationCode: function(value, item) {
|
||||
if(!value) {
|
||||
return '验证码不能为空';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// 切换账号密码登录和验证码登录
|
||||
let loginForm = document.querySelector("#loginForm");
|
||||
let mima = document.querySelector(".mima")
|
||||
let yzmbox1 = document.querySelector('.yzmbox1')
|
||||
let yzmtx1 = document.querySelector(".yzmtx1")
|
||||
let bixuan = document.querySelector('.bixuan')
|
||||
let zhanghaomima = document.querySelector('#zhanghaomima')
|
||||
let yzmlongin = document.querySelector('#yzmlongin')
|
||||
let span1 = document.querySelector('.span1')
|
||||
let span2 = document.querySelector('.span2')
|
||||
|
||||
// // 账号密码登录
|
||||
document.querySelector('#zhanghaomima').addEventListener('click', function () {
|
||||
// alert(11)
|
||||
zhanghaomima.style.fontWeight = 700
|
||||
// zhanghaomima.style.borderBottom = '5px solid #fda633'
|
||||
span1.style.display = 'block'
|
||||
span2.style.display = 'none'
|
||||
yzmlongin.style.fontWeight = 400
|
||||
yzmlongin.style.borderBottom = '0'
|
||||
bixuan.style.display = 'block'
|
||||
})
|
||||
// 验证码登录
|
||||
document.querySelector('#yzmlongin').addEventListener('click', function () {
|
||||
yzmlongin.style.fontWeight = 700
|
||||
// yzmlongin.style.borderBottom = '5px solid #fda633'
|
||||
span1.style.display = 'none'
|
||||
span2.style.display = 'block'
|
||||
zhanghaomima.style.fontWeight = 400
|
||||
zhanghaomima.style.borderBottom = '0'
|
||||
bixuan.style.display = 'none'
|
||||
})
|
||||
|
||||
// 点击 忘记密码 去登录 切换div
|
||||
let goChangePassword = document.querySelector('#goChangePassword')
|
||||
let btnList = document.querySelector('.btnlist')
|
||||
let change = document.querySelector('#change')
|
||||
let dengLu = document.querySelector('.denglu')
|
||||
let changePassword = document.querySelector('.change-password')
|
||||
|
||||
// let goLogin = document.querySelector('#goLogin')
|
||||
|
||||
// 忘记密码
|
||||
document.querySelector('#goChangePassword').addEventListener('click', function () {
|
||||
btnList.style.display = 'none'
|
||||
change.style.display = 'block'
|
||||
dengLu.style.display = 'none'
|
||||
changePassword.style.display = 'block'
|
||||
})
|
||||
|
||||
// 去登录
|
||||
document.querySelector('#goLogin').addEventListener('click', function () {
|
||||
btnList.style.display = 'flex'
|
||||
change.style.display = 'none'
|
||||
dengLu.style.display = 'block'
|
||||
changePassword.style.display = 'none'
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -2,7 +2,7 @@
|
||||
<html xmlns:th="http://www.thymeleaf.org">
|
||||
<head>
|
||||
<base th:href="${#request.getContextPath() + '/'}">
|
||||
<title th:text="${systemTitle}"></title>
|
||||
<title th:text="${pageParams.systemTitle}"></title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="renderer" content="webkit">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
@ -14,446 +14,120 @@
|
||||
<link rel="stylesheet" href="assets/css/supersized.css?v=3">
|
||||
<link rel="stylesheet" href="assets/layuiadmin/style/login.css?v=3" media="all">
|
||||
<style>[v-cloak] {display: none;}</style>
|
||||
<style th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formCss}"></style>
|
||||
<style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'left'}">
|
||||
@media screen and (max-width: 1920px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 68%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1366px) {
|
||||
.layadmin-user-login-main {
|
||||
right: 62%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'left'}" th:utext="${customLoginForm.formLeftCss}"></style>
|
||||
<style th:if="${customLoginForm eq null and pageParams.loginBoxPosition eq 'center'}">
|
||||
.layadmin-user-login-main {
|
||||
left: 50%;
|
||||
margin-left: -200px;
|
||||
}
|
||||
</style>
|
||||
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'center'}" th:utext="${customLoginForm.formCenterCss}"></style>
|
||||
<style th:if="${customLoginForm ne null and pageParams.loginBoxPosition eq 'default'}" th:utext="${customLoginForm.formRightCss}"></style>
|
||||
</head>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
position: relative;
|
||||
/*display: flex;*/
|
||||
/*flex-direction: column;*/
|
||||
/*width: 100%;*/
|
||||
/*height: 100vh;*/
|
||||
}
|
||||
|
||||
.layadmin-user-login-main {
|
||||
margin-right: 0;
|
||||
margin-top: unset;
|
||||
}
|
||||
|
||||
.nav {
|
||||
position: relative;
|
||||
/*position: absolute;*/
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
/* position: relative; */
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.sign {
|
||||
display: flex;
|
||||
/* position: absolute; */
|
||||
width: 500px;
|
||||
height: 80px;
|
||||
.nav .logo {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.sign h2 {
|
||||
width: 180px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
text-align: center;
|
||||
/* padding: auto 20px auto 50px; */
|
||||
font-size: 36px;
|
||||
margin: auto 20px auto 50px;
|
||||
.nav .logo a img {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.sign p {
|
||||
width: 180px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
font-size: 14px;
|
||||
margin: auto 0;
|
||||
/* height: 20px; */
|
||||
padding: 0 25px;
|
||||
border-left: 2px solid rgba(0, 0, 0, .2);
|
||||
.nav .go-page {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.go-page {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
/* position: absolute; */
|
||||
width: 260px;
|
||||
height: 80px;
|
||||
/* border: 2px solid red; */
|
||||
font-size: 16px;
|
||||
/* right: 0; */
|
||||
}
|
||||
|
||||
.go-page #register {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: auto 0;
|
||||
margin-right: 20px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
/* border: none; */
|
||||
.nav .go-page a {
|
||||
background-color: rgba(255, 255, 255, .4);
|
||||
color: #42210B;
|
||||
padding: 5px 15px;
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.go-page #back-homepage {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin: auto 0;
|
||||
margin-right: 40px;
|
||||
padding: 0 20px;
|
||||
border-radius: 20px;
|
||||
border: none;
|
||||
/* background-color: rgba(255, 255, 255, .3); */
|
||||
.nav .go-page a:hover {
|
||||
background-color: #42210B;
|
||||
font-weight: bold;
|
||||
color: #FFF;
|
||||
}
|
||||
|
||||
#register:hover {
|
||||
background-color: #42210B;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#back-homepage:hover {
|
||||
background-color: #332817;
|
||||
color: #FFF;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
#loginBox {
|
||||
#app {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
/*position: relative;*/
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0,160px);
|
||||
/*margin-top: -250px;*/
|
||||
flex-direction: column;
|
||||
width: 400px;
|
||||
height: 500px;
|
||||
/*margin-top: 150px;*/
|
||||
background-color: #fff;
|
||||
border-radius: 15px;
|
||||
box-shadow: 0 12px 12px rgba(0,0,0,.5),0 -12px -12px rgba(0,0,0,.5);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#loginBox .btnlist {
|
||||
#app .container {
|
||||
width: 300px;
|
||||
padding: 15px;
|
||||
background-color: #FFF;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 5px rgba(0,0,0,0.3);
|
||||
}
|
||||
#app .container .header {
|
||||
font-size: 16px;
|
||||
border-left: 5px solid #fda633;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#app .container .body {
|
||||
margin-top: 15px;
|
||||
}
|
||||
#app .container .body .layui-form-item .layui-input {
|
||||
padding-left: 35px;
|
||||
}
|
||||
#app .container .body .layui-form-item .verify-code {
|
||||
height: 38px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
/*display: none;*/
|
||||
width: 330px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 20px auto;
|
||||
/* border: 1px solid red; */
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#loginBox #change {
|
||||
display: none;
|
||||
width: 330px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
margin: 20px auto;
|
||||
#app .container .body .layui-form-item .verify-code a {
|
||||
color: #1e9fff;
|
||||
}
|
||||
|
||||
#loginBox #change h3 {
|
||||
width: 80px;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
/* margin-right: 30px; */
|
||||
border: none;
|
||||
/*border-bottom: 5px solid #fda633;*/
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
#app .remember-username {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#loginBox #change span {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
margin-left: 15px;
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
#loginBox .btnlist button {
|
||||
font-size: 18px;
|
||||
margin-right: 30px;
|
||||
border: none;
|
||||
/*border-bottom: 5px solid #fda633;*/
|
||||
margin-bottom: 5px;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
}
|
||||
#loginBox .btnlist div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#loginBox .btnlist div:first-child span {
|
||||
display: block;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
margin-left: 15px;
|
||||
background-color: #fda633;
|
||||
|
||||
}
|
||||
#loginBox .btnlist div:last-child span {
|
||||
display: none;
|
||||
width: 40px;
|
||||
height: 5px;
|
||||
margin-left: 20px;
|
||||
background-color: #fda633;
|
||||
|
||||
}
|
||||
.forget-username-password {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
line-height: 18px;
|
||||
color: #6d6d6d;
|
||||
}
|
||||
#rememberPassword a:hover {
|
||||
color: #0080ff;
|
||||
}
|
||||
.login-btn {
|
||||
margin: 80px auto 20px auto;
|
||||
background-color: #fda633;
|
||||
}
|
||||
|
||||
.go {
|
||||
/*display: flex;*/
|
||||
/*justify-content: space-between;*/
|
||||
/*align-content: center;*/
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
margin: 15px auto;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
.go p {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
#app .container .footer {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.go p a {
|
||||
color: #1d8eff;
|
||||
text-decoration: underline;
|
||||
#app .container .footer .login-type {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.go p a:hover {
|
||||
color: #0080ff;
|
||||
#app .container .footer a {
|
||||
color: #1e9fff;
|
||||
}
|
||||
|
||||
.change-password #goLogin {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
font-weight: 200;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.change-password #goLogin:hover {
|
||||
font-weight: 500;
|
||||
color: #0080ff;
|
||||
}
|
||||
.bixuan {
|
||||
#app .container .footer .other {
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
/* align-content: center;
|
||||
flex-wrap: wrap;
|
||||
align-content: center; */
|
||||
position: relative;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
}
|
||||
#loginBox .denglu .yzmtx1 {
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border: 1px solid #D2D2D2!important;
|
||||
}
|
||||
#loginBox .denglu .yzmtx1 input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 322px;
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
#app .forget-password-box {
|
||||
width: 300px;
|
||||
padding: 15px;
|
||||
background-color: #FFF;
|
||||
color: #666666;
|
||||
border: none;
|
||||
}
|
||||
#loginBox .denglu .yzmbox1 {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #D2D2D2!important;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
background-color: #FAFAFA;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.sign a {
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
margin-left: 50px;
|
||||
margin-top: 17px;
|
||||
}
|
||||
.sign a img{
|
||||
width: 260px;
|
||||
height: 46px;
|
||||
}
|
||||
#loginBox .change-password {
|
||||
display: none;
|
||||
}
|
||||
#loginBox .change-password ul li {
|
||||
display: block;
|
||||
position: relative;
|
||||
height: 38px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
#loginBox .change-password ul li input {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 322px;
|
||||
height: 38px;
|
||||
font-size: 14px;
|
||||
background-color: #FFF;
|
||||
color: #666666;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#loginBox .change-password ul li {
|
||||
position: relative;
|
||||
border: 1px solid #D2D2D2!important;
|
||||
}
|
||||
#loginBox .change-password .yzmbox {
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
border-color: #D2D2D2!important;
|
||||
border-radius: 2px;
|
||||
font-size: 14px;
|
||||
background-color: #FAFAFA;
|
||||
color: #666666;
|
||||
text-align: center;
|
||||
}
|
||||
#loginBox .denglu .yzmbox1:hover,
|
||||
#loginBox .change-password .yzmbox:hover {
|
||||
cursor: pointer;
|
||||
/*color: #333;*/
|
||||
font-weight: 550;
|
||||
-webkit-box-shadow: 0 0 10px #0CC;
|
||||
-moz-box-shadow: 0 0 10px #0CC;
|
||||
box-shadow: 0 0 10px #0CC;
|
||||
}
|
||||
#confirmNewPassword {
|
||||
display: block;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
margin: 50px auto 20px auto;
|
||||
font-size: 16px;
|
||||
border-radius: 2px;
|
||||
background-color: #fda633;
|
||||
color: #FFF;
|
||||
}
|
||||
/*#loginBox #loginFormBox #loginForm .layui-form-item:focus {*/
|
||||
/* border: 1px solid #fa911e;*/
|
||||
/*}*/
|
||||
/*#password:focus {*/
|
||||
/* border: 1px solid #fa911e;*/
|
||||
/*}*/
|
||||
</style>
|
||||
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<div v-cloak th:if="${customLoginForm ne null}" th:utext="${customLoginForm.formHtml}"></div>
|
||||
<!-- <div v-cloak th:if="${customLoginForm eq null}">-->
|
||||
<div v-cloak th:if="${customLoginForm eq null}">
|
||||
<div class="nav">
|
||||
<div class="sign">
|
||||
<!-- <h2>腾狮科技</h2>-->
|
||||
<!-- <p>AI人工智能软著申请</p>-->
|
||||
<a>
|
||||
<img src="assets/images/headicon1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div class="go-page">
|
||||
<a id="register" th:href="${ HomeServerUrl + 'Register.html'}">注册</a>
|
||||
<a id="back-homepage" th:href="${ HomeServerUrl }">返回首页</a>
|
||||
</div>
|
||||
<div id="app">
|
||||
<div class="nav">
|
||||
<div class="logo">
|
||||
<a th:href="${ HomeServerUrl }">
|
||||
<img src="assets/images/headicon1.png" alt="">
|
||||
</a>
|
||||
</div>
|
||||
<div id="loginBox" class="layadmin-user-login-main">
|
||||
<div class="btnlist">
|
||||
<div>
|
||||
<button id="zhanghaomima" @click="loginTypeChange('zhanghaomima')">账号密码</button>
|
||||
<span class="span1"></span>
|
||||
</div>
|
||||
<div>
|
||||
<button id="yzmlongin" @click="loginTypeChange('yanzhengma')">验证码登录</button>
|
||||
<span class="span2"></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div id="change">
|
||||
<h3 id="changeCode">修改密码</h3>
|
||||
<span></span>
|
||||
</div>
|
||||
<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 id="loginFormBox" class="layadmin-user-login-box layadmin-user-login-body layui-form">
|
||||
<form id="loginForm" :action="activeAction" method="post" @submit.prevent="submitForm" class="denglu">
|
||||
<div class="go-page">
|
||||
<a th:href="${ HomeServerUrl + 'Register.html'}">注册</a>
|
||||
<a th:href="${ HomeServerUrl }">去首页</a>
|
||||
</div>
|
||||
</div>
|
||||
<div v-cloak>
|
||||
<div class="container" v-if="isLogin">
|
||||
<div class="header">用户登录</div>
|
||||
<div class="body">
|
||||
<form id="loginForm" :action="activeAction" method="post" @submit.prevent="submitForm">
|
||||
<input type="hidden" name="referToken" v-model="formData.referToken"/>
|
||||
<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">
|
||||
<input type="text" v-model="formData.username" id="username" name="username" lay-verify="username" placeholder="用户名 / 手机号" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item mima" id="passwordBox" v-if="loginType === 'zhanghaomima'">
|
||||
<div class="layui-form-item" v-if="loginType === 'username'">
|
||||
<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="yzmbox1" @click="getLoginVerificationCode" v-if="loginType === 'yanzhengma'">
|
||||
<span id="yzm11">点击获取验证码</span>
|
||||
</div>
|
||||
<div class="yzmtx1" v-if="loginType === 'yanzhengma'">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="inputyzm11"></label>
|
||||
<input type="text" v-model="formData.code" name="code" placeholder="请输入验证码" lay-verify="code" id="inputyzm11">
|
||||
</div>
|
||||
<div class="layui-form-item" id="verificationCodeBox" v-if="loginType === 'zhanghaomima' && pageParams.verificationCode == 'true'" >
|
||||
<div class="layui-form-item" v-if="loginType === 'username' && pageParams.verificationCode == 'true'" >
|
||||
<!-- 验证码 -->
|
||||
<div class="layui-row">
|
||||
<div class="layui-col-xs7">
|
||||
@ -467,43 +141,72 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item remember-password login-btn-up bixuan" id="rememberPassword">
|
||||
<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住密码" lay-filter="rememberFilter">
|
||||
<a href="javascript:void(0)" class="forget-username-password" id="goChangePassword">忘记密码?</a>
|
||||
<div class="layui-form-item" v-if="loginType === 'sms'">
|
||||
<div class="layui-col-xs7">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
|
||||
<input type="text" v-model="sms.smsCode" id="smsCode" name="smsCode" placeholder="验证码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-xs5 verify-code">
|
||||
<a href="javascript:void(0);" v-if="!sms.isCountingDown" @click="onLoginSmsCodeClick" style="font-size: 13px;">获取验证码</a>
|
||||
<a href="javascript:void(0);" style="color: #d2d2d2; font-size: 13px;" v-if="sms.isCountingDown">{{sms.countDownSeconds}}秒后重试</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form remember-username">
|
||||
<input type="checkbox" v-model="formData.remember" name="remember" lay-skin="primary" title="记住账号" lay-filter="rememberFilter">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button type="submit" class="layui-btn layui-btn-fluid login-btn" lay-submit>登 录</button>
|
||||
</div>
|
||||
<div class="go">
|
||||
<p>没有账号？<a th:href="${ HomeServerUrl + 'Register.html'}">立即注册</a></p>
|
||||
<button type="submit" class="layui-btn layui-btn-fluid login-btn" lay-submit style="background-color: #fda633;">登录</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- 修改密码 -->
|
||||
<form class="change-password">
|
||||
<ul>
|
||||
<li class="zhanghao">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
|
||||
<input type="text" placeholder="手机号" id="phone">
|
||||
</li>
|
||||
<li class="yzmbox">
|
||||
<span id="yzm" @click="getLoginVerificationCode2">点击获取验证码</span>
|
||||
</li>
|
||||
<li class="yzmtx">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="text" placeholder="请输入验证码" id="inputyzm">
|
||||
</li>
|
||||
<li class="newPassword1">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="text" placeholder="请输入新密码(8~16位)" id="newPassword">
|
||||
</li>
|
||||
|
||||
</ul>
|
||||
<a id="confirmNewPassword" href="javascript:void(0)" @click="confirmNewPassword">确定</a>
|
||||
<a id="goLogin" href="javascript:void(0)">去登录</a>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="login-type">
|
||||
<a href="javascript:void(0);" v-if="loginType === 'sms'" @click="onLoginTypeClick('username')">账号密码登录 <i class="fa fa-angle-right"></i></a>
|
||||
<a href="javascript:void(0);" v-if="loginType === 'username'" @click="onLoginTypeClick('sms')">短信登录 <i class="fa fa-angle-right"></i></a>
|
||||
</div>
|
||||
<div class="other">
|
||||
<div>
|
||||
<a href="javascript:void(0)" class="forget-username-password" @click="onForgetPasswordClick">忘记密码?</a>
|
||||
</div>
|
||||
<div>
|
||||
没有账号？<a th:href="${ HomeServerUrl + 'Register.html'}">立即注册</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="container" v-if="!isLogin">
|
||||
<div class="header">忘记密码</div>
|
||||
<div class="body">
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-username" for="username"></label>
|
||||
<input type="text" v-model="forgetPassword.username" id="cpUsername" placeholder="用户名 / 手机号" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="password" v-model="forgetPassword.newPassword" id="cpNewPassword" placeholder="新密码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-password" for="password"></label>
|
||||
<input type="password" v-model="forgetPassword.confirmNewPassword" id="cpConfirmNewPassword" placeholder="确认新密码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-col-xs7">
|
||||
<label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="verificationCode"></label>
|
||||
<input type="text" v-model="sms.smsCode" id="cpSmsCode" placeholder="验证码" class="layui-input">
|
||||
</div>
|
||||
<div class="layui-col-xs5 verify-code">
|
||||
<a href="javascript:void(0);" v-if="!sms.isCountingDown" @click="onForgetPasswordSmsCodeClick" style="font-size: 13px;">获取验证码</a>
|
||||
<a href="javascript:void(0);" style="color: #d2d2d2; font-size: 13px;" v-if="sms.isCountingDown">{{sms.countDownSeconds}}秒后重试</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-form-item">
|
||||
<button type="button" class="layui-btn layui-btn-fluid login-btn" style="background-color: #fda633;" @click="onForgetPasswordUpdateClick">修改</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="login-type" style="text-align: left;">
|
||||
<a href="javascript:void(0);" @click="isLogin = true"><i class="fa fa-angle-left"></i> 去登录</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-trans layadmin-user-login-footer footer-text">
|
||||
@ -535,8 +238,9 @@
|
||||
new Vue({
|
||||
el: '#app',
|
||||
data: {
|
||||
isLogin: true,
|
||||
pageParams: pageParams,
|
||||
loginType: 'zhanghaomima',
|
||||
loginType: 'username',
|
||||
activeAction: pageParams.loginFormAction,
|
||||
formData: {
|
||||
referToken: pageParams.referToken,
|
||||
@ -544,28 +248,101 @@
|
||||
username: pageParams.loginUsername,
|
||||
password: '',
|
||||
remember: false
|
||||
},
|
||||
forgetPassword: {
|
||||
username: '',
|
||||
smsCode: '',
|
||||
newPassword: '',
|
||||
confirmNewPassword: '',
|
||||
},
|
||||
sms: {
|
||||
smsCode: '',
|
||||
countDownInterval: null,
|
||||
countDownSeconds: 120,
|
||||
isCountingDown: false,
|
||||
isCountClick: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
confirmNewPassword: function() {
|
||||
var password = md5(md5(md5($('#newPassword').val())));
|
||||
var data = {
|
||||
"newPassword": password,
|
||||
"phone": $('#phone').val(),
|
||||
"verificationCode": $('#inputyzm').val()
|
||||
};
|
||||
// 提交表单
|
||||
submitForm: function() {
|
||||
var self = this;
|
||||
if(!self.formData.username) {
|
||||
layer.msg('用户名不能为空');
|
||||
$('#username').focus();
|
||||
return;
|
||||
}
|
||||
if(self.loginType === 'username') {
|
||||
if(!self.formData.password) {
|
||||
layer.msg('密码不能为空');
|
||||
$('#password').focus();
|
||||
return;
|
||||
}
|
||||
if(self.pageParams.verificationCode == 'true' && !self.formData.verificationCode) {
|
||||
layer.msg('验证码不能为空');
|
||||
$('#verificationCode').focus();
|
||||
return;
|
||||
}
|
||||
} else if(self.loginType === 'sms') {
|
||||
if(!self.sms.smsCode) {
|
||||
layer.msg('短信验证码不能为空');
|
||||
$('#smsCode').focus();
|
||||
return;
|
||||
}
|
||||
}
|
||||
if(self.loginType === 'username') {
|
||||
self.activeAction = self.pageParams.loginFormAction;
|
||||
}
|
||||
if(self.loginType === 'sms') {
|
||||
self.activeAction = self.pageParams.loginPhoneAction;
|
||||
}
|
||||
if(self.formData.remember) {
|
||||
cookie.setCookie('rememberMe', self.formData.username, 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();
|
||||
})
|
||||
},
|
||||
onForgetPasswordUpdateClick: function() {
|
||||
var self = this;
|
||||
if(!self.forgetPassword.username) {
|
||||
layer.msg('用户名不能为空');
|
||||
$('#cpUsername').focus();
|
||||
return;
|
||||
}
|
||||
if(!self.forgetPassword.newPassword) {
|
||||
layer.msg('新密码不能为空');
|
||||
$('#cpNewPassword').focus();
|
||||
return;
|
||||
}
|
||||
if(!self.forgetPassword.confirmNewPassword) {
|
||||
layer.msg('确认新密码不能为空');
|
||||
$('#cpConfirmNewPassword').focus();
|
||||
return;
|
||||
}
|
||||
if(self.forgetPassword.newPassword !== self.forgetPassword.confirmNewPassword) {
|
||||
layer.msg('两次密码不一致');
|
||||
$('#cpConfirmNewPassword').focus();
|
||||
return;
|
||||
}
|
||||
if(!self.sms.smsCode) {
|
||||
layer.msg('短信验证码不能为空');
|
||||
$('#cpSmsCode').focus();
|
||||
return;
|
||||
}
|
||||
var loadLayerIndex;
|
||||
restAjax.put(restAjax.path('app/user/forget-phone-password', []), data, null, function(code, data) {
|
||||
layer.msg("密码修改成功");
|
||||
|
||||
let btnList = document.querySelector('.btnlist')
|
||||
let change = document.querySelector('#change')
|
||||
let dengLu = document.querySelector('.denglu')
|
||||
let changePassword = document.querySelector('.change-password')
|
||||
btnList.style.display = 'block'
|
||||
change.style.display = 'none'
|
||||
dengLu.style.display = 'block'
|
||||
changePassword.style.display = 'none'
|
||||
restAjax.put(restAjax.path('app/user/forget-phone-password', []), {
|
||||
phone: self.forgetPassword.username,
|
||||
newPassword: md5(md5(md5(self.forgetPassword.newPassword))),
|
||||
verificationCode: self.sms.smsCode
|
||||
}, null, function(code, data) {
|
||||
layer.msg("密码修改成功，请登录");
|
||||
self.loginType = 'username';
|
||||
self.isLogin = true;
|
||||
}, function(code, data) {
|
||||
dialog.msg(data.msg);
|
||||
}, function() {
|
||||
@ -574,50 +351,57 @@
|
||||
dialog.close(loadLayerIndex);
|
||||
});
|
||||
},
|
||||
getLoginVerificationCode2: function() {
|
||||
let phoneVal = $("#phone").val();
|
||||
if (!phoneVal) {
|
||||
layer.msg("手机号不能为空");
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "app/sms/verify-code/" + phoneVal,
|
||||
success: function (msg) {
|
||||
layer.msg("验证码已发送");
|
||||
},
|
||||
error: function (data) {
|
||||
console.log(data);
|
||||
if (data.responseJSON.msg) {
|
||||
layer.msg(data.responseJSON.msg);
|
||||
}else{
|
||||
layer.msg("验证码发送失败");
|
||||
}
|
||||
}
|
||||
});
|
||||
onForgetPasswordClick: function() {
|
||||
this.isLogin = false;
|
||||
},
|
||||
getLoginVerificationCode: function() {
|
||||
let phoneVal = $("#username").val();
|
||||
if (!phoneVal) {
|
||||
layer.msg("用户名不能为空");
|
||||
onLoginClick: function() {
|
||||
this.isLogin = true;
|
||||
},
|
||||
onLoginSmsCodeClick: function() {
|
||||
this.sendSmsCode(this.formData.username)
|
||||
},
|
||||
onForgetPasswordSmsCodeClick: function() {
|
||||
this.sendSmsCode(this.forgetPassword.username)
|
||||
},
|
||||
sendSmsCode: function(phone) {
|
||||
if(this.sms.isCountClick) {
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
type: "GET",
|
||||
dataType: 'json',
|
||||
url: "app/sms/verify-code/" + phoneVal,
|
||||
success: function (msg) {
|
||||
layer.msg("验证码已发送");
|
||||
},
|
||||
error: function (data) {
|
||||
if (data.responseJSON.msg) {
|
||||
layer.msg(data.responseJSON.msg);
|
||||
}else{
|
||||
layer.msg("验证码发送失败");
|
||||
if(!phone) {
|
||||
layer.msg('请输入手机号');
|
||||
return;
|
||||
}
|
||||
if(!/^1[3456789]\d{9}$/.test(phone)) {
|
||||
layer.msg('手机号格式不正确');
|
||||
return;
|
||||
}
|
||||
var self = this;
|
||||
restAjax.get('api/verify/code/send/'+ phone, {}, null, function(code, data) {
|
||||
layer.msg('验证码发送成功');
|
||||
self.sms.isCountingDown = true;
|
||||
self.sms.countDownInterval = setInterval(function() {
|
||||
self.sms.countDownSeconds -= 1;
|
||||
if(self.sms.countDownSeconds <= 0) {
|
||||
clearInterval(self.sms.countDownInterval);
|
||||
self.sms.countDownInterval = null;
|
||||
self.sms.isCountingDown = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
}, function(code, data) {
|
||||
layer.msg(data.msg);
|
||||
}, function() {
|
||||
self.isCountClick = true;
|
||||
}, function() {
|
||||
self.isCountClick = false;
|
||||
})
|
||||
},
|
||||
onLoginTypeClick: function(type) {
|
||||
this.loginType = type;
|
||||
if(type === 'username') {
|
||||
this.activeAction = pageParams.loginFormAction;
|
||||
} else if(type === 'sms') {
|
||||
this.activeAction = pageParams.loginPhoneAction;
|
||||
}
|
||||
},
|
||||
showErrorMessage: function() {
|
||||
var self = this;
|
||||
@ -670,36 +454,15 @@
|
||||
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.username = rememberMe;
|
||||
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();
|
||||
})
|
||||
},
|
||||
|
||||
loginTypeChange: function(type) {
|
||||
if(type === 'zhanghaomima') {
|
||||
this.activeAction = this.pageParams.loginFormAction;
|
||||
}
|
||||
if(type === 'yanzhengma') {
|
||||
this.activeAction = this.pageParams.loginPhoneAction;
|
||||
}
|
||||
this.loginType = type;
|
||||
}
|
||||
},
|
||||
@ -712,89 +475,8 @@
|
||||
form.on('checkbox(rememberFilter)', function(data) {
|
||||
self.formData.remember = data.elem.checked;
|
||||
});
|
||||
// 保单验证
|
||||
form.verify({
|
||||
username: function(value, item) {
|
||||
if(!value){
|
||||
return '用户名不能为空';
|
||||
}
|
||||
},
|
||||
password: function(value, item) {
|
||||
if(!value) {
|
||||
return '密码不能为空';
|
||||
}
|
||||
},
|
||||
code: function(value, item) {
|
||||
if(!value) {
|
||||
return '验证码不能为空';
|
||||
}
|
||||
},
|
||||
verificationCode: function(value, item) {
|
||||
if(!value) {
|
||||
return '验证码不能为空';
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
// 切换账号密码登录和验证码登录
|
||||
let loginForm = document.querySelector("#loginForm");
|
||||
let mima = document.querySelector(".mima")
|
||||
let yzmbox1 = document.querySelector('.yzmbox1')
|
||||
let yzmtx1 = document.querySelector(".yzmtx1")
|
||||
let bixuan = document.querySelector('.bixuan')
|
||||
let zhanghaomima = document.querySelector('#zhanghaomima')
|
||||
let yzmlongin = document.querySelector('#yzmlongin')
|
||||
let span1 = document.querySelector('.span1')
|
||||
let span2 = document.querySelector('.span2')
|
||||
|
||||
// // 账号密码登录
|
||||
document.querySelector('#zhanghaomima').addEventListener('click', function () {
|
||||
// alert(11)
|
||||
zhanghaomima.style.fontWeight = 700
|
||||
// zhanghaomima.style.borderBottom = '5px solid #fda633'
|
||||
span1.style.display = 'block'
|
||||
span2.style.display = 'none'
|
||||
yzmlongin.style.fontWeight = 400
|
||||
yzmlongin.style.borderBottom = '0'
|
||||
bixuan.style.display = 'block'
|
||||
})
|
||||
// 验证码登录
|
||||
document.querySelector('#yzmlongin').addEventListener('click', function () {
|
||||
yzmlongin.style.fontWeight = 700
|
||||
// yzmlongin.style.borderBottom = '5px solid #fda633'
|
||||
span1.style.display = 'none'
|
||||
span2.style.display = 'block'
|
||||
zhanghaomima.style.fontWeight = 400
|
||||
zhanghaomima.style.borderBottom = '0'
|
||||
bixuan.style.display = 'none'
|
||||
})
|
||||
|
||||
// 点击 忘记密码 去登录 切换div
|
||||
let goChangePassword = document.querySelector('#goChangePassword')
|
||||
let btnList = document.querySelector('.btnlist')
|
||||
let change = document.querySelector('#change')
|
||||
let dengLu = document.querySelector('.denglu')
|
||||
let changePassword = document.querySelector('.change-password')
|
||||
|
||||
// let goLogin = document.querySelector('#goLogin')
|
||||
|
||||
// 忘记密码
|
||||
document.querySelector('#goChangePassword').addEventListener('click', function () {
|
||||
btnList.style.display = 'none'
|
||||
change.style.display = 'block'
|
||||
dengLu.style.display = 'none'
|
||||
changePassword.style.display = 'block'
|
||||
})
|
||||
|
||||
// 去登录
|
||||
document.querySelector('#goLogin').addEventListener('click', function () {
|
||||
btnList.style.display = 'flex'
|
||||
change.style.display = 'none'
|
||||
dengLu.style.display = 'block'
|
||||
changePassword.style.display = 'none'
|
||||
})
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user