zc_saas_pc/src/pages/mock-report/index.vue

<template>
  <div class="bank-report">
    <Header></Header>
    <section class="section">
      <!-- <div class="re_back">
        <el-button
          type="primary"
          plain
          round
          size="mini"
          class="back-btn"
          @click="$router.back(-1)"
          >返回</el-button
        >
      </div> -->

      <template
        v-if="
          subscribeInfo.liveStartTime <= sysTime &&
          subscribeInfo.liveEndTime >= sysTime
        "
      >
        <div class="container section__top">
          <div class="text">
            {{ subscribeInfo.liveStartTime}}
            模考讲解直播将在{{
              $tools.timestampToTime(subscribeInfo.liveStartTime, false, true)
            }}开始，开启模考讲解直播提醒,不错过每一个考点
          </div>

          <el-button type="primary" class="btn" round @click="goLive()"
            >立即前往查看直播</el-button
          >
        </div>
      </template>
      <template v-else>
        <div
          class="container section__top"
          v-if="subscribeInfo.liveSubscribe == 0 && subscribeInfo.liveStartTime"
        >
          <div class="text">
            模考讲解直播将在{{
              $tools.timestampToTime(subscribeInfo.liveStartTime, false, true)
            }}开始，开启模考讲解直播提醒,不错过每一个考点
          </div>

          <el-button
            type="primary"
            class="btn"
            round
            @click="showLiveModal = true"
            >开启模考讲解直播提醒</el-button
          >
        </div>

        <div
          class="container section__top"
          v-if="subscribeInfo.liveSubscribe == 1 && subscribeInfo.liveStartTime"
        >
          <div class="text">
            模考讲解直播将在{{
              $tools.timestampToTime(subscribeInfo.liveStartTime, false, true)
            }}开始
          </div>

          <el-button type="primary" disabled class="btn" round
            >直播提醒已开启</el-button
          >
        </div>
      </template>
      <div class="container">
        <div
          class="section__header section__header--warm"
          v-if="examData.doType == 2 && reportdata.reportStatus === null"
        >
          <div class="title">
            <span class="icon">X</span>
            测试未通过
          </div>
          <div class="desc" v-if="reportdata.doTime">
            总时间：{{ $tools.secondToTime(reportdata.examTime) }}
            <span class="note"
              >答题时长：{{
                $tools.secondToTime(reportdata.doTime, false)
              }}</span
            >
          </div>
        </div>
        <div
          class="section__header section__header--success"
          v-if="examData.doType == 2 && reportdata.reportStatus === 1"
        >
          <div class="title">
            <span class="icon">✔</span>
            测试通过
          </div>
          <div class="desc" v-if="reportdata.doTime">
            总时间：{{ $tools.secondToTime(reportdata.examTime) }}
            <span class="note"
              >答题时长：{{
                $tools.secondToTime(reportdata.doTime, false)
              }}</span
            >
          </div>
        </div>

        <template v-else>
          <div class="section__header" v-if="reportdata.doTime">
            <div class="desc">
              总时间：{{ $tools.secondToTime(reportdata.examTime) }}
              <span class="note"
                >答题时长：{{
                  $tools.secondToTime(reportdata.doTime, false)
                }}</span
              >
            </div>
          </div>
        </template>

        <div class="section__body">
          <div class="section__body__content">
            <div class="left-box" v-if="reportdata.totalScore">
              <div class="left-box__in">
                <div class="title">
                  试卷得分
                  <span class="note">（客观题）</span>
                </div>
                <div class="desc" style="margin-top: 70px">
                  {{ reportdata.performance }}
                </div>
                <div class="other">满分{{ reportdata.totalScore }}</div>
              </div>
              <!-- <div class="left-box__in left-box__in--bottom">
                <div class="title">
                  试卷得分
                  <span class="note">（客观题+主观题）</span>
                </div>
                <div class="desc">
                  {{ reportdata.performance + reportdata.score }}
                </div>
                <div class="other">满分{{ reportdata.totalScore }}</div>
              </div> -->
            </div>
            <div class="right-box">
              <div class="right-box__in">
                <div class="title">
                  正确率
                  <span class="note">（客观题）</span>
                </div>
                <div class="desc">
                  <!-- 练习 -->
                  <template v-if="examData.doType == 1">
                    {{
                      ((reportdata.rightQuestionNum /
                        reportdata.doQuestionNum || 0) *
                        100)
                        | toFixed(0)
                    }}%
                  </template>
                  <!-- 考试 -->
                  <template v-if="examData.doType == 2">
                    {{
                      ((reportdata.rightQuestionNum /
                        reportdata.totalQuestionNum || 0) *
                        100)
                        | toFixed(0)
                    }}%
                  </template>
                </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">
                    {{ wrongRecordWrongNum }}
                  </div>
                  <div class="child__desc">错误题数</div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="section__footer">
          <el-button type="primary" @click="back" class="btn"
            >返回列表</el-button
          >
          <!-- <el-button type="primary" class="btn" @click="doRepeat(reportdata)"
            >重新做题</el-button
          > -->
          <el-button
            type="primary"
            class="btn"
            @click="wrongExplain(reportdata)"
            >错题解析</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">
            <!-- <p
              v-if="
                !courseList.length
              "
              class="text_align"
            >
              无推荐课程
            </p> -->
            <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
      width="462px"
      height="453px"
      class="info"
      :visible.sync="showLiveModal"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="info__content">
        <img src="@/assets/liveRing.png" alt="" />
        <div class="main">
          <div class="title">开启模考讲解直播提醒</div>
          <div class="desc">
            此科目模考分析将在{{
              $tools.timestampToTime(subscribeInfo.liveStartTime, false, true)
            }}进行直播讲解
            <br />
            开启直播提醒，不错过名师讲解
          </div>

          <div class="btns">
            <el-button class="btn" @click="showLiveModal = false"
              >暂不开启</el-button
            >
            <el-button type="primary" class="btn" @click="openRemind"
              >开启提醒</el-button
            >
          </div>
        </div>
      </div>
    </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, mapActions } from "vuex";
