135 lines
3.7 KiB
TypeScript
135 lines
3.7 KiB
TypeScript
import request from '@/utils/request'
|
||
import type { ApiResponse, PageResult } from './types'
|
||
|
||
// 定义接口的请求参数类型
|
||
|
||
|
||
/**
|
||
* 关键点说明：
|
||
* 类型定义:
|
||
* 使用 interface 定义接口的请求参数和响应数据类型
|
||
*
|
||
*
|
||
*
|
||
* 使用 Partial<T> 表示部分可选的类型
|
||
*
|
||
* Partial<T> 是 TypeScript 中的一个实用工具类型，它用于将一个类型的所有属性标记为可选的。在 TypeScript 中，当你有一个类型 T，并且你想要创建一个新的类型，其中 T 的所有属性都是可选的，你可以使用 Partial<T>。
|
||
*
|
||
* 例如，如果你有一个类型 Person：
|
||
*
|
||
* typescript
|
||
* type Person = {
|
||
* name: string;
|
||
* age: number;
|
||
* };
|
||
* 你可以使用 Partial<T> 创建一个新的类型 PartialPerson，其中 name 和 age 都是可选属性：
|
||
*
|
||
* typescript
|
||
* type PartialPerson = Partial<Person>;
|
||
* 这意味着 PartialPerson 类型的对象可以有 name 和 age 属性，也可以没有，或者只有一个：
|
||
*
|
||
* typescript
|
||
* let person1: PartialPerson = { name: "Alice" }; // 正确
|
||
* let person2: PartialPerson = { age: 30 }; // 正确
|
||
* let person3: PartialPerson = {}; // 正确
|
||
* Partial<T> 在处理对象时非常有用，特别是当你需要处理可能不完整或部分填充的对象时。
|
||
*
|
||
*
|
||
* 使用联合类型定义枚举值，如 0 | 1
|
||
* 请求方法:
|
||
* request.get<T>() - GET请求
|
||
* request.post<T>() - POST请求
|
||
* request.put<T>() - PUT请求
|
||
* 泛型参数 T 用于定义响应数据的类型
|
||
* 错误处理:
|
||
* 使用 try/catch 捕获请求错误
|
||
* 统一的错误提示
|
||
* 文件上传:
|
||
* 使用 FormData 处理文件上传
|
||
* 设置正确的 Content-Type
|
||
* 类型推导:
|
||
* TypeScript 会自动推导 API 响应的类型
|
||
* 编辑器会提供代码提示和类型检查
|
||
*/
|
||
|
||
export interface LoginParams {
|
||
phone: string
|
||
password: string
|
||
verifyCode?: string
|
||
}
|
||
|
||
// 定义后端返回的用户信息类型
|
||
export interface UserInfo {
|
||
id: number
|
||
phone: string
|
||
nickname: string
|
||
avatar: string
|
||
gender: 0 | 1 // 0-女 1-男
|
||
age: number
|
||
address: string
|
||
emergencyContact: {
|
||
name: string
|
||
phone: string
|
||
relation: string
|
||
}
|
||
}
|
||
|
||
// 定义用户列表查询参数
|
||
export interface UserQueryParams {
|
||
page: number
|
||
pageSize: number
|
||
nickname?: string
|
||
phone?: string
|
||
gender?: 0 | 1
|
||
ageRange?: [number, number]
|
||
}
|
||
|
||
// 用户API接口
|
||
export const userApi = {
|
||
// 手机号密码登录
|
||
login(data: LoginParams) {
|
||
return request.post<ApiResponse<{ token: string }>>('/auth/login', data)
|
||
},
|
||
|
||
// 发送验证码
|
||
sendVerifyCode(phone: string) {
|
||
return request.post<ApiResponse<void>>('/user/getEmailCode', { phone })
|
||
},
|
||
|
||
// 发送验证码
|
||
sendVerifyEmailCode(email: string) {
|
||
return request.post<ApiResponse<void>>('/user/getEmailCode', { email })
|
||
},
|
||
|
||
// 获取当前登录用户信息
|
||
getCurrentUser() {
|
||
return request.get<ApiResponse<UserInfo>>('/user/current')
|
||
},
|
||
|
||
// 更新用户信息
|
||
updateUserInfo(data: Partial<UserInfo>) {
|
||
return request.put<ApiResponse<UserInfo>>('/user/info', data)
|
||
},
|
||
|
||
// 更新用户头像
|
||
updateAvatar(file: File) {
|
||
const formData = new FormData()
|
||
formData.append('avatar', file)
|
||
return request.post<ApiResponse<{ avatarUrl: string }>>('/user/avatar', formData, {
|
||
headers: {
|
||
'Content-Type': 'multipart/form-data'
|
||
}
|
||
})
|
||
},
|
||
|
||
// 分页获取用户列表(管理员接口)
|
||
getUserList(params: UserQueryParams) {
|
||
return request.get<ApiResponse<PageResult<UserInfo>>>('/admin/users', { params })
|
||
},
|
||
|
||
// 修改密码
|
||
changePassword(data: { oldPassword: string; newPassword: string }) {
|
||
return request.post<ApiResponse<void>>('/user/change-password', data)
|
||
}
|
||
}
|