aircraft-web/src/views/login/index.vue

<template>
  <div class="login-container">
    <!-- 背景图 -->
    <div class="background-left">
      <img class="background-image" :src="loginbg" alt="背景图">
    </div>

    <!-- 头部 -->
     <div class="header">
      <myheader />
    </div>
    
    <!-- 登录框 -->
    <div class="login-form-container">
      <div class="login-box">
        <el-card class="login-card" shadow="never">
          <template #header>
            <div class="login-header">
              <!-- <img :src="loginLogo" alt="logo" class="login-logo"/> -->
              <h2>欢迎登录</h2>
            </div>
          </template>

          <el-form
            :model="loginForm"
            :rules="loginRules"
            ref="loginFormRef"
            @keyup.enter="handleLogin"
            hide-required-asterisk
            label-position="left"
          >
            <el-form-item prop="username" 
            label="邮箱：" 
            style="margin-bottom: 20px;" 
            label-width="100px">
              <el-input
                v-model="loginForm.username"
                prefix-icon="User"
                clearable
              />
            </el-form-item>

            <el-form-item prop="password" 
            label="密码：" 
            style="margin-bottom: 20px;" 
            label-width="100px">
              <el-input
                v-model="loginForm.password"
                prefix-icon="Lock"
                show-password
                clearable
              />
            </el-form-item>
          
            <el-form-item prop="remember" style="margin-bottom: 20px;">
              <div style="width: 100%; display: flex; justify-content: space-between;">
                <el-checkbox v-model="loginForm.remember" class="remember-me">记住密码</el-checkbox>
                <el-link type="info" class="forgot-password">忘记密码</el-link>
              </div>
            </el-form-item>

            <el-form-item>
              <el-button
                type="primary"
                class="login-btn"
                :loading="loading"
                @click="handleLogin"
                
              >
              登录
              </el-button>
            </el-form-item>
          </el-form>
        
          <div class="login-footer">
            <div class="register-prompt">没有账号？点击</div>
            <el-link type="primary" @click="goToRegister">注册</el-link>
          </div>
        </el-card>
      </div>
      
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import router from "@/router"
import { request,enPassword } from "@/utils/request"
import secureStorage from '@/utils/secureStorage'
import { message } from '@/utils/message'

import { getToken, setToken, setUserId} from "@/utils/token"
import { useUserStore } from '@/store/user'

import loginbg from '@/assets/img/login-bg.png'

import myheader from '@/components/layout/header.vue'

// 表单引用
const loginFormRef = ref(null)

// 获取userStore实例
const userStore = useUserStore()

// 登录表单数据
const loginForm = reactive({
  username: secureStorage.get('savedUsername') || '',
  password: secureStorage.get('savedPassword') || '',
  remember: secureStorage.get('rememberPassword') === 'true'
})

// 加载状态
const loading = ref(false)

// 表单验证规则
const loginRules = reactive({
  username: [
    { min: 3, max: 18, message: '用户名长度在3到18个字符之间', trigger: 'blur' }
  ],
  password: [
    { min: 6, max: 18, message: '密码长度在6到18个字符之间', trigger: 'blur' }
  ]
})


// 登录方法
const handleLogin = () => {
  loginFormRef.value.validate(valid => {
    if (!valid) return
    // 检查是否有输入用户名和密码
    if (!loginForm.username || !loginForm.password) {
      message.error( '请输入用户名和密码');
      return;
    }
    if (loginForm.remember) {
        secureStorage.set('savedUsername', loginForm.username)
        secureStorage.set('savedPassword', loginForm.password)
        secureStorage.set('rememberPassword', 'true')
      } else {
        secureStorage.remove('savedUsername')
        secureStorage.remove('savedPassword')
        secureStorage.remove('rememberPassword')
      }
    loading.value = true
    
    const params = {
      transCode: "A00002",
      loginName: loginForm.username,
      password: enPassword(loginForm.password),
      type: "",
    }
    // console.log(params)
    request(params)
    .then((res) => {
      setToken(res.clientToken)
      setUserId(res.userId)

      userStore.setToken(res.clientToken)
      // 存储用户信息到pinia
      userStore.setUserInfo({
        userId: res.userId,
        userName: res.userName,
        nickName: res.nickName,
        userType: res.userType,
        regTime: res.regTime,
        email: res.email || '',
        mobileNo: res.mobileNo,
      })

      router.push({ path: "/project" })
    })
    .catch((err) => {
      console.error('错误信息：',err);
      message.error(err.returnMsg);
      loading.value = false;
    })
    .finally(() => {
      loading.value = false
    });
    
  })
}

// 跳转到注册页面
const goToRegister = () => {
  router.push({ path: "/register" })
}
</script>

<style lang="scss" scoped>
.login-container {
  position: relative;
  width: 100%;
  height: 100vh;
  min-width: 1200px;
  min-height: 600px;
  display: flex;
  overflow: auto;
}

.background-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  z-index: 0;
}

.header {
  width: 100%;
  height: 70px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
}

.background-left {
  width: 100%;
  height: 100%;
}

.login-form-container {
  position: absolute;
  right: 54%;
  width: 46%;
  height: 100%;
}

.login-box {
  height: 100%;
  // background-color: rgba(255, 255, 255, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-card {
  border: none !important;
  width: 55%;
  background-color: transparent;
  :deep(.el-card__header) {
    border-bottom: none;
    padding-bottom: 0;
  }
}

.login-card {
  // 设置label文字大小
  :deep(.el-form-item__label) {
    font-size: 14px;
    font-weight: 400;
    line-height: 39px; /* 保持垂直居中 */
    color: #2CFFFF; /* 可选：设置label颜色 */
    text-align: left;
  }
  
  // 设置输入框文字大小
  :deep(.el-input__inner) {
    font-size: 14px;
    height: 39px; /* 可选：调整输入框高度 */
    line-height: 39px; /* 保持垂直居中 */
  }

  :deep(.el-input__wrapper) {
    background-color: transparent;
    // border: 1px solid #B3B3B3;
    height: 39px;
  }
  
  // 设置placeholder文字大小
  :deep(.el-input__inner::placeholder) {
    font-size: 14px;
  }
}

.login-header {
  text-align: start;
  // width: 75%;
  margin-bottom: 30px;

  h2 {
    margin: 0;
    font-size: 26px;
    font-weight: 400;
    color: #2CFFFF;
    margin: 10px 0;
    font-style: normal;
    text-transform: none;
    letter-spacing: 1px;
  }
}

.login-logo {
  width: 110px;
  // margin-bottom: 18px;
  transform: translateX(-20px); /* 向左移动10px */
}

.forgot-password{
  color: #2CFFFF;
}

.remember-me {
  color: #FFFFFF;
}

// 选中的checkbox样式
:deep(.el-checkbox__input.is-checked+.el-checkbox__label) {
  color: #2CFFFF;
}
// 选中状态的checkbox背景色和边框色
:deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
  background-color: #2CFFFF;
  border-color: #2CFFFF;
}

.login-btn {
  width: 100%;
  height: 42px;
  margin-top: 10px;
  font-size: 16px;
  background: linear-gradient( 355deg, #00ABFF 0%, #023187 100%);
  border-radius: 0px 0px 0px 0px;
  border: 2px solid #52C6FF;
}

.login-footer {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}

.register-prompt {
  margin-right: 5px;
  font-size: 12px;
  color: #FFFFFF;
}

:deep(.el-link__inner){
  color: #2CFFFF;
}

</style>