refactor: 重构路由配置,移除订单页面路由 style: 统一使用CSS变量替换硬编码颜色值 docs: 添加前端数据需求分析文档 fix: 修复登录页面记住我功能,更新用户信息页面链接 perf: 优化搜索组件动画效果和响应式设计 chore: 更新TypeScript类型定义,添加订单和地址相关类型
278 lines
7.6 KiB
Plaintext
278 lines
7.6 KiB
Plaintext
# 前端数据需求分析
|
||
|
||
## 组件数据需求
|
||
|
||
### 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 // 分类图标
|
||
}
|
||
]
|
||
}
|
||
``` |