| | |
| | | <div class="login-container"> |
| | | <div class="login-box"> |
| | | <div class="login-header"> |
| | | <img src="/logo.jpg" alt="蓉易创Logo" class="logo" /> |
| | | <h2>蓉易创管理系统</h2> |
| | | <p>比赛管理平台</p> |
| | | </div> |
| | |
| | | import { useRouter } from 'vue-router' |
| | | import { ElMessage } from 'element-plus' |
| | | import type { FormInstance, FormRules } from 'element-plus' |
| | | // import { loginApi } from '@/utils/graphql' |
| | | import { setToken, setUserInfo } from '@/utils/auth' |
| | | |
| | | const router = useRouter() |
| | | const loginFormRef = ref<FormInstance>() |
| | |
| | | await loginFormRef.value.validate() |
| | | loading.value = true |
| | | |
| | | // TODO: 调用登录API |
| | | // 模拟登录 |
| | | setTimeout(() => { |
| | | localStorage.setItem('token', 'mock-token-' + Date.now()) |
| | | ElMessage.success('登录成功') |
| | | router.push('/') |
| | | loading.value = false |
| | | }, 1000) |
| | | // 调用RESTful登录API |
| | | const response = await fetch('/api/auth/web-login', { |
| | | method: 'POST', |
| | | headers: { |
| | | 'Content-Type': 'application/json' |
| | | }, |
| | | body: JSON.stringify({ |
| | | phone: loginForm.phone, |
| | | password: loginForm.password |
| | | }) |
| | | }) |
| | | |
| | | } catch (error) { |
| | | console.log('Response status:', response.status) |
| | | console.log('Response headers:', response.headers) |
| | | |
| | | // 检查响应是否为空 |
| | | const responseText = await response.text() |
| | | console.log('Response text:', responseText) |
| | | |
| | | if (!responseText) { |
| | | throw new Error('服务器返回空响应') |
| | | } |
| | | |
| | | let result |
| | | try { |
| | | result = JSON.parse(responseText) |
| | | } catch (jsonError) { |
| | | console.error('JSON解析错误:', jsonError) |
| | | console.error('响应内容:', responseText) |
| | | throw new Error('服务器响应格式错误') |
| | | } |
| | | |
| | | if (!response.ok) { |
| | | throw new Error(result.message || '登录失败') |
| | | } |
| | | |
| | | // 保存token和用户信息 |
| | | setToken(result.token) |
| | | setUserInfo(result.userInfo) |
| | | |
| | | ElMessage.success('登录成功') |
| | | router.push('/') |
| | | |
| | | } catch (error: any) { |
| | | console.error('登录失败:', error) |
| | | |
| | | // 显示错误信息 |
| | | let errorMessage = '登录失败' |
| | | if (error.message) { |
| | | if (error.message.includes('用户不存在')) { |
| | | errorMessage = '用户不存在,请检查手机号' |
| | | } else if (error.message.includes('密码不正确')) { |
| | | errorMessage = '密码不正确,请重新输入' |
| | | } else if (error.message.includes('没有权限')) { |
| | | errorMessage = '您没有访问权限,请联系管理员' |
| | | } else { |
| | | errorMessage = error.message |
| | | } |
| | | } |
| | | |
| | | ElMessage.error(errorMessage) |
| | | } finally { |
| | | loading.value = false |
| | | } |
| | | } |
| | |
| | | text-align: center; |
| | | margin-bottom: 30px; |
| | | |
| | | .logo { |
| | | width: 80px; |
| | | height: 80px; |
| | | object-fit: contain; |
| | | margin-bottom: 20px; |
| | | border-radius: 8px; |
| | | } |
| | | |
| | | h2 { |
| | | color: #303133; |
| | | font-size: 24px; |