其他分享
首页 > 其他分享> > Vue项目 课程筛选 方向、分类、难度、最新、最热、价格升降

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