tanghaolin
2025-04-15 8c3d15eae99d51193e20ff222dedf96cdba57b33
src/views/Login.vue
@@ -1,5 +1,5 @@
<template>
   <div class="login-container min-h-screen flex items-center justify-center">
   <div class="login-container min-h-screen flex items-center justify-center" v-loading="loading">
      <div class="login-background"></div>
      <div class="login-content max-w-md w-full relative z-10">
         <!-- 登录表单 -->
@@ -26,7 +26,7 @@
                  />
               </el-form-item>
               <el-form-item prop="captcha" class="flex space-x-4 mb-2">
               <!-- <el-form-item prop="captcha" class="flex space-x-4 mb-2">
                  <el-input
                     v-model="loginForm.captcha"
                     placeholder="请输入图片验证码"
@@ -35,7 +35,7 @@
                     class="custom-input flex-1 mr-2"
                  />
                  <img src="@/assets/login/captcha.png" alt="验证码" class="h-[40px] w-[100px] cursor-pointer" @click="refreshCaptcha" />
               </el-form-item>
               </el-form-item> -->
               <div class="flex items-center justify-between mb-4">
                  <el-checkbox v-model="loginForm.remember">记住账号</el-checkbox>
@@ -45,8 +45,8 @@
               <el-button type="primary" class="w-full" size="large" @click="handleLogin">登 录</el-button>
               <div class="mt-4 text-center space-x-2">
                  <router-link to="/register" class="text-[#40a9ff]">立即注册</router-link>
                  <span class="text-gray-300">·</span>
                  <!-- <router-link to="/register" class="text-[#40a9ff]">立即注册</router-link>
                  <span class="text-gray-300">·</span> -->
                  <router-link to="/" class="text-[#40a9ff]">返回首页</router-link>
               </div>
            </el-form>
@@ -59,11 +59,14 @@
import { Key, Lock, User } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useLogin } from '@/stores/useLogin';
import { useRoute } from 'vue-router';
import { useRouter } from 'vue-router';
import { login } from '@/api/login';
const router = useRouter();
const route = useRoute();
const formRef = ref();
const loginStore = useLogin();
const loginForm = reactive({
   username: '',
   password: '',
@@ -74,25 +77,61 @@
const rules = {
   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
   password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
   captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
   // captcha: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
};
const loading = ref(false);
const logingTipsEmun= {
    "-1": "账户不存在",
    "-2": "密码错误 ",
    "-3": "账号封停",
    "-4": "账号未绑定",
    "1": "正常",
  }
const handleLogin = () => {
   formRef.value.validate((valid: boolean) => {
      if (valid) {
         // 保存用户信息到localStorage
         const userInfo = {
            username: loginForm.username,
            isLogin: true,
         };
         localStorage.setItem('userInfo', JSON.stringify(userInfo));
         ElMessage.success('登录成功');
         router.push('/');
         submitLogin();
      } else {
         return false;
      }
   });
};
const submitLogin = () => {
   let form_data = {
      UserType: 0,
      LoginName:'demo',
      PassWord: '123456',
   };
   loading.value = true;
   login(form_data)
      .then((res) => {
         loading.value = false;
         let data = res.data.Data;
         if (res.data.Code !== 0) {
            ElMessage.error(res.data.Message);
            return;
         }
         if(data.Status !== 1){
            ElMessage.error(logingTipsEmun[data.Status]);
            return;
         }
         let { redirectPath } = route.query;
         let redirect = '/';
         if (redirectPath != null) {
            redirect = redirectPath;
         }
         //存储登录成功后的用户信息
         loginStore.init(data.User);
         ElMessage.success('登录成功');
         router.replace(redirect);
      })
      .catch((err) => {
         loading.value = false;
         ElMessage.error(err);
      });
};
const refreshCaptcha = () => {
   // 刷新验证码的逻辑