saas_pc/src/pages/course-report/index.vue

<template>
  <div class="bank-report">
    <Header></Header>
    <section class="section">
      <div class="container">
        <div class="re_back">
          <el-button
            type="primary"
            plain
            round
            size="mini"
            class="back-btn"
            @click="$router.back(-1)"
            >返回</el-button
          >
        </div>
        <div
          class="section__header section__header--warm"
          v-if="!reportdata.reportStatus"
        >
          <div class="title">
            <span class="icon">X</span>
            测试未通过
          </div>
        </div>
        <div
          class="section__header section__header--success"
          v-if="reportdata.reportStatus"
        >
          <div class="title">
            <span class="icon">✔</span>
            测试通过
          </div>
        </div>

        <div class="section__body">
          <div class="section__body__content">
            <div class="right-box">
              <div class="right-box__in">
                <div class="title">
                  试卷得分
                  <span class="note">（客观题）</span>
                </div>
                <div class="desc">{{ reportdata.performance }}</div>
                <div class="other">满分{{ reportdata.totalScore }}</div>
              </div>
              <div class="right-box__in right-box__in--bottom">
                <div class="child">
                  <div class="child__title child__title--success">
                    {{ reportdata.rightQuestionNum }}
                  </div>
                  <div class="child__desc">正确题数</div>
                </div>
                <div class="child">
                  <div class="child__title child__title--yellow">
                    {{ reportdata.lessQuestionNum }}
                  </div>
                  <div class="child__desc">少选题数</div>
                </div>
                <div class="child child---right">
                  <div class="child__title child__title--warm">
                    {{ doWrongQuestionNum }}
                  </div>
                  <div class="child__desc">错误题数</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section__footer">
          <el-button type="primary" class="btn" @click="backList()"
            >返回列表</el-button
          >
          <el-button
            type="primary"
            class="btn"
            @click="doRepeat(reportdata)"
            v-if="reportdata.doMode != 3 && !reportdata.reportStatus"
            >重新做题</el-button
          >
          <el-button
            type="primary"
            class="btn"
            @click="wrongExplain(reportdata)"
            v-if="doWrongQuestionNum"
            >错题解析</el-button
          >
          <el-button type="primary" class="btn" @click="allExplain(reportdata)"
            >全部解析</el-button
          >
        </div>

        <div v-if="courseList.length" class="course_list">
          <div class="course__header">
            <div class="title">相关推荐</div>
          </div>
          <div class="course__body">
            <ul class="list clearfix">
              <template v-for="(item, index) in courseList">
                <li class="course-item" :key="index">
                  <GoodsItem :item="item"></GoodsItem>
                </li>
              </template>
            </ul>
          </div>

          <div class="pagination">
            <el-pagination
              @current-change="currentChangeCou"
              background
              layout="prev, pager, next"
              :total="total"
              :page-size="pageSize"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </section>
    <el-dialog
      title="提示"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :visible.sync="nextDialogStatus"
      width="400px"
    >
      <span>是否继续学习?</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="nextDialogStatus = false"
          >取消</el-button
        ><el-button type="primary" @click="nextJump">确定</el-button>
      </span>
    </el-dialog>
    <ToolBar></ToolBar>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "@/components/footer/index";
