标签：Vue obj res queryParams item 课程 筛选 entity 升降

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。