zc_saas_h5/components/course/courseChapterMulu.vue

<template>
<!-- style="margin: 20rpx 0" -->
  <cover-view>
    <cover-view class="title" @click="openChapter(menuItem)">
      <cover-image src="/static/icon/up1.png" class="icon_up" v-if="down"></cover-image>
      <cover-image src="/static/icon/down1.png" class="icon_up" v-if="!down"></cover-image>
      <!-- <u-icon name="arrow-down" color="#999" size="24" v-if="!down"></u-icon>
      <u-icon name="arrow-right" color="#999" size="24" v-if="down"></u-icon> -->
      <cover-view class="menu_name">{{ menuItem.name }}</cover-view>
    </cover-view>
    <cover-view v-show="!down">
      <cover-view v-for="(itemM, indexM) in list" :key="indexM">
        <cover-view v-if="itemM.type != 2">
          <course-section-mulu
						:isLive="isLive"
						:orderGoodsId="orderGoodsId"
            :sectionMaxNum="sectionMaxNum"
            :preItem="list[indexM - 1] || preItem"
            :learningOrder="learningOrder"
            :courseId="courseId"
            @playEnd="refreshList($event)"
            :goodsId="goodsId"
            :isBuy="isBuy"
            :nextMenuItem="findNextSection(indexM)"
            :isRebuild="isRebuild"
            :gradeId="gradeId"
            :menuItem="itemM"
            :levelId="levelId + '-' + itemM.sectionId"
          ></course-section-mulu>
          <!-- <u-line v-if="indexM < list.length - 1"></u-line> -->
        </cover-view>
        <cover-view v-if="itemM.type == 2">
          <!-- <u-line></u-line> -->
          <cover-view
            class="examBox"
            @click="
              toDo(
                itemM.typeId,
                goodsId,
                itemM.moduleId,
                itemM.chapterId,
                itemM,
                indexM
              )
            "
          >
            <cover-view class="exam">
              <cover-view class="eTag">{{
                itemM.doType == 1 ? "练习" : "考试"
              }}</cover-view>
              <cover-view style="margin-left: 15rpx;flex:1;">{{ itemM.name }}</cover-view>
            </cover-view>
            <cover-view v-if="isRebuild || itemM.rebuild > 0" class="tagRe"
              >待重修</cover-view
            >
            <cover-view v-else>
              <cover-view
                :class="{
                  tagGreen: itemM.learning == 1,
                  tagRe: itemM.learning == 0 || itemM.rebuild > 0,
                }"
              >
                <cover-view v-if="itemM.rebuild > 0">待重测</cover-view>
                <cover-view v-else-if="itemM.learning == 1">合格</cover-view>
                <cover-view v-else-if="itemM.learning == 0">不合格</cover-view>
              </cover-view>
            </cover-view>
          </cover-view>
        </cover-view>
      </cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
