登录注册、手机号、邮箱

schoolNewsWeb/src/views/public/login/Login.vue

@@ -24,7 +24,23 @@
             </div>
             <h1 class="platform-title">红色思政学习平台</h1>
           </div>
-          <h2 class="login-title">账号登录</h2>
+          <h2 class="login-title">{{ loginModeTitle }}</h2>
+        </div>
+        
+        <!-- 登录方式切换 -->
+        <div class="login-mode-tabs">
+          <div 
+            :class="['tab-item', { active: loginMode === 'password' }]" 
+            @click="switchLoginMode('password')"
+          >
+            密码登录
+          </div>
+          <div 
+            :class="['tab-item', { active: loginMode === 'captcha' }]" 
+            @click="switchLoginMode('captcha')"
+          >
+            验证码登录
+          </div>
         </div>
         
         <!-- 登录表单 -->
@@ -35,23 +51,104 @@
           class="login-form"
           @submit.prevent="handleLogin"
         >
-          <el-form-item prop="username">
-            <el-input
-              v-model="loginForm.username"
-              placeholder="请输入学号、手机号"
-              class="form-input"
-            />
-          </el-form-item>
+          <!-- 密码登录模式 -->
+          <template v-if="loginMode === 'password'">
+            <el-form-item prop="username">
+              <el-input
+                v-model="loginForm.username"
+                placeholder="请输入学号、手机号、邮箱"
+                class="form-input"
+              />
+            </el-form-item>
+            
+            <el-form-item prop="password">
+              <el-input
+                v-model="loginForm.password"
+                type="password"
+                placeholder="请输入密码"
+                show-password
+                class="form-input"
+              />
+            </el-form-item>
+          </template>
           
-          <el-form-item prop="password">
-            <el-input
-              v-model="loginForm.password"
-              type="password"
-              placeholder="请输入密码"
-              show-password
-              class="form-input"
-            />
-          </el-form-item>
+          <!-- 验证码登录模式 -->
+          <template v-else>
+            <!-- 登录方式选择 -->
+            <div class="captcha-type-tabs">
+              <div 
+                :class="['captcha-tab-item', { active: captchaType === 'phone' }]" 
+                @click="switchCaptchaType('phone')"
+              >
+                手机号
+              </div>
+              <div 
+                :class="['captcha-tab-item', { active: captchaType === 'email' }]" 
+                @click="switchCaptchaType('email')"
+              >
+                邮箱
+              </div>
+            </div>
+            
+            <!-- 手机号验证码登录 -->
+            <template v-if="captchaType === 'phone'">
+              <el-form-item prop="phone">
+                <el-input
+                  v-model="loginForm.phone"
+                  placeholder="请输入手机号"
+                  class="form-input"
+                  maxlength="11"
+                />
+              </el-form-item>
+              
+              <el-form-item prop="captcha">
+                <div class="captcha-input-container">
+                  <el-input
+                    v-model="loginForm.captcha"
+                    placeholder="请输入验证码"
+                    class="form-input captcha-input"
+                    maxlength="6"
+                  />
+                  <el-button
+                    class="send-captcha-btn"
+                    :disabled="smsCountdown > 0"
+                    @click="handleSendSmsCode"
+                  >
+                    {{ smsCountdown > 0 ? `${smsCountdown}秒后重试` : '获取验证码' }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </template>
+            
+            <!-- 邮箱验证码登录 -->
+            <template v-else>
+              <el-form-item prop="email">
+                <el-input
+                  v-model="loginForm.email"
+                  placeholder="请输入邮箱"
+                  class="form-input"
+                />
+              </el-form-item>
+              
+              <el-form-item prop="captcha">
+                <div class="captcha-input-container">
+                  <el-input
+                    v-model="loginForm.captcha"
+                    placeholder="请输入验证码"
+                    class="form-input captcha-input"
+                    maxlength="6"
+                  />
+                  <el-button
+                    class="send-captcha-btn"
+                    :disabled="emailCountdown > 0"
+                    @click="handleSendEmailCode"
+                  >
+                    {{ emailCountdown > 0 ? `${emailCountdown}秒后重试` : '获取验证码' }}
+                  </el-button>
+                </div>
+              </el-form-item>
+            </template>
+          </template>
           
           <el-form-item>
             <div class="login-options">
@@ -75,8 +172,11 @@
             >
               登录
             </el-button>
+          </el-form-item>
+          
+          <el-form-item prop="agree">
             <p class="agreement-text">
-              <el-checkbox v-model="loginForm.rememberMe">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
+              <el-checkbox v-model="loginForm.agree">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
             </p>
           </el-form-item>
         </el-form>
@@ -96,11 +196,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, onMounted } from 'vue';
+import { ref, reactive, onMounted, computed } from 'vue';
 import { useRouter, useRoute } from 'vue-router';
 import { useStore } from 'vuex';
 import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
 import type { LoginParam } from '@/types';