export default {
  name: "BankExplain",
  components: {
    Footer,
    Header,
    ToolBar,
    GoodsItem,
  },
  data() {
    return {
      mockName: "",
      showLiveModal: false,
      wrongRecordWrongNum: 0,
      nextExamId: "",
      examData: {},
      reportdata: {},
      examId: 0,
      recordId: 0,
      eachExamId: 0,
      subscribeId: 0,
      subscribeInfo: {},
      courseList: [],
			pageNum: 1,
			pageSize: 10,
			total: 0,
    };
  },
  computed: {
    ...mapGetters(["examResult", "sysTime"]),
  },
  async mounted() {
    console.log('sysTime', this.sysTime)
    this.eachExamId = this.$route.query.eachExamId;
    this.examId = this.$route.query.examId;
    this.recordId = this.$route.query.recordId;
    this.subscribeId = this.$route.query.subscribeId;
    this.getcourList()
    this.setSystemTime();
    this.mockSubscribeInfo();
    this.mockWrongRecordWrongNum();
    await this.bankExam();
    await this.mockReport();
  },
  methods: {
    ...mapActions(["setSystemTime"]),
      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
            }
        })
    },
    currentChangeCou(val) {
      this.pageNum = val
      this.getcourList()
    },
    goLive() {
      this.$router.push({
        path: "/living-room/" + this.subscribeInfo.liveUrl,
        query: {
          sectionType: 2,
        },
      });
    },
    openRemind() {
      this.showLiveModal = false;
      this.$request
        .mockSubscribeEdit({
          subscribeId: this.subscribeId,
          liveSubscribe: 1,
        })
        .then((res) => {
          if (res.code == 200) {
            this.mockSubscribeInfo();
            this.$message.success("开启成功");
          }
        });
    },
    mockSubscribeInfo() {
      if (!this.subscribeId) {
        return;
      }
      this.$request.mockSubscribeInfo(this.subscribeId).then((res) => {
        this.subscribeInfo = res.data;
      });
    },
    back() {
      this.$router.back(-1);
    },
    /**
     * 去做题
     */
    async doRepeat(reportdata) {
      // await this.getDetail(reportdata.goodsId);
      let count = await this.examRecordCount(
        reportdata.examId,
        reportdata.goodsId
      );
      let answerNum = await this.getExamDetail(reportdata.examId);
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$message({
          type: "warning",
          message: "该试卷只能答题" + answerNum + "次!",
        });
        return;
      }

      this.$router.replace({
        path: "/bank-exam/" + reportdata.goodsId,
        query: {
          orderGoodsId: this.orderGoodsId,
          examId: reportdata.examId,
          moduleId: reportdata.moduleId || 0,
          chapterId: reportdata.chapterId || 0,
        },
      });
    },

    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$request.getExamDetail(exam_id).then((res) => {
          resolve(res.data.answerNum);
        });
      });
    },

    /**
     * 查询试卷历史做题次数
     */
    examRecordCount(examId, goodsId) {
      return new Promise((resolve) => {
        this.$request
          .examRecordCount({
            examId: examId,
            goodsId: goodsId,
          })
          .then((res) => {
            resolve(res.data);
          });
      });
    },
    getDetail(goodsId) {
      return new Promise((resolve) => {
        this.$request
          .orderInfo({
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            this.goodsData = res.data;
            resolve();
          });
      });
    },
    mockWrongRecordWrongNum() {
      return new Promise((resolve) => {
        this.$request.mockWrongRecordWrongNum(this.recordId).then((res) => {
          this.wrongRecordWrongNum = res.data || 0;
          resolve();
        });
      });
    },

    backBank() {
      this.$router.replace({
        path: "/bank-exam/" + this.goodsId,
        query: {
          orderGoodsId: this.orderGoodsId,
          examId: this.nextExamId,
          moduleId: this.moduleId || 0,
          chapterId: this.chapterId || 0,
        },
      });
    },

    bankExam() {
      return new Promise((resolve) => {
        this.$request.bankExam(this.examId).then((res) => {
          this.examData = res.data;
          resolve();
        });
      });
    },

    mockReport() {
      return new Promise((resolve) => {
        this.$request.mockReport(this.recordId).then((res) => {
          this.reportdata = res.data;
          resolve();
        });
      });
    },

    wrongExplain(reportdata) {
      this.$router.push({
        path: "/mock-exam-wrong-explain/" + reportdata.recordId,
        query: {
          examId: reportdata.examId,
        },
      });
    },

    allExplain(reportdata) {
      this.$router.push({
        path: "/mock-exam-all-explain/" + reportdata.recordId,
        query: {
          examId: reportdata.examId,
        },
      });
    },
  },
};
</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 {
    &__top {
      height: 72px;
      background: #f7f9fc;
      display: flex;
      align-items: center;
      margin-top: 20px;
      padding: 0 20px;
      justify-content: space-between;

      .text {
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
      }

      .btn {
        width: 200px;
        height: 32px;
        font-size: 16px;
        border-radius: 16px;
        padding: 0;
        line-height: 32px;
        text-align: center;
      }
    }
    &__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;

                &:nth-last-of-type(1) {
                  border-right: 0;
                }

                &--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;
      }
    }
  }

  .info {
    /deep/ .el-dialog__header {
      display: none;
    }
    /deep/ .el-dialog__body {
      padding: 0;
      overflow: unset;
    }

    &__content {
      .main {
        padding: 24px;

        .title {
          text-align: center;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #333333;
        }

        .desc {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #666666;
          line-height: 24px;
        }

        .btns {
          margin-top: 50px;
          text-align: center;

          .btn {
            display: inline-block;
            width: 160px;
            height: 40px;
            padding: 0;
            border-radius: 8px;
            margin: 0 8px;
          }
        }
      }
    }
  }
}
</style>