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
            :sectionMaxNum="sectionMaxNum"
            :needOpen="sectionItem.moduleId == item.menuId"
            :preItem="menuList[index - 1]"
            :isBuy="isBuy"
            :menuItem="item"
            :levelId="item.menuId"
            :goodsType="goodsType"
            :isRebuild="isRebuild"
          ></courseModule
        ></view>
        <!--章 -->
        <view v-if="item.type == 2">
          <courseChapter
            :sectionMaxNum="sectionMaxNum"
            :needOpen="
              !sectionItem.moduleId && sectionItem.chapterId == item.menuId
            "
            :preItem="menuList[index - 1]"
            :isBuy="isBuy"
            :menuItem="item"
            :levelId="'0-' + item.menuId"
            :goodsType="goodsType"
            :isRebuild="isRebuild"
          ></courseChapter
        ></view>
        <!--节 -->
        <view v-if="item.type == 3">
          <courseSection
            ref="MoudleSection"
            :sectionMaxNum="sectionMaxNum"
            :preItem="menuList[index - 1]"
            :isBuy="isBuy"
            :menuItem="item"
            :levelId="'0-0-' + item.menuId"
            :goodsType="goodsType"
            :testType="3"
            :isRebuild="isRebuild"
            @playEnd="getMenuList"
          ></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",
  inject: ["paramsFn"],
  props: {
    isBuy: {
      //是否是已购买商品
      type: Boolean,
      default: true,
    },
    isRebuild: {
      //是否重修目录
      type: Boolean,
      default: false,
    },
    sectionMaxNum: {
      default: undefined,
    },
    // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
    goodsType: {
      type: [Number, String],
      default: 1,
    },
    // 兼容props传参
    propParam: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      menuList: [],
    };
  },

  mounted() {},

  methods: {
    getMenuList() {
      const fn = this.isBuy ? "reMenuList" : "menuList";
      this.$api[fn](
        this.isBuy
          ? {
              ...this.params,
              rebuild: +this.isRebuild,
            }
          : { courseId: this.courseId }
      ).then((res) => {
        if (res.data.code == 200) {
          for (let i = 0; i < res.data.rows.length; i++) {
            let item = res.data.rows[i];
            // 显示重修目录
            if (item.rebuild) {
              this.$emit("isHaverebuild");
            }
            item.down = true;
            item.id = item.menuId;
            item.name = item.menuName;
            item.menuType = item.type;
          }
          this.menuList = res.data.rows;
        }
      });
    },
  },
  provide() {
    return { paramsFn: this.propParamFn };
  },
  computed: {
    isProps() {
      return !this.$method.isEmptyObject(this.propParam);
    },
    propParamFn() {
      return (key) => {
        return { ...this.paramsFn(key), ...this.propParam };
      };
    },
    params() {
      return this.propParamFn(["orderGoodsId", "gradeId", "courseId"]);
    },
    sectionItem() {
      return this.propParamFn(["sectionItem"]);
    },
    courseId() {
      return this.params.courseId;
    },
  },
  watch: {
    courseId: {
      handler(val) {
        this.menuList = [];
        this.getMenuList();
      },
      immediate: true,
      deep: 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>