对接后端

src/api/user.ts

@@ -53,12 +53,9 @@ import type { ApiResponse, PageResult } from './common/types'
  */
 
 export interface LoginParams {
-  activeTab: string
-  username: string
-  password: string
   phone: string
-  email: string
-  code: string
+  password: string
+  verifyCode?: string
 }
 
 export interface RegisterParams {
@@ -104,24 +101,27 @@ export interface UserQueryParams {
 // 用户API接口
 export const userApi = {
 
-  //注册
+
   register(data: RegisterParams) {
     return request.post<ApiResponse>('/user/register', data)
   },
 
 
-  // 登录
+  // 手机号密码登录
   login(data: LoginParams) {
-    return request.post<ApiResponse<{ token: string }>>('/user/login', data)
+    return request.post<ApiResponse<{ token: string }>>('/auth/login', data)
   },
 
+
+
+
   // 发送验证码
   sendVerifyEmailCode(email: string) {
     return request.post<ApiResponse>('/user/getEmailCode', { email })
   },
   // 发送验证码
   sendVerifyPhoneCode(phone: string) {
-    return request.post<ApiResponse>('/user/getPhoneCode', { phone })
+    return request.post<ApiResponse>('/user/getphoneCode', { phone })
   },
 
   // 获取当前登录用户信息

src/components/Topbar.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="topbar">
+    <div class="left">
+      <router-link to="/" class="logo">智慧养老平台</router-link>
+    </div>
+    
+    <div class="right">
+      <template v-if="userStore.userInfo">
+        <!-- 已登录状态 -->
+        <el-dropdown @command="handleCommand">
+          <div class="user-info">
+            <el-avatar 
+              :size="32" 
+              :src="userStore.userInfo.avatar || defaultAvatar"
+            />
+            <span class="nickname">{{ userStore.userInfo.nickname }}</span>
+          </div>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item command="profile">个人中心</el-dropdown-item>
+              <el-dropdown-item command="settings">设置</el-dropdown-item>
+              <el-dropdown-item divided command="logout">退出登录</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
+      </template>
+      <template v-else>
+        <!-- 未登录状态 -->
+        <router-link to="/login" class="login-btn">
+          <el-button type="primary">登录</el-button>
+        </router-link>
+        <router-link to="/register" class="register-btn">
+          <el-button>注册</el-button>
+        </router-link>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
+import defaultAvatar from '@/assets/default-avatar.png'
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 初始化时获取用户信息
+onMounted(async () => {
+  const token = localStorage.getItem('token')
+  if (token && !userStore.userInfo) {
+    await userStore.getUserInfo()
+  }
+})
+
+// 处理下拉菜单命令
+const handleCommand = async (command: string) => {
+  switch (command) {
+    case 'profile':
+      router.push('/profile')
+      break
+    case 'settings':
+      router.push('/settings')
+      break
+    case 'logout':
+      userStore.clearUserInfo()
+      ElMessage.success('退出登录成功')
+      router.push('/login')
+      break
+  }
+}
+</script>
+
+<style scoped>
+.topbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 20px;
+  height: 60px;
+  background-color: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.logo {
+  font-size: 20px;
+  font-weight: bold;
+  color: #333;
+  text-decoration: none;
+}
+
+.right {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.nickname {
+  font-size: 14px;
+  color: #333;
+}
+
+.login-btn,
+.register-btn {
+  text-decoration: none;
+}
+</style> 

src/stores/user.ts

@@ -0,0 +1,42 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+import type { UserInfo } from '@/api/user'
+import { userApi } from '@/api/user'
+
+export const useUserStore = defineStore('user', () => {
+  const userInfo = ref<UserInfo | null>(null)
+  const token = ref<string | null>(null)
+
+  // 获取用户信息
+  const getUserInfo = async () => {
+    try {
+      const data = await userApi.getCurrentUser()
+      userInfo.value = data
+      return data
+    } catch (error) {
+      console.error('获取用户信息失败:', error)
+      return null
+    }
+  }
+
+  // 设置token
+  const setToken = (newToken: string) => {
+    token.value = newToken
+    localStorage.setItem('token', newToken)
+  }
+
+  // 清除用户信息
+  const clearUserInfo = () => {
+    userInfo.value = null
+    token.value = null
+    localStorage.removeItem('token')
+  }
+
+  return {
+    userInfo,
+    token,
+    getUserInfo,
+    setToken,
+    clearUserInfo
+  }
+}) 

src/views/LoginView.vue

@@ -189,6 +189,7 @@ import { ElMessage } from 'element-plus'
 import { User, Lock, Phone, Message, Key, Avatar } from '@element-plus/icons-vue'
 import type { FormInstance } from 'element-plus'
 import { userApi } from '@/api/user'
+import { useUserStore } from '@/stores/user'
 
 
 const router = useRouter()
@@ -196,6 +197,7 @@ const route = useRoute()
 const loading = ref(false)
 const rememberMe = ref(false)
 const activeTab = ref('account')
+const userStore = useUserStore()
 
 // 账号密码登录表单
 const accountFormRef = ref<FormInstance>()
@@ -309,25 +311,13 @@ const handleLogin = async () => {
     if (valid) {
       loading.value = true
       try {
-
-        await userApi.login(formData)
-
-        await new Promise(resolve => setTimeout(resolve, 1000))
-
-        // 保存token和用户信息
-        localStorage.setItem('token', 'dummy-token')
-        if (rememberMe.value) {
-          localStorage.setItem('loginType', activeTab.value)
-          localStorage.setItem('loginData', JSON.stringify(formData))
-        }
-
+        const { token } = await userApi.login(formData)
+        userStore.setToken(token)
+        await userStore.getUserInfo()
         ElMessage.success('登录成功')
-
-        // 跳转到之前的页面或首页
-        const redirect = route.query.redirect as string
-        router.push(redirect || '/')
+        router.push('/')
       } catch (error) {
-        //ElMessage.error('登录失败，请检查输入信息')
+        console.error('登录失败:', error)
       } finally {
         loading.value = false
       }