Files
pc_frontend/Api.text
qingfeng1121 73cf25e586 feat: 添加分页组件和地址选择组件,优化样式和类型定义
refactor: 重构路由配置,移除订单页面路由

style: 统一使用CSS变量替换硬编码颜色值

docs: 添加前端数据需求分析文档

fix: 修复登录页面记住我功能,更新用户信息页面链接

perf: 优化搜索组件动画效果和响应式设计

chore: 更新TypeScript类型定义,添加订单和地址相关类型
2026-01-19 11:35:50 +08:00

278 lines
7.6 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

# 前端数据需求分析
## 组件数据需求
### 1. Address.vue (地址选择组件)
- 数据需求:省市区级联选择数据
- 数据结构:
```
address {
province: string, // 省份名称
city: string, // 城市名称
district: string // 区县名称
}
```
### 2. Search.vue (搜索组件)
- 数据需求:搜索关键词、搜索类型、搜索历史
- 数据结构:
```
search {
keyword: string, // 搜索关键词
type: string, // 搜索类型(如"宝贝"、"店铺"
history: string[] // 搜索历史记录
}
```
### 3. page.vue (分页组件)
- 数据需求:总页数
- 数据结构:
```
pagination {
totalPages: number // 总页数
}
```
## 页面数据需求
### 1. Login.vue (登录页面)
- 数据需求:用户登录信息
- 数据结构:
```
login {
username: string, // 用户名
password: string, // 密码
rememberMe: boolean // 是否记住密码
}
```
### 2. Userinfo.vue (用户信息页面)
- 数据需求:用户信息、订单状态数量
- 数据结构:
```
user {
id: number, // 用户ID
username: string, // 用户名
avatar: string, // 头像URL
level: number, // 用户等级
followCount: number, // 关注数
fansCount: number, // 粉丝数
collectionCount: number, // 收藏数
couponCount: number, // 红包数
discountCount: number, // 优惠券数
taoCoin: number, // 淘币数
points: number // 积分
}
orderCounts {
pending_payment: number, // 待付款
pending_shipment: number, // 待发货
pending_receipt: number, // 待收货
pending_review: number, // 待评价
completed: number // 已完成
}
```
### 3. productdetil.vue (商品详情页面)
- 数据需求:商品信息、商品图片、商品型号、评论、推荐商品
- 数据结构:
```
product {
id: number, // 商品ID
title: string, // 商品标题
images: string[], // 商品图片URL
price: number, // 价格
originalPrice: number, // 原价
models: [ // 商品型号
{
id: string,
name: string,
price: string,
originalPrice: string,
img: string
}
],
description: string, // 商品描述
features: string[], // 商品特点
specs: [ // 商品参数
{
category: string, // 参数类别
value: string // 参数值
}
],
reviews: [ // 用户评论
{
id: number,
reviewerName: string, // 评论者姓名
rating: number, // 评分
time: string, // 评论时间
content: string, // 评论内容
images: string[] // 评论图片
}
],
recommendations: [ // 推荐商品
{
id: number,
name: string, // 商品名称
price: number, // 价格
rating: number, // 评分
image: string // 商品图片
}
]
}
```
### 4. SettlementLite.vue (结算页面)
- 数据需求:地址列表、默认地址、商品信息、价格计算
- 数据结构:
```
address {
id: number, // 地址ID
name: string, // 收货人姓名
phone: string, // 联系电话
province: string, // 省份
city: string, // 城市
district: string, // 区县
detail: string, // 详细地址
isDefault: boolean // 是否默认地址
}[]
order {
products: [ // 订单商品
{
id: number, // 商品ID
name: string, // 商品名称
price: number, // 商品价格
quantity: number, // 购买数量
image: string // 商品图片
}
],
totalPrice: number, // 总价格
shippingFee: number, // 运费
finalPrice: number // 最终价格
}
```
### 5. User/UpdataAddress.vue (地址修改页面)
- 数据需求:地址信息
- 数据结构:
```
address {
id: number, // 地址ID
name: string, // 收货人姓名
phone: string, // 联系电话
province: string, // 省份
city: string, // 城市
district: string, // 区县
detail: string, // 详细地址
isDefault: boolean // 是否默认地址
}
```
### 6. User/User.vue (用户中心页面)
- 数据需求:用户信息、订单列表、地址列表、收藏列表
- 数据结构:
```
user {
id: number, // 用户ID
username: string, // 用户名
avatar: string // 头像URL
}
orders {
id: number, // 订单ID
status: string, // 订单状态
totalPrice: number, // 订单总价
createTime: string, // 创建时间
products: [ // 订单商品
{
id: number,
name: string,
price: number,
quantity: number,
image: string
}
]
}[]
addresses: address[] // 地址列表结构同SettlementLite.vue
collections: [ // 收藏列表
{
id: number, // 收藏ID
productId: number, // 商品ID
productName: string, // 商品名称
productPrice: number, // 商品价格
productImage: string // 商品图片
}
]
```
### 7. Cart.vue (购物车页面)
- 数据需求:购物车商品列表
- 数据结构:
```
cart {
items: [ // 购物车商品
{
id: number, // 商品ID
name: string, // 商品名称
price: number, // 商品价格
quantity: number, // 购买数量
image: string, // 商品图片
selected: boolean // 是否选中
}
],
totalPrice: number, // 总价格
selectedCount: number // 选中数量
}
```
### 8. product/productList.vue (商品列表页面)
- 数据需求:商品列表、分页信息
- 数据结构:
```
products {
items: [ // 商品列表
{
id: number, // 商品ID
name: string, // 商品名称
price: number, // 商品价格
originalPrice: number, // 原价
image: string, // 商品图片
rating: number, // 评分
sales: number // 销量
}
],
total: number, // 总商品数
page: number, // 当前页码
pageSize: number, // 每页数量
totalPages: number // 总页数
}
```
### 9. Home.vue (首页)
- 数据需求:轮播图、推荐商品、分类信息
- 数据结构:
```
home {
banners: [ // 轮播图
{
id: number,
image: string, // 轮播图图片
link: string // 跳转链接
}
],
recommendedProducts: [ // 推荐商品
{
id: number,
name: string,
price: number,
image: string,
rating: number
}
],
categories: [ // 商品分类
{
id: number,
name: string, // 分类名称
icon: string // 分类图标
}
]
}
```