From 34f99d106551b51bf2af3bbd40c64624a3af25eb Mon Sep 17 00:00:00 2001
From: whycq <10027870+whycq@user.noreply.gitee.com>
Date: 星期六, 09 九月 2023 09:43:57 +0800
Subject: [PATCH] #
---
src/main/webapp/views/login.html | 148 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files changed, 132 insertions(+), 16 deletions(-)
diff --git a/src/main/webapp/views/login.html b/src/main/webapp/views/login.html
index 9b61445..30c6dc4 100644
--- a/src/main/webapp/views/login.html
+++ b/src/main/webapp/views/login.html
@@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
- <title>涓壃 鈹� login of zoneyung wms</title>
+ <title>涓壃 鈹� login of zoneyung crm</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
<meta name="description" content="study of Instancing with three.js">
<meta name="keywords" content="undefined, Yoichi Kobayashi, WebGL, three.js">
@@ -53,7 +53,7 @@
z-index: 100;
top: 22px;
left: 20px;">
- <img src="../static/image/logo.png" alt="" style="width: 20%">
+ <img src="../static/image/logo.png" alt="" style="width: 15%">
</div>
<div class="p-preloader">
<div class="p-preloader__box p-preloader__box--white p-preloader__box--01"></div>
@@ -74,24 +74,57 @@
<div class="login-contain">
<div class="login-box">
<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">涓壃绔嬪簱</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