zc_saas_h5/components/course/courseModule.vue

<template>
  <view style="margin: 20rpx 0">
    <view class="title" @click="openModule(menuItem)">
      <image src="/static/icon/up1.png" class="icon_up" v-if="down"></image>
      <image src="/static/icon/down1.png" class="icon_up" v-if="!down"></image>
      <text style="margin-left: 10rpx">{{ menuItem.name }}</text>
    </view>
    <view v-show="!down">
      <view v-for="(itemM, indexM) in list" :key="indexM">
        <courseChapter
          :orderGoodsId="orderGoodsId"
          :isLive="isLive"
          :preItem="list[indexM - 1] || preItem"
          :sectionMaxNum="sectionMaxNum"
          :needOpen="needOpen"
          @playEnd="playEnd($event)"
          @toDo="toDo($event)"
          :courseId="courseId"
          :learningOrder="learningOrder"
          :goodsId="goodsId"
          :isBuy="isBuy"
          :gradeId="gradeId"
          :isRebuild="isRebuild"
          :menuItem="itemM"
          :levelId="levelId + '-' + itemM.chapterId"
        ></courseChapter>
        <u-line v-if="indexM < list.length - 1"></u-line>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import courseChapter from "@/components/course/courseChapter.vue";
export default {
  name: "courseModule",
  props: {
    isLive: false,
    orderGoodsId: {
      default: 0,
    },
    preItem: {
      default: undefined,
    },
    learningOrder: {
      //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
      type: Number,
      defaule: 0,
    },
    needOpen: {
      //是否默认展开
      type: Boolean,
      default: false,
    },
    menuItem: {
      type: Object,
      default: {},
    },
    goodsId: {
      type: Number,
      default: 0,
    },
    courseId: {
      type: Number,
      default: 0,
    },
    isBuy: {
      //是否是已购买商品
      type: Boolean,
      default: false,
    },
    levelId: {
      type: String,
      default: "",
    },
    isRebuild: {
      //是否重修目录
      type: Boolean,
      default: false,
    },
    gradeId: {
      //重修需要班级ID
      type: Number,
      default: 0,
    },
    sectionMaxNum: {
      default: undefined,
    },
  },
  components: {
    courseChapter,
  },
  data() {
    return {
      down: true,
      list: [],
    };
  },
  onLoad() {},
  created() {},
  mounted() {
    if (this.needOpen && this.chapterOpen) {
      this.openModule(this.menuItem);
    }
  },
  methods: {
    playEnd(isRebuild) {
      this.$emit("playEnd", { isRebuild: isRebuild.isRebuild });
    },
    toDo(item) {
      this.$emit("toDo", item);
    },
    openModule(item) {
      this.down = !this.down;
      if (!this.down && this.list.length == 0) {
        if (this.isBuy) {
          if (this.isRebuild) {
            this.getReChapterList(item.id, item.courseId);
          } else {
            this.getBuyChapterList(item.id, item.courseId); //已购买目录
          }
        } else {
          this.getChapterList(item.id); //未购买目录
        }
      }
    },
    getChapterList(moduleId) {
      let self = this;
      this.$api.chapterList(moduleId).then((res) => {
        if (res.data.code == 200) {
          for (let i = 0; i < res.data.data.length; i++) {
            let item = res.data.data[i];
            item.id = item.chapterId;
            item.menuType = 2;
          }
          self.list = res.data.data;
        }
      });
    },
    getReChapterList(moduleId, courseId) {
      let self = this;
      this.$api
        .reChapterList({
          moduleId: moduleId,
          gradeId: this.gradeId,
          courseId: courseId,
          rebuild: 1,
        })
        .then((res) => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              let item = res.data.data[i];
              item.id = item.chapterId;
            }
            self.list = res.data.data;
          }
        });
    },
    getBuyChapterList(moduleId, courseId) {
      let self = this;
      this.$api
        .reChapterList({
          moduleId: moduleId,
          gradeId: this.gradeId,
          courseId: courseId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              let item = res.data.data[i];
              item.id = item.chapterId;
              item.menuType = 2;
            }
            self.list = res.data.data;
          }
        });
    },
  },
  computed: { ...mapGetters(["chapterOpen"]) },
};
</script>

<style scoped>
.icon_up {
  width: 24rpx;
  height: 24rpx;
}
.title {
  font-size: 30rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 30rpx;
}
</style>