# 前端数据需求分析

## 组件数据需求

### 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           // 分类图标
      }
    ]
  }
  ```