购物街项目（6）

七、实现商品分类页面功能

7.1 完成商品分类的顶部导航

使用已封装好的 NavBar 组件来实现
在组件 Category 中引入、注册并使用
调试好样式

7.2 完成左侧tab菜单分类栏

创建 TabMenu 组件，在组件 Category 中引入、注册并使用
在组件 Category 中实现获取分类数据的功能
- 创建获取分类数据的请求文件 category.js
```
 import { request } from './request'
 
 export function getCategory() {
   return request({
     url: "/category"
   })
 }
```
- 并在组件 Category 中引入和使用
- 创建获取商品分类数据的请求 _getCategory(){}
- 在 data 中初始化商品分类数据 categories ，用来存储请求中获取到的分类列表数据
通过父子组件传值的方式将 categories 中的数据传递给 TabMenu 组件中 props 的 menuCategories
再在 TabMenu 组件中通过 v-for 指令进行循环遍历，来渲染分类列表
引入 Scroll 组件来实现分类列表可以手动滚动，并完成组件 TabMenu 的样式，使其左侧的分类列表栏可以单独滚动

7.3 完成点击菜单，右侧显示菜单对应的内容

实现点击左侧菜单标题选择当前标题
通过vue的对象语法将 active 属性绑定在 :class 中，通过判断 active 的true 或 false 来显示
- 需要在data 中初始化一个currentIndex，通过判断currentIndex是否与当前的 index 索引是否相等来判断active` 的值
- 因此需要在点击标题时调用 clickTitle(index){} 方法来将当前 index 的值赋给 currentIndex
- 完成点击标题时的 active 的样式来显示
获取分类标题下的子分类的数据
- 在请求文件 category.js 中创建 getSubCategory(maitKey){} 请求
- 并在组件 Category 中引用
- 由于进入分类页面时就需要获取到第一个分类下的子分类，因此在获取 tab 菜单时，也要获取第一个菜单的子分类，即调用 getSubCategory(this.categories[0].maitKey){}
- 并在 data 中初始化数据 currentIndex(当前菜单标题的索引) 和 subCategories(当前子分类的数据)
- 并将获取到的第一个子分类的数据存储到 subCategories 中
- 监控点击的菜单标题事件 selectTitle(index){} ，由子节 TabMenu 点发送事件给父节点方法，通过 $emit(“selectTitle”, index) 发送同时需要传当前标题的索引参数 index
- 在 selectTitle(index){} 中调获取分类列表下的子分类请求方法 _getSubCategory(index){}
- 在 _getSubCategory(index){} 方法中所调接口请求 getSubCategory(maitKey) 需要传 maitKey 参数，因此需要知道点击的是哪个菜单标题下的 maitKey
- 即将子节点 TabMenu 发送过来的 index 赋值给 currentIndex ,并拿到对应 currentIndex 下的 categories 中的 maitKey
- 并将该 maitKey 下的请求数据 res.data 赋值给初始化的 subCategories
创建子分类组件 TabSubcategory 并在 Category 组件中引入、注册和使用
将 subCategories 存储的数据通过 prop 父子组件传值的方式传递给 TabSubcategory 中的 subCategories
再通过 v-for 指令渲染 subCategories 中需要的数据在界面上，此时需要判断 subCategories 中有值的时候才去渲染页面的数据，并完成样式
由于子分类栏的部分也是要可以手动滚动的，因此需要在 Category 组件中引入 Scroll 组件，并将 TabSubcategory 组件包裹在里面，并设置滚动的区域样式

7.4 完成商品分类右边的 TabControl 栏

引入 TabControl 组件，注册并使用
并给组件传递 :title=“['综合', '新品', '销量']”
当点击 title 标签时，需要监控用户点击事件，并能获取到用户对应点击的是哪个 title
- 需要在 data 中初始话一个 currentType 用来存储用户点击的 title 标签
- 在 TabControl 组件上绑定 titleClick 点击事件，即 @tabclick=“titleClick”
- tabclick 事件属性是子组件 TabControl 中发送给父组件 Category 的监听事件
```
   // 监控用户点击tabcontrol
   titleClick(index) {
     switch (index) {
       case 0:
         this.currentType = "pop";
         break;
       case 1:
         this.currentType = "new";
         break;
       case 2:
         this.currentType = "sell";
         break;
     }
     // console.log(this.currentType);
   }
```

7.5 完成点击 title 标签显示对应的商品列表

在 category.js 创建子分类下的商品列表信息数据的请求 getCategoryDetail(){}
- 该请求需要传 miniWallkey 参数，miniWallkey 为对应菜单栏的商品信息key
- 也需要传 type 参数，type 参数为 TabControl 上的对应 title 标签
创建 _getCategoryDetail(type){} 方法来获取 TabControl 的对应 title 的商品数据
将当前 categories 中的miniWallkey，赋值给常量miniWallkey`
通过请求 getCategoryDetail 获取返回的 res 数据，并赋值给 categoryDetail
- 需要在 data 中初始化 categoryDetail 对象数据，用来存储 getCategoryDetail 获取的对应 title 标签下请求返回的数据
- categoryDetail 数据结构为
```
   categoryDetail: {
     pop: [],
     new: [],
     sell: []
   },
```
由于用户在进入当前 category 页面或者点击tab菜单列表时，就需要获取对应tab菜单下单的所有商品数据，因此需要将 _getCategoryDetail 方法放在 _getSubCategory 方法中去调用
- 即在调用分类列表菜单的子分类请求 getSubCategory(){} 中去调用 _getSubCategory
商品列表可以使用已封装好的 GoodsList 组件来显示
- 需要在 Category 组件中引入、注册和使用 GoodsList 组件
- 由于商品列表展示的是当前对应的 title 标签下的商品数据 showCategoryDetail ，因此需要使用计算属性 computed
- 用来处理返回传递给子组件需要的 showCategoryDetail 数据
```
   showCategoryDetail() {
     return this.categoryDetail[this.currentType];
   }
```