登录页修改

src/router/index.js

@@ -1,10 +1,10 @@
-import Vue from 'vue'
-import Router from 'vue-router'
+import Vue from "vue";
+import Router from "vue-router";
 
-Vue.use(Router)
+Vue.use(Router);
 
 /* Layout */
-import Layout from '@/layout'
+import Layout from "@/layout";
 
 /**
  * Note: 路由配置项
@@ -31,168 +31,168 @@ import Layout from '@/layout'
 // 公共路由
 export const constantRoutes = [
   {
-    path: '/redirect',
+    path: "/redirect",
     component: Layout,
     hidden: true,
     children: [
       {
-        path: '/redirect/:path(.*)',
-        component: () => import('@/views/redirect')
-      }
-    ]
+        path: "/redirect/:path(.*)",
+        component: () => import("@/views/redirect"),
+      },
+    ],
   },
   {
-    path: '/login',
-    component: () => import('@/views/login1'),
-    hidden: true
+    path: "/login",
+    component: () => import("@/views/newLogin"),
+    hidden: true,
   },
   {
-    path: '/register',
-    component: () => import('@/views/register1'),
-    hidden: true
+    path: "/register",
+    component: () => import("@/views/register1"),
+    hidden: true,
   },
   {
-    path: '/404',
-    component: () => import('@/views/error/404'),
-    hidden: true
+    path: "/404",
+    component: () => import("@/views/error/404"),
+    hidden: true,
   },
   {
-    path: '/401',
-    component: () => import('@/views/error/401'),
-    hidden: true
+    path: "/401",
+    component: () => import("@/views/error/401"),
+    hidden: true,
   },
   {
-    path: '',
+    path: "",
     component: Layout,
-    redirect: 'index',
+    redirect: "index",
     children: [
       {
-        path: 'index',
-        component: () => import('@/views/index'),
-        name: 'Index',
-        meta: { title: '首页', icon: 'dashboard', affix: true }
-      }
-    ]
+        path: "index",
+        component: () => import("@/views/index"),
+        name: "Index",
+        meta: { title: "首页", icon: "dashboard", affix: true },
+      },
+    ],
   },
   {
-    path: '/user',
+    path: "/user",
     component: Layout,
     hidden: true,
-    redirect: 'noredirect',
+    redirect: "noredirect",
     children: [
       {
-        path: 'profile',
-        component: () => import('@/views/system/user/profile/index'),
-        name: 'Profile',
-        meta: { title: '个人中心', icon: 'user' }
-      }
-    ]
-  }
-]
+        path: "profile",
+        component: () => import("@/views/system/user/profile/index"),
+        name: "Profile",
+        meta: { title: "个人中心", icon: "user" },
+      },
+    ],
+  },
+];
 
 // 动态路由，基于用户权限动态去加载
 export const dynamicRoutes = [
   {
-    path: '/system/user-auth',
+    path: "/system/user-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:user:edit'],
+    permissions: ["system:user:edit"],
     children: [
       {
-        path: 'role/:userId(\\d+)',
-        component: () => import('@/views/system/user/authRole'),
-        name: 'AuthRole',
-        meta: { title: '分配角色', activeMenu: '/system/user' }
-      }
-    ]
+        path: "role/:userId(\\d+)",
+        component: () => import("@/views/system/user/authRole"),
+        name: "AuthRole",
+        meta: { title: "分配角色", activeMenu: "/system/user" },
+      },
+    ],
   },
   {
-    path: '/system/role-auth',
+    path: "/system/role-auth",
     component: Layout,
     hidden: true,
-    permissions: ['system:role:edit'],
+    permissions: ["system:role:edit"],
     children: [
       {
-        path: 'user/:roleId(\\d+)',
-        component: () => import('@/views/system/role/authUser'),
-        name: 'AuthUser',
-        meta: { title: '分配用户', activeMenu: '/system/role' }
-      }
-    ]
+        path: "user/:roleId(\\d+)",
+        component: () => import("@/views/system/role/authUser"),
+        name: "AuthUser",
+        meta: { title: "分配用户", activeMenu: "/system/role" },
+      },
+    ],
   },
   {
-    path: '/system/dict-data',
+    path: "/system/dict-data",
     component: Layout,
     hidden: true,
-    permissions: ['system:dict:list'],
+    permissions: ["system:dict:list"],
     children: [
       {
-        path: 'index/:dictId(\\d+)',
-        component: () => import('@/views/system/dict/data'),
-        name: 'Data',
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
-      }
-    ]
+        path: "index/:dictId(\\d+)",
+        component: () => import("@/views/system/dict/data"),
+        name: "Data",
+        meta: { title: "字典数据", activeMenu: "/system/dict" },
+      },
+    ],
   },
   {
-    path: '/face/face-data',
+    path: "/face/face-data",
     component: Layout,
     hidden: false, // 或者删除此属性以确保显示
-    permissions: ['face:data:list'],
+    permissions: ["face:data:list"],
     children: [
       {
         // 只需要 ':groupCode' 来匹配字符串
-        path: 'index/:groupCode',
-        component: () => import('@/views/face/faceData/index'),
-        name: 'Data',
-        meta: { title: '人脸库', activeMenu: '/face/face-data' }
-      }
-    ]
+        path: "index/:groupCode",
+        component: () => import("@/views/face/faceData/index"),
+        name: "Data",
+        meta: { title: "人脸库", activeMenu: "/face/face-data" },
+      },
+    ],
   },
   {
-    path: '/monitor/job-log',
+    path: "/monitor/job-log",
     component: Layout,
     hidden: true,
-    permissions: ['monitor:job:list'],
+    permissions: ["monitor:job:list"],
     children: [
       {
-        path: 'index/:jobId(\\d+)',
-        component: () => import('@/views/monitor/job/log'),
-        name: 'JobLog',
-        meta: { title: '调度日志', activeMenu: '/monitor/job' }
-      }
-    ]
+        path: "index/:jobId(\\d+)",
+        component: () => import("@/views/monitor/job/log"),
+        name: "JobLog",
+        meta: { title: "调度日志", activeMenu: "/monitor/job" },
+      },
+    ],
   },
   {
-    path: '/tool/gen-edit',
+    path: "/tool/gen-edit",
     component: Layout,
     hidden: true,
-    permissions: ['tool:gen:edit'],
+    permissions: ["tool:gen:edit"],
     children: [
       {
-        path: 'index/:tableId(\\d+)',
-        component: () => import('@/views/tool/gen/editTable'),
-        name: 'GenEdit',
-        meta: { title: '修改生成配置', activeMenu: '/tool/gen' }
-      }
-    ]
-  }
-]
+        path: "index/:tableId(\\d+)",
+        component: () => import("@/views/tool/gen/editTable"),
+        name: "GenEdit",
+        meta: { title: "修改生成配置", activeMenu: "/tool/gen" },
+      },
+    ],
+  },
+];
 
 // 防止连续点击多次路由报错
-let routerPush = Router.prototype.push
-let routerReplace = Router.prototype.replace
+let routerPush = Router.prototype.push;
+let routerReplace = Router.prototype.replace;
 // push
 Router.prototype.push = function push(location) {
-  return routerPush.call(this, location).catch(err => err)
-}
+  return routerPush.call(this, location).catch((err) => err);
+};
 // replace
 Router.prototype.replace = function push(location) {
-  return routerReplace.call(this, location).catch(err => err)
-}
+  return routerReplace.call(this, location).catch((err) => err);
+};
 
 export default new Router({
-  mode: 'history', // 去掉url中的#
+  mode: "history", // 去掉url中的#
   scrollBehavior: () => ({ y: 0 }),
-  routes: constantRoutes
-})
+  routes: constantRoutes,
+});

src/views/newLogin.vue

@@ -0,0 +1,645 @@
+<template>
+  <div class="container">
+    <div class="login">
+      <div class="login-left">背景--</div>
+      <div class="login-right"></div>
+      <!-- <div class="login-form">
+        <el-form
+          ref="loginForm"
+          :model="loginForm"
+          :rules="loginRules"
+          class="login-form"
+        >
+          <h3 class="title">博诺思后台管理系统--</h3>
+          <template v-if="loginMethod === 'password'">
+            <el-form-item prop="username">
+              <el-input
+                v-model="loginForm.username"
+                type="text"
+                auto-complete="off"
+                :placeholder="`用户名${
+                  config.loginConfig.phonePassword ? '/手机号' : ''
+                }${config.loginConfig.emailPassword ? '/邮箱' : ''}`"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="user"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                auto-complete="off"
+                placeholder="密码"
+                @keyup.enter.native="handleLogin"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="password"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code" v-if="captchaEnabled">
+              <el-input
+                v-model="loginForm.code"
+                auto-complete="off"
+                placeholder="验证码"
+                style="width: 63%"
+                @keyup.enter.native="handleLogin"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="validCode"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+              <div class="login-code">
+                <img :src="codeUrl" @click="getCode" class="login-code-img" />
+              </div>
+            </el-form-item>
+            <el-form-item v-show="isAdmin" prop="verificationCode">
+              <el-input
+                v-model="loginForm.verificationCode"
+                placeholder="请输入验证码"
+              >
+                <template slot="append">
+                  <el-button
+                    type="primary"
+                    @click="sendAdminCode"
+                    :disabled="
+                      isSendingCode || captchaEnabled ? !loginForm.code : false
+                    "
+                    class="send-code-button"
+                  >
+                    {{ countdown === 0 ? "获取验证码" : `${countdown}s` }}
+                  </el-button>
+                </template>
+                <svg-icon
+                  slot="prefix"
+                  icon-class="message"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+          </template>
+          <template v-else>
+            <el-form-item prop="mobile">
+              <el-input
+                v-model="loginForm.mobile"
+                type="text"
+                auto-complete="off"
+                :placeholder="`${
+                  config.loginConfig.phoneCode ? '手机号' : '/'
+                }${config.loginConfig.emailCode ? '邮箱' : ''}`"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="user"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+            <el-form-item prop="code" v-if="captchaEnabled">
+              <el-input
+                v-model="loginForm.code"
+                auto-complete="off"
+                placeholder="验证码"
+                style="width: 63%"
+                @keyup.enter.native="handleLogin"
+              >
+                <svg-icon
+                  slot="prefix"
+                  icon-class="validCode"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+              <div class="login-code">
+                <img :src="codeUrl" @click="getCode" class="login-code-img" />
+              </div>
+            </el-form-item>
+            <el-form-item prop="verificationCode">
+              <el-input
+                v-model="loginForm.verificationCode"
+                placeholder="请输入验证码"
+              >
+                <template slot="append">
+                  <el-button
+                    type="primary"
+                    @click="sendCode"
+                    :disabled="
+                      isSendingCode || captchaEnabled ? !loginForm.code : false
+                    "
+                    class="send-code-button"
+                  >
+                    {{ countdown === 0 ? "获取验证码" : `${countdown}s` }}
+                  </el-button>
+                </template>
+                <svg-icon
+                  slot="prefix"
+                  icon-class="message"
+                  class="el-input__icon input-icon"
+                />
+              </el-input>
+            </el-form-item>
+          </template>
+          <div class="login-form-center">
+            <el-link
+              v-if="
+                config.loginConfig.emailCode || config.loginConfig.phoneCode
+              "
+              @click="toggleLoginMethod"
+            >
+              {{ loginMethod === "password" ? "短信登录" : "密码登录" }}
+            </el-link>
+            <router-link
+              v-if="
+                config.registersConfig.emailRegisters ||
+                config.registersConfig.phoneRegisters
+              "
+              to="/register"
+            >
+              <el-link>注册账号</el-link>
+            </router-link>
+            <el-checkbox v-model="loginForm.rememberMe">记住密码</el-checkbox>
+          </div>
+          <el-form-item style="width: 100%">
+            <el-button
+              v-if="!isAdmin"
+              :loading="loading"
+              size="medium"
+              type="primary"
+              style="width: 100%"
+              @click="loginMethod === 'password' ? IsAdmin() : handleLogin()"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+            <el-button
+              v-if="isAdmin"
+              :loading="loading"
+              size="medium"
+              type="primary"
+              style="width: 100%"
+              @click="handleLogin()"
+            >
+              <span v-if="!loading">登 录</span>
+              <span v-else>登 录 中...</span>
+            </el-button>
+          </el-form-item>
+          <el-form-item>
+            <div class="login-divider">第三方登录</div>
+            <div class="login-icons">
+              <div class="login-icon">
+                <img :src="dingding" alt="Weibo" />
+              </div>
+              <div class="login-icon">
+                <img :src="wx" alt="WeChat" />
+              </div>
+              <div class="login-icon">
+                <img :src="qq" alt="QQ" />
+              </div>
+            </div>
+          </el-form-item>
+        </el-form>
+      </div> -->
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCodeImg } from "@/api/login";
+import Cookies from "js-cookie";
+import { decrypt, encrypt } from "@/utils/jsencrypt";
+import dingding from "@/assets/images/dingding.svg";
+import wx from "@/assets/images/wx.svg";
+import qq from "@/assets/images/QQ.svg";
+
+export default {
+  name: "Login",
+  data() {
+    return {
+      dingding: dingding,
+      wx: wx,
+      qq: qq,
+      codeUrl: "",
+      isAdmin: false,
+      loginForm: {
+        username: "",
+        password: "",
+        rememberMe: false,
+        code: "",
+        mobile: "",
+        verificationCode: "",
+        uuid: "",
+        loginType: "",
+        phoneUuid: "",
+        mobileCodeType: "LOGIN",
+      },
+      passwordLoginRules: {
+        username: [
+          { required: true, trigger: "blur", message: "请输入您的账号" },
+        ],
+        password: [
+          { required: true, trigger: "blur", message: "请输入您的密码" },
+        ],
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+      },
+      mobileLoginRules: {
+        mobile: [
+          { required: true, trigger: "blur", message: "请输入您的手机号" },
+        ],
+        verificationCode: [
+          { required: true, trigger: "blur", message: "请输入验证码" },
+        ],
+      },
+      loading: false,
+      captchaEnabled: true,
+      redirect: undefined,
+      isSendingCode: false,
+      countdown: 0,
+      loginMethod: "password", // 'password' or 'mobile'
+      supportsPhoneLogin: false,
+      supportsEmailLogin: false,
+    };
+  },
+  computed: {
+    config() {
+      return (
+        JSON.parse(localStorage.getItem("systemConfig")) || {
+          loginConfig: {
+            phonePassword: true,
+            emailPassword: true,
+            phoneCode: false,
+            emailCode: false,
+          },
+          registersConfig: {
+            phoneRegisters: true,
+            emailRegisters: true,
+          },
+        }
+      ); // 获取 JSON 对象
+    },
+    loginRules() {
+      return this.loginMethod === "password"
+        ? this.passwordLoginRules
+        : this.mobileLoginRules;
+    },
+  },
+  watch: {
+    $route: {
+      handler(route) {
+        this.redirect = route.query && route.query.redirect;
+      },
+      immediate: true,
+    },
+  },
+  created() {
+    this.getCode();
+    this.getCookie();
+  },
+  methods: {
+    getCode() {
+      getCodeImg().then((res) => {
+        this.captchaEnabled =
+          res.captchaEnabled !== undefined ? res.captchaEnabled : true;
+        if (this.captchaEnabled) {
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
+        }
+      });
+    },
+    getCookie() {
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
+      this.loginForm.username = username || "";
+      this.loginForm.password = password ? decrypt(password) : "";
+      this.loginForm.rememberMe = rememberMe === "true";
+    },
+    handleLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          if (this.loginForm.rememberMe) {
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
+          } else {
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
+          }
+          this.loginForm.loginMethod = this.loginMethod;
+          this.$store
+            .dispatch("Login", this.loginForm)
+            .then((res) => {
+              console.log(res);
+              if (res.code === 200) {
+                if (res.isLogin) {
+                  this.$modal
+                    .confirm("账号已在其他地方登录是否继续登录！！！！")
+                    .then(function () {
+                      return this.$router.push({ path: this.redirect || "/" });
+                    })
+                    .then(() => {
+                      this.loading = false;
+                    })
+                    .catch(() => {
+                      this.loading = false;
+                    });
+                } else {
+                  this.$router.push({ path: this.redirect || "/" });
+                }
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) this.getCode();
+            });
+        }
+      });
+    },
+    IsAdmin() {
+      this.loginForm.loginMethod = this.loginMethod;
+      this.$store.dispatch("IsAdmin", this.loginForm).then((res) => {
+        if (res.data) {
+          this.isAdmin = res.data;
+          this.$message.success("检测到您是超级管理账号,需进行手机检验");
+        } else {
+          this.handleLogin();
+        }
+      });
+    },
+    isLogin() {
+      this.$refs.loginForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let that = this;
+          this.loginForm.loginMethod = this.loginMethod;
+          this.$store
+            .dispatch("IsLogin", this.loginForm)
+            .then((res) => {
+              if (res.data) {
+                this.$modal
+                  .confirm("账号已在其他地方登录是否继续登录！！！！")
+                  .then(function () {
+                    return that.handleLogin();
+                  })
+                  .then(() => {
+                    this.loading = false;
+                  })
+                  .catch(() => {
+                    this.loading = false;
+                  });
+              } else {
+                that.handleLogin();
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+              if (this.captchaEnabled) this.getCode();
+            });
+        }
+      });
+    },
+    sendAdminCode() {
+      this.loginForm.mobile = this.loginForm.username;
+      this.$store
+        .dispatch("GetPhoneCode", this.loginForm)
+        .then((res) => {
+          if (res.code === 200) {
+            this.loginForm.phoneUuid = res.data;
+            this.$message.success("验证码发送成功");
+            this.isSendingCode = true;
+            this.countdown = 60;
+            const timer = setInterval(() => {
+              this.countdown -= 1;
+              if (this.countdown <= 0) {
+                clearInterval(timer);
+                this.isSendingCode = false;
+              }
+            }, 1000);
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+          // 如果启用了验证码，则重新获取验证码
+          if (this.captchaEnabled) {
+            this.getCode();
+          }
+          // 其他失败处理逻辑
+          this.isSendingCode = false;
+          this.countdown = 0;
+        });
+    },
+    sendCode() {
+      if (this.captchaEnabled ? !this.loginForm.code : false) {
+        this.$message.error("请先填写验证码");
+        return;
+      }
+      if (!this.loginForm.mobile) {
+        this.$message.error(
+          "请先填写" + this.config.loginConfig.phoneCode
+            ? "手机号"
+            : "/" + this.config.loginConfig.emailCode
+            ? "邮箱"
+            : ""
+        );
+        return;
+      }
+      this.$store
+        .dispatch("GetPhoneCode", this.loginForm)
+        .then(() => {
+          this.isSendingCode = true;
+          this.countdown = 60;
+          const timer = setInterval(() => {
+            this.countdown -= 1;
+            if (this.countdown <= 0) {
+              clearInterval(timer);
+              this.isSendingCode = false;
+            }
+          }, 1000);
+        })
+        .catch(() => {
+          this.loading = false;
+          // 如果启用了验证码，则重新获取验证码
+          if (this.captchaEnabled) {
+            this.getCode();
+          }
+          // 其他失败处理逻辑
+          this.isSendingCode = false;
+          this.countdown = 0;
+        });
+    },
+    toggleLoginMethod() {
+      this.loginMethod =
+        this.loginMethod === "password" ? "mobile" : "password";
+      this.loginForm.username = "";
+      this.loginForm.password = "";
+      this.loginForm.code = "";
+      this.loginForm.verificationCode = "";
+      this.loginForm.loginMethod = "";
+      this.isAdmin = false;
+      this.getCode();
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+.container {
+  display: flex;
+  // justify-content: flex-end;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  background: linear-gradient(to bottom, #8252fd, #3880fe, #fff);
+  // background-image: url("../assets/images/bg.png");
+
+  background-size: cover;
+}
+
+.login {
+  width: 42%;
+  background-color: #ecf5ff;
+  display: flex;
+  // justify-content: center;
+  // align-items: center;
+  height: 50%;
+  border-radius: 6px;
+  box-sizing: border-box;
+
+  .login-left {
+    width: 35%;
+    height: 100%;
+  }
+
+  .login-right {
+    flex: 1;
+  }
+}
+
+.title {
+  margin: 0 auto 30px;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: #ffffff;
+  width: 400px;
+  padding: 25px;
+
+  .el-input {
+    height: 38px;
+
+    input {
+      height: 38px;
+    }
+  }
+
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+
+  .login-form-center {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    padding: 1%;
+    margin-bottom: 5%;
+  }
+}
+
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+
+.login-code {
+  width: 33%;
+  float: right;
+
+  img {
+    cursor: pointer;
+    vertical-align: middle;
+  }
+}
+
+.el-login-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+
+.login-code-img {
+  height: 38px;
+}
+
+.login-container {
+  text-align: center;
+  margin-top: 50px;
+}
+
+.login-divider {
+  display: flex;
+  align-items: center;
+  text-align: center;
+  margin: 20px 0;
+}
+
+.login-divider::before,
+.login-divider::after {
+  content: "";
+  flex: 1;
+  border-bottom: 1px solid #ccc;
+}
+
+.login-divider:not(:empty)::before {
+  margin-right: 0.25em;
+}
+
+.login-divider:not(:empty)::after {
+  margin-left: 0.25em;
+}
+
+.login-icons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+}
+
+.login-icon {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.login-icon img {
+  width: 50px;
+  height: 50px;
+}
+</style>