乐意购项目前端开发 #5

一、二级页面基础分类组件

拆分组件结构

创建组件

以 Cheap.vue为例, Hot.vue 和 New.vue的方法一样

配置路由

在router/index.js中添加路由配置

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'

const routes = [
  {
    // Home 页面是首页下的二级页面,所以要配置在首页路径下
    path: '/',
    component: Layout,
    children: [
      {
        // Home 页默认在首页显示，所以 path 为空
        path: '',
        component: Home,
      },
      {
        path: '/category/cheap',
        component: () => import('@/views/Category/Cheap.vue')
      },
      {
        path: '/category/hot',
        component: () => import('@/views/Category/Hot.vue')
      },
      {
        path: '/category/new',
        component: () => import('@/views/Category/New.vue')
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

封装接口

在cheap.js中封装新的接口

import http from '@/utils/http'

export function getCheapAPI (data) {
  return http({
    url: '/goods/cheap/category/list',
    method: 'POST',
    data,
  })
}

export function getHomeCheapAPI () {
  return http({
    url: '/goods/cheap/list',
    method: 'get',
  })
}

编写代码

分页功能的实现

先引入ElementPlus的分页组件

size-change

pageSize 改变时会触发

每页条数

current-change

currentPage 改变时会触发

当前页

page-sizes    每页显示个数选择器的选项设置

page-size     每页显示条目个数

current-page    当前页面

total    总条目数

获取基础数据, 调用接口

// 获取基础列表数据
const reqData = ref({
  page: 1,
  pageSize: 12,
});
// 调用接口
const getCheapList = async () => {
  const res = await getCheapAPI(reqData.value);
  console.log(res);
  cheapList.value = res.data.list;
  goodTotal.value = res.data.total;
  reqData.value.pageSize =res.data.pageSize
};

 完善方法

// 实现分页切换页面
const handleCurrentChange = (page) => {
  reqData.value.page = page;
  getCheapList();
}
// 实现选择页面展示商品数量
const handleSizeChange = (pageSize) => {
  reqData.value.pageSize = pageSize;
  getCheapList();
}

二、二级页面商品分类组件

拆分组件结构

创建组件

配置路由

import { createRouter, createWebHashHistory } from 'vue-router'
import Layout from '@/views/Layout/index.vue'
import Login from '@/views/Login/index.vue'
import Home from '@/views/Home/index.vue'
import SubCategory from '@/views/SubCategory/index.vue'

const routes = [
  {
    // Home 页面是首页下的二级页面,所以要配置在首页路径下
    path: '/',
    component: Layout,
    children: [
      {
        // Home 页默认在首页显示，所以 path 为空
        path: '',
        component: Home,
      },
      {
        path: '/category/cheap',
        component: () => import('@/views/Category/Cheap.vue')
      },
      {
        path: '/category/hot',
        component: () => import('@/views/Category/Hot.vue')
      },
      {
        path: '/category/new',
        component: () => import('@/views/Category/New.vue')
      },
      {
        path: 'category/sub/:id',
        component: SubCategory
      }
    ]
  },
  {
    path: '/login',
    component: Login
  }
]
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

修改之前 HomeCategory.vue 文件

封装接口

创建文件 api/category/index.js

/**
 * @description: 获取二级分类列表数据
 */
import http from '@/utils/http'

export function getCategoryFilterAPI (id) {
  return http({
    url: '/home/category/sub/filter',
      method: 'get',
      params: {
          id
      }
  })
}

创建文件 api/goods/temporary.js

 

import http from '@/utils/http'

export function getSubCategoryAPI (data) {
  return http({
    url: '/goods/temporary',
    method: 'post',
    data
  })
}

编写代码

面包屑导航功能的实现

引入ElementPlus的面包屑组件

        首页
        {{
          categoryData.categoryName
        }}

调用接口

const route = useRoute();

const categoryData = ref({});
const getCategoryData = async () => {
  const res = await getCategoryFilterAPI(route.params.id);
  categoryData.value = res.data;
};

基础分类部分

引入组件

el-tab-pane的  name绑定的是reqData.sortField, sortField要在数据库有代表意思相同(名称不需要一样)的属性

获取基础数据, 调用接口

const goodList = ref([]);
const goodTotal = ref([]);

const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 12,
  sortField: 1,
});
const getGoodList = async () => {
  const res = await getSubCategoryAPI(reqData.value);
  goodList.value = res.data.list;
  goodTotal.value = res.data.total;
  reqData.value.pageSize =res.data.pageSize
};

切换基础分类

// tab切换回调
const tabChange = () => {
  console.log("tab切换了", reqData.value.sortField);
  reqData.value.page = 1;
  getGoodList();
};