pdhw-web/src/views/login/LoginPage.vue

<template>
  <div class="login-wrapper">
    <div class="content">
      <span class="sys-type animate__animated animate__bounceIn">企业端</span>
      <img src="@/assets/imgs/login/logo-ent.png" alt="" class="logo" />
      <div class="main">
        <span class="main-title">浦东航务云平台</span>
        <el-form :model="formData" class="main-form" :rules="formRules" ref="form">
          <el-form-item prop="userName">
            <el-input v-model="formData.userName" placeholder="账号">
              <template #prefix>
                <i class="input-prefix icon-username"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="formData.password" type="password" placeholder="密码">
              <template #prefix>
                <i class="input-prefix icon-password"></i>
              </template>
            </el-input>
          </el-form-item>
          <el-form-item prop="vCode">
            <el-input v-model="formData.vCode" placeholder="验证码">
              <template #prefix>
                <i class="input-prefix icon-vcode"></i>
              </template>
              <template #suffix>
                <canvas @click="changeValidCode" id="validCode" class="valid-code"></canvas>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <el-button
          class="main-btn animate__animated"
          :class="{ animate__headShake: loginDeny }"
          :loading="isLoading"
          @click="handleLogin"
          >登录
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref } from 'vue'
// @ts-ignore
import { drawPic } from '@/utils/valid-code'
import { ElMessage } from 'element-plus'
import 'element-plus/es/components/message/style/css'
import type { FormInstance, FormRules } from 'element-plus'

onMounted(() => {
  changeValidCode()
})

interface IForm {
  userName: string
  password: string
  vCode: string
  vCodeReal: string
}

const formData = reactive<IForm>({
  userName: '',
  password: '',
  vCode: '',
  vCodeReal: ''
})

const formRules = reactive<FormRules<IForm>>({
  userName: [{ required: true, message: '请输入账号', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
  vCode: [
    {
      required: true,
      trigger: 'blur',
      validator: (rule: any, value: string, callback: any) => {
        if (value === '') {
          callback(new Error('请输入验证码'))
        } else {
          let reg = new RegExp(`^${formData.vCodeReal}$`, 'i')
          if (!reg.test(value)) {
            callback(new Error('验证码错误'))
            changeValidCode()
            setTimeout(() => {
              formData.vCode = ''
            }, 200)
          } else {
            callback()
          }
        }
      }
    }
  ]
})

function changeValidCode() {
  formData.vCodeReal = drawPic()
}

const isLoading = ref<boolean>(false)

const form = ref<FormInstance>()

const loginDeny = ref<boolean>(false)

function handleLogin() {
  form.value?.validate((valid: boolean) => {
    if (valid) {
      isLoading.value = true
      // 登录处理
      ElMessage({ type: 'success', message: '验证通过' })
      // let Base64 = require("js-base64").Base64
      /* Login(
        this.formData.userName,
        // Base64.encode(this.formData.password),
        this.formData.password
      ).then(res => {
        
      }) */

      setTimeout(() => {
        isLoading.value = false
      }, 2000)
    } else {
      loginDeny.value = true
      setTimeout(() => {
        loginDeny.value = false
      }, 1000)
    }
  })
}
</script>

<style lang="scss" scoped>
.login-wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1366px;
  min-height: 768px;
  background: url('@/assets/imgs/login/bg.jpg') no-repeat;
  background-size: cover;
  background-position: center;
  user-select: none;

  .content {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
    width: 1230px;
    height: 747px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: space-around;

    .sys-type {
      position: absolute;
      color: #404040;
      top: 27px;
      left: 39px;
      font-size: 18px;
    }

    .logo {
      width: 567px;
      height: 536px;
    }

    .main {
      height: 460px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;

      .main-title {
        font-size: 30px;
        font-weight: bold;
        color: #404040;
      }

      .main-form {
        height: 220px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        :deep(.el-form-item) {
          .el-input {
            width: 348px;
            height: 42px;
            .el-input__wrapper {
              box-shadow: none !important;
              border: none;
              border-bottom: 1px solid #d3d3d3;
              border-radius: 0;
              display: flex;
              align-items: center;
            }
            .el-input__inner {
              font-size: 20px;
              color: #999999;
              // padding: 0 0 0 10px;
              height: 100%;
            }
          }
          .el-form-item__error {
            font-size: 14px;
            margin: 6px 0 0 55px;
          }
        }
        .input-prefix {
          display: block;
          width: 32px;
          height: 32px;
          &.icon-username {
            background: url('@/assets/imgs/login/icon-account.png');
            background-size: contain;
          }
          &.icon-password {
            background: url('@/assets/imgs/login/icon-pwd.png');
            background-size: contain;
          }
          &.icon-vcode {
            background: url('@/assets/imgs/login/icon-code.png');
            background-size: contain;
          }
        }
        .valid-code {
          width: 90px;
          height: 36px;
          cursor: pointer;
        }
      }

      .main-btn {
        width: 348px;
        height: 60px;
        background: #1966ff;
        border-radius: 30px;
        font-size: 22px;
        color: #fefefe;
        &:hover {
          filter: brightness(1.2);
        }
      }
    }
  }
}
</style>