From 67f39351a5571b822f93c09e8c6e7986fe91e758 Mon Sep 17 00:00:00 2001
From: Junjie <fallin.jie@qq.com>
Date: 星期三, 06 九月 2023 16:46:29 +0800
Subject: [PATCH] #短信登录
---
src/main/webapp/views/login.html | 142 +++++++++++++++++++++++++++++++++++++++++++----
1 files changed, 129 insertions(+), 13 deletions(-)
diff --git a/src/main/webapp/views/login.html b/src/main/webapp/views/login.html
index 81ab8b8..e0fb01f 100644
--- a/src/main/webapp/views/login.html
+++ b/src/main/webapp/views/login.html
@@ -76,22 +76,55 @@
<img src="../static/image/logo.png" alt="" style="width: 80%">
<span class="login100-form-title p-t-20 p-b-45">涓壃绔嬪簱</span>
<span class="login100-form-title p-t-20 p-b-45" style="margin: 15px 0;color: #868686;font-size: 24px">CRM</span>
- <div class="wrap-input100 validate-input m-b-10" data-validate="璇疯緭鍏ョ敤鎴峰悕">
- <input id="username" class="input100" type="text" name="username" placeholder="username" autocomplete="off">
- <span class="focus-input100"></span>
- <span class="symbol-input100">
+ <div id="passwdContent" style="display: none;">
+ <div class="wrap-input100 validate-input m-b-10" data-validate="璇疯緭鍏ョ敤鎴峰悕">
+ <input id="username" class="input100" type="text" name="username" placeholder="username" autocomplete="off">
+ <span class="focus-input100"></span>
+ <span class="symbol-input100">
<i class="fa fa-user"></i>
</span>
- </div>
- <div class="wrap-input100 validate-input m-b-10" data-validate="璇疯緭鍏ュ瘑鐮�">
- <input id="password" class="input100" type="password" name="pass" placeholder="password">
- <span class="focus-input100"></span>
- <span class="symbol-input100">
+ </div>
+ <div class="wrap-input100 validate-input m-b-10" data-validate="璇疯緭鍏ュ瘑鐮�">
+ <input id="password" class="input100" type="password" name="pass" placeholder="password">
+ <span class="focus-input100"></span>
+ <span class="symbol-input100">
<i class="fa fa-lock"></i>
</span>
+ </div>
+ <div style="text-align: right;">
+ <button onclick="switchLogin('sms')">鐭俊鐧诲綍</button>
+ </div>
+ <div class="container-login100-form-btn p-t-10">
+ <button id="passLogin" class="login100-form-btn login-btn">Login</button>
+ </div>
</div>
- <div class="container-login100-form-btn p-t-10">
- <button class="login100-form-btn login-btn">Login</button>
+ <div id="smsContent">
+ <div class="wrap-input100 validate-input m-b-10" data-validate="璇疯緭鍏ユ墜鏈哄彿">
+ <input id="phone" class="input100" type="text" name="phone" placeholder="鎵嬫満鍙�" autocomplete="off">
+ <span class="focus-input100"></span>
+ <span class="symbol-input100">
+ <i class="fa fa-user"></i>
+ </span>
+ </div>
+ <div style="display: flex;justify-content: center;align-items: center;">
+ <div class="wrap-input100 validate-input m-b-10" style="width: 60%" data-validate="璇疯緭鍏ラ獙璇佺爜">
+ <input id="code" class="input100" type="text" name="code" placeholder="楠岃瘉鐮�">
+ <span class="focus-input100"></span>
+ <span class="symbol-input100">
+ <i class="fa fa-lock"></i>
+ </span>
+ </div>
+ <div style="width: 20%;">
+ <div id="getCodeBox"><button onclick="getCode()">鑾峰彇楠岃瘉鐮�</button></div>
+ <div id="getCodeTime"></div>
+ </div>
+ </div>
+ <div style="text-align: right;">
+ <button onclick="switchLogin('password')">瀵嗙爜鐧诲綍</button>
+ </div>
+ <div class="container-login100-form-btn p-t-10">
+ <button id="smsLogin" class="login100-form-btn login-btn">Login</button>
+ </div>
</div>
</div>
</div>
@@ -106,7 +139,7 @@
console.log('%c CRM %c 1.0.0','background-color:rgb(53,73,94);color: #fff;border-radius:2px 0 0 2px;padding:2px 4px;','background-color:rgb(25,190,107);color: #fff;border-radius:0 2px 2px 0;padding:2px 4px;font: 9pt "Apercu Regular", Georgia, "Times New Roman", Times, serif;');
window.onload = function(){document.getElementById("username").focus();}
- $(document).on('click','.login-btn', function () {
+ $(document).on('click','#passLogin', function () {
let username = $("#username").val();
if (username === "") {
layer.tips('璇疯緭鍏ョ櫥褰曡处鍙�', '#username', {tips: [4, '#ff0000']});
@@ -136,7 +169,41 @@
} else if (res.code === 10003) {
layer.tips(res.msg, '#password', {tips: [4, '#ff0000']});
} else {
- layer.tips(res.msg, '.login-btn', {tips: [3, '#ff0000']});
+ layer.tips(res.msg, '#passLogin', {tips: [3, '#ff0000']});
+ }
+ }
+ });
+ });
+
+ $(document).on('click','#smsLogin', function () {
+ let phone = $("#phone").val();
+ if (phone === "") {
+ layer.tips('璇疯緭鍏ユ墜鏈哄彿', '#phone', {tips: [4, '#ff0000']});
+ return;
+ }
+ let code = $("#code").val();
+ if (code === "") {
+ layer.tips('璇疯緭鍏ラ獙璇佺爜', '#code', {tips: [4, '#ff0000']});
+ return;
+ }
+ $.ajax({
+ url: baseUrl+"/smsLogin.action",
+ data: {
+ phone: phone,
+ code: code
+ },
+ method: 'POST',
+ success: function (res) {
+ if (res.code === 200){
+ localStorage.setItem("token", res.data.token);
+ localStorage.setItem("nickname", res.data.nickname);
+ window.location.href = "index.html";
+ } else if (res.code === 10001) {
+ layer.tips(res.msg, '#phone', {tips: [4, '#ff0000']});
+ } else if (res.code === 10002) {
+ layer.tips(res.msg, '#phone', {tips: [4, '#ff0000']});
+ } else {
+ layer.tips(res.msg, '#smsLogin', {tips: [3, '#ff0000']});
}
}
});
@@ -147,6 +214,55 @@
$(".login-btn").click();
}
});
+
+ function switchLogin(type) {
+ if(type === 'sms'){
+ //鐭俊鐧诲綍
+ $("#passwdContent").hide()
+ $("#smsContent").show()
+ }else {
+ //瀵嗙爜鐧诲綍
+ $("#passwdContent").show()
+ $("#smsContent").hide()
+ }
+ }
+
+ function getCode() {
+ //鑾峰彇楠岃瘉鐮�
+ let phone = $("#phone").val();
+ if (phone === "") {
+ layer.tips('璇疯緭鍏ユ墜鏈哄彿', '#phone', {tips: [4, '#ff0000']});
+ return;
+ }
+
+ $.ajax({
+ url: baseUrl+"/smsCode/sendCode",
+ data: {
+ phone: phone
+ },
+ method: 'POST',
+ success: function (res) {
+ if (res.code === 200){
+ $("#getCodeBox").hide()
+ $("#getCodeTime").show()
+ let tmp = null;
+ let time = 60
+ tmp = setInterval(() => {
+ if (time <= 0) {
+ $("#getCodeTime").hide()
+ $("#getCodeBox").show()
+ clearInterval(tmp)
+ }else {
+ $("#getCodeTime").text(time + "绉�")
+ time--;
+ }
+ },1000)
+ } else {
+ layer.tips(res.msg, '#getCodeBox', {tips: [3, '#ff0000']});
+ }
+ }
+ });
+ }
</script>
</body>
</html>
--
Gitblit v1.9.1