登陆页面调整优化

src/views/account/SignIn.vue

@@ -1,11 +1,8 @@
 <script lang="ts" setup>
 //import { getAssetPath } from "@/core/helpers/assets"
 import { ref } from "vue"
-import { ErrorMessage, Field, Form as VForm } from "vee-validate"
-
 import { useRouter } from "vue-router"
-import Swal from "sweetalert2"
-import * as Yup from "yup"
+import { dialog } from "@/core/utils/message"
 import appStore from "@/stores"
 
 const store = appStore.authStore
@@ -13,164 +10,185 @@ const router = useRouter()
 
 const submitButton = ref<HTMLButtonElement | null>(null)
 
-//Create form validation object
-const login = Yup.object().shape({
-  userName: Yup.string().required().label("用户名"),
-  password: Yup.string().min(4).required().label("密码"),
+const loginRef = ref<HTMLFormElement>()
+const loginForm = ref({
+  username: "admin",
+  password: "admin123",
+  rememberMe: false,
+  code: "",
+  uuid: "",
 })
+const loginRules = {
+  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
+  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
+  code: [{ required: true, trigger: "change", message: "请输入验证码" }],
+}
 
-//Form submit function
-const onSubmitLogin = async (values: any) => {
-  // Clear existing errors
-  store.logout()
+const codeUrl = ref("")
+const loading = ref(false)
+// 验证码开关
+const captchaEnabled = ref(false)
+// 注册开关
+const register = ref(false)
 
-  if (submitButton.value) {
-    // eslint-disable-next-line
-    submitButton.value!.disabled = true;
-    // Activate indicator
-    submitButton.value.setAttribute("data-kt-indicator", "on")
-  }
+function getCode() {
+  //
+}
 
-  // Send login request
-  store
-    .login(values.userName, values.password)
-    .then(() => {
-      Swal.fire({
-        text: "登录成功",
-        icon: "success",
-        buttonsStyling: false,
-        confirmButtonText: "确定",
-        heightAuto: false,
-        customClass: {
-          confirmButton: "btn fw-semobold btn-light-primary",
-        },
-      }).then(() => {
-        // Go to page after successfully login
-        //router.push({ name: "dashboard" })
-        appStore.menuStore.reLoadMenus()?.then(() => {
-          let queryRedirectPath = "/"
-          if (router.currentRoute.value.redirectedFrom?.fullPath) {
-            queryRedirectPath = router.currentRoute.value.redirectedFrom?.fullPath
+function handleLogin() {
+  loginRef.value?.validate((valid: boolean) => {
+    if (valid) {
+      loading.value = true
+      //勾选了需要记住密码设置在 cookie 中设置记住用户名和密码
+      // if (loginForm.value.rememberMe) {
+      //   Cookies.set("username", loginForm.value.username, { expires: 30 })
+      //   Cookies.set("password", encrypt(loginForm.value.password), { expires: 30 })
+      //   Cookies.set("rememberMe", loginForm.value.rememberMe ? "1" : "0", { expires: 30 })
+      // } else {
+      //   // 否则移除
+      //   Cookies.remove("username")
+      //   Cookies.remove("password")
+      //   Cookies.remove("rememberMe")
+      // }
+      store
+        .login(loginForm.value.username, loginForm.value.password)
+        .then(() => {
+          appStore.menuStore.reLoadMenus()?.then(() => {
+            let queryRedirectPath = "/"
+            if (router.currentRoute.value.redirectedFrom?.fullPath) {
+              queryRedirectPath = router.currentRoute.value.redirectedFrom?.fullPath
+            }
+            router.push({ path: queryRedirectPath })
+          })
+        })
+        .catch((e) => {
+          dialog.error(e)
+          loading.value = false
+          // 重新获取验证码
+          if (captchaEnabled.value) {
+            getCode()
           }
-          router.push({ path: queryRedirectPath })
         })
-      })
-    })
-    .catch((msg: string) => {
-      Swal.fire({
-        text: msg,
-        icon: "error",
-        buttonsStyling: false,
-        confirmButtonText: "再试一次!",
-        heightAuto: false,
-        customClass: {
-          confirmButton: "btn fw-semobold btn-light-danger",
-        },
-      })
-    })
-
-  //Deactivate indicator
-  submitButton.value?.removeAttribute("data-kt-indicator")
-  // eslint-disable-next-line
-        submitButton.value!.disabled = false;
+    }
+  })
 }
 </script>
 
 <template>
-  <!--begin::Wrapper-->
-  <div class="w-lg-500px p-10">
-    <!--begin::Form-->
-    <VForm
-      class="form w-100"
-      id="kt_login_signin_form"
-      @submit="onSubmitLogin"
-      :validation-schema="login"
-      :initial-values="{ userName: '', password: '' }"
-    >
-      <!--begin::Heading-->
-      <div class="text-center mb-10">
-        <!--begin::Title-->
-        <h1 class="text-dark mb-3">登录</h1>
-        <!--end::Title-->
-      </div>
-      <!--begin::Heading-->
-
-      <!--begin::Input group-->
-      <div class="fv-row mb-10">
-        <!--begin::Label-->
-        <label class="form-label fs-6 fw-bold text-dark">用户名</label>
-        <!--end::Label-->
-
-        <!--begin::Input-->
-        <Field
-          tabindex="1"
-          class="form-control form-control-lg form-control-solid"
-          type="text"
-          name="userName"
-          autocomplete="off"
-        />
-        <!--end::Input-->
-        <div class="fv-plugins-message-container">
-          <div class="fv-help-block">
-            <ErrorMessage name="userName" />
-          </div>
-        </div>
-      </div>
-      <!--end::Input group-->
-
-      <!--begin::Input group-->
-      <div class="fv-row mb-10">
-        <!--begin::Wrapper-->
-        <div class="d-flex flex-stack mb-2">
-          <!--begin::Label-->
-          <label class="form-label fw-bold text-dark fs-6 mb-0">密码</label>
-          <!--end::Label-->
-
-          <!--begin::Link-->
-          <!-- <router-link to="/password-reset" class="link-primary fs-6 fw-bold">Forgot Password ?</router-link> -->
-          <!--end::Link-->
-        </div>
-        <!--end::Wrapper-->
-
-        <!--begin::Input-->
-        <Field
-          tabindex="2"
-          class="form-control form-control-lg form-control-solid"
+  <div class="login">
+    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+      <h3 class="title">餐饮油烟在线监测系统</h3>
+      <el-form-item prop="username">
+        <el-input v-model="loginForm.username" type="text" size="large" auto-complete="off" placeholder="账号">
+          <template #prefix><KTIcon icon-name="user" class="el-input__icon input-icon fs-3" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="password">
+        <el-input
+          v-model="loginForm.password"
           type="password"
-          name="password"
-          autocomplete="off"
-        />
-        <!--end::Input-->
-        <div class="fv-plugins-message-container">
-          <div class="fv-help-block">
-            <ErrorMessage name="password" />
-          </div>
-        </div>
-      </div>
-      <!--end::Input group-->
-
-      <!--begin::Actions-->
-      <div class="text-center">
-        <!--begin::Submit button-->
-        <button
-          tabindex="3"
-          type="submit"
-          ref="submitButton"
-          id="kt_sign_in_submit"
-          class="btn btn-lg btn-primary w-100 mb-5"
+          size="large"
+          auto-complete="off"
+          placeholder="密码"
+          @keyup.enter="handleLogin"
         >
-          <span class="indicator-label">登录</span>
-
-          <span class="indicator-progress">
-            请稍后...
-            <span class="spinner-border spinner-border-sm align-middle ms-2"></span>
-          </span>
-        </button>
-        <!--end::Submit button-->
-      </div>
-      <!--end::Actions-->
-    </VForm>
-    <!--end::Form-->
+          <template #prefix><KTIcon icon-name="lock" class="el-input__icon input-icon fs-3" /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="code" v-if="captchaEnabled">
+        <el-input
+          v-model="loginForm.code"
+          size="large"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 63%"
+          @keyup.enter="handleLogin"
+        >
+          <template #prefix><KTIcon icon-name="shield" class="el-input__icon input-icon fs-3" /></template>
+        </el-input>
+        <div class="login-code">
+          <img :src="codeUrl" @click="getCode" class="login-code-img" />
+        </div>
+      </el-form-item>
+      <el-checkbox v-model="loginForm.rememberMe" style="margin: 0px 0px 25px 0px">记住密码</el-checkbox>
+      <el-form-item style="width: 100%">
+        <el-button :loading="loading" size="large" type="primary" style="width: 100%" @click.prevent="handleLogin">
+          <span v-if="!loading">登 录</span>
+          <span v-else>登 录 中...</span>
+        </el-button>
+        <div style="float: right" v-if="register">
+          <router-link class="link-type" :to="'/register'">立即注册</router-link>
+        </div>
+      </el-form-item>
+    </el-form>
+    <!--  底部  -->
+    <div class="el-login-footer">
+      <span>Copyright ©2018-{{ new Date().getFullYear() }} YouYan.Vber All Rights Reserved.</span>
+    </div>
   </div>
-  <!--end::Wrapper-->
 </template>
+
+<style lang="scss" scoped>
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  // background-image: url("../assets/images/login-background.jpg");
+  background-image: url("/public/media/auth/bg01.jpg");
+  background-size: cover;
+}
+.title {
+  margin: 0px auto 30px auto;
+  text-align: center;
+  color: #707070;
+}
+
+.login-form {
+  border-radius: 6px;
+  background: rgba(255, 255, 255, 0.9);
+  width: 400px;
+  padding: 25px 25px 5px 25px;
+  .el-input {
+    height: 40px;
+    input {
+      height: 40px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 0px;
+  }
+}
+.login-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.login-code {
+  width: 33%;
+  height: 40px;
+  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: 40px;
+  padding-left: 12px;
+}
+</style>