resource-admin/src/views/login/index.vue

<template>
  <div class="view-account">
    <div class="view-account-container">
      <div class="view-account-left">
        <img :src="loginMain" />
      </div>
      <div class="view-account-form">
        <div class="view-account-form-wrap">
          <div class="formTitle">
            <img :src="loginLogo" />
          </div>
          <n-form
            ref="formRef"
            label-placement="left"
            size="large"
            :model="formInline"
            :rules="rules"
          >
            <n-form-item path="username">
              <n-input v-model:value="formInline.username" placeholder="请输入用户名">
                <template #prefix>
                  <img :src="useIcon" class="prefixIcon" alt="" />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="password">
              <n-input
                v-model:value="formInline.password"
                type="text"
                showPasswordOn="click"
                placeholder="请输入密码"
                autocomplete="off"
                :class="[showPwd ? '' : 'no-pwd']"
                :loading="loading"
                @keydown.enter="
                  (event:any) => {
                    event.target.blur();
                    handleSubmit(event);
                  }
                "
              >
                <template #prefix>
                  <img :src="lockIcon" class="prefixIcon" alt="" />
                </template>
                <template #suffix>
                  <img
                    :src="showPwd ? closeEye : openEye"
                    class="pwdIcon"
                    alt=""
                    @click="
                      () => {
                        showPwd = !showPwd
                      }
                    "
                  />
                </template>
              </n-input>
            </n-form-item>
            <n-form-item class="default-color">
              <div class="flex justify-between">
                <div class="flex-initial">
                  <n-checkbox v-model:checked="autoLogin">记住密码</n-checkbox>
                </div>
                <!-- <div class="flex-initial order-last">
                <a href="javascript:">忘记密码</a>
              </div> -->
              </div>
            </n-form-item>
            <n-form-item>
              <n-button
                class="submitBtm"
                type="primary"
                @click="handleSubmit"
                size="large"
                :loading="loading"
                block
              >
                登录
              </n-button>
            </n-form-item>
          </n-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/store/modules/user'
import { useMessage } from 'naive-ui'
import { ResultEnum } from '@/enums/httpEnum'
import { storage } from '@/utils/storage'
import { PageEnum } from '@/enums/pageEnum'
import { websiteConfig } from '@/config/website.config'
import loginMain from './images/login-main.png'
import loginLogo from './images/login-logo.png'
import lockIcon from './images/lock-icon.png'
import useIcon from './images/user-icon.png'
import openEye from './images/openEye.png'
import closeEye from './images/closeEye.png'
import { useTabsViewStore } from '@/store/modules/tabsView'
import { TABS_ROUTES } from '@/store/mutation-types'
interface FormState {
  username: string
  password: string
  grant_type: string
  loginType: string
  client_id: string
  client_secret: string
}

const formRef = ref()
const message = useMessage()
const loading = ref(false)
const autoLogin = ref(true)
const LOGIN_NAME = PageEnum.BASE_LOGIN_NAME
const tabsViewStore = useTabsViewStore()
const showPwd = ref(false)
let formInline = reactive({
  username: '',
  password: '',
  isCaptcha: true
})
const formInlineHistory = storage.get('userInfo')
if (formInlineHistory) {
  formInline = reactive({ ...JSON.parse(formInlineHistory) })
}
const rules = {
  username: { required: true, message: '请输入用户名', trigger: 'blur' },
  password: { required: true, message: '请输入密码', trigger: 'blur' }
}

const userStore = useUserStore()

const router = useRouter()
const route = useRoute()

const handleSubmit = (e: any) => {
  e.preventDefault()
  localStorage.removeItem(TABS_ROUTES)
  formRef.value.validate(async (errors: any) => {
    if (!errors) {
      const { username, password } = formInline
      message.loading('登录中...')
      loading.value = true

      const params: FormState = {
        username,
        password,
        loginType: 'password',
        grant_type: 'password',
        client_id: 'dayaedu-backend',
        client_secret: 'dayaedu-backend'
      }

      try {
        const some = (await userStore.login(params)) as any
        message.destroyAll()
        if (some.code == ResultEnum.SUCCESS) {
          //  判断是否勾选自动登录
          if (autoLogin) {
            storage.set('userInfo', JSON.stringify(formInline))
          } else {
            storage.remove('userInfo')
          }

          // route.query?.redirect ||
          tabsViewStore.closeAllTabs()
          const toPath = decodeURIComponent('/' as string)

          message.success('登录成功，即将进入系统')
          if (route.name === LOGIN_NAME) {
            router.replace('/').then(() => {
              loading.value = false
            })
          } else {
            router.replace(toPath).then(() => {
              loading.value = false
            })
          }
        }
      } catch {
        loading.value = false
      } finally {
        // loading.value = false
      }
    }
    //  else {
    //   message.error('请填写完整信息，并且进行验证码校验')
    // }
  })
}
</script>

<style lang="less" scoped>
.no-pwd {
  font-family: 'dotfont';
  ::v-deep .n-input__input-el {
    -webkit-text-security: disc !important;
    -moz-text-security: disc !important;
  }
}
.view-account {
  background: url('./images/login-bg.png') no-repeat 100% 100%;
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  width: 100vw;
  background-color: #e9f7ff;
  overflow: auto;

  &-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 1038px;
    height: 516px;
    background: #e8f2fe;
    border-radius: 18px 73px 18px 73px;
    border: 4px solid #ffffff;
    // margin: 10% auto 0;
  }
  &-left {
    margin-right: 10px;
    img {
      width: 475px;
      height: 433px;
    }
  }
  &-form {
    margin-right: 18px;
    width: 506px;
    height: 480px;
    background: #ffffff;
    box-shadow: 0px 1 14px 0px rgba(141, 141, 141, 0.05);
    border-radius: 21px 62px 21px 62px;

    .n-input {
      --n-border: 1px solid #dedede !important;
      --n-border-radius: 13px !important;
    }

    /deep/ .n-base-suffix {
      display: none !important;
    }

    .view-account-form-wrap {
      position: relative;
      padding: 25px 80px 0;
      .prefixIcon {
        width: 16px;
        height: 16px;
        margin-right: 5px;
      }
      .pwdIcon {
        width: 18px;
        height: 18px;
        cursor: pointer;
      }
      .formTitle {
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 209px;
        height: 101px;
        margin: 0 auto 38px;
        img {
          width: inherit;
          height: inherit;
        }
      }
    }
  }
  .submitBtm {
    margin-top: 20px;
    background: #3594fa;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    line-height: 22px;
  }
  &-top {
    padding: 32px 0;
    text-align: center;

    &-desc {
      font-size: 14px;
      color: #808695;
    }
  }

  &-other {
    width: 100%;
  }

  .default-color {
    color: #515a6e;

    .ant-checkbox-wrapper {
      color: #515a6e;
    }
  }
}
</style>