saas_miniprogram/pages2/bank/question_detail.vue

<template>
  <view>
    <nav-bar title="进入刷题"></nav-bar>
    <view class="top">
      <navigator
        hover-class="none"
        :url="
          '/pages2/bank/question_statistics?orderGoodsId=' +
          orderGoodsId +
          '&id=' +
          id
        "
      >
        <view class="left">
          <view class="title">做题统计</view>
          <view class="progress">
            <view class="item-left">
              <view class="desc"><text>总进度</text></view>
              <view class="percent">
                {{
                  goodsCount.totalNum > 0
                    ? ((goodsCount.doNum / goodsCount.totalNum) * 100).toFixed(
                        (goodsCount.doNum / goodsCount.totalNum) * 100 == 100
                          ? 0
                          : 1
                      )
                    : 0
                }}
                <text class="per">%</text>
              </view>
            </view>
            <view class="item-right">
              <view class="up">
                <text class="orange">已答</text>
                <text>/未答</text>
              </view>

              <view class="down">
                <text class="orange">{{ goodsCount.doNum }}</text>
                <text>/{{ goodsCount.totalNum - goodsCount.doNum }}</text>
              </view>
            </view>
          </view>
        </view>
      </navigator>
      <navigator
        hover-class="none"
        :url="
          '/pages2/bank/wrongById?orderGoodsId=' +
          orderGoodsId +
          '&goodsid=' +
          id
        "
      >
        <view class="right">
          <view class="title">
            错题集
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view class="number">{{ goodsCount.wrongNum || "0" }}</view>
        </view>
      </navigator>
      <navigator
        hover-class="none"
        :url="
          '/pages2/bank/collectById?orderGoodsId=' +
          orderGoodsId +
          '&goodsid=' +
          id
        "
      >
        <view class="right">
          <view class="title">
            收藏集
            <u-icon name="arrow-right"></u-icon>
          </view>
          <view class="number">{{ goodsCount.collectNum || "0" }}</view>
        </view>
      </navigator>
    </view>
    <view class="title-list">
      <view class="content">
        <view class="list" v-for="(item1, index1) in bankList" :key="index1">
          <template v-if="item1.type == 1">
            <view
              class="moduleItem"
              @click="clickModule(item1.majorId, index1)"
            >
              <view class="courseName">{{ item1.name }}</view>
              <view>
                <image
                  src="/static/icon/up.png"
                  class="icon_up"
                  v-if="!item1.showList"
                ></image>
                <image
                  src="/static/icon/down.png"
                  class="icon_up"
                  v-if="item1.showList"
                ></image>
              </view>
            </view>

            <template v-if="item1.showList">
              <view v-for="(item2, index2) in item1.list" :key="index2">
                <view
                  class="section"
                  @click="
                    changeItem(
                      index1,
                      item2.chapterExamId,
                      item1.type,
                      index2,
                      item1.majorId
                    )
                  "
                >
                  <image
                    src="/static/icon/up1.png"
                    class="icon_up"
                    v-if="!item2.showList"
                  ></image>
                  <image
                    src="/static/icon/down1.png"
                    class="icon_up"
                    v-if="item2.showList"
                  ></image>
                  <!-- <u-icon name="arrow-up" color="#999" size="24" v-if="item2.showList"></u-icon>
									<u-icon name="arrow-down" color="#999" size="24" v-if="!item2.showList"></u-icon> -->
                  <text style="margin-left: 34rpx">{{ item2.name }}</text>
                </view>
                <view v-if="item2.showList">
                  <view
                    class="article active"
                    style="margin-left: 62rpx"
                    v-for="(article, index3) in item2.list"
                    :key="index3"
                  >
                    <view class="flex_auto">{{ article.examName }}</view>
                    <view
                      class="btn"
                      @click="
                        toDo(
                          article.examId,
                          goodsData.goodsId,
                          item1.majorId,
                          item2.chapterExamId
                        )
                      "
                      v-if="article.recordStatus == -1"
                      >做题</view
                    >
                    <view
                      class="btn"
                      @click="
                        continueDo(
                          article.recordId,
                          article.examId,
                          goodsData.goodsId,
                          item2.chapterExamId,
                          item1.majorId
                        )
                      "
                      v-if="article.recordStatus == 0 && article.doType == 1"
                      >继续</view
                    >
                    <view
                      class="btn"
                      :class="{
                        disabled:
                          article.answerNum > 0 &&
                          article.doNum >= article.answerNum,
                      }"
                      @click="
                        doRepeat(
                          article.recordId,
                          article.examId,
                          goodsData.goodsId,
                          item2.chapterExamId,
                          item1.majorId
                        )
                      "
                      v-if="
                        article.recordStatus == 1 ||
                        (article.recordStatus == 0 && article.doType == 2)
                      "
                      >重做</view
                    >
                  </view>
                </view>
                <u-line v-if="item1.length > 1"></u-line>
              </view>
            </template>
          </template>

          <template v-if="item1.type == 2">
            <view
              class="section"
              @click="changeItem(index1, item1.majorId, item1.type, '', 0)"
            >
              <image
                src="/static/icon/up1.png"
                class="icon_up"
                v-if="!item1.showList"
              ></image>
              <image
                src="/static/icon/down1.png"
                class="icon_up"
                v-if="item1.showList"
              ></image>
              <!-- <u-icon name="arrow-up" color="#999" size="24" v-if="item1.showList"></u-icon>
							<u-icon name="arrow-down" color="#999" size="24" v-if="!item1.showList"></u-icon> -->
              <text style="margin-left: 34rpx">{{ item1.name }}</text>
            </view>
            <view v-if="item1.showList">
              <view
                class="article active"
                style="margin-left: 64rpx"
                v-for="(article, index2) in item1.list"
                :key="index2"
              >
                <view class="flex_auto">{{ article.examName }}</view>
                <view
                  class="btn"
                  @click="
                    toDo(article.examId, goodsData.goodsId, 0, item1.majorId)
                  "
                  v-if="article.recordStatus == -1"
                  >做题</view
                >
                <view
                  class="btn"
                  @click="
                    continueDo(
                      article.recordId,
                      article.examId,
                      goodsData.goodsId,
                      0,
                      item1.majorId
                    )
                  "
                  v-if="article.recordStatus == 0 && article.doType == 1"
                  >继续</view
                >
                <view
                  class="btn"
                  :class="{
                    disabled:
                      article.answerNum > 0 &&
                      article.doNum >= article.answerNum,
                  }"
                  @click="
                    doRepeat(
                      article.recordId,
                      article.examId,
                      goodsData.goodsId,
                      item1.majorId,
                      0
                    )
                  "
                  v-if="
                    article.recordStatus == 1 ||
                    (article.recordStatus == 0 && article.doType == 2)
                  "
                  >重做</view
                >
              </view>
            </view>
          </template>

          <template v-if="item1.type == 3">
            <view class="article active">
              <view class="flex_auto">{{ item1.name }}</view>
              <view
                class="btn"
                @click="toDo(item1.majorId, goodsData.goodsId, 0, 0)"
                v-if="item1.recordStatus == -1"
                >做题</view
              >
              <view
                class="btn"
                @click="
                  continueDo(
                    item1.recordId,
                    item1.majorId,
                    goodsData.goodsId,
                    0,
                    0
                  )
                "
                v-if="item1.recordStatus == 0 && item1.doType == 1"
                >继续</view
              >
              <view
                class="btn"
                :class="{
                  disabled:
                    item1.answerNum > 0 && item1.doNum >= item1.answerNum,
                }"
                @click="
                  doRepeat(
                    item1.recordId,
                    item1.majorId,
                    goodsData.goodsId,
                    0,
                    0
                  )
                "
                v-if="
                  item1.recordStatus == 1 ||
                  (item1.recordStatus == 0 && item1.doType == 2)
                "
                >重做</view
              >
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      goodsData: {},
      bankList: [],
      id: "",
      goodsCount: {
        totalNum: 0,
      },
      orderGoodsId: "",
      firstEnter: true,
    };
  },
  onUnload() {},
  computed: { ...mapGetters(["userInfo"]) },
  onLoad(option) {
    this.orderGoodsId = option.orderGoodsId;
    this.id = option.id;
    this.getDetail();
    // this.goodsBankList();
    // this.getCollectNum();
    // this.getWrongNum()
  },
  onShow() {
    this.goodsBankQuestionNum();
    this.goodsBank();
  },
  methods: {
    /**
     * 继续做题
     */
    continueDo(recordId, examId, goodsId, chapterId = 0, moduleId = 0) {
      uni.navigateTo({
        url:
          "/pages2/bank/questionBankContinue?orderGoodsId=" +
          this.orderGoodsId +
          "&recordId=" +
          recordId +
          "&id=" +
          examId +
          "&goodsid=" +
          goodsId +
          "&chapterId=" +
          chapterId +
          "&moduleId=" +
          moduleId,
      });
    },
    /**
     * 重做
     * @param {Object} recordId
     * @param {Object} examId
     * @param {Object} goodsId
     * @param {Object} chapterExamId
     */
    async doRepeat(recordId, examId, goodsId, chapterExamId = 0, moduleId = 0) {
      let count = await this.examRecordCount(examId);
      let answerNum = await this.getExamDetail(examId);
      //超过答题次数
      if (answerNum > 0 && count >= answerNum) {
        this.$u.toast("该试卷只能答题" + answerNum + "次!");
        return;
      }

      uni.showModal({
        title: "提示",
        content: "是否清空答案重做？",
        cancelText: "查看上次",
        cancelColor: "",
        confirmText: "重做",
        confirmColor: "",
        success: (res) => {
          if (res.confirm) {
            uni.navigateTo({
              url:
                "/pages2/bank/questionBank?orderGoodsId=" +
                this.orderGoodsId +
                "&id=" +
                examId +
                "&goodsid=" +
                goodsId +
                "&moduleId=" +
                moduleId +
                "&chapterId=" +
                chapterExamId,
            });
          } else if (res.cancel) {
            uni.navigateTo({
              url:
                "/pages2/bank/questionBankAllExplain?id=" +
                examId +
                "&goodsid=" +
                goodsId +
                "&moduleId=" +
                moduleId +
                "&chapterId=" +
                chapterExamId +
                "&recordId=" +
                recordId +
                "&orderGoodsId=" +
                this.orderGoodsId,
            });
            console.log("查看上次答题");
          }
        },
      });
    },
    /**
     * 获取课程目录
     */
    goodsBank() {
      this.$api
        .goodsBank({
          orderGoodsId: this.orderGoodsId,
          goodsId: this.id,
        })
        .then((res) => {
          this.bankList = res.data.data;
          if (this.firstEnter) {
            this.showAllCharpter();
            this.firstEnter = false;
          }
        });
    },
    /**
     * 展示第一个章下的节内容
     */
    showAllCharpter() {
      for (let i = 0; i < this.bankList.length; i++) {
        if (this.bankList[i].type == 1) {
          //第一个是模块直接展开，再展开章下面的节
          this.$api
            .goodsChapterList({
              moduleExamId: this.bankList[i].majorId,
            })
            .then((res) => {
              this.$set(this.bankList[i], "showList", true);
              this.$set(this.bankList[i], "list", res.data.data);
              if (this.bankList[i].list.length) {
                this.changeItem(
                  i,
                  this.bankList[i].list[0].chapterExamId,
                  this.bankList[i].type,
                  0,
                  this.bankList[i].majorId
                );
              }
            });
          break;
        } else if (this.bankList[i].type == 2) {
          //第一个章展开下面的节
          this.changeItem(
            i,
            this.bankList[i].majorId,
            this.bankList[i].type,
            "",
            0
          );
          break;
        }
      }
    },
    getDetail() {
      this.$api.commonGoodsDetail(this.id).then((res) => {
        console.log(res);
        this.goodsData = res.data.data;
      });
    },

    /**
     * 去做题
     */
    async toDo(id, goodsId, moduleId = 0, chapterId = 0) {
      console.log(id, goodsId, moduleId, chapterId);
      let count = await this.examRecordCount(id);
      let answerNum = await this.getExamDetail(id);
      //超过答题次数

      if (answerNum > 0 && count >= answerNum) {
        this.$u.toast("该试卷只能答题" + answerNum + "次!");
        return;
      }

      uni.navigateTo({
        url:
          "/pages2/bank/questionBank?orderGoodsId=" +
          this.orderGoodsId +
          "&id=" +
          id +
          "&goodsid=" +
          goodsId +
          "&moduleId=" +
          moduleId +
          "&chapterId=" +
          chapterId +
          "",
      });
    },

    /**
     * 查询试卷历史做题次数
     */
    examRecordCount(examId) {
      return new Promise((resolve) => {
        this.$api
          .examRecordCount({
            examId: examId,
            orderGoodsId: this.orderGoodsId,
          })
          .then((res) => {
            resolve(res.data.data);
          });
      });
    },
    /**
     * @param {Object} exam_id
     * 获取试卷可以做的次数
     */
    getExamDetail(exam_id) {
      return new Promise((resolve) => {
        this.$api.getExamDetail(exam_id).then((res) => {
          resolve(res.data.data.answerNum);
        });
      });
    },
    /**
     * 获取用户商品统计数据
     */
    goodsBankQuestionNum() {
      this.$api.goodsBankQuestionNum(this.orderGoodsId).then((res) => {
        this.goodsCount = res.data.data;
      });
    },

    goodsBankList() {
      this.$api
        .goodsBankList({
          goodsId: this.id,
        })
        .then((res) => {
          console.log(res);
          this.bankList = res.data.data;
        });
    },
    getCollectNum() {
      this.$api
        .goodsCollectExamList({
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          let total = 0;
          res.data.rows.forEach((item) => {
            total += item.questionNum;
          });

          this.collectTotal = total;
        });
    },
    getWrongNum() {
      this.$api
        .wrongRecordList({
          orderGoodsId: this.orderGoodsId,
        })
        .then((res) => {
          let total = 0;
          res.data.rows.forEach((item) => {
            total += item.wrongQuestionNum;
          });

          this.wrongTotal = total;
        });
    },
    clickModule(id, index) {
      if (this.bankList[index].list) {
        this.$set(
          this.bankList[index],
          "showList",
          !this.bankList[index].showList
        );
        return;
      }

      this.$api
        .goodsChapterList({
          moduleExamId: id,
          orderGoodsId: this.orderGoodsId,
          goodsId: this.id,
        })
        .then((res) => {
          this.$set(this.bankList[index], "showList", true);
          this.$set(this.bankList[index], "list", res.data.data);
        });
    },
    changeItem(index1, id, type, index2, moduleExamId) {
      if (type == 1) {
        if (this.bankList[index1].list[index2].list) {
          this.$set(
            this.bankList[index1].list[index2],
            "showList",
            !this.bankList[index1].list[index2].showList
          );
          return;
        }

        this.$api
          .bankExamExamList({
            moduleExamId: moduleExamId,
            orderGoodsId: this.orderGoodsId,
            chapterExamId: id,
            goodsId: this.id,
          })
          .then((res) => {
            this.$set(this.bankList[index1].list[index2], "showList", true);
            this.$set(
              this.bankList[index1].list[index2],
              "list",
              res.data.data
            );
          });
      } else if (type == 2) {
        if (this.bankList[index1].list) {
          this.$set(
            this.bankList[index1],
            "showList",
            !this.bankList[index1].showList
          );
          return;
        }

        this.$api
          .bankExamExamList({
            moduleExamId: moduleExamId,
            orderGoodsId: this.orderGoodsId,
            chapterExamId: id,
            goodsId: this.id,
          })
          .then((res) => {
            this.$set(this.bankList[index1], "showList", true);
            this.$set(this.bankList[index1], "list", res.data.data);
          });
      }
    },
  },
};
</script>
<style>
page {
  background-color: #eaeef1;
}
</style>
<style lang="scss" scope>
.top {
  padding: 16rpx 16rpx 0;
  display: flex;
  justify-content: space-between;
  .left {
    width: 326rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: 0px 0px 16rpx 4rpx rgba(145, 156, 178, 0.1);
    border-radius: 16rpx;
    background: #fff;
    padding: 20rpx;

    .title {
      font-size: 24rpx;
      line-height: 24rpx;
      color: #333333;
    }

    .progress {
      margin-top: 10rpx;
      display: flex;

      .item-left {
        flex: 1;
        border-right: 1rpx solid #eeeeee;
        .desc {
          text {
            line-height: 24rpx;
            font-size: 24rpx;
            color: #999999;
          }
        }

        .percent {
          margin-top: 10rpx;
          line-height: 64rpx;
          font-size: 64rpx;
          font-weight: bold;
          color: #007aff;
        }

        .per {
          font-size: 30rpx;
          color: #007aff;
        }
      }

      .item-right {
        padding-left: 10rpx;
        flex: 1;

        text {
          line-height: 24rpx;
          font-size: 24rpx;
          color: #999999;
        }

        .orange {
          line-height: 24rpx;
          font-size: 24rpx;
          font-weight: bold;
          color: #ff9500;
        }

        .down {
          margin-top: 40rpx;
        }
      }
    }
  }

  .right {
    width: 180rpx;
    height: 180rpx;
    background: #ffffff;
    box-shadow: 0px 0px 16rpx 4rpx rgba(145, 156, 178, 0.1);
    background: #fff;
    padding: 20rpx;
    border-radius: 16rpx;

    .title {
      font-size: 24rpx;
      line-height: 24rpx;
      color: #333333;
    }

    .number {
      font-weight: bold;
      text-align: center;
      margin-top: 46rpx;
      font-size: 64rpx;
      line-height: 64rpx;
      color: #007aff;
    }
  }
}

