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

<template>
  <div class="view-account">
    <div class="view-account-container">
      <div class="stylesWrap">
        <img :src="loginStyles" alt="" />
      </div>
      <div class="view-account-form">
        <div class="view-account-form-wrap">
          <div class="formTitle">
            <div class="dot"></div>
            内容管理平台登录
          </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 { PersonOutline, LockClosedOutline, LogoGithub, LogoFacebook } from '@vicons/ionicons5'
import { PageEnum } from '@/enums/pageEnum'
import { websiteConfig } from '@/config/website.config'
import loginStyles from './images/login_styles.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
        // return;
        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('登录成功，即将进入系统')
          console.log(route.name, LOGIN_NAME, toPath)
          if (route.name === LOGIN_NAME) {
            router.replace('/')
          } else router.replace(toPath)
        } else {
          // message.info(some.msg || "登录失败");
        }
      } 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;
  min-height: 100vh;
  width: 100vw;
  background-color: #e9f7ff;
  overflow: auto;

  &-container {
    margin-top: 10%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .stylesWrap {
      width: 40%;
      margin-right: 190px;
      img {
        width: 100%;
        // height: 100%;
      }
    }
  }
  &-form {
    width: 30%;
    .view-account-form-wrap {
      position: relative;
      padding: 12% 15% 12%;
      background: #ffffff;
      border-radius: 16px;
      .prefixIcon {
        width: 18px;
        height: 18px;
        margin-right: 5px;
      }
      .pwdIcon {
        width: 24px;
        height: 24px;
        cursor: pointer;
      }
      .formTitle {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 32px;

        font-weight: 600;
        color: #333333;
        line-height: 45px;
        margin-bottom: 50px;
        .dot {
          width: 6px;
          height: 21px;
          background: #3594fa;
          border-radius: 3px;
          margin-right: 8px;
        }
      }
    }
  }
  .submitBtm {
    margin-top: 20px;
    background: #3594fa;
    border-radius: 35px;
    font-size: 22px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #ffffff;
    height: 50px;
    line-height: 50px;
  }
  &-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;
    }
  }
}

// @media (min-width: 768px) {
//   .view-account {
//     // background-image: url("../../assets/images/login.svg");
//     // background-repeat: no-repeat;
//     // background-position: 50%;
//     // background-size: 100%;
//   }

//   .page-account-container {
//     padding: 32px 0 24px 0;
//   }
// }
</style>