Vue项目 课程筛选 方向、分类、难度、最新、最热、价格升降
作者：互联网
CourseMain.vue
<template>
<div class="coursemain">
<div class="course-main">
<section class="search-container">
<div class="search-item">
<div class="title-name">课程方向：</div>
<div class="all-items">
<el-tag
effect="plain"
type="info"
@click="handleCondition('fcategory', null)"
:class="
indexObj.indexDirection === undefined
? 'category-poniter'
: 'category-poniter category-poniter-item'
"
>
全部
</el-tag>
<el-tag
effect="plain"
type="info"
v-for="(item, index) in firstArr"
:key="index"
@click="handleCondition('fcategory', item, index)"
:class="
indexObj.indexDirection === index
? 'category-poniter'
: 'category-poniter category-poniter-item'
"
>
{{ item.categoryName }}
</el-tag>
</div>
</div>
<div class="search-item search-item-transition" style="top: 45px">
<div class="title-name">课程分类：</div>
<div class="all-items">
<el-tag
effect="plain"
type="info"
@click="handleCondition('scategory', null)"
:class="
indexObj.indexClassification === undefined
? 'category-poniter'
: 'category-poniter category-poniter-item'
"
>
全部
</el-tag>
<el-tag
effect="plain"
type="info"
v-for="(item, index) in secondArr"
:key="index"
@click="handleCondition('scategory', item, index)"
:class="
indexObj.indexClassification === index
? 'category-poniter'
: 'category-poniter category-poniter-item'
"
>{{ item.categoryName }}
</el-tag>
</div>
</div>
<div class="search-item" style="top: 90px">
<div class="title-name">课程难度：</div>
<div class="all-items">
<el-tag
effect="plain"
type="info"
@click="handleCondition('clevel', null)"
:class="
indexObj.indexDifficulty === undefined
? 'category-poniter'
: 'category-poniter category-poniter-item'
"
>
全部
</el-tag>
<el-tag
effect="plain"
type="info"
v-for="(item, index) in courseLevel"
:key="item.code"
@click="handleCondition('clevel', item, index)"
:class="
indexObj.indexDifficulty === index
? 'category-poniter'
: 'category-poniter category-poniter-item'
"
>{{ item.text }}
</el-tag>
</div>
</div>
</section>
</div>
<div class="main-container">
<div class="container-top">
<ul class="all">
<li
class="item"
@click="handleCombine"
:class="active == true ? 'active' : ''"
>
综合
</li>
<li class="item split">|</li>
<li
class="item"
@click="handleLatest"
:class="active2 == true ? 'active2' : ''"
>
最新课程
</li>
<li class="item split">|</li>
<li
class="item"
@click="handleMostBuy"
:class="active3 == true ? 'active3' : ''"
>
最多购买
</li>
<li class="item split">|</li>
<li class="item item-price" @click="handlePrice">
价格
<span class="arrow">
<i
class="el-icon-caret-top"
:style="priceSortBy === '1' ? 'color:#2c80ff' : ''"
></i>
<i
class="el-icon-caret-bottom"
:style="priceSortBy === '2' ? 'color:#2c80ff' : ''"
></i>
</span>
</li>
</ul>
<ul class="right">
<li class="right-item">
<el-radio-group
v-model="isFreeOrMember"
@change="changeFreeOrMember"
>
<el-radio label="1">免费课程</el-radio>
<el-radio label="2">会员课程</el-radio>
</el-radio-group>
</li>
</ul>
</div>
<!-- 课程列表 -->
<div class="container-body" v-if="courseArr && courseArr.length > 0">
<div class="newCourseContent">
<ul class="courseUl">
<li
class="courseItem"
v-for="(item, index) in courseArr"
:key="index"
>
<div class="courseInfo">
<!-- 跳转至详情页 -->
<router-link :to="{ path: '/course-info/' + item.id }">
<div
class="memberlogo"
v-if="item.isMember == 1 && item.discountPrice != 0"
>
<img src="../../assets/image/member/vipLogo.png" alt="" />
</div>
<div class="courseBg">
<img class="courseImg" :src="item.courseCover" alt="" />
</div>
</router-link>
<div class="courseName">{{ item.courseName }}</div>
<div class="courseDegree">
{{ item.courseLevel }} ·
{{ item.purchaseCnt + item.purchaseCounter }}人购买
</div>
<div class="coursePrice">
<div class="coursePriceZero" v-if="item.discountPrice == 0">
<div class="pricefree">免费学习</div>
<img src="../../assets/image/about/free.png" alt="" />
</div>
<div class="courseMemberbg" v-else-if="item.isMember == 1">
<span class="price">¥{{ item.discountPrice }}</span>
<span class="courseMember">会员免费</span>
<img src="../../assets/image/member/kings.png" alt="" />
</div>
<div class="price">¥ {{ item.salePrice }}</div>
<div class="addCart">
<i class="el-icon-shopping-cart-1 cart"></i>
<span class="cart-text">加入购物车</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 暂无课程 -->
<div class="container-body" v-else>
<el-empty
image="/image/about/course-empt.png"
description="暂无课程"
></el-empty>
</div>
<div class="pages">
<!-- <pagination
total=""
page.sync=""
limit.sync=""
/> -->
</div>
</div>
</div>
</template>
<script>
import api from "@/common/api/Coursemain/courseCategory";
export default {
data() {
return {
indexObj: {
indexDirection: undefined, //课程方向
indexClassification: undefined, //课程分类
indexDifficulty: undefined, //课程难度
},
firstArr: [], //一级分类
secondArr: [], //二级分类
courseLevel: [
{
text: "初级",
code: "1",
},
{
text: "中级",
code: "2",
},
{
text: "高级",
code: "3",
},
],
queryParams: {
pageNum: 1,
pageSize: 12,
entity: {
courseName: "",
firstCategory: "",
secondCategory: "",
courseLevel: 0,
isMember: 0,
tags: "",
sortBy: "",
isFree: "",
},
},
courseArr: [], //课程信息
isFreeOrMember: "", //免费或者会员的状态
priceSortBy: "", //价格排序
active: true, //综合
active2: false, //最新课程
active3: false, //最多购买
};
},
created() {
this.getFirstCategorys();
this.getSecondCategorys();
this.queryCourse(this.queryParams);
},
methods: {
//获取一级分类
async getFirstCategorys() {
let res = await api.getFirstCategorys();
console.log(res);
if (res.meta.code === "200") {
this.firstArr = res.data.list;
}
},
//获取二级分类
async getSecondCategorys(categoryId) {
let res = await api.getSecondCategorys(categoryId ? categoryId : "-1");
console.log(res);
if (res.meta.code === "200") {
this.secondArr = res.data.list;
}
},
//课程方向、分类、难度的筛选
handleCondition(type, obj, index) {
this.queryParams.entity = {};
//type-是方向？分类？还是难度？
if (type === "fcategory") {
//点击课程方向
//课程方向
this.indexObj.indexDirection = index; //样式
this.indexObj.indexClassification = undefined; //css
this.indexObj.indexDifficulty = undefined; //css
obj = obj != null ? obj : -1; //根据一级分类查询二级分类的可选项
this.getSecondCategorys(obj.id); //根据一级分类查询二级分类的可选项
//请求前传参
this.queryParams.entity.firstCategory = obj && obj.id ? obj.id : ""; //一级分类id 准备参数
this.queryParams.entity.secondCategory = ""; //点击一级 分类变为全部
this.queryParams.entity.courseLevel = ""; //点击一级 难度变为全部
} else if (type === "scategory") {
//点击课程分类
this.indexObj.indexClassification = index; //css
obj = obj != null ? obj : -1;
let secondId = obj.id;
//请求前传参
this.queryParams.entity.secondCategory = obj && obj.id ? obj.id : ""; //二级分类id 准备参数
if (this.indexObj.indexClassification !== undefined) {
//当二级点击的不是全部
let cur = this.firstArr.findIndex(
//找到点击的二级所对应的一级的下标
(item) => item.id === obj.parentId
);
console.log(obj.parentId);
this.indexObj.indexDirection = cur; //样式
//再用二级对应的一级 去查二级 发送请求
api
.getSecondCategorys(obj.parentId ? obj.parentId : "-1")
.then((res) => {
console.log(res);
if (res.meta.code === "200") {
this.secondArr = res.data.list;
let secondIndex = this.secondArr.findIndex(
(item) => item.id === secondId
);
this.indexObj.indexClassification = secondIndex; //css
}
});
} else {
this.indexObj.indexClassification = undefined;
}
} else if (type === "clevel") {
//点击课程难度
this.indexObj.indexDifficulty = index; //css
//请求前传参
this.queryParams.entity.courseLevel = obj && obj.code ? obj.code : "-1";
}
this.queryCourse(this.queryParams);
},
//获取课程
async queryCourse(queryParams) {
let res = await api.queryCourse(queryParams);
console.log(res);
this.courseArr = res.data.pageInfo.list;
this.courseArr.forEach((item) => {
switch (item.courseLevel) {
case 1:
item.courseLevel = "初级";
break;
case 2:
item.courseLevel = "中级";
break;
case 3:
item.courseLevel = "高级";
break;
default:
item.courseLevel = "";
}
});
},
//点击选择综合
handleCombine() {
this.active = true;
this.active2 = false;
this.active3 = false;
this.isFreeOrMember = "";
this.priceSortBy = "";
this.queryParams.entity.sortBy = "";
this.queryCourse(this.queryParams);
},
//点击选择最新
handleLatest() {
this.active = false;
this.active2 = true;
this.active3 = false;
this.isFreeOrMember = "";
this.priceSortBy = "";
this.queryParams.entity.sortBy = "time-desc";
this.queryCourse(this.queryParams);
},
//点击选择最多购买
handleMostBuy() {
this.active = false;
this.active2 = false;
this.active3 = true;
this.isFreeOrMember = "";
this.priceSortBy = "";
this.queryParams.entity.sortBy = "purchase-desc";
this.queryCourse(this.queryParams);
},
//价格筛选
handlePrice() {
if (this.priceSortBy === "2" || this.priceSortBy === "") {
//变为升序 - priceSortBy = 1
this.queryParams.entity.sortBy = "price-asc";
this.queryCourse(this.queryParams);
this.priceSortBy = "1";
} else {
//变为降序 - priceSortBy = 2
this.queryParams.entity.sortBy = "price-desc";
this.queryCourse(this.queryParams);
this.priceSortBy = "2";
}
this.active = false;
this.active2 = false;
this.active3 = false;
},
//会员课程或免费课程的按钮操作 v-model绑定
changeFreeOrMember(e) {
if (e === "1") {
//免费课程
this.priceSortBy = "";
this.queryParams.entity.isMember = "";
this.queryParams.entity.isFree = "1";
this.queryCourse(this.queryParams);
} else if (e === "2") {
this.priceSortBy = "";
this.queryParams.entity.isMember = "1";
this.queryParams.entity.isFree = "";
this.queryCourse(this.queryParams);
}
this.active = true;
this.active2 = false;
this.active3 = false;
},
},
};
</script>标签：Vue,obj,res,queryParams,item,课程,筛选,entity,升降 来源： https://blog.csdn.net/weixin_60463255/article/details/122740482