[JavaScript知识库]Vue项目 轮播组件 鼠标移入移出 免费/会员/收费课程 接口

components>index>NavSwiper.vue

<template>
  <div class="navswiper">
    <div class="navSwiperContent">
      <div class="navigation">
        <ul>
          <li
            v-for="(item, index) in categorys"
            :key="item.id"
            @mouseenter="mouseHover(item, index)"
            @mouseleave="mouseOut(index)"
          >
            <router-link to="/">
              {{ item.categoryName }} <i class="el-icon-arrow-right"></i
            ></router-link>
            <div class="category-detail" v-if="categorysDetail[index]">
              <div class="detail-main">
                <div class="detail-desc">基础知识</div>
                <div class="detail-list">
                  <div class="list-know">知识点:</div>
                  <div class="list-ul">
                    <a
                      v-for="(item, index) in tagArr"
                      :key="index"
                      href="javascript:;"
                      class="list-item"
                      >{{ item.tagName }}</a
                    >
                  </div>
                </div>
                <div class="detail-class">
                  <div
                    class="course-card"
                    v-for="(item, index) in courseArr"
                    :key="index"
                  >
                    <div class="course-image">
                      <img
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6520b595fd6efc3037d699850333ce0cbdb67d90ac29-dfn6dK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640508743&t=0059d05dc2e100bfe5eaed222b16b2a1"
                        alt=""
                      />
                    </div>
                    <div class="right">
                      <div class="courseName">{{ item.courseName }}</div>
                      <div class="courseDegree">
                        {{ item.courseLevel }} ·{{
                          item.purchaseCnt + item.purchaseCounter
                        }}人购买
                      </div>
                      <div class="buy">
                        <div class="buy-free">
                          <!-- 如果是免费课 -->
                          <div
                            class="coursePriceZero"
                            v-if="item.discountPrice == 0"
                          >
                            <div class="learn">免费学习</div>
                            <img src="" alt="" />
                          </div>
                          <!-- 如果是会员 -->
                          <div
                            class="coursePrice"
                            v-else-if="item.isMember == 1"
                          >
                            <div class="courseMemberbg">
                              <span class="courseMember">会员专享</span>
                            </div>
                            <div class="price">￥{{ item.discountPrice }}</div>
                          </div>
                          <!-- 如果不是免费 也不是会员 -->
                          <div class="coursePricePri" v-else>
                            <div class="pricePri">￥{{ item.salePrice }}</div>
                          </div>
                        </div>
                        <div class="car">
                          <div class="cart-image">
                            <img src="/image/cart16.png" alt="" />
                          </div>
                          <span class="addcart">加入购物车</span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="sliders">
        <el-carousel height="460px">
          <el-carousel-item v-for="item in sliders" :key="item.id">
            <router-link to="">
              <img :src="item.imageUrl" :title="item.imageName" alt="" />
              <!-- <h3>{{}}</h3>
              <img
                src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F6520b595fd6efc3037d699850333ce0cbdb67d90ac29-dfn6dK_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640508743&t=0059d05dc2e100bfe5eaed222b16b2a1"
                class="sliders-item-image"
              /> -->
            </router-link>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 课程分类组件 -->
    <CourseType />
  </div>
</template>

<script>
import CourseType from "@/components/index/CourseType.vue";
import request from "@/common/api/request";
import api from "@/common/api/NavSwiper/course";
export default {
  components: {
    CourseType,
  },
  name: "",
  data() {
    return {
      sliders: [], //轮播图数据
      categorys: [], //获取课程类型
      categorysDetail: [], //课程类型详情
      tagArr: [], //右侧数据
      querycourse: {
        pageNum: 1,
        pageSize: 4,
        entity: {
          firstCategory: "",
        },
      },
      courseArr: [], //课程信息
    };
  },
  created() {
    this.getSliders();
    this.getFirstCategorys();
    this.queryCourseTag();
    this.queryCourse();
  },
  methods: {
    //获取轮播图数据
    async getSliders() {
      let res = await request({
        url: "/api/slider/getSliders",
        method: "get",
        header: {
          "Content-Type": "application/json",
        },
      });
      this.sliders = res.data.list;
    },
    //获取课程分类（一级）
    async getFirstCategorys() {
      let res = await request({
        url: "/api/course/category/getFirstCategorys",
        method: "get",
        header: {
          "Content-Type": "application/json",
        },
      });
      console.log(res);
      this.categorys = res.data.list;
      this.categorysDetail = new Array(this.categorys.length);
      for (let i = 0; i < this.categorysDetail; i++) {
        this.categorysDetail[i] = false;
      }
      console.log(this.categorysDetail);
    },
    //课程分类的鼠标移入事件
    mouseHover(item, index) {
      this.$set(this.categorysDetail, index, true);
      this.querycourse.entity.firstCategory = item.id;
      this.queryCourseTag();
      this.queryCourse();
    },
    //课程分类的鼠标移出事件
    mouseOut(index) {
      this.$set(this.categorysDetail, index, false);
    },
    //查询课程标签
    async queryCourseTag() {
      let res = await api.queryCourseTag(this.querycourse);
      console.log(res);
      this.tagArr = res.data.pageInfo.list;
    },
    //查询课程表
    async queryCourse() {
      let res = await api.queryCourse(this.querycourse);
      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 = "";
        }
      });
    },
  },
};
</script>

common>api>NavSwiper>course.js

import request from '../request'

export default {
  //查询课程标签
  queryCourseTag(params) {
    return request({
      url: '/api/course/tags/list',
      method: 'post',
      data: params,
      header: {
        "Content-Type": "application/json"
      }
    })
  },
  //查询课程
  queryCourse(params) {
    return request({
      url: '/api/course/search',
      method: 'post',
      data: params,
      header: {
        "Content-Type": "application/json"
      }
    })
  },
}