登陆页面接口调整

src/views/login/component/account.vue

@@ -1,29 +1,16 @@
 <template>
-  <a-form :model="formState" name="normal_login" class="login-form" @finish="onFinish" @finish-failed="onFinishFailed"
+  <a-form ref="formRef" :model="formState" name="normal_login" class="login-form" @finish="onFinish"
-    ref="formRef">
+    @finish-failed="onFinishFailed">
-    <a-form-item label="账号" name="username" :rules="[{ required: true, message: '请输入用户名！' }]">
+    <a-form-item label="账号" name="phone" :rules="[{ required: true, message: '请输入用户名！' }]">
-      <a-input v-model:value="formState.username">
+      <a-input v-model:value="formState.phone" />
-        <template #prefix>
-          <UserOutlined class="site-form-item-icon" />
-        </template>
-      </a-input>
     </a-form-item>
 
-    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码！' }]">
+    <!-- 手动控制密码字段的错误状态 -->
-      <a-input-password v-model:value="formState.password">
+    <a-form-item label="密码" name="code" :validate-status="codeValidateStatus" :help="codeHelp"
-        <template #prefix>
+      :rules="[{ required: true, message: '请输入密码！' }]">
-          <LockOutlined class="site-form-item-icon" />
+      <a-input-password v-model:value="formState.code" />
-        </template>
-      </a-input-password>
     </a-form-item>
 
-    <!-- 可选：记住我 -->
-    <!--
-    <a-form-item name="remember" no-style>
-      <a-checkbox v-model:checked="formState.remember">记住我</a-checkbox>
-    </a-form-item>
-    -->
-
     <a-form-item>
       <a-button type="primary" html-type="submit" block class="login-form-button">
         登 录
@@ -33,66 +20,66 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, shallowRef } from 'vue';
-import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
 import { useRouter } from 'vue-router';
-import {login} from '@/apis/login';
+import { login } from '@/apis/login';
-// 如果需要 md5，请确保已安装并导入，例如：import md5 from 'md5';
+import type { FormInstance } from 'ant-design-vue';
-// import md5 from 'md5'; // 按需使用
 
 const router = useRouter();
-const formRef = ref();
+const formRef = ref<FormInstance>();
+
+const codeValidateStatus = shallowRef<'success' | 'warning' | 'error' | ''>('');
+const codeHelp = shallowRef('');
 
 interface FormState {
-  username: string;
+  phone: string;
-  password: string;
+  code: string;
   remember: boolean;
 }
 
 const formState = reactive<FormState>({
-  username: '',
+  phone: '',
-  password: '',
+  code: '',
   remember: true,
 });
 
-// 表单验证通过后自动调用
+const clearCodeError = () => {
+  codeValidateStatus.value = '';
+  codeHelp.value = '';
+};
+
+const setCodeError = (msg: string) => {
+  codeValidateStatus.value = 'error';
+  codeHelp.value = msg;
+};
+
 const onFinish = async (values: FormState) => {
-  // 可选：对密码进行加密（根据后端要求）
+  clearCodeError();
-  // const loginData = { ...values, password: md5(values.password) };
+
+  const loginData = {
+    ...values,
+    login_method: 'SMS'
+  };
 
   try {
-    const { success } = await login(values); // 假设 apis.login 返回 { success: boolean }
+    const res:any = await login(loginData); 
+    console.log('登录请求成功:', res);
+    // 登录成功后，将token存入localStorage
+    const token = res?.access_token;
 
-    if (success) {
+    if (!token) {
-      // 登录成功
+      throw new Error('登录失败：未返回有效凭证');
-      router.push('/platform');
-    } else {
-      // 后端返回登录失败（如密码错误）
-      formRef.value?.setFields([
-        { name: 'password', errors: ['用户名或密码错误'] }
-      ]);
     }
-  } catch (error) {
+
+    localStorage.setItem('token', token);
+    router.push('/layout/home');
+  } catch (error: any) {
     console.error('登录请求失败:', error);
-    // 网络错误或服务器异常
+    setCodeError(error.message || '用户名或密码错误');
-    formRef.value?.setFields([
-      { name: 'password', errors: ['网络错误，请稍后重试'] }
-    ]);
   }
 };
 
 const onFinishFailed = (errorInfo: any) => {
   console.log('表单验证失败:', errorInfo);
-  // Ant Design Vue 会自动显示校验错误，无需额外处理
 };
-</script>
+</script>
-
-<style scoped>
-.login-form {
-  max-width: 300px;
-}
-
-.login-form-button {
-  width: 100%;
-}
-</style>

src/views/login/index.vue

@@ -11,7 +11,7 @@
             <a-tab-pane key="account" tab="登录">
               <Account />
             </a-tab-pane>
-            <a-tab-pane key="mobile" tab="注册" disabled>Tab 2</a-tab-pane>
+            <a-tab-pane key="mobile" tab="注册">Tab 2</a-tab-pane>
           </a-tabs>
         </div>
       </div>