#短信登录

Junjie

2023-09-06 67f39351a5571b822f93c09e8c6e7986fe91e758

 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>