购物街项目（6）

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

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

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

7.2 完成左侧tab菜单分类栏

1. 创建 TabMenu 组件，在组件 Category 中引入、注册并使用
2. 在组件 Category 中实现获取分类数据的功能
   • 创建获取分类数据的请求文件 category.js

      import { request } from './request'
      
      export function getCategory() {
        return request({
          url: "/category"
        })
      }
     

   • 并在组件 Category 中引入和使用
   • 创建获取商品分类数据的请求 _getCategory(){}
   • 在 data 中初始化商品分类数据 categories ，用来存储请求中获取到的分类列表数据
3. 通过父子组件传值的方式将 categories 中的数据传递给 TabMenu 组件中 props 的 menuCategories
4. 再在 TabMenu 组件中通过 v-for 指令进行循环遍历，来渲染分类列表
5. 引入 Scroll 组件来实现分类列表可以手动滚动，并完成组件 TabMenu 的样式，使其左侧的分类列表栏可以单独滚动

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

1. 实现点击左侧菜单标题选择当前标题
2. 通过vue的对象语法将 active 属性绑定在 :class 中，通过判断 active 的true 或 false 来显示
   • 需要在data 中初始化一个currentIndex，通过判断currentIndex是否与当前的 index 索引是否相等来判断active` 的值
   • 因此需要在点击标题时调用 clickTitle(index){} 方法来将当前 index 的值赋给 currentIndex
   • 完成点击标题时的 active 的样式来显示
3. 获取分类标题下的子分类的数据
   • 在请求文件 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
4. 创建子分类组件 TabSubcategory 并在 Category 组件中引入、注册和使用
5. 将 subCategories 存储的数据通过 prop 父子组件传值的方式传递给 TabSubcategory 中的 subCategories
6. 再通过 v-for 指令渲染 subCategories 中需要的数据在界面上，此时需要判断 subCategories 中有值的时候才去渲染页面的数据，并完成样式
7. 由于子分类栏的部分也是要可以手动滚动的，因此需要在 Category 组件中引入 Scroll 组件，并将 TabSubcategory 组件包裹在里面，并设置滚动的区域样式

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

1. 引入 TabControl 组件，注册并使用
2. 并给组件传递 :title=“['综合', '新品', '销量']”
3. 当点击 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 标签显示对应的商品列表

1. 在 category.js 创建子分类下的商品列表信息数据的请求 getCategoryDetail(){}
   • 该请求需要传 miniWallkey 参数，miniWallkey 为对应菜单栏的商品信息key
   • 也需要传 type 参数，type 参数为 TabControl 上的对应 title 标签
2. 创建 _getCategoryDetail(type){} 方法来获取 TabControl 的对应 title 的商品数据
3. 将当前 categories 中的miniWallkey，赋值给常量miniWallkey`
4. 通过请求 getCategoryDetail 获取返回的 res 数据，并赋值给 categoryDetail
   • 需要在 data 中初始化 categoryDetail 对象数据，用来存储 getCategoryDetail 获取的对应 title 标签下请求返回的数据
   • categoryDetail 数据结构为

        categoryDetail: {
          pop: [],
          new: [],
          sell: []
        },
     

5. 由于用户在进入当前 category 页面或者点击tab菜单列表时，就需要获取对应tab菜单下单的所有商品数据，因此需要将 _getCategoryDetail 方法放在 _getSubCategory 方法中去调用
   • 即在调用分类列表菜单的子分类请求 getSubCategory(){} 中去调用 _getSubCategory
6. 商品列表可以使用已封装好的 GoodsList 组件来显示
   • 需要在 Category 组件中引入、注册和使用 GoodsList 组件
   • 由于商品列表展示的是当前对应的 title 标签下的商品数据 showCategoryDetail ，因此需要使用计算属性 computed
   • 用来处理返回传递给子组件需要的 showCategoryDetail 数据

        showCategoryDetail() {
          return this.categoryDetail[this.currentType];
        }