web/src/views/login/index.vue
@@ -2,6 +2,7 @@
  <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>
@@ -62,6 +63,8 @@
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>()
@@ -93,17 +96,68 @@
    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
  }
}
@@ -130,6 +184,14 @@
  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;