From 3e490e2631bb5ec0485b543851b9aecf1b7a3ac3 Mon Sep 17 00:00:00 2001
From: khalil <khalil@chuhaiwl2023.com>
Date: Mon, 15 Jul 2024 15:50:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=8E=E5=8F=B0-=E7=99=BB=E5=BD=95-=E5=8F=96?=
 =?UTF-8?q?=E6=B6=88=E9=AA=8C=E8=AF=81=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

(cherry picked from commit ad73c6c3de1a3e6309c757f0511ce58414f01824)
---
 src/views/login/index.vue | 414 ++++++++++++++++++++------------------
 1 file changed, 219 insertions(+), 195 deletions(-)

diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 106c1f4..d29c64a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,44 +1,67 @@
 <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 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>
@@ -46,187 +69,188 @@ import store from '@/store';
 
 var sendFlag = true;
 export default {
-    name: "LoginView",
-    data() {
-        return {
-            smsSwitch: true,
-        };
-    },
-    setup() {
-        return {
+  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);
-                                }
-                            }
-                        });
-                    }
-                });
-            });
+    };
+  },
+  created () {
+    this.smsSwitch = false;
+    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);
-    }
+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;
-    }
+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';
+@import "../../css/supersized.css";
+@import "../../css/login.css";
 
 * {
-    font-family: "Helvetica Neue", Helvetica, STheiti, 微软雅黑, 宋体, Arial, Tahoma, sans-serif, serif;
+  font-family: "Helvetica Neue", Helvetica, STheiti, 微软雅黑, 宋体, Arial,
+    Tahoma, sans-serif, serif;
 }
 
 .btn-lg {
-    padding: 8px 25px;
+  padding: 8px 25px;
 }
 
 #captcha_img {
-    margin-left: 5px;
+  margin-left: 5px;
 }
 
 .loginTips {
-    color: red;
-    font-size: 14px;
-    margin-left: 10px;
+  color: red;
+  font-size: 14px;
+  margin-left: 10px;
 }
 
 #validateSend {
-    width: 106px;
-    padding: 6px 17px;
-    font-size: 14px;
+  width: 106px;
+  padding: 6px 17px;
+  font-size: 14px;
 }
 </style>
\ No newline at end of file