deepChartBack/src/views/Login.vue

<template>
  <!-- 背景容器 -->
  <div class="login-bg">
    <!-- 登录表单 -->
    <div class="login-form">
      <h3>欢迎登录系统</h3>
      <el-form :model="loginForm" label-width="0" class="form-item">
        <!-- 账号输入框 -->
        <el-form-item>
          <el-input v-model="loginForm.username" prefix-icon="User" placeholder="请输入登录账号" clearable @input="clearErrorMsg"/>
        </el-form-item>
        <!-- 密码输入框 -->
        <el-form-item>
          <el-input v-model="loginForm.password" prefix-icon="Lock" type="password" placeholder="请输入登录密码" clearable @input="clearErrorMsg"/>
        </el-form-item>
        <!-- 错误提示 -->
        <div v-show="errorMsg" class="error-tip fixed-height">{{ errorMsg }}</div>
        <div v-show="!errorMsg" class="error-placeholder fixed-height"></div>
        <!-- 记住密码复选框 -->
        <el-form-item class="remember">
          <el-checkbox v-model="loginForm.remember">记住密码</el-checkbox>
        </el-form-item>
        <!-- 登录按钮 -->
        <el-form-item>
          <el-button type="primary" style="width: 100%;" @click="handleLogin">
            登 录
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { loginApi } from '../api/userPermissions'

const router = useRouter();

// 表单数据
const loginForm = ref({
  username: '',
  password: '',
  remember: false
});

// 错误提示
const errorMsg = ref('');

// 页面加载时，自动填充“记住的账号密码”
onMounted(() => {
  const storedLogin = localStorage.getItem('deepchart_login');
  if (storedLogin) {
    const { username, password, remember } = JSON.parse(storedLogin);
    loginForm.value.username = username;
    loginForm.value.password = password;
    loginForm.value.remember = remember;
  }
});

// 输入时清空错误提示
const clearErrorMsg = () => {
  errorMsg.value = '';
};

// 登录逻辑：包含表单校验、消息提醒、记住密码存储
const handleLogin = async() => {
  // 先清空之前的错误提示
  errorMsg.value = '';

  // 校验必填项
  if (!loginForm.value.username && !loginForm.value.password) {
    errorMsg.value = '请输入账号和密码后再登录'; 
    return;
  }
  if (!loginForm.value.username) {
    errorMsg.value = '账号为必填项，请输入账号';
    return;
  }
  if (!loginForm.value.password) {
    errorMsg.value = '密码为必填项，请输入密码';
    return;
  }

  // 登录
  try {
    const res = await loginApi({
      username: Number(loginForm.value.username),
      password: loginForm.value.password,
      app_from: 'en'
    });
    const data = res.data;

    if (data && data.data.token) { 
      localStorage.setItem('token', data.data.token);
      // “记住密码”存储
      if (loginForm.value.remember) {
        localStorage.setItem('deepchart_login', JSON.stringify({
          username: loginForm.value.username,
          password: loginForm.value.password,
          remember: true
        }));
      } else {
        localStorage.removeItem('deepchart_login');
      }

      // 跳转到首页
      router.push('/');
    } else {
      errorMsg.value = '账号或密码有误，请重新输入';
    }
  } catch (error) {
    errorMsg.value = '登录失败，请稍后重试';
    console.error('登录请求异常：', error);
  }
};
</script>

<style scoped>
/* 背景图全屏样式 */
.login-bg {
  background-image: url('../assets/images/login.png'); 
  background-size: cover;
  background-position: center;
  height: calc(100vh - 16px);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 表单样式 */
.login-form {
  margin-left: 650px;
  width: 400px; 
  padding: 40px 30px;
}

/* 标题样式 */
.login-form h3 {
  text-align: center;
  margin-bottom: 50px; 
  color: #2d3748;
  font-size: 24px; 
  font-weight: 600;
}

.form-item {
  width: 100%;
}

/* 输入框区域 */
.el-form-item {
  margin-bottom: 30px;
}

.el-input {
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  height: 48px; 
}

.el-input__inner {
  padding: 0 16px;
  font-size: 16px; 
}

.el-input__placeholder {
  font-size: 16px !important; 
}

/* 记住密码 */
.remember {
  text-align: left;
  margin-bottom: 32px; 
  font-size: 15px; 
  color: #4b5563;
}

.el-checkbox__label {
  font-size: 15px !important; 
  margin-left: 8px !important;
}

/* 登录按钮 */
.el-button--primary {
  height: 52px; 
  font-size: 18px;
  border-radius: 4px;
  background-color: #1890ff;
  border: none;
}

.el-button--primary:hover {
  background-color: #096dd9;
}

/* 图标大小适配 */
.el-input__prefix {
  font-size: 18px !important;
}

/* 错误提示 */
.error-tip {
  color: #ff4d4f;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  line-height: 1.5;
  overflow: hidden; 
}

.error-placeholder {
  visibility: hidden; 
}

.fixed-height {
  height: 21px; 
  margin-bottom: 6px;
}

</style>