vite-vue3_pinia 课程页

	12 课程页-组件布局: https://xuexiluxian.cn/blog/detail/93dd86680c274b4ca0469f52c0c48fc4

	13 课程页-课程方向和课程分类数据渲染 : https://xuexiluxian.cn/blog/detail/ddd0c4550ac440ff978201c4c959517c

	14 课程页-请求课程数据+分页 : https://xuexiluxian.cn/blog/detail/cbeb396e6cdc4da58a89a8756d978f2c

	15 课程页-分类筛选条件逻辑 : https://xuexiluxian.cn/blog/detail/40340e1ebc7e4115a74a2fa285c6271f

	16 课程页面-筛选免费课程和会员课程 : https://xuexiluxian.cn/blog/detail/d9a9dc665c98426bb385ed4ac665d840

	17 课程页-课程条件筛选 : https://xuexiluxian.cn/blog/detail/33a95b867c004c02891ab3c03ddb8df4

	18 课程详情页-布局  : https://xuexiluxian.cn/blog/detail/fbc1891af8bb4da9b988ae8458cc9c43

	19 课程详情页-调整数据  :  https://xuexiluxian.cn/blog/detail/80148066c35a45158a8827a402085b7c

	20 课程详情页-渲染数据  : https://xuexiluxian.cn/blog/detail/122aaca759e3435b81fa197e3cbdadb3

一  从首页跳转到课程页

1.1 先创建课程页组件:Course.vue

目录：src/views/Course.vue

1.2 增加对应路由

目录：src/router/index.js

3 修改公共Header组件，增加跳转

目录：src/components/common/Header.vue

 ***注意：vue-router4.x版本针对于<router-link>去除了tag属性。

二 课程页组件(Course.vue)布局

1 代码：用el-tag

本身el-tag是有边框的，需要我们进行样式的改写，达到 自己想要的效果

.category-poniter {
  height: 25px;
  line-height: 25px;
  margin: 10px 5px;
  cursor: pointer;
  border: none;
  background: rgba(44, 128, 255, 0.1);
  color: #2c80ff;
}
.category-poniter-item {
  height: 25px;
  line-height: 25px;
  margin: 10px 5px;
  cursor: pointer;
  border: none;
  background: none;
  color: rgba(81, 87, 89, 1);
}

2 课程方向： 

css让字等距分开的方法：可以利用letter-spacing属性来实现，如【letter-spacing:10px;】

3 添加换行

 再分成两个div,进行flex布局:

4 导航栏

5 单选框

用element-ui d的radio

 <el-radio-group v-model="radio1">
            <el-radio label="1" size="large">免费课程</el-radio>
            <el-radio label="2" size="large">会议课程</el-radio>
          </el-radio-group>

6 价格的上下键使用图标

import { CaretTop, CaretBottom } from '@element-plus/icons-vue'

   <div class="arrow">
                <el-icon><caret-top /></el-icon>
                <el-icon><caret-bottom /></el-icon>
              </div>

7不能用dispaly:flex justify-content: space-between; 不够五个会分开

 解决：

给每一个item 添加margin-right,margin-bottom, 4n倍数的去掉margin-right

三 调用接口：

3.1 初始化

条件查询列表：

第一行是一级数据，

第二行是二级数据！！（根据一级分类id进行查询）。默认进来是查所有二级数据，传-1 查所有

第三行是死数据，直接渲染

课程列表查询：

分页查询 查询第一页数据： page:1 pagesize:8

 3.1.1 条件查询展示

 3.1.2 分页查询列表

 分页使用element-ul的

3.2 筛选 

15 课程页-分类筛选条件逻辑_WEB前端_前端课程_前端学习路线_小鹿线

课程筛选条件分为三种情况：一级分类、二级分类、课程难度，逻辑如下：

1、直接进入课程页，展示所有一级、二级、课程难度
2、如果点击了一级，展示对应一级下的二级并展示此一级下所有课程
3、如果直接点击二级，那么一级不动，展示对应二级所有课程
4、点击一级、二级、课程难度，当前的class类要对应添加

 3.2.1 数据控制

  3.2.2 样式控制

//筛选
let currentType = reactive({
  fcategory: { id: '' },
  scategory: { id: '' },
  clevel: { id: '' }
})

3.3 免费课成和会员课程

 初始化，不选中

切换： 使用change事件

2.6 课程条件筛选

https://xuexiluxian.cn/blog/detail/33a95b867c004c02891ab3c03ddb8df4
 

 价格使用了两个图标 上下图标

三 课程详情页

    19 课程详情页-调整数据  :  https://xuexiluxian.cn/blog/detail/80148066c35a45158a8827a402085b7c

 

 

 测试，点击列表。看是否进去详情页

3.1 布局

1 面包屑

2 导航栏

3按钮

4列表

 

3.2 展示数据

1先渲染出来【章节列表】【下载列表】 

 进入课程详情页，拿到课程id

通过路由参数拿到

//课程id
import { useRoute } from 'vue-router'
let route = useRoute();
let courseId = route.params.id;

  渲染：  章节展示是个二维数组

 

2  由变量来控制展示【章节列表】还是【下载列表】 

3 控制导航的样式切换

还是该变量控制样式

点击章节： 变量改为true, 样式为ture展示样式

点击下载资料： 变量给位false,样式为false 展示样式

 

4 下载资料的东西可能没有，需要我们进行判断展示

看数组是否为空，为空展示提示语