// import courseSection from "@/components/course/courseSection.vue";
import courseSectionMulu from "@/components/course/courseSectionMulu.vue"
export default {
  name: "courseChapter",
  props: {
		isLive:false,
		orderGoodsId:{
			default:0
		},
    preItem: {
      default: undefined,
    },
    learningOrder: {
      //是否设置学习顺序 1 章节顺序 0不设置 2从头学到尾顺序
      type: Number,
      default: 0,
    },
    needOpen: {
      //是否默认展开
      type: Boolean,
      default: false,
    },
    menuItem: {
      type: Object,
      default: {},
    },
    isBuy: {
      type: Boolean,
      default: false,
    },
    levelId: {
      type: String,
      default: "",
    },
    goodsId: {
      type: Number,
      default: 0,
    },
    courseId: {
      type: Number,
      default: 0,
    },
    isRebuild: {
      type: Boolean,
      default: false,
    },
    gradeId: {
      type: Number,
      default: 0,
    },
    sectionMaxNum: {
      default: undefined,
    },
  },
  components: {
    courseSectionMulu,
  },
  data() {
    return {
      down: true,
      list: [],
      examList: {},
      canLearn: false, //是否全部视频看完才可以练习、测试
    };
  },
  onLoad() {},
  created() {},
  mounted() {
    if (this.needOpen && this.chapterOpen) {
      this.updateChapterOpen(false);
      this.openChapter(this.menuItem);
    }
  },
  onPageShow() {
    if (this.isBuy) {
      this.refreshList({ isRebuild: this.isRebuild });
    }
  },
  methods: {
    ...mapMutations(["updateChapterOpen"]),
    goodsTodayStudySectionNum() {
      return new Promise((resolve) => {
        this.$api
          .goodsTodayStudySectionNum({
            goodsId: this.goodsId,
            gradeId: this.gradeId,
          })
          .then((res) => {
            if (res.data.code == 200) {
              resolve(res.data.data);
            }
          });
      });
    },
    refreshList(isRebuild) {
      console.log(9999);
      let moduleId = this.menuItem.moduleId ? this.menuItem.moduleId : 0;
      if (this.isRebuild) {
        this.getReSectionList(
          this.menuItem.id,
          this.menuItem.courseId,
          moduleId
        );
      } else {
        this.getBuySectionList(
          this.menuItem.id,
          this.menuItem.courseId,
          moduleId
        );
        //				this.getMenuExamList(item.id,item.courseId,moduleId)
      }

      this.$emit("playEnd", { isRebuild: isRebuild.isRebuild });
      console.log(10000);
      // let moduleId = this.menuItem.moduleId?this.menuItem.moduleId:0
      // this.getBuySectionList(this.menuItem.id,this.menuItem.courseId,moduleId)
    },
    findNextSection(index) {
      for (let i = index + 1; i < this.list.length; i++) {
        return this.list[i];
      }
      return {};
    },
    studyRecordMenuAllList() {
      return new Promise((resolve) => {
        this.$api
          .studyRecordMenuAllList({
            courseId: this.courseId,
            gradeId: this.gradeId,
            goodsId: this.goodsId,
          })
          .then((res) => {
            if (res.data.code == 200) {
              resolve(res.data.data);
            }
          });
      });
    },
		gradeCheckGoodsStudy(id) {
			let moduleId = this.menuItem.moduleId || 0;
			let chapterId = this.menuItem.chapterId || 0;
			let sectionId = this.menuItem.sectionId || this.menuItem.menuId;
			return new Promise(resolve => {
				this.$api.gradeCheckGoodsStudy({
					goodsId:this.goodsId,
					gradeId:this.gradeId,
					moduleId:this.menuItem.moduleId || 0,
					chapterId:this.menuItem.chapterId || 0,
					examId:id,
				}).then( res => {
					resolve(res.data.data)
				})
			})
		},
    /**
     * 去做题
     */
    async toDo(id, goodsId = 0, moduleId = 0, chapterId = 0, item, index) {
      let learnNum = await this.goodsTodayStudySectionNum()
			let hasLearn = await this.gradeCheckGoodsStudy(id);

      if(this.sectionMaxNum > 0) {
      	if(learnNum >= this.sectionMaxNum && !hasLearn) {
      		uni.showToast({
      			icon:'none',
      			title:`每天最多学习${this.sectionMaxNum}节`
      		})
      		return;
      	}
      }
      console.log(this.learningOrder, "this.learningOrder");
      if (this.learningOrder == 1) {
        if (this.canLearn) {
          let num = await this.bankRecordDoNum(item.typeId);
          //有次数限制
          if (item.answerNum - num > 0 && item.answerNum > 0) {
            // this.$set(this.list[index],'doNum',(item.doNum+1))
            console.log(this.list[index]);
            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,
            });
            //没有答题次数限制
          } else if (item.answerNum == 0) {
            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,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "该试卷只能答题" + item.answerNum + "次",
            });

            return;
          }
        } else {
          uni.showToast({
            icon: "none",
            title: "请按顺序学完视频课程再进行练习和测试",
          });
        }
      } else if (this.learningOrder == 2 && !item.rebuild) {
        let canLearn = this.list[index - 1].learning == 1;
        let rows = await this.studyRecordMenuAllList();
        let isStop = false;
        let newRows = [];
        for (let i = 0; i < rows.length; i++) {
          let moduleTrue = rows[i].moduleId == moduleId;
          let chapterTrue = rows[i].chapterId == chapterId;
          if (moduleTrue && chapterTrue) {
            isStop = true;
            if (rows[i].sectionType != 2) {
              //忽略直播
              newRows.push(rows[i]);
            }
          } else {
            if (!isStop) {
              if (rows[i].sectionType != 2) {
                //忽略直播
                newRows.push(rows[i]);
              }
            } else {
              break;
            }
          }
        }
        console.log(newRows);
        let isAllLearn = newRows.every((item) => {
          return item.studyStatus == 1;
        });

        if (isAllLearn) {
          //之前的都学完了

          // if(canLearn) { //视频的上一节学完

          let num = await this.bankRecordDoNum(item.typeId);
          //有次数限制
          if (item.answerNum - num > 0 && item.answerNum > 0) {
            // this.$set(this.list[index],'doNum',(item.doNum+1))
            console.log(this.list[index]);
            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,
            });
            //没有答题次数限制
          } else if (item.answerNum == 0) {
            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,
            });
          } else {
            uni.showToast({
              icon: "none",
              title: "该试卷只能答题" + item.answerNum + "次",
            });

            return;
          }
        } else {
          uni.showToast({
            icon: "none",
            title: "请学完视频课程再进行练习和测试",
          });
        }
      } else {
        let num = await this.bankRecordDoNum(item.typeId);
        //有次数限制
        if (item.answerNum - item.doNum > 0 && item.answerNum > 0) {
          // this.$set(this.list[index],'doNum',(item.doNum+1))
          console.log(this.list[index]);
          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,
          });
          //没有答题次数限制
        } else if (item.answerNum == 0) {
          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,
          });
        } else {
          uni.showToast({
            icon: "none",
            title: "该试卷只能答题" + item.answerNum + "次",
          });

          return;
        }
      }
    },
    bankRecordDoNum(examId) {
      return new Promise((resolve) => {
        this.$api
          .bankRecordDoNum({
            goodsId: this.goodsId,
            gradeId: this.gradeId,
            chapterId: this.menuItem.id,
            courseId: this.courseId,
            moduleId: 0,
            examId: examId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    openChapter(item) {
      console.log('展开章：',this.menuItem);
      this.down = !this.down;
      if (!this.down && this.list.length == 0) {
        console.log(item.id, 69);
        if (this.isBuy) {
          let moduleId = item.moduleId ? item.moduleId : 0;
          if (this.isRebuild) {
            this.getReSectionList(item.id, item.courseId, moduleId);
          } else {
            this.getBuySectionList(item.id, item.courseId, moduleId);
            //				this.getMenuExamList(item.id,item.courseId,moduleId)
          }
        } else {
          this.getSectionList(item.id);
        }
      }
    },
    getMenuExamList(chapterId, courseId, moduleId) {
      let self = this;
      this.$api
        .menuExamList({
          chapterId: chapterId,
          courseId: courseId,
          moduleId: moduleId,
        })
        .then((res) => {
          if (res.data.code == 200) {
            self.examList = res.data.rows;
          }
        });
    },
    getSectionList(chapterId) {
      let self = this;
    //   url: '/app/common/course/sectionList/'+data,查询章与节关系列表+章卷同级展示(不带用户信息)
      this.$api.sectionList(chapterId).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.sectionId;
            item.menuType = 3;
            //判断是否试听
            item.tryListen = false;
            if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
              item.tryListen = true;
            }
          }

          let newArr = res.data.data.filter((item) => {
            console.log(item);
            return item.type != 2;
          });
          this.canLearn = newArr.every((item) => {
            console.log(item);
            if (item.learning == 1) {
              return true;
            } else {
              return false;
            }
          });
          self.list = res.data.data;
        }
      });
    },
    getReSectionList(chapterId, courseId, moduleId) {
      let self = this;
      // /course/sectionList,查询章与节关系列表+章卷同级展示
      this.$api
        .reSectionList({
          chapterId: chapterId,
          gradeId: this.gradeId,
          courseId: courseId,
          rebuild: 1,
          moduleId: 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.sectionId;
              item.menuType = 3;
              //判断是否试听
              item.tryListen = false;
              if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
                item.tryListen = true;
              }
            }
            let newArr = res.data.data.filter((item) => {
              console.log(item);
              return item.type != 2;
            });
            this.canLearn = newArr.every((item) => {
              console.log(item);
              if (item.learning == 1) {
                return true;
              } else {
                return false;
              }
            });
            self.list = res.data.data;
          }
        });
    },
    getBuySectionList(chapterId, courseId, moduleId) {
      let self = this;
      // /course/sectionList,查询章与节关系列表+章卷同级展示
      this.$api
        .reSectionList({
          chapterId: chapterId,
          gradeId: this.gradeId,
          courseId: courseId,
          moduleId: 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.sectionId;
              item.menuType = 3;
              //判断是否试听
              item.tryListen = false;
              if (self.goodsAuditionConfigIdList.indexOf(item.id) !== -1) {
                item.tryListen = true;
              }
            }
            let newArr = res.data.data.filter((item) => {
              return item.type != 2;
            });
            this.canLearn = newArr.every((item) => {
              console.log(item);
              if (item.learning == 1) {
                return true;
              } else {
                return false;
              }
            });
            self.list = res.data.data;
          }
        });
    },
  },
  computed: { ...mapGetters(["goodsAuditionConfigIdList", "chapterOpen"]) },
};
</script>

<style lang="scss" scoped>
.tagRe {
  width: 80rpx;
  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;
}
.eTag {
	width:56rpx;
	height:42rpx;
	text-align: center;
	line-height: 42rpx;
	font-size: 20rpx;
  background: #007aff;
  border-radius: 8rpx;
  color: #ffffff;
}
.examBox {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.exam {
  font-size: 30rpx;
  display: flex;
  align-items: center;
  margin: 20rpx 0;
}
.icon_up {
  width: 24rpx;
  height: 24rpx;
}
.title {
  // margin-bottom: 30rpx;
  height: 78rpx;
  display: flex;
  align-items: center;
  border-bottom: 1rpx solid #EEEEEE;
  .menu_name {
    font-size: 24rpx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-left: 8rpx;
  }
}
</style>