zc_saas_h5/components/course/courseModule.vue

<template>
  <!-- style="margin: 20rpx 0;" -->
  <view>
    <view class="title" @click="openModule(menuItem)">
      <text class="title_name" style="margin-left: 10rpx"
        >{{ menuItem.name }}
      </text>

      <view class="fl">
        <view
          class="title_status"
          :class="['grey', 'blue', 'gre'][learnStatus + 1]"
          style="margin-right: 20rpx"
        >
          {{ ["待学习", "学习中", "已学完"][learnStatus + 1] }}
        </view>
        <image src="/static/icon/up.png" class="icon_up" v-if="down"></image>
        <image src="/static/icon/down.png" class="icon_up" v-if="!down"></image>
      </view>
    </view>
    <view v-show="!down">
      <view v-for="(itemM, indexM) in list" :key="indexM">
        <!-- v-if='itemM.type != 2' -->
        <courseChapter
          v-if="itemM.type != 2"
          :orderGoodsId="orderGoodsId"
          :isLive="isLive"
          :preItem="list[indexM - 1] || preItem"
          :sectionMaxNum="sectionMaxNum"
          :needOpen="itemM.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"
          :menuAllList="menuAllList"
          :sectionItem="sectionItem"
        >
        </courseChapter>
        <u-line v-if="indexM < list.length - 1"></u-line>
        <!-- 模块卷 -->
        <view v-if="itemM.type == 2">
          <view
            class="examBox"
            @click="
              toDoModuleExam(
                itemM.typeId,
                goodsId,
                itemM.moduleId,
                itemM.chapterId,
                itemM,
                indexM
              )
            "
          >
            <view class="exam">
              <view class="eTag">
                {{ itemM.doType == 1 ? "练习" : "考试" }}
              </view>
              <view style="margin-left: 15rpx; flex: 1">{{ itemM.name }}</view>
            </view>
            <view v-if="isRebuild || itemM.rebuild > 0" class="tagRe"
              >待重修</view
            >
            <view v-else>
              <view
                :class="{
                  tagGreen: itemM.learning == 1,
                  tagRe: itemM.learning == 0 || itemM.rebuild > 0,
                }"
              >
                <text v-if="itemM.learning == 1">合格</text>
                <text v-else-if="itemM.learning == 0">不及格(需重考)</text>
                <!-- <text v-else>不合格</text> -->
              </view>
            </view>
          </view>
        </view>
      </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, String],
      default: 0,
    },
    isBuy: {
      //是否是已购买商品
      type: Boolean,
      default: false,
    },
    levelId: {
      type: [Number, String],
      default: "",
    },
    isRebuild: {
      //是否重修目录
      type: Boolean,
      default: false,
    },
    gradeId: {
      //重修需要班级ID
      type: Number,
      default: 0,
    },
    sectionMaxNum: {
      default: undefined,
    },
    // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
    goodsType: {
      type: [Number, String],
      default: 0,
    },
    menuAllList: {
      // 课程所有子目录结构列表
      type: Array,
      default: () => [],
    },
    sectionItem: {
      // 用户最后一次看的录播的信息
      type: Object,
      default: () => {},
    },
  },
  components: {
    courseChapter,
  },
  data() {
    return {
      down: true,
      list: [],
    };
  },
  mounted() {
    // console.log('模块的needOpen:', this.needOpen, 'chapterOpen:', this.chapterOpen);
    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) {
      // url: '/app/common/course/chapterList/'+data,
      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;
          }
          this.list = res.data.data;
        }
      });
    },
    getReChapterList(moduleId, courseId) {
      this.$api
        .reChapterList({
          moduleId: moduleId,
          gradeId: this.gradeId,
          courseId: courseId,
          rebuild: 1,
          orderGoodsId: this.orderGoodsId
        })
        .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;
            }
            this.list = res.data.data;
          }
        });
    },
    getBuyChapterList(moduleId, courseId) {
      // course/chapterList
      this.$api
        .reChapterList({
          moduleId: moduleId,
          gradeId: this.gradeId,
          courseId: courseId,
          orderGoodsId: this.orderGoodsId
        })
        .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;
              if (Object.keys(this.sectionItem).length) {
                item["needOpen"] =
                  item.chapterId == this.sectionItem.chapterId ? true : false;
              } else {
                item["needOpen"] = i == 0 ? true : false;
              }
            }
            this.list = res.data.data;
            // console.log('章的列表：', this.list);
          }
        });
    },
    /**
     * 去做题
     */
    async toDoModuleExam(
      id,
      goodsId = 0,
      moduleId = 0,
      chapterId = 0,
      item,
      index
    ) {
      if (item.doType === 2 && item.learning == 1) {
        return;
      }
      if (this.learningOrder == 2) {
        let newRows = [];
        newRows = this.menuAllList.filter((e) => e.moduleId == moduleId);
        let isAllLearn = newRows.every((item) => {
          return item.studyStatus == 1;
        });
        if (isAllLearn) {
          uni.navigateTo({
            url:
              "/pages2/class/questionBank?courseId=" +
              this.courseId +
              "&gradeId=" +
              this.gradeId +
              "&isFromVideo=1&id=" +
              id +
              "&goodsid=" +
              goodsId +
              "&moduleId=" +
              moduleId +
              "&chapterId=" +
              chapterId +
              "&orderGoodsId=" +
              this.orderGoodsId +
              "&type=3" +
              "&learning=" +
              item.learning +
              "&isBackVideo=" +
              1,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: "请学完视频课程再进行练习和测试",
          });
        }
      } else {
        uni.navigateTo({
          url:
            "/pages2/class/questionBank?courseId=" +
            this.courseId +
            "&gradeId=" +
            this.gradeId +
            "&isFromVideo=1&id=" +
            id +
            "&goodsid=" +
            goodsId +
            "&moduleId=" +
            moduleId +
            "&chapterId=" +
            chapterId +
            "&orderGoodsId=" +
            this.orderGoodsId +
            "&type=3" +
            "&learning=" +
            item.learning +
            "&isBackVideo=" +
            1,
        });
      }
    },
  },
  computed: {
    ...mapGetters(["chapterOpen"]),
    learnStatus() {
      let { id, courseId } = this.menuItem;
      if (
        this.sectionItem.courseId == courseId &&
        this.sectionItem.moduleId == id
      ) {
        return 0;
      }
      const list = this.menuAllList.filter(
        (e) => e.courseId == courseId && e.moduleId == id
      );
      const isAllLearn = list.every((item) => {
        return item.studyStatus == 1;
      });
      return isAllLearn ? 1 : -1;
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  height: 70rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1rpx solid #eeeeee;
  .title_name {
    font-size: 24rpx;
    font-weight: 500;
    color: #333333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .icon_up {
    width: 24rpx;
    height: 24rpx;
  }
  .title_status {
    width: 80rpx;
    height: 28rpx;
    border-radius: 8rpx;
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
  }
  .gre {
    background: #34c759;
  }
  .blue {
    background: #409eff;
  }
  .grey {
    background: #909399;
  }
}

.examBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .exam {
    font-size: 30rpx;
    display: flex;
    align-items: center;
    margin: 20rpx 0;
  }
  .eTag {
    width: 64rpx;
    height: 36rpx;
    text-align: center;
    line-height: 36rpx;
    font-size: 20rpx;
    background: #007aff;
    border-radius: 8rpx;
    color: #ffffff;
  }
}
.tagRe {
  //   width: 80rpx;
  line-height: 28rpx;
  padding: 0 8rpx;
  height: 28rpx;
  background: #ff3b30;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
}
.tagGreen {
  width: 80rpx;
  height: 28rpx;
  background: #34c759;
  border-radius: 8rpx;
  font-size: 20rpx;
  color: #ffffff;
  text-align: center;
}
</style>