tanghaolin
2025-03-06 a09f89b935e9a0085c5bcdb470e053ddad1f7187
src/views/Login.vue
@@ -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>
@@ -59,14 +59,17 @@
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: '',
   username: 'demo',
   password: '123456',
   captcha: '',
   remember: false,
});
@@ -74,25 +77,41 @@
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 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 = async () => {
   let form_data = {
      UserType: 0,
      LoginName: loginForm.username,
      PassWord: loginForm.password,
   };
   let res = await login(form_data);
   let data = res.Data;
   if (res.Code !== 0) {
      ElMessage.error(res.Message);
      return;
   }
   let { redirectPath } = route.query;
   let redirect = "/";
   if (redirectPath != null) {
      redirect = redirectPath;
   }
   //存储登录成功后的用户信息
   loginStore.init(data.User);
   ElMessage.success('登录成功');
   router.replace(redirect);
};
const refreshCaptcha = () => {
   // 刷新验证码的逻辑