peko-admin-web/src/views/login/index.vue

<template>
  <div class="page-container">
    <div class="main_box"
         :style="[smsSwitch ? 'height: 350px' : '']">
      <div class="login_box">
        <div class="login_logo">
          <span style="font-size:24px;color:#222;font-weight:bold;">&nbsp;&nbsp;MOLISTAR&nbsp;管&nbsp;理&nbsp;系&nbsp;统</span>
        </div>
        <div class="login_form">
          <form id="loginForm"
                method="post">
            <input type="hidden"
                   id="smsSwitch"
                   :value="smsSwitch" />
            <div class="form-group">
              <label for="account"
                     class="t">账&nbsp;&nbsp;&nbsp;&nbsp;号：</label>
              <input id="account"
                     name="account"
                     type="text"
                     class="form-control x319 in"
                     autocomplete="off">
            </div>
            <div class="form-group">
              <label for="password"
                     class="t">密&nbsp;&nbsp;&nbsp;&nbsp;码：</label>
              <input id="password"
                     name="password"
                     type="password"
                     class="password form-control x319 in">
            </div>
            <div v-if="smsSwitch">
              <div class="form-group">
                <label for="validateCode"
                       class="t">验证码：</label>
                <input id="validateCode"
                       name="authCode"
                       type="text"
                       class="form-control x319 in"
                       style="width: 210px;">
                <button type="button"
                        id="validateSend"
                        class="btn btn-primary btn-lg">发送验证码</button>
              </div>
            </div>
            <div class="form-group"
                 style="margin-bottom: 0px;">
              <label class="t"></label>
              <span class="loginTips"></span>
            </div>
            <div class="form-group space">
              <button type="button"
                      id="loginBtn"
                      class="btn btn-primary btn-lg">登&nbsp;&nbsp;录</button>
              &nbsp;&nbsp;&nbsp;&nbsp;
              <input type="reset"
                     value="重&nbsp;&nbsp;置"
                     class="btn btn-default btn-lg">
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import store from '@/store';

var sendFlag = true;
export default {
  name: "LoginView",
  data () {
    return {
      smsSwitch: false,
    };
  },
  setup () {
    return {

    };
  },
  created () {
    this.smsSwitch = true;
    this.$nextTick(function () {
      this.initData();
    });
  },
  methods: {
    initData () {
      $(function () {
        var $ul = $('<ul id="bubble-wrapper"/>');
        for (var i = 0; i < 10; i++) {
          $ul.append($('<li/>'));
        }
        $("body").append($ul);

        var rememberMe = getCookie("wolfbe.remember");
        if (rememberMe == 1) {
          var account = getCookie("wolfbe.account");
          if (account) $("#account").val(account);
        }

        $("#loginBtn").click(function () {
          var account = $("#account").val();
          var password = $("#password").val();
          if (account.trim() == '') {
            $(".loginTips").html("账号不能为空！");
            return;
          } else if (password.trim() == '') {
            $(".loginTips").html("密码不能为空！");
            return;
          }
          password = $.md5(password);
          var param = { 'account': account, 'password': password };
          var smsSwitch = $('#smsSwitch').val();
          console.info('smsSwitch:' + smsSwitch);
          if (smsSwitch && smsSwitch == 'true') {
            var authCode = $("#validateCode").val();
            if (authCode.trim() == '') {
              $(".loginTips").html("验证码不能为空！");
              return;
            }
            authCode = $.md5(authCode);
            param = { 'account': account, 'password': password, 'authCode': authCode };
          }
          $.ajax({
            type: "post",
            url: "/login/login",
            data: param,
            dataType: "json",
            success: function (data) {
              console.log("data is: " + data.success);
              //刷新验证码
              $("#validateImg").click();
              if (data.success == 'true') {
                console.log('login success!');
                var array = new String(data.msg).split('@');
                store.dispatch('getUser', array[0]).then(res => {
                  store.commit('updateUser', {
                    adminId: array[0],
                    username: res.username
                  });
                  window.location.href = '#/blank';
                });
              } else {
                if (data.msg == "4003" || data.msg == "404") {
                  if (data.data == "0") {
                    data.msg = "输入超过次数限制，请联系管理员";
                  } else {
                    data.msg = "密码或验证码错误！你今天还有" + data.data + "次重试机会";
                  }
                }
                $(".loginTips").html(data.msg).css("padding", "3px 5px");
                return false;
              }
            }
          });
        });
        $("#loginForm :input").not("#rememberAccount").focus(function () {
          $(".loginTips").html("").css("padding", "0");
        }).keyup(function (e) {
          var keyCode = e.which || e.keyCode;
          if (keyCode == 13) {
            $("#loginBtn").click();
          }
        });

        $("#validateImg").click(function () {
          $(this).attr("src", "/admin/kaptcha?t=" + new Date().getTime());
        });

        $("#validateSend").click(function () {
          var account = $("#account").val();
          if (account.trim() == '') {
            $(".loginTips").html("账号不能为空！");
            return;
          }
          if (sendFlag) {
            $.ajax({
              type: "post",
              url: "/login/sendSmsCode",
              data: { 'account': account },
              dataType: "json",
              success: function (data) {
                if (data.code == 200) {
                  sendSmsSuccess();
                } else {
                  $(".loginTips").html(data.message);
                }
              }
            });
          }
        });
      });
    }
  },
};

function sendSmsSuccess () {
  if (sendFlag) {
    sendFlag = false;
    var time = 181;
    var timer = setInterval(() => {
      time--;
      $("#validateSend").html(time + ' 秒');
      if (time === 0) {
        clearInterval(timer);
        $("#validateSend").html('重新获取');
        sendFlag = true;
      }
    }, 1000);
  }
}

//获取cookie的信息
function getCookie (name) {
  var reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
  var arr = document.cookie.match(reg);
  if (arr) {
    return (arr[2]);
  } else {
    return null;
  }
}
</script>

<style scoped>
@import "../../css/supersized.css";
@import "../../css/login.css";

* {
  font-family: "Helvetica Neue", Helvetica, STheiti, 微软雅黑, 宋体, Arial,
    Tahoma, sans-serif, serif;
}

.btn-lg {
  padding: 8px 25px;
}

#captcha_img {
  margin-left: 5px;
}

.loginTips {
  color: red;
  font-size: 14px;
  margin-left: 10px;
}

#validateSend {
  width: 106px;
  padding: 6px 17px;
  font-size: 14px;
}
</style>