import Header from "@/components/header/index";
import ToolBar from "@/components/toolbar/index";
import GoodsItem from "@/components/goodsItem/index";
import { mapGetters } from "vuex";
export default {
  name: "BankExplain",
  components: {
    Footer,
    Header,
    ToolBar,
    GoodsItem
  },
  data() {
    return {
      nextDialogStatus: false,
      examId: "",
      courseList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      recordId: "",
      type: 0, //type:1章卷，2节卷，3模考卷
      reportdata: {},
      studyItem: {}
    };
  },
  computed: {
    ...mapGetters(["examResult"]),
    doWrongQuestionNum() {
      let value =
        this.reportdata.totalQuestionNum -
        this.reportdata.rightQuestionNum -
        this.reportdata.lessQuestionNum;
      return value > 0 ? value : 0;
    }
  },
  created() {
    const { examId, recordId, type } = this.$route.query;
    this.examId = examId;
    this.recordId = recordId;
    this.type = type;
    this.getcourList();
    this.bankReport();
  },
  methods: {
    studyRecordMenuAllList(item) {
      return new Promise(resolve => {
        this.$request
          .studyRecordMenuAllListWithExam({
            courseId: item.courseId,
            gradeId: item.gradeId,
            goodsId: item.goodsId,
            orderGoodsId: item.orderGoodsId
          })
          .then(res => {
            res.data = res.data.filter(
              e => e.sectionType != 2 && e.doType != 1
            );
            resolve(res.data);
          });
      });
    },
    checkListDontStudy(list) {
      if (list.length === 0) {
        this.$message.warning("该课程无学习内容");
        return false;
      }
      const index = list.findIndex(
        i => i.studyStatus == -1 || i.studyStatus == 0
      );
      if (index != -1) {
        return list[index];
      } else {
        this.$message.success("该课程内容已全部学完");
        return false;
      }
    },
    // 新增用户视频学习日志
    studyLog(item, studyItem) {
      this.$axios({
        url: "/user/study/log",
        method: "post",
        data: {
          goodsId: item.goodsId,
          courseId: studyItem.courseId,
          moduleId: studyItem.moduleId || 0,
          chapterId: studyItem.chapterId || 0,
          sectionId: studyItem.sectionId || 0,
          fromPlat: 2, //来源平台 1小程序 2PC网站
          goodsType: 1, // 商品类型 1视频2题库 3补考 4前培 5虚拟赠送题库 6直播
          orderGoodsId: item.orderGoodsId
        }
      }).then(res => {
        console.log("直播的用户学习日志:", res);
      });
    },
    async nextJump() {
      var item = this.reportdata;
      var studyItem = this.studyItem;
      if (studyItem.sectionId) {
        //返回节
        this.$router.replace({
          path: `/my-course-detail/${item.goodsId}`,
          query: {
            gradeId: item.gradeId,
            orderGoodsId: item.orderGoodsId,
            courseId: studyItem.courseId,
            chapterId: studyItem.chapterId,
            moduleId: studyItem.moduleId,
            sectionId: studyItem.sectionId,
            recordingUrl: studyItem.recordingUrl,
            liveUrl: studyItem.liveUrl,
            sectionType: studyItem.sectionType,
            liveStartTime: studyItem.liveStartTime,
            liveEndTime: studyItem.liveEndTime
          }
        });
      }
      if (studyItem.examId) {
          this.$router.replace({
            path: "/course-exam/" + item.goodsId,
            query: {
              courseId: studyItem.courseId,
              gradeId: item.gradeId,
              moduleId: studyItem.moduleId || 0,
              sectionId: studyItem.sectionId || 0,
              examId: studyItem.examId,
              learning: studyItem.studyStatus,
              type: studyItem.examType, //题卷类型 1章卷 2节卷 3模块卷,
              chapterId: studyItem.chapterId || 0,
              orderGoodsId: item.orderGoodsId,
              nextStatus: "next" //是否继续播放课程
            }
          });
      }
      this.nextDialogStatus = false;
    },
    async GetNext() {
      var item = this.reportdata;
      this.$message.success("进入学习页");
      console.log("进入学习页");
      //获取当前课程所有节和试卷
      let list = await this.studyRecordMenuAllList(item);
      //返回第一个没学习的节或试卷
      this.studyItem = this.checkListDontStudy(list);
      this.nextDialogStatus = true;
    },
    getcourList() {
      this.$axios({
        url: "/apply/recommend/goodsList",
        method: "post",
        data: {
          examId: this.examId,
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          platform: 2
        }
      }).then(res => {
        if (res.code == 200) {
          this.courseList = res.rows || [];
          this.total = res.total;
        }
      });
    },
    bankReport() {
      this.$request.bankReportData(this.recordId).then(res => {
        this.reportdata = res.data;
        if (
          this.$route.query.nextStatus == "next" &&
          this.reportdata.reportStatus
        ) {
          this.GetNext();
        }
        console.log("reportdata:", this.reportdata);
      });
    },
    currentChangeCou(val) {
      this.pageNum = val;
      this.getcourList();
    },
    backList() {
      this.$router.go(-1);
    },
    /**
     * 去做题
     */
    async doRepeat(reportdata) {
      // answerNum==0没有答题次数限制
        this.$router.replace({
          path: "/course-exam/" + this.reportdata.goodsId,
          query: {
            courseId: this.reportdata.courseId,
            gradeId: this.reportdata.gradeId || 0,
            moduleId: this.reportdata.moduleId || 0,
            sectionId: this.reportdata.sectionId || 0,
            examId: this.reportdata.examId,
            type: this.type,
            chapterId: this.reportdata.chapterId || 0,
            orderGoodsId: this.reportdata.orderGoodsId
          }
        });
    },
    wrongExplain(reportdata) {
      this.$router.push({
        path: "/bank-exam-wrong-explain/" + reportdata.recordId,
        query: {
          examId: reportdata.examId,
          moduleId: reportdata.moduleId || 0,
          chapterId: reportdata.chapterId || 0,
          goodsId: reportdata.goodsId,
          orderGoodsId: reportdata.orderGoodsId,
          courseType: 2
        }
      });
    },

    allExplain(reportdata) {
      this.$router.push({
        path: "/bank-exam-all-explain/" + reportdata.recordId,
        query: {
          simulateStatus: reportdata.doMode === 3 ? 1 : 0,
          examId: reportdata.examId,
          moduleId: reportdata.moduleId || 0,
          chapterId: reportdata.chapterId || 0,
          goodsId: reportdata.goodsId,
          courseType: 2
        }
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.bank-report {
  .re_back {
    text-align: right;
    margin: 10px 0px;
    .back-btn {
      width: 100px;
    }
  }
  .section {
    &__header {
      height: 120px;
      border-radius: 0px;
      padding-top: 10px;

      &--warm {
        background: #fff3f5;
        .title {
          text-align: center;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #ff3b30;

          .icon {
            vertical-align: middle;
            display: inline-block;
            width: 48px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            background: #ff3b30;
            color: #fff;
            font-size: 30px;
          }
        }
      }

      &--success {
        background: #f8fef9;
        .title {
          text-align: center;
          font-size: 18px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #34c759;

          .icon {
            vertical-align: middle;
            display: inline-block;
            width: 48px;
            height: 58px;
            text-align: center;
            line-height: 58px;
            background: #34c759;
            color: #fff;
            font-size: 30px;
          }
        }
      }

      .desc {
        margin-top: 20px;
        text-align: center;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;

        .note {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #999999;
        }
      }
    }

    &__body {
      width: 100%;
      height: 305px;
      border-bottom: 1px solid #eee;

      &__content {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;

        .left-box {
          width: 300px;
          height: 240px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          margin: 0 10px;

          &__in {
            flex: 1;
            border-bottom: 1px solid #eee;
            padding: 5px 18px;

            .title {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;

              .note {
                color: #999;
              }
            }

            .desc {
              margin-top: 20px;
              font-size: 48px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;
              text-align: center;
            }

            .other {
              margin-top: 14px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 24px;
              text-align: center;
            }

            &--bottom {
              border: 0;
            }
          }
        }

        .right-box {
          margin: 0 10px;
          display: flex;
          width: 300px;
          height: 240px;
          background: #ffffff;
          border: 1px solid #eeeeee;
          border-radius: 8px;
          flex-direction: column;

          &__in {
            flex: 1;
            border-bottom: 1px solid #eee;
            padding: 5px 18px;

            .title {
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;

              .note {
                color: #999;
              }
            }

            .desc {
              margin-top: 20px;
              font-size: 48px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #333333;
              line-height: 24px;
              text-align: center;
            }

            .other {
              margin-top: 14px;
              font-size: 14px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              color: #999999;
              line-height: 24px;
              text-align: center;
            }

            &--bottom {
              padding: 0;
              border: 0;
              height: 100%;
              display: flex;
              .child {
                flex: 1;
                height: 100%;
                border-right: 1px solid #eee;
                padding: 5px 18px;

                &--right {
                  border: 0;
                }

                &__title {
                  margin-top: 20px;
                  font-size: 36px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #34c759;
                  line-height: 24px;
                  text-align: center;

                  &--success {
                    color: #34c759;
                  }

                  &--warm {
                    color: #ff3b30;
                  }

                  &--yellow {
                    color: #ffc53d;
                  }
                }

                &__desc {
                  margin-top: 10px;
                  font-size: 14px;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  color: #999999;
                  line-height: 24px;
                  text-align: center;
                }
              }
            }
          }
        }
      }
    }

    &__footer {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 40px 0;

      .btn {
        cursor: pointer;
        width: 140px;
        height: 32px;
        padding: 0;
        border-radius: 16px;
        text-align: center;
        line-height: 30px;
        font-size: 12px;
        margin: 0 4px;
      }
    }
  }

  .course_list {
    .course {
      background: #f5f7fa;
      padding-top: 40px;

      &__header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        .title {
          background: url("~@/assets/video.png") no-repeat left center;
          padding-left: 36px;
          font-size: 24px;
          font-family: YouSheBiaoTiHei;
          font-weight: 400;
          color: #333333;
          text-shadow: 0px 6px 6px rgba(249, 113, 13, 0.08);
        }
      }

      &__body {
        .list {
          width: 100%;

          .course-item {
            float: left;
          }
        }
      }
    }
    .pagination {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 20px 0px;
    }
  }
}
</style>