saas_miniprogram/components/course/courseTree.vue

<template>
  <view class="menuBox">
    <template>
      <view v-for="(item, index) in menuList" :key="index">
        <!--模块 -->
        <view v-if="item.type == 1">
          <courseModule
            :orderGoodsId="orderGoodsId"
            :sectionMaxNum="sectionMaxNum"
            :needOpen="sectionItem.moduleId == item.menuId"
            :courseId="courseId"
            :preItem="menuList[index - 1]"
            :learningOrder="learningOrder"
            :goodsId="goodsId"
            :gradeId="gradeId"
            :isBuy="true"
            :menuItem="item"
            :levelId="item.menuId"
            :goodsType="1"
            :menuAllList="menuAllList"
            :sectionItem="sectionItem"
            :isRebuild="isRebuild"
          ></courseModule
        ></view>
        <!--章 -->
        <view v-if="item.type == 2">
          <courseChapter
            :orderGoodsId="orderGoodsId"
            :sectionMaxNum="sectionMaxNum"
            :needOpen="
              !sectionItem.moduleId && sectionItem.chapterId == item.menuId
            "
            :courseId="courseId"
            :preItem="menuList[index - 1]"
            :learningOrder="learningOrder"
            :goodsId="goodsId"
            :gradeId="gradeId"
            :isBuy="true"
            :menuItem="item"
            :levelId="'0-' + item.menuId"
            :goodsType="1"
            :menuAllList="menuAllList"
            :sectionItem="sectionItem"
            :isRebuild="isRebuild"
          ></courseChapter
        ></view>
        <!--节 -->
        <view v-if="item.type == 3">
          <courseSection
            ref="MoudleSection"
            :orderGoodsId="orderGoodsId"
            :sectionMaxNum="sectionMaxNum"
            :courseId="courseId"
            :preItem="menuList[index - 1]"
            :learningOrder="learningOrder"
            :goodsId="goodsId"
            :gradeId="gradeId"
            :isBuy="true"
            :menuItem="item"
            :levelId="'0-0-' + item.menuId"
            :goodsType="1"
            :testType="3"
            :menuAllList="menuAllList"
            :isRebuild="isRebuild"
            :sectionItem="sectionItem"
          ></courseSection
        ></view>
      </view>
    </template>
  </view>
</template>

<script>
import courseModule from "@/components/course/courseModule.vue";
import courseChapter from "@/components/course/courseChapter.vue";
import courseSection from "@/components/course/courseSection.vue";
export default {
  name: "SaasMiniprogramCourseTree",
  props: {
    isLive: false,
    orderGoodsId: {
      default: 0,
    },
    preItem: {
      default: undefined,
    },
    learningOrder: {
      //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
      type: Number,
      defaule: 0,
    },
    needOpen: {
      //是否默认展开
      type: Boolean,
      default: false,
    },
    goodsId: {
      type: Number,
      default: 0,
    },
    courseId: {
      type: [Number, String],
      default: 0,
    },
    isBuy: {
      //是否是已购买商品
      type: Boolean,
      default: false,
    },
    levelId: {
      type: [Number, String],
      default: "",
    },
    isRebuild: {
      //是否重修目录
      type: Boolean,
      default: false,
    },
    gradeId: {
      //重修需要班级ID
      type: [Number, String],
    },
    sectionMaxNum: {
      default: undefined,
    },
    // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
    goodsType: {
      type: [Number, String],
      default: 0,
    },
    menuAllList: {
      // 课程所有子目录结构列表
      type: Array,
      default: () => [],
    },
    sectionItem: {
      // 用户最后一次看的录播的信息
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      menuList: [],
    };
  },

  mounted() {},

  methods: {
    getMenuList() {
      this.$api
        .reMenuList({
          courseId: this.courseId,
          gradeId: this.gradeId,
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.rows.length; i++) {
              let item = res.data.rows[i];
              item.down = true;
              item.id = item.menuId;
              item.name = item.menuName;
              item.menuType = item.type;
            }
            this.menuList = res.data.rows;
          }
        });
    },
  },
  watch: {
    courseId: {
      handler(val) {
        this.menuList = [];
        this.getMenuList();
      },
      immediate: true,
    },
  },
  components: {
    courseModule,
    courseChapter,
    courseSection,
  },
};
</script>

<style lang="scss" scoped>
.top {
  &__header {
    position: relative;
    width: 100%;
    height: 150rpx;
    padding: 24rpx 150rpx 24rpx 24rpx;

    .img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
    }

    .note {
      position: relative;
      z-index: 10;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #efdbff;
    }

    .title {
      position: relative;
      z-index: 10;
      font-size: 26rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
    }
  }
}
.menuBox {
  width: 100%;
  background: #ffffff;
  border-radius: 16rpx;
  padding: 0rpx 20rpx;
  margin-bottom: 20rpx;
}
</style>