.courseName {
  font-size: 30rpx;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.moduleItem {
  height: 80rpx;
  color: #333333;
  font-size: 32rpx;
  line-height: 80rpx;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
}

.icon_up {
  width: 32rpx;
  height: 32rpx;
}

.title-list {
  background: #eaeef1;
  padding: 16rpx 16rpx 124rpx;
  .content {
    .list {
      background: #fff;
      margin-bottom: 30rpx;
      overflow: hidden;
      border-radius: 16rpx;
      padding: 10rpx 16rpx;

      .module {
        font-size: 30rpx;
        color: #333333;

        .icon {
          margin-right: 10rpx;
        }
      }

      .section {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: bold;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 20rpx 0;
        display: flex;
        align-items: center;
      }

      .article {
        height: 80rpx;
        display: flex;
        align-items: center;

        font-size: 30rpx;
        color: #666666;
        border-bottom: 1rpx solid #eeeeee;
        display: flex;

        .flex_auto {
          flex: 1;
        }

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

        &.active {
          color: #007aff;

          .btn {
            width: 96rpx;
            height: 48rpx;
            line-height: 48rpx;
            text-align: center;
            color: #fff;
            font-size: 30rpx;
            border-radius: 24rpx;
            background: #007aff;
            margin-left: 36rpx;
            border-radius: 24rpx;

            &.disabled {
              opacity: 0.6;
            }
          }
        }
      }
    }
  }
}
</style>