+import { LoginType } from '@/types/enums';
 import { authApi } from '@/apis/system/auth';
 
 // 响应式引用
@@ -109,6 +210,15 @@ const loginLoading = ref(false);
 const showCaptcha = ref(false);
 const captchaImage = ref('');
 
+// 登录模式：password-密码登录，captcha-验证码登录
+const loginMode = ref<'password' | 'captcha'>('password');
+// 验证码类型：phone-手机号，email-邮箱
+const captchaType = ref<'phone' | 'email'>('phone');
+
+// 倒计时
+const smsCountdown = ref(0);
+const emailCountdown = ref(0);
+
 // Composition API
 const router = useRouter();
 const route = useRoute();
@@ -116,39 +226,222 @@ const store = useStore();
 
 // 表单数据
 const loginForm = reactive<LoginParam>({
+  loginType: undefined,
   username: '',
+  phone: '',
+  email: '',
   password: '',
   captcha: '',
   captchaId: '',
-  rememberMe: false
+  rememberMe: false,
+  agree: false
+});
+
+// 计算属性：登录模式标题
+const loginModeTitle = computed(() => {
+  return loginMode.value === 'password' ? '密码登录' : '验证码登录';
 });
 
 // 表单验证规则
 const loginRules: FormRules = {
   username: [
-    { required: true, message: '请输入用户名', trigger: 'blur' },
-    { min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' }
+    { 
+      required: loginMode.value === 'password', 
+      message: '请输入用户名、手机号或邮箱', 
+      trigger: 'blur' 
+    }
+  ],
+  phone: [
+    { 
+      required: loginMode.value === 'captcha' && captchaType.value === 'phone', 
+      message: '请输入手机号', 
+      trigger: 'blur' 
+    },
+    { 
+      pattern: /^1[3-9]\d{9}$/, 
+      message: '请输入正确的手机号', 
+      trigger: 'blur' 
+    }
+  ],
+  email: [
+    { 
+      required: loginMode.value === 'captcha' && captchaType.value === 'email', 
+      message: '请输入邮箱', 
+      trigger: 'blur' 
+    },
+    { 
+      type: 'email', 
+      message: '请输入正确的邮箱格式', 
+      trigger: 'blur' 
+    }
   ],
   password: [
-    { required: true, message: '请输入密码', trigger: 'blur' },
-    { min: 6, message: '密码至少6个字符', trigger: 'blur' }
+    { 
+      required: loginMode.value === 'password', 
+      message: '请输入密码', 
+      trigger: 'blur' 
+    },
+    { 
+      min: 6, 
+      message: '密码至少6个字符', 
+      trigger: 'blur' 
+    }
   ],
   captcha: [
-    { required: true, message: '请输入验证码', trigger: 'blur' },
-    { len: 4, message: '验证码为4位', trigger: 'blur' }
+    { 
+      required: loginMode.value === 'captcha', 
+      message: '请输入验证码', 
+      trigger: 'blur' 
+    },
+    { 
+      len: 6, 
+      message: '验证码为6位', 
+      trigger: 'blur' 
+    }
+  ],
+  agree: [
+    { 
+      validator: (rule: any, value: boolean, callback: any) => {
+        if (!value) {
+          callback(new Error('请同意《红色思政智能体平台》用户协议'));
+        } else {
+          callback();
+        }
+      }, 
+      trigger: 'change' 
+    }
   ]
 };
 
+// 切换登录模式
+const switchLoginMode = (mode: 'password' | 'captcha') => {
+  if (loginMode.value === mode) return;
+  
+  loginMode.value = mode;
+  
+  // 清空表单数据和验证
+  loginFormRef.value?.clearValidate();
+  loginForm.username = '';
+  loginForm.phone = '';
+  loginForm.email = '';
+  loginForm.password = '';
+  loginForm.captcha = '';
+  loginForm.captchaId = '';
+};
+
+// 切换验证码类型
+const switchCaptchaType = (type: 'phone' | 'email') => {
+  if (captchaType.value === type) return;
+  
+  captchaType.value = type;
+  
+  // 清空相关表单数据和验证
+  loginFormRef.value?.clearValidate();
+  loginForm.phone = '';
+  loginForm.email = '';
+  loginForm.captcha = '';
+  loginForm.captchaId = '';
+};
+
+// 发送短信验证码
+const handleSendSmsCode = async () => {
+  // 验证手机号
+  if (!loginForm.phone || loginForm.phone.trim() === '') {
+    ElMessage.warning('请输入手机号');
+    return;
+  }
+  
+  const phonePattern = /^1[3-9]\d{9}$/;
+  if (!phonePattern.test(loginForm.phone)) {
+    ElMessage.warning('请输入正确的手机号');
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendSmsCode(loginForm.phone);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      loginForm.captchaId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送');
+      
+      // 开始倒计时
+      smsCountdown.value = 60;
+      const timer = setInterval(() => {
+        smsCountdown.value--;
+        if (smsCountdown.value <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
+// 发送邮箱验证码
+const handleSendEmailCode = async () => {
+  // 验证邮箱
+  if (!loginForm.email || loginForm.email.trim() === '') {
+    ElMessage.warning('请输入邮箱');
+    return;
+  }
+  
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  if (!emailPattern.test(loginForm.email)) {
+    ElMessage.warning('请输入正确的邮箱格式');
+    return;
+  }
+  
+  try {
+    const result = await authApi.sendEmailCode(loginForm.email);
+    if (result.code === 200 && result.data) {
+      // 保存sessionId
+      loginForm.captchaId = result.data.sessionId;
+      ElMessage.success(result.data.message || '验证码已发送到邮箱');
+      
+      // 开始倒计时
+      emailCountdown.value = 60;
+      const timer = setInterval(() => {
+        emailCountdown.value--;
+        if (emailCountdown.value <= 0) {
+          clearInterval(timer);
+        }
+      }, 1000);
+    } else {
+      ElMessage.error(result.message || '发送验证码失败');
+    }
+  } catch (error: any) {
+    console.error('发送验证码失败:', error);
+    ElMessage.error(error.message || '发送验证码失败');
+  }
+};
+
 // 方法
 const handleLogin = async () => {
   if (!loginFormRef.value) return;
   
+  // 检查是否同意用户协议
+  if (!loginForm.agree) {
+    ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
+    return;
+  }
+  
   try {
     const valid = await loginFormRef.value.validate();
     if (!valid) return;
     
     loginLoading.value = true;
     
+    // 根据登录模式设置loginType
+    if (loginMode.value === 'password') {
+      loginForm.loginType = LoginType.PASSWORD;
+    } else {
+      loginForm.loginType = captchaType.value === 'phone' ? LoginType.PHONE : LoginType.EMAIL;
+    }
+    
     // 调用store中的登录action
     const result = await store.dispatch('auth/login', loginForm);
     
@@ -164,7 +457,7 @@ const handleLogin = async () => {
     
     // 登录失败后显示验证码
     showCaptcha.value = true;
-    refreshCaptcha();
+    // refreshCaptcha();
   } finally {
     loginLoading.value = false;
   }
@@ -322,6 +615,60 @@ onMounted(() => {
   }
 }
 
+.login-mode-tabs {
+  display: flex;
+  gap: 16px;
+  margin-bottom: 24px;
+  border-bottom: 1px solid #E8E8E8;
+  
+  .tab-item {
+    padding: 8px 16px;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.45);
+    cursor: pointer;
+    border-bottom: 2px solid transparent;
+    transition: all 0.3s;
+    
+    &:hover {
+      color: #C62828;
+    }
+    
+    &.active {
+      color: #C62828;
+      border-bottom-color: #C62828;
+      font-weight: 600;
+    }
+  }
+}
+
+.captcha-type-tabs {
+  display: flex;
+  gap: 12px;
+  margin-bottom: 16px;
+  
+  .captcha-tab-item {
+    flex: 1;
+    padding: 8px;
+    text-align: center;
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.65);
+    background: #F2F3F5;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.3s;
+    
+    &:hover {
+      background: #E8E8E8;
+    }
+    
+    &.active {
+      color: #FFFFFF;
+      background: #C62828;
+      font-weight: 500;
+    }
+  }
+}
+
 .login-form {
   .form-input {
     width: 100%;
@@ -343,6 +690,37 @@ onMounted(() => {
     }
   }
   
+  .captcha-input-container {
+    display: flex;
+    gap: 8px;
+    width: 100%;
+    
+    .captcha-input {
+      flex: 1;
+    }
+    
+    .send-captcha-btn {
+      height: 48px;
+      padding: 0 16px;
+      background: #C62828;
+      border: none;
+      border-radius: 12px;
+      color: #FFFFFF;
+      font-size: 13px;
+      white-space: nowrap;
+      
+      &:hover:not(:disabled) {
+        background: #B71C1C;
+      }
+      
+      &:disabled {
+        background: #D9D9D9;
+        color: rgba(0, 0, 0, 0.25);
+        cursor: not-allowed;
+      }
+    }
+  }
+  
   .login-options {
     display: flex;
     justify-content: space-between;