healthapp/TODOS/03-Web原型开发/03-登录页面.md

03-登录页面（原型）

目标

实现 Web 端登录页面原型，使用模拟数据验证登录。

---

UI 设计参考

参考设计稿：files/ui/登录页.png

---

前置要求

• 路由配置完成
• 模拟数据服务已创建

---

实施步骤

创建登录页面

创建 src/views/auth/LoginView.vue：

<template>
  <div class="login-page">
    <div class="login-header">
      <div class="logo">
        <el-icon size="48" color="#fff"><FirstAidKit /></el-icon>
      </div>
      <h1>欢迎来到AI健康助手</h1>
    </div>

    <el-card class="login-card">
      <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-position="top"
        size="large"
      >
        <el-form-item label="手机号" prop="phone">
          <el-input
            v-model="form.phone"
            placeholder="请输入手机号或邮箱"
            :prefix-icon="User"
            maxlength="11"
          />
        </el-form-item>

        <el-form-item label="验证码" prop="code">
          <div class="code-row">
            <el-input
              v-model="form.code"
              placeholder="请输入验证码"
              :prefix-icon="Lock"
              maxlength="6"
            />
            <el-button
              :disabled="countdown > 0"
              @click="sendCode"
            >
              {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
            </el-button>
          </div>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            :loading="loading"
            class="login-btn"
            @click="handleLogin"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>

      <div class="login-hint">
        测试账号：13800138000，验证码：123456
      </div>

      <div class="login-footer">
        <span>还没有账号？</span>
        <el-link type="primary">立即注册</el-link>
      </div>

      <div class="agreement">
        <el-link type="primary">《用户协议》</el-link>
        <el-link type="primary">《隐私政策》</el-link>
        <span>登录即表示您同意我们的</span>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import { useAuthStore } from '@/stores/auth'
import { mockLogin } from '@/mock/user'

const router = useRouter()
const authStore = useAuthStore()
const formRef = ref()
const loading = ref(false)
const countdown = ref(0)

const form = reactive({
  phone: '13800138000',
  code: ''
})

const rules = {
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1\d{10}$/, message: '手机号格式不正确', trigger: 'blur' }
  ],
  code: [
    { required: true, message: '请输入验证码', trigger: 'blur' },
    { len: 6, message: '验证码为6位数字', trigger: 'blur' }
  ]
}

const sendCode = () => {
  if (!form.phone || !/^1\d{10}$/.test(form.phone)) {
    ElMessage.warning('请输入正确的手机号')
    return
  }
  
  countdown.value = 60
  const timer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      clearInterval(timer)
    }
  }, 1000)
  
  ElMessage.success('验证码已发送，测试验证码为：123456')
}

const handleLogin = async () => {
  await formRef.value?.validate()
  
  loading.value = true
  try {
    const user = await mockLogin(form.phone, form.code)
    if (user) {
      authStore.login(user)
      ElMessage.success('登录成功')
      router.push('/')
    } else {
      ElMessage.error('验证码错误，请输入：123456')
    }
  } finally {
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
.login-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #10B981 0%, #2EC4B6 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 60px 20px;
}

.login-header {
  text-align: center;
  margin-bottom: 40px;
  
  .logo {
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  
  h1 {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
  }
}

.login-card {
  width: 100%;
  max-width: 400px;
  border-radius: 16px;
  
  .code-row {
    display: flex;
    gap: 12px;
    
    .el-input {
      flex: 1;
    }
  }
  
  .login-btn {
    width: 100%;
    height: 48px;
    border-radius: 24px;
    font-size: 16px;
  }
  
  .login-hint {
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
    margin-bottom: 16px;
  }
  
  .login-footer {
    text-align: center;
    color: #6B7280;
    
    .el-link {
      margin-left: 4px;
    }
  }
  
  .agreement {
    margin-top: 24px;
    text-align: center;
    font-size: 12px;
    color: #9CA3AF;
    
    .el-link {
      font-size: 12px;
    }
  }
}
</style>

---

验收标准

• 登录页面 UI 正常显示
• 验证码倒计时正常
• 表单验证正常
• 正确验证码可登录成功
• 登录成功后跳转到首页

---

预计耗时

20-25 分钟

---

下一步

完成后进入 03-Web原型开发/04-首页.md